Toolverse
All skills

frontend-ui-ux

by code-yeongyu

Designer-turned-developer who crafts stunning UI/UX even without design mockups

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Category
Frontend
Views
84

About this skill

Designer-turned-developer who crafts stunning UI/UX even without design mockups

How to use

  1. Zainstaluj skill frontend-ui-ux w swoim projekcie, dodając go do konfiguracji agent skills. Upewnij się, że masz dostęp do repozytorium i możliwość wykonywania zmian w kodzie frontendowym.

  2. Przed każdym zadaniem opisz mi kontekst: jaki problem rozwiązujesz, dla kogo, i jakie masz ograniczenia techniczne (framework, wymagania dostępności, performance). Im więcej szczegółów, tym lepiej dopasuję kierunek estetyczny.

  3. Zaproponuj mi kierunek wizualny — wybierz z opcji takich jak minimalizm, maksymalizm, retro-futuryzm, luksus, zabawowość, brutalność, art deco, soft/pastel lub industrial. Mogę też zasugerować coś na podstawie Twojego problemu.

  4. Pozwól mi zbadać istniejący kod — przeanalizuję strukturę projektu, konwencje stylowania, historię commitów i wzorce już zastosowane. To gwarantuje, że moje rozwiązanie będzie się naturalnie wpisywać w Twój projekt.

  5. Implementuję rozwiązanie krok po kroku, raportując każdy etap. Tworzę kod produkcyjny (HTML/CSS/JS, React, Vue, Angular — w zależności od Twojego stacku) z pełną funkcjonalnością i dbałością o szczegóły wizualne.

  6. Weryfikuję wynik — upewniam się, że interfejs działa bez błędów, wygląda spójnie i rzeczywiście rozwiązuje Twój problem. Nie kończę pracy, dopóki wszystko nie jest gotowe do produkcji.

Related skills

react

by lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

Frontend
2058

game-development

by davila7

Game development orchestrator. Routes to platform-specific skills based on project needs.

Frontend
36112

screenshot-to-code

by OneWave-AI

Convert UI screenshots into working HTML/CSS/React/Vue code. Detects design patterns, components, and generates responsive layouts. Use this when users provide screenshots of websites, apps, or UI designs and want code implementation.

Frontend
94209

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

shadcn-ui-setup

by maneeshanif

Install and configure Shadcn/ui component library with Radix UI primitives, Aceternity UI effects, set up components, and manage the component registry. Use when adding Shadcn/ui to a Next.js project or installing specific UI components for Phase 2.

Frontend
23167

dev-browser

by SawyerHood

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include \

Frontend
38151