frontend-prompt-generator

Generate structured prompts for frontend development tasks following established patterns. Use when the user requests prompts for wireframes, UI implementation, data binding, or routing functionality in React/Next.js projects with specific formatting requirements (Cursor rules, file paths, test-driven development).

1. Zainstaluj skill w swoim środowisku Claude/Cursor, dodając go do konfiguracji umiejętności agenta.

2. 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).

3. 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ę.

4. 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.

5. 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.

6. Skopiuj wygenerowany prompt i użyj go w swoim workflow'u development'owym, aby uzyskać spójne, powtarzalne wyniki dla podobnych zadań.