# Willyu1007 AI First Template Styling Guide > Styling Guide - Skill: `tomevault-io/willyu1007-ai-first-template-styling-guide` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-styling-guide` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/willyu1007-ai-first-template-styling-guide/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/willyu1007-ai-first-template-styling-guide --- # Styling Guide 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](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.