# Conventions CSS

> Apply when writing styles. Ensures consistency with design system and project patterns.

- Skill: `majiayu000/conventions-css` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/conventions-css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/conventions-css/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/conventions-css

---


# CSS Conventions

## No Utility Frameworks

No Tailwind, no utility classes, no CSS-in-JS. Custom CSS only.

## Scoping Rules

- **Atoms:** Unscoped `<style>` — allows design token inheritance
- **Everything else:** `<style scoped>`

## Design Tokens

CSS custom properties exclusively. Never hardcode colors, spacing, typography.

```css
.base-input {
  padding: var(--input-padding);
  border-color: var(--input-border-color);
  font-family: var(--input-font-family);
}
```

## Color System

- Semantic: `--color-primary-{100-400}`, `--color-error-{100-400}`
- Named: `--color-blue-{100-400}`, `--color-amber-{100-400}`
- Contextual: `--text-primary`, `--input-focus-border`

## Native CSS Nesting

```css
.base-input {
  &:focus {
    border-color: var(--input-focus-border);
  }
  &:disabled {
    opacity: var(--input-disabled-opacity);
  }
}
```

## Inline Styles

Only for truly dynamic values (calculated at runtime). Otherwise use CSS custom properties.