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.