Styles follow the project's primary styling approach
Theme tokens are used (no hardcoded colors/spacing where tokens exist)
Components have accessible focus states
Color contrast meets accessibility guidelines
Responsive layout works for common breakpoints
Keyboard navigation is visually clear
Boundaries
MUST NOT mix styling approaches within the same component
MUST NOT hardcode values when theme tokens are available
MUST NOT skip focus state styling
MUST NOT ignore color contrast requirements
SHOULD NOT duplicate style definitions (use shared utilities/tokens)
SHOULD NOT use magic numbers for spacing/sizing
Included assets
Templates: ./templates/ includes a style object pattern and token checklist.
Examples: ./examples/ includes a consistent component style pattern.
1---2name: style-frontend-ui3description: Style Frontend UI4---56# Style Frontend UI78## Purpose9Create consistent UI styling that is easy to maintain and scales with the codebase.1011## When to use12Use this skill when you are:13- Styling new components or pages14- Refactoring inconsistent styles15- Introducing theme tokens (spacing, colors, typography)16- Standardizing layout utilities and responsive patterns1718## Inputs19- UI kit or styling solution used by the codebase (CSS modules, styled components, theme system, etc.)20- Design requirements (spacing scale, typography, breakpoints)21- Accessibility constraints (contrast, focus states)2223## Outputs24- A styling approach decision for the component/feature25- Theme-token usage (where supported)26- Reusable style primitives (layout components, utility classes)2728## Rules29- Styling MUST follow a single primary approach for consistency.30- Theme tokens SHOULD be used instead of hardcoded values where available.31- Components MUST have accessible focus states and sufficient contrast.32- Responsive behavior SHOULD be explicit and testable.3334## Steps351. Choose the styling method consistent with the codebase.362. Identify reusable style tokens (spacing, typography).373. Implement component styles with:38 - predictable naming39 - minimal duplication404. Verify:41 - keyboard navigation and focus42 - responsive layout for common breakpoints4344## Verification4546- [ ] Styles follow the project's primary styling approach47- [ ] Theme tokens are used (no hardcoded colors/spacing where tokens exist)48- [ ] Components have accessible focus states49- [ ] Color contrast meets accessibility guidelines50- [ ] Responsive layout works for common breakpoints51- [ ] Keyboard navigation is visually clear5253## Boundaries5455- MUST NOT mix styling approaches within the same component56- MUST NOT hardcode values when theme tokens are available57- MUST NOT skip focus state styling58- MUST NOT ignore color contrast requirements59- SHOULD NOT duplicate style definitions (use shared utilities/tokens)60- SHOULD NOT use magic numbers for spacing/sizing6162## Included assets63- Templates: `./templates/` includes a style object pattern and token checklist.64- Examples: `./examples/` includes a consistent component style pattern.
Run npx skillmds@latest add willyu1007/style-frontend-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Style Frontend UI It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
willyu1007 (@willyu1007) published this skill. Their other Agent Skills are listed on their SkillMD profile.
willyu1007