skills.rest
TarunTeja44
TarunTeja44COMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate three-layer design tokens, component specifications, and brand-compliant HTML slide decks.

1|Updated Feb 22, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#chart.js#component specs
One-click install
npx skills add https://github.com/TarunTeja44/portfolio --skill design-system-tarunteja44
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/TarunTeja44/portfolio/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/TarunTeja44/portfolio --skill design-system-tarunteja44

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Maintaining visual consistency across components and presentations is difficult when colors, spacing, and typography are hardcoded. This Skill establishes a three-layer token architecture (primitive, semantic, component) as a single source of truth and generates token-compliant CSS and HTML slides. ## Core Features & Use Cases - Token Generation & Validation: Convert JSON token configs into CSS variables or Tailwind theme config, and scan codebases for hardcoded values that violate token usage. - Component Specifications: Reference detailed specs for buttons, inputs, cards, badges, alerts, dialogs, and tables including variants, sizes, and states. - Slide Deck Generation: Build brand-compliant HTML presentations with Chart.js charts, BM25-based slide search, emotion-arc strategies, and automated token compliance validation. - Use Case: A designer needs a 10-slide investor pitch that matches brand guidelines. The Skill queries decision CSVs for layout, typography, and color logic, generates the HTML deck using design tokens, and validates it for hardcoded values. ## Quick Start Ask the AI to generate a brand-compliant 10-slide investor pitch deck using the design-system skill and validate it for token compliance.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate CSS variables from a design tokens JSON file?▼

Run the generate-tokens.cjs script with your token config: node generate-tokens.cjs --config tokens.json -o tokens.css. It resolves token references across primitive, semantic, and component layers and can also output a Tailwind color config with --format tailwind.

How to create a pitch deck that follows brand design tokens?▼

Use the slide generation workflow: query the decision CSVs for strategy, layout, typography, and color logic, then generate HTML slides that import design-tokens.css and use var() references exclusively. Validate the output with the token validator script before delivery.

What is a three-layer design token architecture?▼

It separates tokens into primitive (raw values like hex colors), semantic (purpose aliases like --color-primary), and component layers (like --button-bg). Each layer references the one below, enabling theme switching and per-component customization without changing raw values.

Does the slide generator support charts?▼

Yes, slides integrate Chart.js 4.4.1 via CDN for data visualizations such as line and bar charts. Chart colors should reference brand values, and the generated HTML includes navigation, progress bars, and keyboard controls.

Why does token validation fail on my HTML slides?▼

Validation fails when files contain hardcoded hex colors, rgb values, or font families outside var() references, or when the design-tokens.css import is missing. Exceptions exist for Chart.js script blocks and approved brand-color rgba transparency values.

Can I use these design tokens with Tailwind CSS?▼

Yes, the generate-tokens.cjs script supports a tailwind output format that maps semantic color tokens to CSS variable references for your tailwind.config theme extension. The references directory also includes a dedicated Tailwind integration guide.

Related Skills

Explore More Design & Creative Skills→
Ramadan-ElgamalRamadan-Elgamal

brand

Manages brand voice, visual identity, design tokens, and asset validation workflows.

Community
Intermediate
marktantongcomarktantongco

frontend-design

Transform UI specifications into React, Next.js, or Tailwind frontend code with token generation and accessibility validation.

Community
Advanced
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced