Fähigkeiten ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Niedriges Risiko ⚙️ Externe Befehle📁 Dateisystemzugriff🌐 Netzwerkzugriff🔑 Umgebungsvariablen⚡ Enthält Skripte

Design-Tokens generieren, Nutzung validieren und markenkonforme Folien erstellen

Designsysteme brechen oft, wenn Tokens nicht konsistent über die Ebenen Primitive, Semantisch und Komponente angewendet werden. Dieses Skill generiert CSS-Variablen aus JSON-Token-Definitionen, validiert die Token-Nutzung im Code und erstellt markenkonforme Slide-Präsentationen mit Chart.js-Integration.

Unterstützt: Claude Codex Code(CC)

🥉 72 Bronze

Die Skill-ZIP herunterladen

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

Einschalten und loslegen

Teste es

Verwendung von "ckm:design-system". Generiere CSS-Design-Tokens aus meiner tokens.json und erstelle eine Tailwind-Konfiguration für mein Next.js-Projekt.

Erwartetes Ergebnis:

CSS-Ausgabe mit dreischichtiger Token-Struktur, organisiert als :root-Blöcke mit Primitives, Semantischen Tokens und Komponenten-Tokens
Tailwind-Konfigurationsdatei mit Farbzuordnungen, die CSS-Variablen für die Verwendung in tailwind.config.js referenzieren

Verwendung von "ckm:design-system". Erstelle einen 5-Folien-Pitch-Deck für ein Fintech-Startup. Enthalte ein Umsatzdiagramm.

Erwartetes Ergebnis:

HTML-Datei mit markenkonformem Foliensatz bestehend aus Titel, Problem, Lösung mit Karten, Umsatzwachstum-Balkendiagramm und CTA-Folien
CSS-Referenzen auf Design-Tokens für alle Farben, Schriftarten und Abstände zur Sicherstellung der Markenkonformität

Verwendung von "ckm:design-system". Finde den besten Diagrammtyp zur Darstellung des vierteljährlichen Umsatzwachstums über vier Produktlinien.

Erwartetes Ergebnis:

Diagramm-Empfehlung: Gruppiertes Balkendiagramm zum Vergleich mehrerer Produktlinien über Quartale hinweg
Kontextspezifische Hinweise zur Verwendung, zu Vermeidungsszenarien und Chart.js-Implementierungshinweise

Sicherheitsaudit

Niedriges Risiko

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.

Gescannte Dateien

4,805

Analysierte Zeilen

befunde

Gesamtzahl Audits

Probleme mit niedrigem Risiko (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.

Risikofaktoren

⚙️ Externe Befehle (201)

📁 Dateisystemzugriff (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

🌐 Netzwerkzugriff (28)

🔑 Umgebungsvariablen (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

⚡ Enthält Skripte (1)

scripts/search-slides.py:10-14

Auditiert von: claude

Qualitätsbewertung

Architektur

100

Wartbarkeit

Inhalt

Community

Sicherheit

Spezifikationskonformität

Was du bauen kannst

Frontend-Entwickler erstellt ein Designsystem

Ein Frontend-Entwickler muss ein konsistentes Design-Token-System für ein neues Projekt aufsetzen. Dieses Skill generiert CSS-Variablen aus einer JSON-Token-Definition, validiert, dass Komponenten Tokens statt hartcodierter Werte verwenden, und erstellt eine Tailwind-Konfiguration zur Integration.

Designer erstellt markenkonforme Präsentationen

Ein Designer benötigt einen Pitch-Deck, der den Markenrichtlinien folgt. Dieses Skill generiert HTML-Folien, die Design-Tokens für Farben, Typografie und Abstände verwenden. Es enthält Diagrammoptionen über Chart.js und kuratierte Hintergrundbilder von Pexels.

DevOps-Ingenieur automatisiert Design-Token-Pipelines

Ein DevOps-Ingenieur richtet eine automatisierte Token-Generierung und -Validierung in CI-Pipelines ein. Das Skill bietet CLI-Skripte zur CSS-Generierung, zur Validierung von Codebasen hinsichtlich Token-Nutzungsregeln und zur Einbettung von Tokens in eigenständige HTML-Dateien.

Probiere diese Prompts

Tokens aus JSON-Konfiguration generieren

Generiere CSS-Design-Tokens aus meiner tokens.json-Datei unter Verwendung der dreischichtigen Struktur. Verwende das Muster Primitive zu Semantisch zu Komponente.

Token-Nutzung in der Codebasis validieren

Validiere mein src/-Verzeichnis auf hartcodierte Hex-Farben und Pixel-Werte. Melde alle Verstöße und schlage vor, welche Design-Tokens stattdessen verwendet werden sollten.

Pitch-Deck mit Diagrammen erstellen

Erstelle einen 8-Folien-Investor-Pitch-Deck für eine SaaS-Analytics-Plattform. Enthalte eine Titelfolie, Problemfolie, Lösungsfolie mit Feature-Raster, Metrikfolie, Umsatzdiagrammfolie, Testimonial-Folie, Vergleichstabellenfolie und CTA-Abschlussfolie. Verwende unsere Marken-Design-Tokens.

Duarte-Sparkline-Technik anwenden

Erstelle einen 9-Folien-Deck unter Verwendung der Duarte-Sparkline-Erzählstruktur. Wechsle zwischen Was Ist (Frustration) und Was Sein Könnte (Hoffnung). Verwende Musterbrüche an den Positionen 3 und 6. Durchsuche Folienstrategien nach 'Investor Pitch' und empfehle Layouts für jede Folie.

Bewährte Verfahren

Definiere zuerst primitive Tokens mit Rohwerten, ordne sie dann über semantische Tokens zu und schließlich zu komponentenspezifischen Tokens für maximale Flexibilität und Theme-Wechsel.
Validiere generierte HTML-Folien immer mit dem Token-Validator, um hartcodierte Farben oder Schriftarten vor dem Teilen zu erkennen.
Nutze die kontextbezogene Suche mit Folienposition und Emotionsparametern, um Decks mit Musterbrüchen und emotionalem Kontrast für eine bessere Zielgruppenbindung zu erstellen.

Vermeiden

Verwende keine rohen Hex-Farben in Komponenten-CSS-Dateien. Referenziere für die Theme-Konsistenz immer Design-Tokens über var().
Erstelle keine Folien ohne Einbindung der design-tokens.css-Datei. Alle visuellen Eigenschaften müssen Token-Variablen verwenden.
Überspringe nicht die semantische Token-Ebene. Die direkte Zuordnung von Komponenten zu Primitives erschwert Theme-Wechsel und Wartung.

Häufig gestellte Fragen

Welches Dateiformat muss das Design-Token-JSON einhalten?

Das JSON sollte einer dreischichtigen Struktur folgen: Primitive (Rohwerte für Farben, Abstände, Typografie), Semantisch (zweckbasierte Aliase wie --color-primary) und Komponente (komponentenspezifische Tokens wie --button-bg). Jeder Token hat ein Feld $value und $type.

Kann dieses Skill PowerPoint- oder Google-Slides-Dateien erstellen?

Nein. Dieses Skill generiert HTML-Folien mit eingebetteten CSS-Design-Tokens. Die Ausgabe ist eine eigenständige HTML-Datei, die in jedem Browser geöffnet werden kann, aber nicht direkt in PowerPoint oder Google Slides importiert werden kann.

Wie füge ich meinen Folien ein neues Hintergrundbild hinzu?

Hintergrundbilder werden aus einem kuratierten Satz freier Pexels-Fotos ausgewählt, die nach Folientyp (Hero, Team, Testimonial usw.) organisiert sind. Du kannst das Wörterbuch CURATED_IMAGES in scripts/fetch-background.py um zusätzliche Pexels-Bild-URLs erweitern.

Wonach sucht der Token-Validator?

Der Validator durchsucht CSS-, JSX-, TSX- und andere Quelldateien nach hartcodierten Hex-Farben, RGB-Farben, Pixel-Werten und rem-Werten. Er schlägt vor, diese durch var()-Referenzen auf Design-Tokens zu ersetzen. Dabei werden Token-Definitionsdateien und übliche Ausnahmen übersprungen.

Wie erstelle ich ein Tailwind-Theme aus meinen Design-Tokens?

Verwende das Skript generate-tokens.cjs mit dem Flag --format tailwind. Dies erzeugt ein Farbkonfigurationsobjekt, das deine semantischen Farb-Tokens unter Verwendung von CSS-Variablen-Referenzen auf Tailwind-Farbnamen abbildet.

Unterstützt die Folien-Generierung Animationen?

Ja. Das Folien-System enthält CSS-Animation-Klassen wie animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count und animate-pulse. Die kontextbezogene Suche empfiehlt Animationsklassen basierend auf Folienziel und Emotion.