Toolverse
All skills

design-context

by WellApp-ai

Refresh UI/UX context from design system, Storybook, and codebase

Installation

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

Installation

Quick info

Category
UX / Design
Views
6

About this skill

Refresh UI/UX context from design system, Storybook, and codebase

How to use

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

Related skills

cold-email

by alirezarezvani

When the user wants to write, improve, or build a sequence of B2B cold outreach emails to prospects who haven't asked to hear from them. Use when the user mentions 'cold email,' 'cold outreach,' 'prospecting emails,' 'SDR emails,' 'sales emails,' 'first touch email,' 'follow-up

UX / Design
2359

error-handling-patterns

by wshobson

Master error handling patterns across languages including exceptions, Result types, error propagation, and graceful degradation to build resilient applications. Use when implementing error handling, designing APIs, or improving application reliability.

UX / Design
22145

motion-graphics

by rohitg00

Kinetic typography, logo animations, and stylized motion design skill.\n\n**Triggers when:**\n- User wants text animations or kinetic typography\n- Request involves logo reveals or title sequences\n- Content focuses on visual impact over education\n- User mentions \

UX / Design
2126

sound-engineer

by erichowens

Expert audio engineer specializing in spatial audio, procedural sound design, interactive audio systems, and real-time DSP

UX / Design
14102

figma-integration

by duongdev

Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with

UX / Design
18121

ui-ux-designer

by sickn33

Create interface designs, wireframes, and design systems. Masters user research, accessibility standards, and modern design tools. Specializes in design tokens, component libraries, and inclusive design. Use PROACTIVELY for design systems, user flows, or interface optimization.

UX / Design
1949