This skill provides styling guidelines that work across common approaches (CSS modules, CSS-in-JS, utility classes, design systems).
1. Principles
Prefer a consistent approach across the app.
Use design tokens (spacing, colors, typography) to avoid "magic numbers".
Keep component styling colocated unless it becomes large.
2. Colocation rule of thumb
Small styles (< ~100 lines): inline or colocated in the component file
Larger styles: separate *.styles.ts / *.module.css / similar (depending on stack)
3. Accessibility considerations
Ensure sufficient color contrast.
Preserve focus outlines (or provide accessible alternatives).
Avoid conveying meaning by color alone.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-styling-guide3description: Styling Guide4---56# Styling Guide78This skill provides styling guidelines that work across common approaches (CSS modules, CSS-in-JS, utility classes, design systems).910---1112## 1. Principles1314- Prefer a consistent approach across the app.15- Use design tokens (spacing, colors, typography) to avoid "magic numbers".16- Keep component styling colocated unless it becomes large.1718---1920## 2. Colocation rule of thumb2122- Small styles (< ~100 lines): inline or colocated in the component file23- Larger styles: separate `*.styles.ts` / `*.module.css` / similar (depending on stack)2425---2627## 3. Accessibility considerations2829- Ensure sufficient color contrast.30- Preserve focus outlines (or provide accessible alternatives).31- Avoid conveying meaning by color alone.3233---34> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.35<!-- tomevault:4.0:skill_md:2026-04-15 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-styling-guide 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.
Styling Guide It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. 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.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io