Shain Design System Skill

Shain Design System Skill

Claude skill for working with a token-based design system. Covers Figma variables, component architecture, semantic tokens, dark mode, accessibility, and design-to-code handoff.

Used as supplementary material for the **AI for Designers** praktikum by Dmytro Legkov.

What's inside

.
├── SKILL.md                              Core skill definition
└── references/
    ├── figma-best-practices.md           Figma structure, components, export
    └── token-improvements.md             How to evolve the token system over time

How to install

Option 1 — claude.ai (recommended for designers)

1. Download shain-dls.zip from the latest release
2. Open claude.ai → Settings → Capabilities → Skills
3. Click + Create skill and upload the zip
4. Enable the skill — done

Option 2 — Claude Code / Cowork (for CLI users)

Clone the repo into your skills directory:

cd ~/.claude/skills
git clone https://github.com/Dishain/Shain-Design-System-Skill.git shain-dls

Claude will auto-discover the skill on next launch. Update later with `git pull`.

Using the skill

Claude triggers this skill automatically when you mention design systems, Figma variables, component specs, token naming, dark mode, or related topics. You can also invoke it explicitly:

skill: shain-dls

What the skill covers

• Three-tier token hierarchy (Primitive → Semantic → Component-specific)
• Naming conventions for variables, layers, and components
• Light / Dark mode infrastructure
• BEM-style CSS classes (shain-[component])
• Theme config pattern for variant styling
• Accessibility baseline (WCAG AA)
• Figma best practices (auto layout, variants, properties, export)
• Token system evolution (adding modes, migrating, deprecating)

License

MIT — see [LICENSE](LICENSE).