automacoescomerciaisintegradas/ckm:ui-styling
skills/ckm-ui-styling/SKILL.md
UI builder: shadcn/ui (Radix), Tailwind CSS, Canvas design. Actions: build UIs, forms, tables, responsive layouts, dark mode, design systems.
development
Updated May 16, 2026
$ install --global
skillsauthnpx skillsauth add automacoescomerciaisintegradas/skills ckm:ui-stylingInstall 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:35 AM254.1s44 files scanned
SKILL.md
- name:
- ckm:ui-styling
- description:
- UI builder: shadcn/ui (Radix), Tailwind CSS, Canvas design. Actions: build UIs, forms, tables, responsive layouts, dark mode, design systems.
UI Styling
Build accessible, beautiful UIs with shadcn/ui + Tailwind.
Setup & Commands
- Initialize:
npx shadcn@latest init - Add Components:
npx shadcn@latest add [comps...](button, card, dialog, form, etc.) - Tailwind (Vite):
npm i -D tailwindcss @tailwindcss/vite+ config plugin. - Automation:
python scripts/shadcn_add.py [comps...];python scripts/tailwind_config_gen.py.
Core Logic
- shadcn/ui: Copy-paste accessible primitives (Radix UI). TypeScript-first.
- Tailwind: Utility-first, mobile-first, build-time CSS.
- Canvas: High-impact visual compositions, minimal text, systematic aesthetics.
Rules
- A11y: Use Radix primitives, focus states, semantic HTML, ARIA roles.
- Responsive: Mobile-first breakpoints (
sm,md,lg,xl). Container queries. - Theming: next-themes for dark mode. Use CSS variables for design tokens.
- Composition: Small primitives -> Complex UIs. Extract only for true DRY.
- Perf: Zero runtime overhead. Avoid dynamic class name interpolation.
Reference Navigation
- Components:
shadcn-components.md,shadcn-theming.md,shadcn-accessibility.md. - Styling:
tailwind-utilities.md,tailwind-responsive.md,tailwind-customization.md. - Design:
canvas-design-system.md(Philosophy/Workflow).
Docs
- shadcn/ui | Tailwind | Radix | v0
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