styling

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.