frontend-prompt-generator
Generuj ustrukturyzowane prompty dla zadań frontend'u w React/Next.js według ustalonych wzorców.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do automatycznego tworzenia spójnych, dobrze sformatowanych promptów dla prac frontendowych. Obsługuje cztery główne typy: wireframe'y HTML z dokładnymi wymiarami, implementację projektów Figma, wiązanie danych z API GraphQL oraz routing i nawigację. Każdy prompt jest generowany z uwzględnieniem wymagań TDD, ścieżek plików i reguł Cursor. Idealny dla zespołów pracujących nad komponentami React/Next.js, które potrzebują konsystentnych, powtarzalnych instrukcji dla AI.
Jak używać
Zainstaluj skill w swoim środowisku Claude/Cursor, dodając go do konfiguracji umiejętności agenta.
Opisz zadanie frontendowe, które chcesz zautomatyzować — na przykład "Chcę wireframe dla komponentu boards" lub "Implementuj design z Figmy dla profilu użytkownika". Skill automatycznie rozpozna typ zadania (wireframe, UI implementation, data binding lub routing).
Podaj nazwę komponentu, którą chcesz pracować. Skill sprawdzi, czy komponent już istnieje w
src/components/[nazwa]/, i będzie używać istniejące ścieżki lub zaproponuje nową strukturę.Dostarcz szczegóły specyficzne dla wybranego typu: dla wireframe'u podaj wymiary i strukturę flexbox, dla UI implementation załącz projekt Figmy, dla data binding opisz schemat GraphQL, dla routing'u wymień strony i linki.
Skill wygeneruje sformatowany prompt zawierający wszystkie wymagane informacje — reguły Cursor, ścieżki plików, podejście TDD — gotowy do użycia z asystentem AI.
Skopiuj wygenerowany prompt i użyj go w swoim workflow'u development'owym, aby uzyskać spójne, powtarzalne wyniki dla podobnych zadań.