Shain Dls

Token-based design system skill for Figma + code handoff. Use whenever working with Figma components, design tokens, color variables, token migration, component creation, design-to-code handoff, or DS audits. Trigger on: design system, DS, DLS, tokens, figma variables, component spec, token naming, token hierarchy, which color to use, variant properties, theme config, dark mode. Even for "which color should I use" or "create a component" — use this skill.

8 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Dishain/Shain-Design-System-Skill --skill shain-dls

Manual install

git clone --depth 1 https://github.com/Dishain/Shain-Design-System-Skill.git /tmp/Shain-Design-System-Skill
mkdir -p ~/.claude/skills
cp -r /tmp/Shain-Design-System-Skill/. ~/.claude/skills/shain-dls

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Shain Design Language System (DLS)

A token-based design system for product UI work. Components use semantic tokens only —
no hardcoded colors, spacing, or typography. Figma is the source of truth; code is
generated or guided by Figma exports.

For the full Figma best practices reference, read `references/figma-best-practices.md`.
For guidance on evolving the token system, read `references/token-improvements.md`.

---

## 1. Architecture

### Three-tier token hierarchy

```
Primitive → Semantic → Component-specific (optional)

colors/blue/500          → #0097DB
action/primary/default   → {colors/blue/500}
button/bg/primary        → {action/primary/default}
```

- **Primitive** — raw palette values (`colors/blue/500`, `spacing/4`, `radius/md`).
  Never referenced directly from components.
- **Semantic** — purpose-named aliases (`action/primary/default`, `text/primary`,
  `bg/surface`). Components reference these.
- **Component-specific** — optional per-component tokens when a component needs its
  own tuning knob (`button/bg/primary`). Use sparingly.

### Sync flow

```
Figma Variables → figma-tokens.json → tokens/build.ts → tokens/dist/
                                                         ├── tokens.css
                                                         └── tokens.ts
```

### Project structure

Read the full skill on GitHub

Details

Skill name: shain-dls
Repository: Dishain/Shain-Design-System-Skill
License: MIT
Repo updated: 3 May 2026

FAQ

What does the Shain Dls skill do?

How do I install the Shain Dls skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Dishain/Shain-Design-System-Skill --skill shain-dls. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Shain Dls popular?

It lives in Dishain/Shain-Design-System-Skill, which has 8 GitHub stars and 0 forks.

Related skills

Wcss Slurm

dawidlinek/slurm-wcss-skill

Use this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte

Frontend & Design

Linkedin Hdr Logo

Adamodigi/linkedin-hdr-logo

Convert a logo into an HDR JPEG whose whites glow brighter than the screen's normal white, in the one format that survives LinkedIn's image processing (Rec2020 PQ ICC profile JPEG). Use this skill whenever the user wants a logo's white to look extra bright, glowing, or HDR on LinkedIn or on social profiles, mentions the "LinkedIn HDR logo" effect, says their HDR upload loses its glow after LinkedIn processes it, or asks to make a logo "pop", "glow", or "defy screen brightness". Also use it when the user gives a logo file and asks to boost, expose, or brighten its whites for LinkedIn.

Frontend & Design

Webcloner

veyralabsgroup/webcloner

Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.

Frontend & Design

Human Experience

andrew-shwetzer/human-experience

Vision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.

Frontend & Design

Xiaoer Artstudio Design

Jane-xiaoer/xiaoer-artstudio-design

Design methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Clau

Frontend & Design

Compliance Auditor

FuzulsFriend/compliance-auditor

Use this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.