Habilidades ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Riesgo bajo ⚙️ Comandos externos📁 Acceso al sistema de archivos🌐 Acceso a red🔑 Variables de entorno⚡ Contiene scripts

Generar tokens de diseño, validar su uso y crear diapositivas con la marca

Los sistemas de diseño a menudo se rompen cuando los tokens no se aplican de manera consistente en las capas primitiva, semántica y de componentes. Esta skill genera variables CSS a partir de definiciones de tokens JSON, valida el uso de tokens en el código y crea presentaciones de diapositivas conformes con la marca integrando Chart.js.

Soporta: Claude Codex Code(CC)

🥉 72 Bronce

Descargar el ZIP de la skill

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

Activa y empieza a usar

Pruébalo

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

Resultado esperado:

Salida CSS con estructura de tokens de tres capas organizada como bloques :root con primitivas, tokens semánticos y tokens de componentes
Archivo de configuración Tailwind con mapeos de colores que referencian variables CSS para usar en tailwind.config.js

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

Resultado esperado:

Archivo HTML con deck de diapositivas con la marca que incluye diapositivas de título, problema, solución con tarjetas, gráfico de barras de crecimiento de ingresos y CTA
Referencias CSS a tokens de diseño para todos los colores, fuentes y espaciados para garantizar el cumplimiento de la marca

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

Resultado esperado:

Recomendación de gráfico: gráfico de barras agrupadas para comparar múltiples líneas de producto entre trimestres
Guía contextual sobre cuándo usarlo, cuándo evitarlo y notas de implementación en Chart.js

Auditoría de seguridad

Riesgo bajo

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.

Archivos escaneados

4,805

Líneas analizadas

hallazgos

Auditorías totales

Problemas de riesgo bajo (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.

Factores de riesgo

⚙️ Comandos externos (201)

📁 Acceso al sistema de archivos (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

🌐 Acceso a red (28)

🔑 Variables de entorno (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

⚡ Contiene scripts (1)

scripts/search-slides.py:10-14

Auditado por: claude

Puntuación de calidad

Arquitectura

100

Mantenibilidad

Contenido

Comunidad

Seguridad

Cumplimiento de la especificación

Lo que puedes crear

Desarrollador frontend creando un sistema de diseño

Un desarrollador frontend necesita establecer un sistema de tokens de diseño consistente para un nuevo proyecto. Esta skill genera variables CSS a partir de una definición JSON de tokens, valida que los componentes usen tokens en lugar de valores hardcodeados y produce una configuración de Tailwind para su integración.

Diseñador creando presentaciones con la marca

Un diseñador necesita crear un pitch deck que siga las guías de marca. Esta skill genera diapositivas HTML que usan tokens de diseño para colores, tipografía y espaciado. Incluye opciones de gráficos mediante Chart.js e imágenes de fondo seleccionadas de Pexels.

Ingeniero DevOps automatizando pipelines de tokens de diseño

Un ingeniero DevOps configura la generación y validación automatizada de tokens en pipelines de CI. La skill proporciona scripts CLI para generar CSS, validar codebases contra reglas de uso de tokens e incrustar tokens en archivos HTML independientes.

Prueba estos prompts

Generar tokens desde configuración JSON

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

Validar uso de tokens en el codebase

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

Crear un pitch deck con gráficos

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.

Aplicar técnica sparkline de Duarte

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.

Mejores prácticas

Defina primero los tokens primitivos con valores brutos, luego mapéelos a través de tokens semánticos y finalmente a tokens específicos de componentes para máxima flexibilidad y cambio de tema.
Valide siempre las diapositivas HTML generadas con el validador de tokens para detectar colores o fuentes hardcodeadas antes de compartir.
Use la búsqueda contextual con parámetros de posición de diapositiva y emoción para crear decks con ruptura de patrones y contraste emocional para una mejor participación de la audiencia.

Evitar

No use colores hex brutos en archivos CSS de componentes. Siempre referencie tokens de diseño mediante var() para la consistencia del tema.
No cree diapositivas sin importar el archivo design-tokens.css. Todas las propiedades visuales deben usar variables de token.
No omita la capa de tokens semánticos. Mapear componentes directamente a primitivas dificulta el cambio de tema y el mantenimiento.

Preguntas frecuentes

¿Qué formato de archivo debe seguir el JSON de tokens de diseño?

El JSON debe seguir una estructura de tres capas: primitiva (valores brutos de color, espaciado, tipografía), semántica (alias basados en propósito como --color-primary) y componente (tokens específicos de componentes como --button-bg). Cada token tiene un campo $value y $type.

¿Puede esta skill generar archivos de PowerPoint o Google Slides?

No. Esta skill genera diapositivas HTML con tokens de diseño CSS incrustados. La salida es un archivo HTML autocontenido que se puede abrir en cualquier navegador pero no se puede importar directamente a PowerPoint ni Google Slides.

¿Cómo añado una nueva imagen de fondo a mis diapositivas?

Las imágenes de fondo se seleccionan de un conjunto seleccionado de fotos gratuitas de Pexels organizadas por tipo de diapositiva (hero, equipo, testimonial, etc.). Puede ampliar el diccionario CURATED_IMAGES en scripts/fetch-background.py con URLs adicionales de imágenes de Pexels.

¿Qué verifica el validador de tokens?

El validador escanea archivos CSS, JSX, TSX y otros archivos fuente en busca de colores hex hardcodeados, colores RGB, valores en píxeles y valores rem. Sugiere reemplazarlos con referencias var() a tokens de diseño. Omite archivos de definición de tokens y excepciones comunes.

¿Cómo creo un tema de Tailwind a partir de mis tokens de diseño?

Use el script generate-tokens.cjs con la bandera --format tailwind. Esto genera un objeto de configuración de colores que mapea sus tokens de color semánticos a nombres de color de Tailwind usando referencias a variables CSS.

¿La generación de diapositivas soporta animaciones?

Sí. El sistema de diapositivas incluye clases de animación CSS como animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count y animate-pulse. La búsqueda contextual recomienda clases de animación según el objetivo y la emoción de la diapositiva.