# styling-guide

> Styling patterns (design tokens, theming, and consistent component styling). Keywords: css, styling, design tokens, theming, css modules, tailwind.

- Author: willyu1007
- Repository: willyu1007/AI_First_Template
- Version: 20251224182030
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/willyu1007/AI_First_Template
- Web: https://mule.run/skillshub/@@willyu1007/AI_First_Template~styling-guide:20251224182030

---

---
name: styling-guide
description: "Styling patterns (design tokens, theming, and consistent component styling). Keywords: css, styling, design tokens, theming, css modules, tailwind."
---

# 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.