UI Styling
Work with the project's installed framework and component library. Do not replace the stack or add dependencies merely because examples use a particular library.
Workflow
- Inspect the existing stack, components, tokens, CSS strategy, breakpoints, and conventions.
- Identify the smallest reusable component boundary.
- Define semantic tokens and variants before adding one-off utilities.
- Implement mobile-first layout and all interaction states.
- Verify keyboard, screen-reader, contrast, zoom, touch, reduced-motion, and dark-mode behavior.
- Inspect rendered output at representative widths when browser or visual tools are available.
- Run the project's formatter, type checks, tests, and accessibility checks.
Component rules
- Preserve native semantics and labels.
- Keep focus visible and logically ordered.
- Use one source of truth for variants.
- Cover default, hover, focus-visible, active, disabled, loading, selected, error, and success states.
- Keep touch targets and spacing usable on mobile.
- Avoid arbitrary z-index, spacing, color, shadow, and radius values when tokens exist.
- Prefer content-driven layouts over fixed heights.
References
Read only what the task needs:
- references/shadcn-components.md
- references/shadcn-theming.md
- references/shadcn-accessibility.md
- references/tailwind-utilities.md
- references/tailwind-responsive.md
- references/tailwind-customization.md
- references/canvas-design-system.md
Bundled helpers
Resolve skill-dir to this folder before running scripts. Preview generated configuration and never overwrite existing project config without reviewing the diff.
python "<skill-dir>/scripts/shadcn_add.py" --help
python "<skill-dir>/scripts/tailwind_config_gen.py" --help
Output contract
Report the components and tokens changed, responsive/state coverage, accessibility checks, tests run, and remaining visual or framework constraints.
Guardrails
- Do not install components or packages without checking project policy and user intent.
- Do not copy examples that conflict with the installed framework version.
- Do not hide accessibility regressions behind visual polish.
- Do not hardcode an AI provider, model, or host-specific skill path.
1---2name: ui-styling-23description: Implement and refine accessible, responsive interfaces using an existing component system or utility CSS, with strong state coverage, semantic tokens, dark.4---56# UI Styling78Work with the project's installed framework and component library. Do not replace the stack or add dependencies merely because examples use a particular library.910## Workflow11121. Inspect the existing stack, components, tokens, CSS strategy, breakpoints, and conventions.132. Identify the smallest reusable component boundary.143. Define semantic tokens and variants before adding one-off utilities.154. Implement mobile-first layout and all interaction states.165. Verify keyboard, screen-reader, contrast, zoom, touch, reduced-motion, and dark-mode behavior.176. Inspect rendered output at representative widths when browser or visual tools are available.187. Run the project's formatter, type checks, tests, and accessibility checks.1920## Component rules2122- Preserve native semantics and labels.23- Keep focus visible and logically ordered.24- Use one source of truth for variants.25- Cover default, hover, focus-visible, active, disabled, loading, selected, error, and success states.26- Keep touch targets and spacing usable on mobile.27- Avoid arbitrary z-index, spacing, color, shadow, and radius values when tokens exist.28- Prefer content-driven layouts over fixed heights.2930## References3132Read only what the task needs:3334- references/shadcn-components.md35- references/shadcn-theming.md36- references/shadcn-accessibility.md37- references/tailwind-utilities.md38- references/tailwind-responsive.md39- references/tailwind-customization.md40- references/canvas-design-system.md4142## Bundled helpers4344Resolve skill-dir to this folder before running scripts. Preview generated configuration and never overwrite existing project config without reviewing the diff.4546~~~text47python "<skill-dir>/scripts/shadcn_add.py" --help48python "<skill-dir>/scripts/tailwind_config_gen.py" --help49~~~5051## Output contract5253Report the components and tokens changed, responsive/state coverage, accessibility checks, tests run, and remaining visual or framework constraints.5455## Guardrails5657- Do not install components or packages without checking project policy and user intent.58- Do not copy examples that conflict with the installed framework version.59- Do not hide accessibility regressions behind visual polish.60- Do not hardcode an AI provider, model, or host-specific skill path.
yigityildiz0