# Styling > 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. Use when this capability is needed. - Skill: `tomevault-io/styling-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/styling-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/styling-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/styling-2 --- # 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`. --- > Source: [valkey-io/valkey-admin](https://github.com/valkey-io/valkey-admin) — distributed by [TomeVault](https://tomevault.io).