quick-mockups

Create multiple UI design mockups in parallel. Use when asked to create mockups, wireframes, or design variations for a feature. Creates HTML files using Mantine v7 + Tailwind following Civitai's design system.

1. Zainstaluj skill quick-mockups w swoim Claude'ie, dodając go do konfiguracji agenta (wymaga dostępu do narzędzi: Read, Write, Glob, Task).

2. Gdy chcesz stworzyć mockupy dla nowej funkcji, przygotuj briefing zawierający: nazwę funkcji (np. "Crucible Discovery"), wymagania (jakie elementy muszą się znaleźć), oraz opis wariantu (co odróżnia ten mockup od innych – np. "layout siatki z dużą kartą wyróżnioną").

3. Uruchom skill i podaj polecenie w stylu: "Stwórz mockupy dla strony [nazwa]. Wymagania: [lista]. Warianty: grid, lista, masonry, karty". Skill automatycznie utworzy folder docs/working/mockups/[nazwa-funkcji]/ i uruchomi 3–5 równoległych agentów projektowych.

4. Każdy agent pracuje niezależnie nad swoją wersją – różnymi podejściami do layoutu, hierarchii wizualnej i wzorców interakcji. Wszystkie pliki zapisywane są jako [v1-nazwa].html, [v2-nazwa].html itd.

5. Po zakończeniu skill wylistuje wszystkie utworzone pliki i podsumuje każdy wariant – co wyróżnia v1, v2, v3. Przejrzyj wersje w przeglądarce i wybierz kierunek, który Ci się podoba.

6. Jeśli potrzebujesz zmian, możesz uruchomić skill ponownie z uściśloną specyfikacją – np. "Stwórz wariant z bocznym panelem filtrów" – a nowe mockupy będą dodane do tego samego folderu.