# Specsfy Specialist Reui > Criar interfaces React e Tailwind CSS com os componentes gratuitos do ReUI. Use em projetos com React, Tailwind CSS e shadcn/ui, incluindo Laravel com Inertia; não use itens premium nem introduza ReUI sem confirmar a stack. - Skill: `promovaweb/specsfy-specialist-reui` (Agent Skill, multi-file: 7 files) - Install (CLI): `npx skillmds@latest add promovaweb/specsfy-specialist-reui` - Raw SKILL.md: https://api.skillmd.com/api/skills/promovaweb/specsfy-specialist-reui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: promovaweb (https://skillmd.com/u/promovaweb) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/promovaweb/specsfy-specialist-reui --- # ReUI para interfaces de produto O Specsfy é opinativo: para interfaces React e Tailwind, shadcn/ui fornece as primitives e o ReUI fornece as composições gratuitas. Esta é a base padrão da Promovaweb para CRUDs e telas de produto. ## Quando usar Use para telas React que precisam de componentes ReUI gratuitos. Em Laravel, use quando o frontend React estiver em Inertia, Vite ou outra integração já configurada. Em Next.js, Astro ou React puro, mantenha o roteamento e a hidratação definidos pelo framework hospedeiro. ## Fluxo 1. Leia `INTERFACE.md`, stack, `components.json`, Tailwind, primitives locais e telas afetadas. Quando `INTERFACE.md` não existir, execute `$specsfy-setup` antes de criar interface. 2. Confirme React 19, Tailwind CSS v4 e shadcn/ui antes de iniciar o registry. Carregue `$specsfy-specialist-shadcn-ui` junto desta skill para inicializar ou auditar `components.json`, aliases, tema e primitives. 3. Leia [references/setup.md](references/setup.md) para preparar o projeto e escolher a variante Base UI ou Radix já usada. 4. Use [references/catalog-free.md](references/catalog-free.md) para escolher apenas itens gratuitos e compatíveis com a jornada definida. Leia também [references/components-free.md](references/components-free.md) para percorrer todas as famílias públicas antes de criar uma alternativa. Para Laravel com React, leia obrigatoriamente [references/shadcn-components.md](references/shadcn-components.md). 5. Instale o menor conjunto necessário pelo comando `npx shadcn@latest add` retornado pelo registry, nunca por cópia manual de URLs ou itens premium. 6. Leia a API e exemplos reais do item antes de adaptar dados, ações, estados, rotas e permissões do sistema. 7. Divida a interface em componentes React: a página compõe o fluxo; o domínio concentra grade, formulário, filtros e ações; primitives e composições reutilizáveis ficam nos diretórios já definidos pelo projeto. 8. Atualize `INTERFACE.md` com cada bloco criado ou alterado: arquivo, origem shadcn/ui ou ReUI, finalidade, props e eventos, estados, acessibilidade, consumidores e regra de reaproveitamento ou extensão. 9. Valide a tela com os testes, typecheck, lint e build do projeto. ## Padrões - Todo CRUD com interface React e Tailwind usa ReUI como base visual: Data Grid ou List para consulta, Filters para recorte, Form e campos ReUI para criação e edição, Dialog ou Sheet para ações contextuais e Alert/Badge para retorno e status. Não crie uma alternativa manual quando o catálogo gratuito já atender a interação. - Em listas com detalhe, o Data Grid torna a linha inteira clicável e acessível por teclado. Botões, checkboxes e menus internos ficam em uma camada de ação própria, como `TableRowAction`, para não abrir o detalhe por engano. - Em criar e editar, use Form em seções: contexto à esquerda e painel de campos à direita, com duas colunas nos breakpoints largos e uma no mobile. - Toda tela tem `Breadcrumb` com o nome da equipe ativa, o módulo e o título atual. Em Laravel, reutilize o `Breadcrumb` ou `Breadcrumbs` já existente no layout e a tipagem usada pelas rotas. - Registre `@reui` em `components.json` com `https://reui.io/r/{style}/{name}.json`; itens `c-*` são gratuitos. - Preserve a biblioteca de primitives já presente: Base UI e Radix têm APIs diferentes, embora o estilo Tailwind seja equivalente. - Adicione os tokens semânticos ReUI de sucesso, informação, aviso, inversão e ações destrutivas somente quando a tela os usar. - Em Laravel, mantenha Form Requests, policies e validação no servidor; ReUI melhora a experiência, não substitui os contratos PHP. - Em Laravel, complete Vite, Inertia React, React 19, Tailwind v4 e shadcn/ui antes do registry ReUI. Blade, Livewire e Vue exigem uma migração registrada na spec antes de receber componentes React. - Use componentes compostos para a tarefa real, com dados reais, estados vazio, carregando, erro, sucesso, teclado e foco. - Uma rota não concentra a implementação de grade, formulário, filtros, diálogo, painel lateral ou cartão reutilizável. Extraia cada parte para um componente React com responsabilidade e API claras. - Registre em `INTERFACE.md` todos os componentes gratuitos usados de ReUI e shadcn/ui, além de cada bloco React próprio, com explicação, caminho, API, estados, consumidores e forma correta de reutilização ou extensão. ## Antipadrões - Usar blocos, ícones ou templates premium; esta skill trabalha apenas com o catálogo gratuito e não cria `REUI_LICENSE_KEY`. - Migrar primitives existentes de Radix para Base UI, ou o contrário, para instalar um componente. - Copiar dados demonstrativos, imports ausentes ou APIs inventadas do catálogo. - Tratar validação visual como validação de autorização ou persistência. - Criar tabelas, filtros, modais, upload ou formulários CRUD próprios sem consultar primeiro o catálogo gratuito ReUI. ## Validação - Execute os comandos detectados do projeto e teste a navegação por teclado, foco, responsividade, tema e estados da tela. - Confirme que cada item instalado começa com `@reui/c-` ou é dependência pública instalada pelo próprio registry. - Verifique `components.json`, imports e tokens adicionados antes de encerrar. ## Skills relacionadas - `$specsfy-specialist-react` governa estado e testes React. - `$specsfy-specialist-tailwind-css` governa tokens e utilitários Tailwind. - `$specsfy-specialist-shadcn-ui` governa primitives e `components.json`. - `$specsfy-specialist-laravel` governa backend, Inertia, autorização e testes Laravel. - `$specsfy-specialist-ui-design` e `$specsfy-specialist-ux-design` definem a experiência antes da escolha de componentes. Leia [references/standards.md](references/standards.md) para fontes oficiais, tokens e comandos, e as referências de setup e catálogo quando aplicar ReUI.