
Pacote de Criação de UI Frontend
Produz uma especificação clara de componente de cartão de preços com orientação para React/Tailwind, validação de acessibilidade e restrições de layout móvel.
Instalar
Execute este comando para instalar todas as habilidades neste plugin:
npx skillstore add @frontend-ui-builder-pack A CLI detecta automaticamente as pastas do Codex e do Claude Code e instala em ambas quando disponíveis.
Visão Geral
Guia de Uso
Aprimorado por IAInício Rápido
- 1Ative o Plugin
Habilite o Frontend UI Builder Pack no seu assistente de IA ou ambiente de desenvolvimento. Certifique-se de que você tenha React e Tailwind CSS instalados no seu projeto.
- 2Descreva Seu Cartão de Preços
Forneça uma descrição clara do cartão de preços que você deseja. Inclua nomes dos níveis, recursos, preços e quaisquer preferências de design.
Example: "3 tiers: Free ($0), Pro ($29) highlighted, Enterprise ($99). Features: users, storage, support. Clean modern style." - 3Revise a Especificação Gerada
O plugin gera uma especificação completa com código React/Tailwind, validação de acessibilidade e restrições móveis. Verifique se há personalizações necessárias.
- 4Implemente o Código
Copie o código React/Tailwind fornecido para o seu projeto. Execute testes de acessibilidade e dispositivos móveis usando a checklist do plugin.
// Example code structure export default function PricingTier({ name, price, features }) { return ( <div className="p-6 border rounded-lg"> <h2>{name}</h2> <p>${price}/mo</p> <ul>{features.map(f => <li key={f}>{f}</li>)}</ul> </div> ); }
Guia Detalhado
# Guia de Uso
## Visão Geral
O plugin Frontend UI Builder Pack transforma suas ideias em uma **especificação de componente de cartão de preços** pronta para produção. Ele gera uma especificação detalhada que inclui:
- **Orientação para React/Tailwind**: Código JSX pronto para uso com classes Tailwind CSS.
- **Validação de acessibilidade**: Verificações de conformidade com WCAG e sugestões de correção.
- **Restrições de layout móvel**: Breakpoints responsivos e interações amigáveis ao toque.
Este plugin é ideal para designers, desenvolvedores frontend ou gerentes de produto que desejam prototipar rapidamente ou finalizar uma seção de preços sem escrever especificações manualmente.
## Como Usar
### Etapa 1: Ative o Plugin
Habilite o Frontend UI Builder Pack no seu assistente de IA ou ambiente de desenvolvimento. O plugin funciona melhor quando você tem uma ideia clara do layout do cartão de preços de que precisa.
### Etapa 2: Descreva Seu Cartão de Preços
Forneça uma descrição em linguagem natural do seu cartão de preços. Inclua detalhes como:
- Número de níveis (por exemplo, Free, Pro, Enterprise)
- Recursos por nível (por exemplo, armazenamento, usuários, suporte)
- Valores de preço e moeda
- Quaisquer preferências visuais (por exemplo, minimalista, colorido, destacar plano recomendado)
**Exemplo de entrada:**
> "Crie um cartão de preços de 3 níveis para um app SaaS: Free ($0/mo) com 10 usuários, Pro ($29/mo) com 100 usuários destacado, e Enterprise ($99/mo) ilimitado. Use um fundo branco limpo com destaque verde para o plano recomendado."
### Etapa 3: Receba a Especificação
O plugin gerará uma especificação estruturada que inclui:
- **Requisitos do Componente**: Uma decomposição do cartão de preços em componentes React (por exemplo, `PricingCard`, `PricingFeatures`, `PricingTier`).
- **Implementação Tailwind**: Código JSX com classes utilitárias para design responsivo (por exemplo, `grid grid-cols-1 md:grid-cols-3`).
- **Relatório de Acessibilidade**: Identifica problemas como rótulos ARIA ausentes, taxas de contraste de cores, suporte à navegação por teclado.
- **Restrições Móveis**: Sugere breakpoints, alvos de toque (mín. 44x44px) e layout de coluna única em telas pequenas.
### Etapa 4: Implemente e Valide
Copie o código React/Tailwind gerado para o seu projeto. O plugin também fornece uma checklist para testes de acessibilidade e dispositivos móveis. Por exemplo:
```jsx
// Example output snippet
export default function PricingCard({ tier }) {
return (
<div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<h3 className="text-xl font-bold text-center">{tier.name}</h3>
<p className="text-3xl text-center">${tier.price}/mo</p>
<ul role="list" className="text-sm text-gray-600">
{tier.features.map((feature, index) => (
<li key={index} className="py-1" aria-label={feature}>{feature}</li>
))}
</ul>
</div>
);
}
```
## Melhores Práticas
- Seja específico na sua descrição para obter uma especificação que corresponda ao seu design system.
- Revise as sugestões de correção de acessibilidade antes de finalizar.
- Teste o layout móvel em dispositivos reais ou emuladores.
- Use a skill **requirement-translator** se sua solicitação inicial for vaga – ela ajudará a esclarecer objetivos e restrições.
## Skills Adicionais
- **requirement-translator**: Refina solicitações ambíguas em especificações estruturadas.
- **frontend-slides**: Não está diretamente relacionada, mas é útil para apresentar níveis de preços em formato de slide.
- **checkpoint**: Salva seu progresso durante sessões longas para evitar perda de trabalho.Habilidades
3requirement-translator
Baixo Risco 77Traduzir solicitações vagas em especificações claras
Solicitações pouco claras atrasam o planejamento e causam retrabalho evitável. Esta skill transforma entradas vagas em especificações estruturadas em chinês nas quais Claude, Codex e Claude Code podem agir.
frontend-slides
Seguro 81Criar Apresentações HTML com Animações
Não designers têm dificuldade em criar apresentações visualmente atraentes. Esta skill gera apresentações HTML de alta qualidade com estilos distintos e animações suaves através de um fluxo de trabalho guiado de exploração visual.
checkpoint
Risco Médio 72Salvar Checkpoints Confiáveis de Trabalho
Sessões longas de codificação com IA podem perder contexto importante quando o trabalho abrange muitas etapas. Esta skill define uma rotina de checkpoint para Claude, Codex e Claude Code usando memory-keeper.
Plugins Semelhantes

Domínio de UI Frontend
Construa interfaces frontend de nível profissional com acessibilidade, componentes reutilizáveis e design responsivo. Cobre conformidade WCAG, arquitetura de componentes e layouts mobile-first.
3 habilidades

Frontend Design Toolkit
Do direcionamento de design ao mockup visual à página inicial — um fluxo de trabalho do design à página
3 habilidades

Frontend Release Gate
Um fluxo de trabalho pré-lançamento para mudanças intensivas em UI que captura fluxos quebrados, regressões de lint/tipo e problemas óbvios de segurança antes do envio.
3 habilidades