component-library-discovery - SKILL.md Agent Skill

name: component-library-discovery description: Descoberta de componentes UI de bibliotecas externas (badtz-ui, uselayouts, lucide-animated). Tabelas por contexto + perguntas interativas.

Component Library Discovery

Skill para descobrir e selecionar componentes de bibliotecas UI externas compatíveis com shadcn/React projects.

📚 Bibliotecas Suportadas

Biblioteca	Foco	Instalação
badtz-ui	Landing Pages, conversão	`npx shadcn@latest add https://badtz-ui.com/r/<comp>.json`
uselayouts	Micro-interações, animações	`npx shadcn@latest add https://uselayouts.com/r/<comp>`
lucide-animated	Ícones animados (350+)	Copy-paste

🎯 PASSO 1: Tabela por Contexto

Landing Pages (badtz-ui)

Seção	Componente	Comando
Hero	`hero-section`	`npx shadcn@latest add https://badtz-ui.com/r/hero-section.json`
CTA Button	`glowing-button`	`npx shadcn@latest add https://badtz-ui.com/r/glowing-button.json`
Pricing	`pricing-card`	`npx shadcn@latest add https://badtz-ui.com/r/pricing-card.json`
Testimonials	`testimonial-card`	`npx shadcn@latest add https://badtz-ui.com/r/testimonial-card.json`
Features	`feature-card`	`npx shadcn@latest add https://badtz-ui.com/r/feature-card.json`
FAQ	`accordion-faq`	`npx shadcn@latest add https://badtz-ui.com/r/accordion-faq.json`
Footer	`footer-section`	`npx shadcn@latest add https://badtz-ui.com/r/footer-section.json`
Logo Cloud	`logo-cloud`	`npx shadcn@latest add https://badtz-ui.com/r/logo-cloud.json`
Stats	`stats-section`	`npx shadcn@latest add https://badtz-ui.com/r/stats-section.json`

Micro-interações (uselayouts)

Efeito	Componente	Comando
Card 3D	`3d-book`	`npx shadcn@latest add https://uselayouts.com/r/3d-book`
Card Flip	`flip-card`	`npx shadcn@latest add https://uselayouts.com/r/flip-card`
Magnetic Button	`magnetic-button`	`npx shadcn@latest add https://uselayouts.com/r/magnetic-button`
Stagger List	`stagger-list`	`npx shadcn@latest add https://uselayouts.com/r/stagger-list`
Text Reveal	`text-reveal`	`npx shadcn@latest add https://uselayouts.com/r/text-reveal`
Blur Fade	`blur-fade`	`npx shadcn@latest add https://uselayouts.com/r/blur-fade`

Ícones Animados (lucide-animated)

Contexto	Ícones Recomendados
Loading	`loader-pinwheel`, `refresh-cw`, `hourglass`, `loader`
Success	`check`, `check-check`, `circle-check`, `badge-check`
Error	`x`, `circle-x`, `ban`, `alert-triangle`
Notifications	`bell`, `mail-check`, `message-circle`, `inbox`
User Actions	`heart`, `bookmark`, `star`, `thumbs-up`
Navigation	`arrow-right`, `chevron-down`, `menu`, `search`
Media	`play`, `pause`, `volume`, `mic`
Settings	`settings`, `cog`, `sliders-horizontal`

Como usar lucide-animated:

Acesse https://lucide-animated.com/
Pesquise o ícone desejado
Clique no ícone para ver código
Copie e cole no seu componente

🤔 PASSO 2: Perguntas Interativas

Se o usuário não souber qual componente usar, fazer estas perguntas:

## 🔍 Descoberta de Componente

Para recomendar o melhor componente, preciso saber:

1. **Qual é o contexto?**
   - [ ] Landing Page (hero, pricing, testimonials)
   - [ ] Dashboard (cards, charts, stats)
   - [ ] Formulários (inputs, selects, validation)
   - [ ] Navegação (menu, sidebar, tabs)
   - [ ] Feedback (loading, success, error)
   - [ ] Outro: _________

2. **Precisa de animação?**
   - [ ] Sim, animação suave (micro-interações)
   - [ ] Sim, atenção especial (destaque)
   - [ ] Não, estático está ok

3. **É um ícone ou componente completo?**
   - [ ] Ícone
   - [ ] Componente/Seção

Após respostas, retornar:

## 💡 Recomendação

Para **[contexto]** com **[animação]**, recomendo:

| Opção | Biblioteca | Componente | Motivo |
|-------|------------|------------|--------|
| A | [lib] | [comp] | [porque] |
| B | [lib] | [comp] | [alternativa] |

**Comando para instalar opção A:**
\`\`\`bash
npx shadcn@latest add [url]
\`\`\`

🔗 PASSO 3: Catálogos Completos

Se as tabelas acima não tiverem o que o usuário precisa:

📚 Catálogos Completos:

badtz-ui.com/docs - Todos os componentes para LPs

uselayouts.com/docs - Todas as micro-interações

lucide-animated.com - Todos os 350+ ícones animados

🔄 Uso em Workflows

Esta skill pode ser invocada em:

Workflow	Quando
`/new-project`	Phase 5.3 (UI Styling) - PASSO 4.6
`/new-task`	Quando adicionar componentes UI
`/legacy-project`	Ao modernizar UI existente
`/ui-ux-pro-max`	Após gerar Design System

Invocação:

> [!TIP]
> **Skill:** `component-library-discovery`
> Consultar para encontrar componentes premium de bibliotecas externas.

⚠️ Pré-requisitos

shadcn/ui inicializado - As bibliotecas usam o registry do shadcn
Tailwind CSS - Todas dependem de Tailwind
React 18+ - Compatibilidade com hooks modernos
Framer Motion (para uselayouts) - Instalar se usar micro-interações:
```
npm install framer-motion
```