Agent skill · design visual · nextlevelbuilder
design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
Why this skill is useful
Adds multiple executable scripts for generating and validating design tokens and presentations that extend the AI's capabilities.
What it needs
Requires node, python installed locally. About 4k tokens when loaded. Last updated 2026-08-06. 114,229 stars on the source repository.
What this skill does
Design System Token architecture, component specifications, systematic design, slide generation. When to Use Design token creation Component state definitions CSS variable systems Spacing/typography scales Design-to-code handoff Tailwind theme configuration Slide/presentation generation Token Architecture Load: references/token-architecture.md Three-Layer Structure Example: Script Paths Script paths in this skill and its references/ are relative to the directory that contains this SKILL.md, not to the project: scripts/<file> is this skill's own scripts/ folder, and ../<skill>/scripts/<file> is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as docs/brand-guidelines.md, assets/design-tokens.json or src/ relative to it. Quick Start Generate tokens: Validate usage: References Topic File ------- ------ Token Architecture references/token-architecture.md Primitive Tokens references/primitive-tokens.md Semantic Tokens references/semantic-tokens.md Component Tokens references/component-tokens.md Component Specs references/component-specs.md States & Variants references/states-and-variants.md Tailwind Integration references/tailwind-integration.md Component Spec Pattern Property Default Hover Active Disabled ---------- --------- ------- -------- ---------- Background primary primary-dark primary-darker muted Text white white white muted-fg Border none none none muted-border Shadow sm md none none Scripts Script Purpose -------- --------- generate-tokens.cjs Generate CSS from JSON token config validate-tokens.cjs Check for hardcoded values in code search-slides.py BM25 search + contextual recommendations slide-token-validator.py Validate slide HTML for token compliance fetch-background.py Fetch images from Pexels/Unsplash Templates Template Purpose ---------- -------- …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nextlevelbuilder/design-system--3c63b8