Claude-skill-registry design-system-token-architecture
Architect scalable design token propagation using React Context and CSS-in-JS/Variables.
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/design-system-token-architecture" ~/.claude/skills/majiayu000-claude-skill-registry-design-system-token-architecture && rm -rf "$T"
manifest:
skills/data/design-system-token-architecture/SKILL.mdsource content
Design System Token Architecture
Summary
Architect scalable design token propagation using React Context and CSS-in-JS/Variables.
Key Capabilities
- Define semantic token layers (Primitive vs. Component).
- Implement dynamic theming with runtime token switching.
- Optimization re-renders when swapping global themes.
PhD-Level Challenges
- Manage type-safety for deeply nested token schemas.
- Analyze the performance cost of CSS generation at runtime.
- Synchronize token updates across micro-frontends.
Acceptance Criteria
- Demonstrate a multi-theme switching capability.
- Provide a token schema definition file.
- Benchmark theme switch render cost.