Modified by C1TRuSovo831 on 2026-09-14: condensed and reorganized guidance into task-specific references; original license and operational constraints retained.
UI Styling
Use the existing framework, components, and design tokens. Choose the relevant component/styling reference or canvas workflow; a small edit does not require reinitializing the stack.
Reference routing
| Task |
Read |
| Add or compose forms, navigation, overlays, tables, or feedback components |
shadcn-components.md |
| CSS variables, component variants, theme toggle, or dark mode |
shadcn-theming.md |
| Keyboard, focus, screen reader announcements, or form accessibility |
shadcn-accessibility.md |
| Layout, spacing, type, color, borders, or utility syntax |
tailwind-utilities.md |
| Breakpoints, adaptive layout, or container queries |
tailwind-responsive.md |
| Theme tokens, plugins, custom utilities, or variants |
tailwind-customization.md |
| Canvas poster, brand composition, or visual design system |
canvas-design-system.md |
| Initial setup or concrete form/layout example |
setup-and-examples.md |
Implementation guidance
- Compose accessible primitives; preserve semantic HTML, keyboard behavior, and visible focus. Radix defaults still require correct application labels and focus management.
- Use Tailwind utilities and extract components where repetition warrants it. Preserve TypeScript types in typed projects.
- Apply consistent spacing, typography, and semantic colors. Keep all themed elements consistent across supported light/dark modes.
- Build responsive layouts from the mobile baseline and preserve visual hierarchy through spacing and composition.
- Keep Tailwind class names statically detectable so CSS generation retains the classes used at runtime.
Utility scripts
Resolve these paths from this skill's directory. Inspect the existing setup before generating configuration.
python scripts/shadcn_add.py button card dialog
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
shadcn_add.py installs selected components with dependencies; tailwind_config_gen.py generates tailwind.config.js. Use only the helper needed for the task, with the project's version and configuration format.
Upstream references
1---2name: ui-styling3description: Implement accessible UI with shadcn/ui and Tailwind, including components, responsive layouts, themes, and dark mode. Also supports canvas-based posters and visual compositions.4license: MIT5---67> Modified by C1TRuSovo831 on 2026-09-14: condensed and reorganized guidance into task-specific references; original license and operational constraints retained.89# UI Styling1011Use the existing framework, components, and design tokens. Choose the relevant component/styling reference or canvas workflow; a small edit does not require reinitializing the stack.1213## Reference routing1415| Task | Read |16|------|------|17| Add or compose forms, navigation, overlays, tables, or feedback components | [shadcn-components.md](references/shadcn-components.md) |18| CSS variables, component variants, theme toggle, or dark mode | [shadcn-theming.md](references/shadcn-theming.md) |19| Keyboard, focus, screen reader announcements, or form accessibility | [shadcn-accessibility.md](references/shadcn-accessibility.md) |20| Layout, spacing, type, color, borders, or utility syntax | [tailwind-utilities.md](references/tailwind-utilities.md) |21| Breakpoints, adaptive layout, or container queries | [tailwind-responsive.md](references/tailwind-responsive.md) |22| Theme tokens, plugins, custom utilities, or variants | [tailwind-customization.md](references/tailwind-customization.md) |23| Canvas poster, brand composition, or visual design system | [canvas-design-system.md](references/canvas-design-system.md) |24| Initial setup or concrete form/layout example | [setup-and-examples.md](references/setup-and-examples.md) |2526## Implementation guidance2728- Compose accessible primitives; preserve semantic HTML, keyboard behavior, and visible focus. Radix defaults still require correct application labels and focus management.29- Use Tailwind utilities and extract components where repetition warrants it. Preserve TypeScript types in typed projects.30- Apply consistent spacing, typography, and semantic colors. Keep all themed elements consistent across supported light/dark modes.31- Build responsive layouts from the mobile baseline and preserve visual hierarchy through spacing and composition.32- Keep Tailwind class names statically detectable so CSS generation retains the classes used at runtime.3334## Utility scripts3536Resolve these paths from this skill's directory. Inspect the existing setup before generating configuration.3738```bash39python scripts/shadcn_add.py button card dialog40python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter41```4243`shadcn_add.py` installs selected components with dependencies; `tailwind_config_gen.py` generates `tailwind.config.js`. Use only the helper needed for the task, with the project's version and configuration format.4445## Upstream references4647- shadcn/ui: https://ui.shadcn.com/llms.txt48- Tailwind CSS: https://tailwindcss.com/docs49- Radix UI: https://radix-ui.com50- Tailwind UI: https://tailwindui.com51- Headless UI: https://headlessui.com52- v0: https://v0.dev
C1TRuSovo831