Pacote de Criação de UI Frontend
Curado

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.

3 habilidades 0 instalacoes
frontenduicomponents
Atualizado hoje

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 IA

Início Rápido

  1. 1
    Ative 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.

  2. 2
    Descreva 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."
  3. 3
    Revise 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.

  4. 4
    Implemente 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

3