Skills ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Low Risk ⚙️ External commands📁 Filesystem access🌐 Network access🔑 Env variables⚡ Contains scripts

Generate design tokens, validate usage, and create branded slides

Design systems often break down when tokens are not consistently applied across primitive, semantic, and component layers. This skill generates CSS variables from JSON token definitions, validates token usage in code, and creates brand-compliant slide presentations with Chart.js integration.

Supports: Claude Codex Code(CC)

🥉 72 Bronze

Download the skill ZIP

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

Toggle on and start using

Test it

Using "ckm:design-system". Generate CSS design tokens from my tokens.json and create a Tailwind config for my Next.js project.

Expected outcome:

CSS output with three-layer token structure organized as :root blocks with primitives, semantic tokens, and component tokens
Tailwind config file with color mappings referencing CSS variables for use in tailwind.config.js

Using "ckm:design-system". Create a 5-slide pitch deck for a fintech startup. Include a revenue chart.

Expected outcome:

HTML file with branded slide deck including title, problem, solution with cards, revenue growth bar chart, and CTA slides
CSS references to design tokens for all colors, fonts, and spacing to ensure brand compliance

Using "ckm:design-system". Find the best chart type to show quarterly revenue growth across four product lines.

Expected outcome:

Chart recommendation: Grouped Bar Chart for comparing multiple product lines across quarters
Context-specific guidance on when to use it, when to avoid it, and Chart.js implementation notes

Security Audit

Low Risk

v1 • 5/26/2026

Static analysis flagged 561 potential issues (risk score 100/100), but AI evaluation confirms nearly all are false positives. Over 400 'Weak cryptographic algorithm' detections are hex color codes in design token CSV data and CSS examples (e.g. #2563EB). Over 150 'Shell backtick execution' detections are shell command examples in Markdown documentation and legitimate build tool invocations. The only true positive is subprocess.run in slide-token-validator.py which delegates to an internal validation script with low risk. The skill is a legitimate design system toolkit with no malicious intent, no credential exfiltration, and no command injection vulnerabilities.

Files scanned

4,805

Lines analyzed

findings

Total audits

Low Risk Issues (9)

data/slide-backgrounds.csv:7 data/slide-charts.csv:22-26 data/slide-copy.csv:2-26 SKILL.md:42-48

Hex color values in design token data flagged as cryptographic algorithms

FALSE POSITIVE: Over 400 'Weak cryptographic algorithm' detections. The static analyzer matched hex color codes (e.g. #2563EB, #F59E0B, #0D0D0D) in CSV design data files and CSS documentation examples. These are design token color values, not cryptographic material. Design system data and CSS documentation legitimately contain hex color codes for brand colors, UI colors, and CSS examples.

references/component-specs.md:40-46 SKILL.md:54-61 references/token-architecture.md:7-18

Shell command examples in Markdown documentation

FALSE POSITIVE: Over 150 'Ruby/shell backtick execution' detections in Markdown reference files. These are code examples showing users how to run commands like 'node scripts/generate-tokens.cjs' or 'python scripts/search-slides.py'. They are documentation, not executable code being injected at runtime. No dynamic command construction from user input.

scripts/fetch-background.py:144-184

Hardcoded image URLs in fetch-background.py

FALSE POSITIVE: Curated Pexels stock photo URLs hardcoded in fetch-background.py. These are pre-selected, free-to-use images for slide backgrounds. URLs point to images.pexels.com, a legitimate stock photography platform. No credential exfiltration or malicious network activity.

scripts/slide-token-validator.py:30

subprocess.run delegation in slide-token-validator.py

TRUE POSITIVE (low risk): Script uses subprocess.run to delegate validation to html-token-validator.py with sys.argv[1:] forwarded as arguments. This is a standard wrapper pattern. Risk is low because it only calls a known internal validator script.

scripts/generate-slide.py:632

Path traversal sequence in generate-slide.py

FALSE POSITIVE: The string '../../../assets/design-tokens.css' on line 632 is a computed relative path from the slide output directory to the shared design tokens CSS file. This is a hardcoded constant, not user-controlled input. No path traversal vulnerability exists.

scripts/embed-tokens.cjs:86 scripts/generate-tokens.cjs:184

Standard filesystem operations in build and validation scripts

FALSE POSITIVE: Node.js fs operations detected in embed-tokens.cjs, generate-tokens.cjs, and validate-tokens.cjs. These are standard file I/O operations for reading design token files, writing CSS output, and scanning codebases for token compliance. All operations are local to the project directory.

SKILL.md:190

Chart.js CDN URL in SKILL.md

FALSE POSITIVE: Hardcoded URL 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/...' in SKILL.md line 190. This is a legitimate CDN URL for the Chart.js library used in slide HTML generation. It is a static reference, not dynamically constructed.

scripts/search-slides.py:10

Dynamic import pattern in search-slides.py

FALSE POSITIVE: 'Dynamic import() expression' detected at line 10. This is actually a standard Python 'from slide_search_core import ...' statement. The static analyzer misidentified the Python import syntax as a dynamic JavaScript import expression.

multiple:1

Heuristic dangerous combination warning

FALSE POSITIVE: The heuristic analyzer flagged a 'dangerous combination' of code execution, network, and credential access across the codebase. Evaluation confirms all operations are legitimate: subprocess calls run internal build tools, network requests go to stock photo CDNs and Chart.js CDN, and 'credential' matches are false positives on CSV config lookups and hardcoded hex colors. No data exfiltration path exists.

Risk Factors

⚙️ External commands (201)

📁 Filesystem access (17)

scripts/embed-tokens.cjs:86 scripts/embed-tokens.cjs:20 scripts/embed-tokens.cjs:86 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-slide.py:632 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:197 scripts/generate-tokens.cjs:198 scripts/generate-tokens.cjs:178 scripts/generate-tokens.cjs:184 scripts/generate-tokens.cjs:198 scripts/validate-tokens.cjs:99 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:226 scripts/validate-tokens.cjs:130 scripts/validate-tokens.cjs:231

🌐 Network access (28)

🔑 Env variables (7)

scripts/fetch-background.py:208 scripts/fetch-background.py:213 scripts/fetch-background.py:213 scripts/fetch-background.py:214 scripts/slide_search_core.py:430 scripts/slide_search_core.py:431 scripts/slide_search_core.py:432

⚡ Contains scripts (1)

scripts/search-slides.py:10-14

Audited by: claude

Quality Score

Architecture

100

Maintainability

Content

Community

Security

Spec Compliance

What You Can Build

Frontend developer creating a design system

A frontend developer needs to establish a consistent design token system for a new project. This skill generates CSS variables from a JSON token definition, validates that components use tokens instead of hardcoded values, and produces a Tailwind configuration for integration.

Designer building branded presentations

A designer needs to create a pitch deck that follows brand guidelines. This skill generates HTML slides that use design tokens for colors, typography, and spacing. It includes chart options via Chart.js and curated background images from Pexels.

DevOps engineer automating design token pipelines

A DevOps engineer sets up automated token generation and validation in CI pipelines. The skill provides CLI scripts for generating CSS, validating codebases against token usage rules, and embedding tokens into standalone HTML files.

Try These Prompts

Generate tokens from JSON config

Generate CSS design tokens from my tokens.json file using the three-layer structure. Use the primitive to semantic to component pattern.

Validate token usage in codebase

Validate my src/ directory for hardcoded hex colors and pixel values. Report all violations and suggest which design tokens should be used instead.

Create a pitch deck with charts

Create an 8-slide investor pitch deck for a SaaS analytics platform. Include a title slide, problem slide, solution slide with feature grid, metrics slide, revenue chart slide, testimonial slide, comparison table slide, and CTA closing slide. Use our brand design tokens.

Apply Duarte sparkline technique

Create a 9-slide deck using the Duarte sparkline narrative structure. Alternate between What Is (frustration) and What Could Be (hope) beats. Use pattern breaking at positions 3 and 6. Search slide strategies for 'investor pitch' and recommend layouts for each slide.

Best Practices

Define primitive tokens first with raw values, then map them through semantic tokens, and finally to component-specific tokens for maximum flexibility and theme switching.
Always validate generated HTML slides with the token validator to catch hardcoded colors or fonts before sharing.
Use the contextual search with slide position and emotion parameters to create decks with pattern breaking and emotional contrast for better audience engagement.

Avoid

Do not use raw hex colors in component CSS files. Always reference design tokens through var() for theme consistency.
Do not create slides without importing the design-tokens.css file. All visual properties must use token variables.
Do not skip the semantic token layer. Directly mapping components to primitives makes theme switching and maintenance harder.

Frequently Asked Questions

What file format does the design token JSON need to follow?

The JSON should follow a three-layer structure: primitive (raw color, spacing, typography values), semantic (purpose-based aliases like --color-primary), and component (component-specific tokens like --button-bg). Each token has a $value and $type field.

Can this skill generate PowerPoint or Google Slides files?

No. This skill generates HTML slides with embedded CSS design tokens. The output is a self-contained HTML file that can be opened in any browser but cannot be directly imported into PowerPoint or Google Slides.

How do I add a new background image to my slides?

Background images are selected from a curated set of free Pexels photos organized by slide type (hero, team, testimonial, etc.). You can extend the CURATED_IMAGES dictionary in scripts/fetch-background.py with additional Pexels image URLs.

What does the token validator check for?

The validator scans CSS, JSX, TSX, and other source files for hardcoded hex colors, RGB colors, pixel values, and rem values. It suggests replacing them with var() references to design tokens. It skips token definition files and common exceptions.

How do I create a Tailwind theme from my design tokens?

Use the generate-tokens.cjs script with the --format tailwind flag. This generates a color config object that maps your semantic color tokens to Tailwind color names using CSS variable references.

Does the slide generation support animations?

Yes. The slide system includes CSS animation classes like animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count, and animate-pulse. The contextual search recommends animation classes based on slide goal and emotion.