Compétences ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Risque faible ⚙️ Commandes externes📁 Accès au système de fichiers🌐 Accès réseau🔑 Variables d’environnement⚡ Contient des scripts

Générer des tokens de design, valider leur utilisation et créer des diapositives de marque

Les systèmes de design échouent souvent lorsque les tokens ne sont pas appliqués de manière cohérente entre les couches primitive, sémantique et composant. Cette compétence génère des variables CSS à partir de définitions JSON de tokens, valide l'utilisation des tokens dans le code et crée des présentations de diapositives conformes à la marque avec l'intégration Chart.js.

Prend en charge: Claude Codex Code(CC)

🥉 72 Bronze

Télécharger le ZIP du skill

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

Activez et commencez à utiliser

Tester

Utilisation de "ckm:design-system". Génère des tokens de design CSS à partir de mon tokens.json et crée une configuration Tailwind pour mon projet Next.js.

Résultat attendu:

Sortie CSS avec structure de tokens en trois couches organisée en blocs :root avec les tokens primitifs, sémantiques et composants
Fichier de configuration Tailwind avec des correspondances de couleurs référençant les variables CSS pour une utilisation dans tailwind.config.js

Utilisation de "ckm:design-system". Crée un pitch deck de 5 diapositives pour une startup fintech. Inclus un graphique de revenus.

Résultat attendu:

Fichier HTML avec un deck de diapositives de marque incluant titre, problème, solution avec cartes, graphique à barres de croissance des revenus et diapositives d'appel à l'action
Références CSS aux tokens de design pour toutes les couleurs, polices et espacements afin d'assurer la conformité de la marque

Utilisation de "ckm:design-system". Trouve le meilleur type de graphique pour montrer la croissance trimestrielle des revenus sur quatre gammes de produits.

Résultat attendu:

Recommandation de graphique : Graphique à barres groupées pour comparer plusieurs gammes de produits sur plusieurs trimestres
Conseils contextuels sur quand l'utiliser, quand l'éviter, et notes d'implémentation Chart.js

Audit de sécurité

Risque faible

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.

Fichiers analysés

4,805

Lignes analysées

résultats

Total des audits

Problèmes à risque faible (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.

Facteurs de risque

⚙️ Commandes externes (201)

📁 Accès au système de fichiers (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

🌐 Accès réseau (28)

🔑 Variables d’environnement (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

⚡ Contient des scripts (1)

scripts/search-slides.py:10-14

Audité par: claude

Score de qualité

Architecture

100

Maintenabilité

Contenu

Communauté

Sécurité

Conformité aux spécifications

Ce que vous pouvez construire

Développeur frontend créant un système de design

Un développeur frontend a besoin d'établir un système de tokens de design cohérent pour un nouveau projet. Cette compétence génère du CSS à partir d'une définition JSON de tokens, valide que les composants utilisent des tokens plutôt que des valeurs codées en dur, et produit une configuration Tailwind pour l'intégration.

Designer créant des présentations de marque

Un designer a besoin de créer un pitch deck qui suit les directives de la marque. Cette compétence génère des diapositives HTML qui utilisent des tokens de design pour les couleurs, la typographie et l'espacement. Elle inclut des options de graphiques via Chart.js et des images d'arrière-plan organisées depuis Pexels.

Ingénieur DevOps automatisant les pipelines de tokens de design

Un ingénieur DevOps met en place une génération et une validation automatisées des tokens dans les pipelines CI. La compétence fournit des scripts CLI pour générer du CSS, valider les bases de code par rapport aux règles d'utilisation des tokens, et intégrer les tokens dans des fichiers HTML autonomes.

Essayez ces prompts

Générer des tokens depuis une configuration JSON

Génère des tokens de design CSS à partir de mon fichier tokens.json en utilisant la structure en trois couches. Utilise le motif primitif vers sémantique vers composant.

Valider l'utilisation des tokens dans la base de code

Valide mon répertoire src/ pour détecter les couleurs hexadécimales et les valeurs en pixels codées en dur. Signale toutes les violations et suggère quels tokens de design devraient être utilisés à la place.

Créer un pitch deck avec des graphiques

Crée un pitch deck investisseur de 8 diapositives pour une plateforme SaaS d'analytique. Inclus une diapositive titre, une diapositive problème, une diapositive solution avec grille de fonctionnalités, une diapositive métriques, une diapositive avec graphique de revenus, une diapositive témoignage, une diapositive tableau comparatif et une diapositive d'appel à l'action finale. Utilise nos tokens de design de marque.

Appliquer la technique sparkline de Duarte

Crée un deck de 9 diapositives utilisant la structure narrative sparkline de Duarte. Alterne entre les temps Qu'est-ce Qui Est (frustration) et Ce Qui Pourrait Être (espoir). Utilise la rupture de motif aux positions 3 et 6. Recherche des stratégies de diapositives pour 'pitch investisseur' et recommande des mises en page pour chaque diapositive.

Bonnes pratiques

Définissez d'abord les tokens primitifs avec des valeurs brutes, puis mappez-les via des tokens sémantiques, et enfin vers des tokens spécifiques aux composants pour une flexibilité maximale et un changement de thème facilité.
Validez toujours les diapositives HTML générées avec le validateur de tokens pour détecter les couleurs ou polices codées en dur avant de les partager.
Utilisez la recherche contextuelle avec les paramètres de position de diapositive et d'émotion pour créer des decks avec rupture de motif et contraste émotionnel pour un meilleur engagement du public.

Éviter

N'utilisez pas de couleurs hexadécimales brutes dans les fichiers CSS de composants. Référencez toujours les tokens de design via var() pour la cohérence du thème.
Ne créez pas de diapositives sans importer le fichier design-tokens.css. Toutes les propriétés visuelles doivent utiliser des variables de tokens.
Ne sautez pas la couche de tokens sémantiques. Mapper directement les composants aux primitifs rend le changement de thème et la maintenance plus difficiles.

Foire aux questions

Quel format de fichier le JSON de tokens de design doit-il suivre ?

Le JSON doit suivre une structure en trois couches : primitive (valeurs brutes de couleurs, espacements, typographie), sémantique (alias basés sur l'usage comme --color-primary) et composant (tokens spécifiques aux composants comme --button-bg). Chaque token a un champ $value et $type.

Cette compétence peut-elle générer des fichiers PowerPoint ou Google Slides ?

Non. Cette compétence génère des diapositives HTML avec des tokens de design CSS intégrés. Le résultat est un fichier HTML autonome qui peut être ouvert dans n'importe quel navigateur mais ne peut pas être directement importé dans PowerPoint ou Google Slides.

Comment ajouter une nouvelle image d'arrière-plan à mes diapositives ?

Les images d'arrière-plan sont sélectionnées à partir d'un ensemble organisé de photos Pexels gratuites classées par type de diapositive (hero, équipe, témoignage, etc.). Vous pouvez étendre le dictionnaire CURATED_IMAGES dans scripts/fetch-background.py avec des URL d'images Pexels supplémentaires.

Que vérifie le validateur de tokens ?

Le validateur analyse les fichiers CSS, JSX, TSX et autres fichiers source pour détecter les couleurs hexadécimales, couleurs RGB, valeurs en pixels et valeurs en rem codées en dur. Il suggère de les remplacer par des références var() vers des tokens de design. Il ignore les fichiers de définition de tokens et les exceptions courantes.

Comment créer un thème Tailwind à partir de mes tokens de design ?

Utilisez le script generate-tokens.cjs avec l'option --format tailwind. Cela génère un objet de configuration de couleurs qui mappe vos tokens de couleurs sémantiques vers des noms de couleurs Tailwind en utilisant des références de variables CSS.

La génération de diapositives prend-elle en charge les animations ?

Oui. Le système de diapositives inclut des classes d'animation CSS comme animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count et animate-pulse. La recherche contextuelle recommande des classes d'animation en fonction de l'objectif et de l'émotion de la diapositive.