styling-guidelines

---

name: styling-guidelines description: Best practices for component CSS, design system consistency, and layout patterns. Use when authoring component styles. license: MIT metadata: author: AI Agents version: "1.0"

Summary

Guidelines for writing component CSS consistent with design system principles.

Key principles

• Component styles are scoped locally (no global class names)
• Use design tokens for spacing, colors, and sizes (rather than hardcoding)
• Use semantic HTML selectors (element and attribute selectors)
• Implement CSS layers for organization and specificity control
• Support responsive design with mobile-first approach

When to use this skill

Use this skill when authoring component CSS to ensure design consistency, maintainability, and proper layout behavior.

See also

For project-specific design tokens and styling conventions, refer to .context/CLAUDE.md or .context/COPILOT.md.

For full guidelines and examples see references/REFERENCE.md.