Apply a three-layer token architecture to standardize design tokens and theming.
npx skills add https://github.com/NammDev/Goads-Krea --skill design-system-nammdev
Please help me install this Agent Skill. Skill: design-system Source: https://github.com/NammDev/Goads-Krea/tree/main/.claude/skills/design-system Command: npx skills add https://github.com/NammDev/Goads-Krea --skill design-system-nammdev
Token architecture, semantic consistency, and scalable design systems across tokens, components, and slides can be brittle without a structured approach. This Skill provides a three-layer token system and a slide-generation workflow to enforce brand-aligned design artifacts.
Run the slide generator to produce a brand-consistent deck from the included data.
High-intent search queries and answers about installing and using this skill.
A scalable design token architecture uses a three-layer system—primitive, semantic, and component—to standardize styles and enable predictable, brand-consistent theming across tokens, component specs, and slide templates.
Standardizing design tokens across components and slide templates is achieved by applying a three-layer token architecture that provides per-component mappings, contextual decision flows, and scripted tooling for token validation and generation.
Yes, the design system approach works with Tailwind CSS variables by applying a structured token architecture that translates primitive and semantic tokens into CSS variables for automated, brand-aligned slide generation.
You can generate brand-compliant slide decks automatically by running the included slide generator, which uses token-driven templates, contextual decision flows, and Chart.js visuals to produce data storytelling artifacts.
No external dependencies are required to use this token-driven design system, as it provides self-contained scripts, templates, and references for token generation, validation, background fetching, and inline embedding.
Design token validation fails when tokens do not align with the three-layer architecture, so you must use the provided script tooling to verify token naming, per-component mappings, and metadata before generating slides.
ArnavPuriEstablish and manage design context with brand identity, color palettes, and typography.
DayzideeManage design tokens and generate branded slides from predefined templates.
nandzzConvert structured AI outputs into interactive HTML reports with Mermaid and Chart.js.
antony-jipGenerate CSS variables from JSON design tokens and create brand-compliant slides.
