Habilidades ckm:design-system

📦

ckm:design-system

Name: ckm:design-system
Author: nextlevelbuilder

Baixo Risco ⚙️ Comandos externos📁 Acesso ao sistema de arquivos🌐 Acesso à rede🔑 Variáveis de ambiente⚡ Contém scripts

Gerar design tokens, validar uso e criar slides com a marca

Os sistemas de design frequentemente se quebram quando os tokens não são aplicados de forma consistente nas camadas primitiva, semântica e de componentes. Esta skill gera variáveis CSS a partir de definições de tokens em JSON, valida o uso de tokens no código e cria apresentações de slides compatíveis com a marca, com integração ao Chart.js.

Suporta: Claude Codex Code(CC)

🥉 72 Bronze

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

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

Resultado esperado:

Saída CSS com estrutura de tokens em três camadas organizada como blocos :root com tokens primitivos, semânticos e de componente
Arquivo de configuração Tailwind com mapeamento de cores referenciando variáveis CSS para uso em tailwind.config.js

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

Resultado esperado:

Arquivo HTML com deck de slides personalizado incluindo título, problema, solução com cards, gráfico de barras de crescimento de receita e slides de CTA
Referências CSS a design tokens para todas as cores, fontes e espaçamentos para garantir conformidade com a marca

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

Resultado esperado:

Recomendação de gráfico: Gráfico de Barras Agrupadas para comparar múltiplas linhas de produto entre trimestres
Orientação específica ao contexto sobre quando usar, quando evitar e notas de implementação com Chart.js

Auditoria de Segurança

Baixo Risco

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.

Arquivos analisados

4,805

Linhas analisadas

achados

Total de auditorias

Problemas de Baixo Risco (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.

Fatores de risco

⚙️ Comandos externos (201)

📁 Acesso ao sistema de arquivos (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

🌐 Acesso à rede (28)

🔑 Variáveis de ambiente (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

⚡ Contém scripts (1)

scripts/search-slides.py:10-14

Auditado por: claude

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

Segurança

Conformidade com especificações

O Que Você Pode Construir

Desenvolvedor frontend criando um sistema de design

Um desenvolvedor frontend precisa estabelecer um sistema de design tokens consistente para um novo projeto. Esta skill gera variáveis CSS a partir de uma definição de tokens em JSON, valida se os componentes usam tokens em vez de valores fixos e produz uma configuração Tailwind para integração.

Designer criando apresentações com a marca

Um designer precisa criar um pitch deck que siga as diretrizes da marca. Esta skill gera slides HTML que usam design tokens para cores, tipografia e espaçamento. Inclui opções de gráfico via Chart.js e imagens de fundo selecionadas do Pexels.

Engenheiro DevOps automatizando pipelines de design tokens

Um engenheiro DevOps configura geração e validação automatizadas de tokens em pipelines de CI. A skill fornece scripts CLI para gerar CSS, validar codebases contra regras de uso de tokens e incorporar tokens em arquivos HTML independentes.

Tente Estes Prompts

Gerar tokens a partir de configuração 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 no codebase

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

Criar um pitch deck com 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 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.

Melhores Práticas

Defina primeiro os tokens primitivos com valores brutos, depois mapeie-os através dos tokens semânticos e, por fim, para tokens específicos de componente para máxima flexibilidade e alternância de temas.
Sempre valide os slides HTML gerados com o validador de tokens para detectar cores ou fontes fixas antes de compartilhar.
Use a pesquisa contextual com parâmetros de posição do slide e emoção para criar decks com quebra de padrão e contraste emocional para melhor engajamento do público.

Evitar

Não use cores hexadecimais brutas em arquivos CSS de componentes. Sempre referencie design tokens através de var() para consistência do tema.
Não crie slides sem importar o arquivo design-tokens.css. Todas as propriedades visuais devem usar variáveis de token.
Não pule a camada de token semântico. Mapear componentes diretamente para primitivos dificulta a alternância de temas e a manutenção.

Perguntas Frequentes

Qual formato de arquivo o JSON de design tokens precisa seguir?

O JSON deve seguir uma estrutura de três camadas: primitiva (valores brutos de cor, espaçamento, tipografia), semântica (aliases baseados em propósito como --color-primary) e componente (tokens específicos de componente como --button-bg). Cada token possui um campo $value e $type.

Esta skill pode gerar arquivos PowerPoint ou Google Slides?

Não. Esta skill gera slides HTML com design tokens CSS embutidos. A saída é um arquivo HTML autocontido que pode ser aberto em qualquer navegador, mas não pode ser importado diretamente para o PowerPoint ou Google Slides.

Como adicionar uma nova imagem de fundo aos meus slides?

As imagens de fundo são selecionadas de um conjunto selecionado de fotos gratuitas do Pexels organizadas por tipo de slide (hero, equipe, depoimento, etc.). Você pode estender o dicionário CURATED_IMAGES em scripts/fetch-background.py com URLs adicionais de imagens do Pexels.

O que o validador de tokens verifica?

O validador varre arquivos CSS, JSX, TSX e outros arquivos fonte em busca de cores hexadecimais fixas, cores RGB, valores em pixel e valores em rem. Ele sugere substituí-los por referências var() para design tokens. Ele ignora arquivos de definição de tokens e exceções comuns.

Como criar um tema Tailwind a partir dos meus design tokens?

Use o script generate-tokens.cjs com a flag --format tailwind. Isso gera um objeto de configuração de cores que mapeia seus tokens de cor semânticos para nomes de cores do Tailwind usando referências de variáveis CSS.

A geração de slides suporta animações?

Sim. O sistema de slides inclui classes de animação CSS como animate-fade-up, animate-stagger, animate-scale, animate-chart, animate-count e animate-pulse. A pesquisa contextual recomenda classes de animação com base no objetivo e na emoção do slide.