specsfy-specialist-reui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ReUI para interfaces de produto

用于产品界面的ReUI

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.

Specsfy的方案具有倾向性：对于React和Tailwind界面，shadcn/ui提供基础组件，ReUI提供免费的组合组件。这是Promovaweb构建CRUD和产品页面的标准基础。

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.

适用于需要ReUI免费组件的React页面。在Laravel项目中，当前端React基于Inertia、Vite或其他已配置的集成方案时使用。在Next.js、Astro或纯React项目中，需遵循宿主框架定义的路由与水合逻辑。

Fluxo

流程

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.
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.
Leia references/setup.md para preparar o projeto e escolher a variante Base UI ou Radix já usada.
Use references/catalog-free.md para escolher apenas itens gratuitos e compatíveis com a jornada definida. Leia também 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.
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.
Leia a API e exemplos reais do item antes de adaptar dados, ações, estados, rotas e permissões do sistema.
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.
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.
Valide a tela com os testes, typecheck, lint e build do projeto.

阅读
```
INTERFACE.md
```
、技术栈文档、
```
components.json
```
、Tailwind配置、本地基础组件及受影响页面。若
```
INTERFACE.md
```
不存在，需先执行
```
$specsfy-setup
```
再创建界面。
启动注册表前，确认已安装React 19、Tailwind CSS v4和shadcn/ui。搭配
```
$specsfy-specialist-shadcn-ui
```
技能初始化或审核
```
components.json
```
、别名、主题及基础组件。
阅读references/setup.md准备项目，并选择已在使用的Base UI或Radix变体。
使用references/catalog-free.md仅选择符合流程的免费内容。在创建替代组件前，还需阅读references/components-free.md了解所有公开组件系列。对于集成React的Laravel项目，必须阅读references/shadcn-components.md。
通过注册表返回的
```
npx shadcn@latest add
```
命令安装必要的最小组件集，切勿手动复制URL或安装付费内容。
在适配系统的数据、操作、状态、路由及权限前，先阅读组件的API及真实示例。
将界面拆分为React组件：页面负责整合流程；领域组件集中处理网格、表单、筛选器及操作；可复用的基础组件和组合组件放置在项目已定义的目录中。
用创建或修改的每个模块更新
```
INTERFACE.md
```
：文件路径、来源（shadcn/ui或ReUI）、用途、Props与事件、状态、可访问性、消费者及复用或扩展规则。
通过项目的测试、类型检查、代码扫描及构建验证页面。

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.

Registre

@reui

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.

所有基于React和Tailwind的CRUD界面均以ReUI为视觉基础：用Data Grid或List展示数据，Filters实现筛选，Form及ReUI字段用于创建和编辑，Dialog或Sheet处理上下文操作，Alert/Badge展示反馈及状态。当免费目录已满足交互需求时，请勿手动创建替代组件。

在

components.json

中注册

@reui

，地址为

https://reui.io/r/{style}/{name}.json

；前缀为

c-*

的内容为免费项。

保留项目已有的基础组件库：Base UI和Radix的API不同，但其Tailwind样式等效。
仅当页面需要时，添加ReUI的语义化标记（成功、信息、警告、反转及破坏性操作）。
在Laravel项目中，保留服务器端的Form Requests、策略及验证逻辑；ReUI仅用于提升体验，不替代PHP契约。
在Laravel项目中，需先完成Vite、Inertia React、React 19、Tailwind v4和shadcn/ui的配置，再注册ReUI。Blade、Livewire和Vue项目需先完成规范中记录的迁移，才能接入React组件。
使用组合组件处理真实任务，包含真实数据、空状态、加载状态、错误状态、成功状态，并支持键盘操作与焦点管理。
单个路由不应集中实现网格、表单、筛选器、弹窗、侧边栏或可复用卡片等功能。需将每个部分提取为职责清晰、API明确的React组件。
在
```
INTERFACE.md
```
中记录所有使用的ReUI和shadcn/ui免费组件，以及自定义的React模块，包括说明、路径、API、状态、消费者及正确的复用或扩展方式。

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.

使用付费模块、图标或模板；本技能仅支持免费目录，且不会创建
```
REUI_LICENSE_KEY
```
。
为安装某个组件，将已有的Radix基础组件迁移至Base UI，或反之。
复制目录中的演示数据、缺失的导入语句或虚构的API。
将视觉验证等同于授权验证或持久化验证。
未先查阅ReUI免费目录，就自行创建CRUD所需的表格、筛选器、模态框、上传或表单组件。

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.

执行项目检测命令，测试页面的键盘导航、焦点、响应式、主题及状态切换。
确认每个安装的内容均以
```
@reui/c-
```
开头，或为注册表自行安装的公开依赖。
结束前检查
```
components.json
```
、导入语句及新增的标记。