Figma token scss style dictionary v3

Skill kjuhwa/skills-hub/skills/frontend/figma-token-scss-style-dictionary-v3

Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.

Install

npx -y skills add kjuhwa/skills-hub --skill figma-token-scss-style-dictionary-v3

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Figma Tokens Studio JSON → split files → Style Dictionary v3 → SCSS variables, typography classes, and composition classes

SKILL.md

1.7 KB, as published. Nobody here has run it

Figma Token → SCSS (Style Dictionary v3)

Build pipeline that converts Figma Tokens Studio export into SCSS variables and utility classes.

When to use

Project uses SCSS-based design system (e.g. with Ant Design overrides)
Tokens are managed in Figma Tokens Studio and exported as a single JSON
Need base/theme/semantic/component token layers with @import auto-wiring

Pipeline

Split — split-files.js reads monolithic tokens.json and fans out to tokens/{group}/{name}.json
Build — build.js runs Style Dictionary v3 with custom transforms and formats:
- Glob source files by layer (base, theme, semantic, component)
- Register transforms: hslhsl, typography/shorthand, border/shorthand, shadow/shorthand, size/px, size/letterspacing, type/fontWeight, color/hexrgba, resolveMath
- Register formats: css/variables (SCSS vars), css/typographyClasses (.st-* classes), css/compositionClasses (composition → CSS properties)
- Auto-append @import statements to layer index files (_base.scss, _themes.scss, _extend.scss, _semantic.scss)
Output — SCSS files at packages/sirius/src/styles/tokens/

Key patterns

See content.md for full implementation reference.