automacoescomerciaisintegradas/ckm:design-system
skills/ckm-design-system/SKILL.md
Token arch (Primitive→Semantic→Component), CSS vars, and slide builder. Actions: manage tokens, build brand-compliant presentations.
development
Updated May 16, 2026
$ install --global
skillsauthnpx skillsauth add automacoescomerciaisintegradas/skills ckm:design-systemInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 16, 2026, 3:32 AM172.6s19 files scanned
SKILL.md
- name:
- ckm:design-system
- description:
- Token arch (Primitive→Semantic→Component), CSS vars, and slide builder. Actions: manage tokens, build brand-compliant presentations.
Design System
Token architecture and systematic slide generation.
Token Arch
- Structure: Primitive (raw) -> Semantic (purpose) -> Component (specific).
- Rule: NEVER use raw hex/values. Use
var(--token). - Sync: Primitives from
ckm:brand-> CSS variables -> Tailwind config.
Slide System
- Flow: Goal/Context -> Search strategies (BM25) -> Layout/Type/Color logic -> Generate HTML -> Validate.
- Rules: Import
design-tokens.css; usevar()exclusively; Chart.js (not CSS bars); navigation (arrows/progress); Persuasion focus. - Breaking Pattern: Duarte Sparkline (What Is / What Could Be).
- Commands:
python scripts/search-slides.py "<query>" [--context --position X --total Y] python scripts/slide-token-validator.py <file> node scripts/generate-tokens.cjs --config tokens.json -o tokens.css node scripts/validate-tokens.cjs --dir src/
Reference Index
- Tokens:
token-architecture.md,primitive-tokens.md,semantic-tokens.md,component-tokens.md. - Specs:
component-specs.md,states-and-variants.md,tailwind-integration.md. - Data:
slide-strategies.csv,slide-layouts.csv,slide-copy.csv,slide-charts.csv.
Chart.js
Use chart.umd.min.js. Map brand colors to borderColor / backgroundColor.
Best Practices
- HSL format for opacity.
- Document token purpose.
- Center align slide content.
- Staggered reveals for motion.
Related Skills
automacoescomerciaisintegradas/claude-code-system-prompts
development
VerifiedTrustedCommunity
name: Claude Code System Prompts Mirror slug: claude-code-system-prompts version: 1.0.0 owner: Automações Comerciais Integradas description: Espelho versionado dos prompts de sistema do Claude Code (upstream Piebald-AI), com foco em consulta, estudo e adaptação para engenharia de agentes. language: pt-BR commands: - command: /prompts-index description: Lista categorias e principais arquivos do espelho local de prompts. parameters: - name: categoria type: string r
SKILL.mdUpdated May 30, 2026
automacoescomerciaisintegradas/design-academy
development
VerifiedTrustedCommunity
Skill de direção de arte inspirada no visual de /paz-bem.html: editorial premium, tipografia serif/sans, paleta quente (gesso/terracota/carvão), texturas, grid assimétrica e microinterações com GSAP.
SKILL.mdUpdated May 17, 2026
automacoescomerciaisintegradas/deploy-estatico-html-css-js
development
VerifiedTrustedCommunity
Padrao de deploy estatico para projetos HTML/CSS/JS puro, com build local por ambiente (dev/prod), publicacao Git sem Actions e promocao de branch entre ambientes.
SKILL.mdUpdated May 17, 2026
automacoescomerciaisintegradas/whatsapp-button
development
VerifiedTrustedCommunity
nome: Botão WhatsApp Floating descricao: Skill para gerar e integrar botões flutuantes do WhatsApp com design premium, animação de pulso e link direto para chat. autor: Antigravity comandos: comando: /gerar-botao-whatsapp descricao: Gera o código HTML/CSS completo para um botão flutuante personalizável. parametros: - nome: numero tipo: string descricao: Número do WhatsApp com DDI e DDD (ex: 5541992062238). - nome: mensagem tipo: string descricao: Mensagem inicial pré-preench
SKILL.mdUpdated May 16, 2026