| name | styling |
| description | Guidance for frontend styling. Use when changing Tailwind classes, CSS tokens, light or dark themes, semantic color usage, accessibility contrast, layout wrappers, or visual UI states. |
Styling Skill
Use this skill when changing Tailwind classes, CSS tokens, themes, layout, or visual UI states.
Class Composition
- Use
cn for conditional class composition.
- Keep layout classes close to the element that owns the layout behavior.
- Avoid unnecessary nested wrappers created only to attach styling.
Color Tokens
- Do not introduce raw Tailwind color utilities such as
text-gray-*, bg-blue-*, or border-red-*.
- Use semantic color tokens from
apps/frontend/src/css/index.css, such as background, foreground, muted, muted-foreground, primary, secondary, accent, destructive, border, input, card, and sidebar/chart tokens.
- If a needed semantic color is missing, propose the smallest new token first.
- Add light and dark theme values together when adding a token.
- Account for both light and dark themes in every new UI state.
Accessibility
- Ensure foreground/background color pairs have sufficient WCAG contrast.
- Check muted text, badges, destructive states, focus states, disabled states, chart labels, and hover/selected states.
- Keep focus indicators visible in both light and dark themes.
Layout
- Prefer semantic elements for meaningful structure and
div for layout, containment, flex/grid, spacing, overflow, or styling when no semantic element fits.
- Avoid card-inside-card and wrapper-heavy layouts.
- Keep repeated styled concepts as named components in
apps/frontend/src/components.
