skills.rest
Veloxia-agency
Veloxia-agencyCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate design tokens, component specs, and HTML slides with Tailwind integration.

Updated Apr 24, 2026
Search Tags:#design system#design tokens#slide generation#tailwind#css variables#brand compliance#component specs
One-click install
npx skills add https://github.com/Veloxia-agency/VELOXIA-WEB --skill ckm-design-system-veloxia-agency
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/Veloxia-agency/VELOXIA-WEB/tree/main/.claude/skills/ui-ux-pro-max/.claude/skills/design-system
Command: npx skills add https://github.com/Veloxia-agency/VELOXIA-WEB --skill ckm-design-system-veloxia-agency

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It helps teams build and maintain a coherent design system so colors, spacing, typography, components, and presentations stay consistent across products and decks.

Core Features & Use Cases

  • Three-layer token architecture: Defines primitive, semantic, and component tokens for scalable theming.
  • Component specifications: Documents button, input, card, badge, alert, dialog, and table states and variants.
  • Slide generation and compliance: Produces brand-aligned presentation HTML, validates token usage, and supports contextual slide strategy selection.

Quick Start

Ask the design system skill to generate tokens, specify a component, or create a brand-compliant slide deck for your project.

Frequently Asked Questions about ckm:design-system

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

FAQPage Schema
How do I create a design token architecture for scalable brand theming?▼

Design tokens are structured using a three-layer architecture comprising primitive, semantic, and component tokens to ensure scalable and consistent brand theming across products.

How do I generate brand-compliant HTML slides using design tokens?▼

Brand-compliant HTML slides are generated by selecting contextual slide strategies and validating design token usage, ensuring colors and typography align with the established system.

Can I use CSS variables with Tailwind for design system integration?▼

Yes, CSS variables are enforced for design token usage and integrated with Tailwind, allowing seamless mapping of semantic tokens into utility classes for frontend workflows.

What is the best way to document component states and variants for a UI system?▼

Documenting component states and variants involves creating detailed specifications for buttons, inputs, cards, and dialogs, modeling their states to maintain UI consistency.

Does this design system workflow include validation scripts for token usage?▼

Yes, validation scripts are included to enforce deterministic and compliant output, ensuring that generated HTML and components strictly adhere to the defined design tokens.

How do I add Chart.js charts to design system presentation slides?▼

Chart.js charts are supported within the slide generation workflow, allowing you to embed data visualizations directly into brand-aligned HTML presentation slides.

Related Skills

Explore More Design & Creative Skills→
frankxaifrankxai
6

design-system-architecture

Implement token hierarchies with semantic, alias tokens for scalable design systems.

Community
Advanced
Kin3XcKin3Xc

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, Svelte, and Next.js.

Community
Advanced
broomvabroomva
3

arcan-glass

Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.

Community
Intermediate
alkalisummeralkalisummer
1

design-system

Define design tokens, component architecture, and accessibility standards for web applications.

Community
Advanced