ckm:design-system

Name: ckm:design-system
Availability: InStock
Author: antony-jip

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

Ready to run

npx skills add https://github.com/antony-jip/sign-company --skill ckm-design-system-antony-jip

💬 Prompt for ChatGPT / Claude Chat▼

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.