Claude-skill-registry conventions-css

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

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/conventions-css" ~/.claude/skills/majiayu000-claude-skill-registry-conventions-css && rm -rf "$T"

manifest: skills/data/conventions-css/SKILL.md

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.

.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

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