D
design-context
Synchronizuj decyzje UI z istniejącymi wzorcami systemu designu i Storybooka
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do zarządzania kontekstem designu, który pomaga Ci tworzyć interfejsy zgodne z istniejącymi wzorcami. Przed zaprezentowaniem wireframe'ów lub wdrożeniem zmian UI przeanalizuj dokumentację systemu designu, komponenty w Storybooku i podobne rozwiązania w kodzie. Narzędzie prowadzi Cię przez cztery fazy: sprawdzenie tokenów i komponentów w dokumentacji, identyfikację gotowych komponentów w Storybooku, wyszukanie podobnych wzorców w bazie kodu oraz zapytanie dokumentacji bibliotek (Radix UI, TanStack). Dzięki temu unikasz duplikacji i utrzymujesz spójność wizualną projektu.
Jak używać
- Zainstaluj skill design-context w swoim środowisku pracy (Cursor, Copilot lub innym agencie wspierającym MCP). 2. Przed rozpoczęciem pracy nad wireframe'ami lub zmianami UI uruchom skill w trybie DIVERGE, aby odświeżyć kontekst designu. 3. W fazie pierwszej przeczytaj dokumentację systemu designu — zwróć uwagę na design tokeny (np. h-13, px-4), warianty komponentów (Button, DataTable, Dialog) oraz konwencje spacing (p-4 dla kart, gap-6 dla sekcji). 4. W fazie drugiej przeszukaj Storybook w ścieżkach /src/stories/ i /features//components/.stories.tsx, aby znaleźć komponenty pasujące do Twoich potrzeb i sprawdzić ich dostępne warianty oraz stany (loading, error, empty). 5. W fazie trzeciej użyj semantic search, aby znaleźć w kodzie podobne już zaimplementowane wzorce, reusable hooks i utility'e. 6. W fazie czwartej, jeśli napotkasz nieznaną bibliotekę (Radix UI, TanStack Query, TanStack Table), zapytaj dokumentację za pośrednictwem Context7 MCP, aby potwierdzić dostępne opcje i best practices.