ui-design-system

Before generating any UI code, check the project for existing tokens:

If no design tokens exist, generate a starter set and ask the user to confirm before proceeding (see Edge Cases).

Define colors as CSS custom properties consumed by Tailwind. Never use hardcoded hex/rgb values in components.

Genera componenti dell'interfaccia utente, layout e token di progettazione coerenti seguendo un sistema di progettazione. Applica gli standard di spaziatura, colore, tipografia e accessibilità nei progetti React/TypeScript. Da utilizzare durante la creazione di nuovi componenti dell'interfaccia utente, la creazione di layout di pagina, la scelta di colori o tipografia, l'impostazione di token di progettazione o la revisione del codice dell'interfaccia utente per la coerenza del design. Copre la griglia di spaziatura di 8 punti, l'utilizzo del token CSS Tailwind, le primitive shadcn/ui, la conformità WCAG 2.1 AA, i punti di interruzione reattivi, la struttura HTML semantica e le interfacce dei componenti TypeScript. NON copre l'implementazione del backend (utilizzare python-backend-expert), il test (utilizzare react-testing-patterns) o la distribuzione (utilizzare deploy-pipeline). Fonte: hieutrtr/ai1-skills.