skills.rest
antony-jip
antony-jipCOMMUNITY
Explore all skills by this author →
GitHub

ckm:design-system

Generate CSS variables from JSON design tokens and create brand-compliant slides.

Updated Dec 5, 2025
Search Tags:#design system#design tokens#tailwind css#slide generation#ui components#css variables
One-click install
npx skills add https://github.com/antony-jip/sign-company --skill ckm-design-system-antony-jip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckm:design-system
Source: https://github.com/antony-jip/sign-company/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/antony-jip/sign-company --skill ckm-design-system-antony-jip

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the creation and maintenance of design systems by providing a structured approach to design tokens, component specifications, and brand-compliant slide generation.

Core Features & Use Cases

  • Token Architecture: Implements a three-layer token system (primitive, semantic, component) for robust design systems.
  • Component Specifications: Defines detailed specs for UI components, including states and variants.
  • Slide Generation: Creates brand-compliant presentations using design tokens and a contextual decision system.
  • Use Case: A frontend developer can use this Skill to generate CSS variables from a JSON token file, ensuring all UI elements adhere to the brand's design language. A marketing team can generate professional slides for investor pitches.

Quick Start

Use the ckm:design-system skill to generate CSS variables from the 'tokens.json' file and output them to 'tokens.css'.

Frequently Asked Questions about ckm: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 token JSON file?▼

You generate CSS variables from a token JSON file by processing it through the skill's token architecture, which outputs a formatted CSS file containing the extracted design tokens.

What is a three-layer design token architecture and how does it work?▼

A three-layer design token architecture organizes styling into primitive, semantic, and component layers to separate raw values from contextual meanings, ensuring maintainable UI component specifications.

Can I use Tailwind CSS with a structured design token system?▼

Yes, Tailwind CSS integrates with a structured design token system by mapping primitive and semantic tokens into the utility-first workflow, maintaining brand-compliant styling across components.

How do I create brand-compliant presentation slides automatically?▼

You create brand-compliant presentation slides automatically by using the skill's generation tools, which leverage a contextual decision system and design tokens to produce presentations via Python and Node.js scripts.

Does this design system skill support Chart.js for data visualization?▼

Yes, the design system skill supports Chart.js for data visualization by integrating it during automated slide generation to ensure charts adhere to defined design tokens.

How do I define UI component specifications with multiple states and variants?▼

You define UI component specifications with states and variants by utilizing the skill's component specification framework, which validates component properties against established design tokens.

Related Skills

Explore More Design & Creative Skills→
theodrosyimertheodrosyimer

tokens

Automate DTCG design token creation, validation, and building with Style Dictionary v5.

Community
Intermediate
frankxaifrankxai
6

arcanea-design-system

Define Arcanea design tokens, CSS variables, and UI component standards.

Community
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
landim32landim32
1

ckm:design-system

Automate design-token organization and slide-template generation for design systems.

Community
Advanced