automacoescomerciaisintegradas/aci-design-system
aci-design-system/SKILL.md
Aplica, ajusta e padroniza o design system da ACI em arquivos HTML, CSS e JS de qualquer projeto. Use SEMPRE que o usuário mencionar "design system", "ajustar cores", "aplicar variáveis CSS", "padronizar estilos", "atualizar tema", "refatorar CSS", "aplicar identidade visual", ou quando colar arquivos HTML/CSS pedindo ajustes visuais. A skill conhece o design system completo da ACI (cores, tipografia, gradientes, superfícies) e sabe aplicá-lo de forma consistente em qualquer arquivo do projeto.
development
Updated May 15, 2026
$ install --global
skillsauthnpx skillsauth add automacoescomerciaisintegradas/skills aci-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 15, 2026, 3:40 AM42.0s2 files scanned
SKILL.md
- name:
- aci-design-system
- description:
- >
- version:
- 1.0.0
- author:
- Automações Comerciais Integradas
ACI Design System — Aplicador Automático
Lê arquivos HTML/CSS/JS de um projeto e aplica o design system oficial da ACI, substituindo valores hardcoded por variáveis CSS e garantindo consistência visual.
Design System da ACI
Variáveis CSS — colar no :root de todo projeto
:root {
/* === BACKGROUNDS === */
--bg-darkest: #02030a;
--bg-dark: #05070c;
--bg-space: #1a0f1f;
--bg-card: rgba(15, 22, 41, 0.75);
--bg-card-hover: rgba(20, 30, 55, 0.85);
/* === SURFACES === */
--surface-glass: rgba(255, 255, 255, 0.05);
--surface-border: rgba(91, 124, 255, 0.2);
--surface-border-hover: rgba(91, 124, 255, 0.4);
/* === TEXT === */
--text-primary: #e5e7eb;
--text-secondary: #9ca3af;
--text-muted: #6b7280;
--text-accent: #5B7CFF;
--text-brand: #ef4444;
/* === GRADIENTS === */
--gradient-bg: radial-gradient(1200px circle at 10% 10%, #1a0f1f 0%, #05070c 40%, #02030a 100%);
--gradient-avatar: linear-gradient(135deg, #5B7CFF, #8B5CF6);
--gradient-cta: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
--gradient-nordeste: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #ef4444 100%);
--gradient-card: linear-gradient(135deg, rgba(91, 124, 255, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
/* === TYPOGRAPHY === */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Outfit', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* === TYPE SCALE === */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;
--text-5xl: 48px;
/* === SPACING === */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
/* === BORDERS === */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* === SHADOWS === */
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 30px rgba(91, 124, 255, 0.15);
--shadow-cta: 0 4px 20px rgba(239, 68, 68, 0.3);
}
Google Fonts — importar no <head> de todo arquivo HTML
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
Background padrão — aplicar no body
body {
background: var(--bg-dark);
background-image: var(--gradient-bg);
background-attachment: fixed;
color: var(--text-primary);
font-family: var(--font-primary);
font-size: var(--text-base);
line-height: 1.6;
min-height: 100vh;
}
Fluxo de aplicação ao receber arquivos
- Receber os arquivos — o usuário cola ou envia HTML/CSS/JS
- Auditar — listar todos os valores hardcoded que deveriam ser variáveis
- Confirmar — mostrar o resumo das substituições antes de aplicar
- Aplicar — reescrever os arquivos com as variáveis corretas
- Garantir o
:root— verificar se o bloco de variáveis está presente; adicionar se faltar - Garantir as fontes — verificar se o
<link>do Google Fonts está no<head> - Entregar — devolver os arquivos corrigidos prontos para uso
checklist de conformidade — aplicar em todo arquivo
- [ ]
:rootcom todas as variáveis CSS presente - [ ]
<link>do Google Fonts no<head>(Outfit + Inter + JetBrains Mono) - [ ]
bodyusandovar(--bg-dark)evar(--gradient-bg) - [ ] Nenhum valor de cor hardcoded que tenha variável equivalente
- [ ] Cards usando
.cardouvar(--bg-card)+var(--surface-border) - [ ] Fontes referenciadas via
var(--font-primary)/var(--font-display)/var(--font-mono) - [ ] Tamanhos de texto via
var(--text-*)onde aplicável - [ ] Botões primários usando
var(--gradient-cta)ou classe.btn-cta - [ ] Textos de destaque usando
var(--text-accent)(#5B7CFF)
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