specsfy-specialist-react-ui-components

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Componentes React de interface

React界面组件

Quando usar

使用场景

Acionar quando uma interface React precisar ser criada a partir dos 231 exemplos TSX versionados em
```
assets/components/
```
.
Acionar para comparar variantes de navegação, formulário, dados, feedback, marketing ou tipografia sem introduzir uma biblioteca de runtime.
Não acionar para corrigir estado, effects ou concorrência sem trabalho visual; usar
```
$specsfy-specialist-react
```
.
Usar sempre com
```
$specsfy-specialist-ui-design
```
, que decide hierarquia, composição e densidade antes da escolha do asset.

当需要基于
```
assets/components/
```
目录下的231个版本化TSX示例创建React界面时启用。
用于对比导航、表单、数据、反馈、营销或排版组件的不同变体，且无需引入运行时库时启用。
若仅需修复状态、effects或并发逻辑而无视觉层面的工作，请勿启用此技能；请使用
```
$specsfy-specialist-react
```
。
需始终与
```
$specsfy-specialist-ui-design
```
配合使用，该技能会在选择资源前确定层级、组合方式及密度。

Fluxo

流程

Anunciar o uso conjunto e carregar
```
$specsfy-specialist-ui-design
```
antes de escolher uma referência.
Inspecionar versão do React, framework, Tailwind, design system, componentes locais, ícones e estratégia de testes do projeto consumidor. Se houver shadcn/ui, confirmar com
```
$specsfy-specialist-shadcn-ui
```
a base de primitives de cada componente antes de adaptar o asset.
Confirmar com UX e UI a tarefa principal, telas, fluxo de informação, formulário, padrão de abertura, hierarquia, composição, densidade, estados e breakpoints. O catálogo não escolhe esses pontos.
Escolher a família em references/catalog.md e listar somente os assets candidatos em
```
assets/components/<familia>/
```
.
Ler a menor quantidade de arquivos TSX capaz de comparar variantes.
Adaptar a referência aos tokens, componentes, rotas, dados e convenções observados; não substituir a arquitetura local pela estrutura do exemplo.
Implementar todos os estados relevantes e validar comportamento, aparência, responsividade e acessibilidade.

Para páginas completas, ler references/composition-map.md. Para conduzir uma escolha incremental, ler references/conversation-flow.md.

说明需配合使用的技能，并在选择参考示例前加载
```
$specsfy-specialist-ui-design
```
。
检查目标项目的React版本、框架、Tailwind版本、设计系统、本地组件、图标及测试策略。若项目使用shadcn/ui，需先与
```
$specsfy-specialist-shadcn-ui
```
确认每个组件的primitive基础，再对资源进行适配。
与UX和UI团队确认核心任务、页面、信息流、表单、弹窗规则、层级、组合方式、密度、状态及断点。组件目录不负责决定这些内容。
在references/catalog.md中选择组件类别，仅列出
```
assets/components/<familia>/
```
目录下的候选组件资源。
读取最少数量的TSX文件以对比不同变体。
根据项目中的tokens、组件、路由、数据及约定适配参考示例；请勿用示例结构替换本地架构。
实现所有相关状态，并验证组件的行为、外观、响应式及可访问性。

如需完整页面方案，请阅读references/composition-map.md。如需逐步选择组件，请阅读references/conversation-flow.md。

Padrões

规范

Tratar os arquivos em
```
assets/
```
como referências copiáveis, nunca como pacote ou dependência de runtime.
Preservar semântica, teclado, foco,
```
aria-*
```
,
```
sr-only
```
,
```
alt
```
, dark mode e breakpoints úteis ao adaptar.
Preferir tokens, primitives,
```
Link
```
, imagens e componentes já publicados no projeto consumidor.
Substituir dados mockados, URLs externas,
```
href="#"
```
e copy de demonstração.
Confirmar dependências explícitas do asset, como Headless UI ou Heroicons, antes de usá-las; não instalar pacotes sem autorização.
Manter a composição definida por
```
$specsfy-specialist-ui-design
```
; a disponibilidade de um exemplo não justifica adicionar uma seção.
Combinar com
```
$specsfy-specialist-react
```
para ownership de estado, effects, concorrência ou testes React e com
```
$specsfy-specialist-web-accessibility
```
para auditoria aprofundada.

将
```
assets/
```
目录下的文件视为可复制的参考示例，而非运行时包或依赖。
适配时保留语义化、键盘导航、焦点管理、
```
aria-*
```
、
```
sr-only
```
、
```
alt
```
属性、暗黑模式及实用断点。
优先使用目标项目中已发布的tokens、primitives、
```
Link
```
、图片及组件。
替换模拟数据、外部URL、
```
href="#"
```
及演示文案。
使用资源前需确认其明确依赖，如Headless UI或Heroicons；未经授权请勿安装包。
遵循
```
$specsfy-specialist-ui-design
```
定义的组合方式；示例的可用性不能作为新增页面区块的理由。
如需处理状态所有权、effects、并发或React测试，请与
```
$specsfy-specialist-react
```
配合；如需深度可访问性审计，请与
```
$specsfy-specialist-web-accessibility
```
配合。

Antipadrões

反模式

Copiar uma página inteira e manter dados mockados, imports inexistentes ou links
```
#
```
; o exemplo deixa de ser referência e vira dívida acoplada.
Escolher um asset pela aparência antes de definir tarefa e hierarquia; isso faz o catálogo dirigir o produto em vez de servir à intenção da tela.
Instalar todas as dependências citadas por um exemplo sem mapear os primitives locais; cria duas fontes concorrentes de componentes e tokens.
Transformar componentes estáticos em Client Components por conveniência; aumenta JavaScript enviado e mistura apresentação com estado sem necessidade.

复制整页示例并保留模拟数据、不存在的导入或
```
#
```
链接；此时示例不再是参考，而是耦合性技术债务。
在确定任务和层级前仅根据外观选择资源；这会导致组件目录主导产品方向，而非服务于页面设计意图。
不映射本地primitives就安装示例中提到的所有依赖；会造成组件和tokens的双重来源冲突。
为方便起见将静态组件转为Client Components；会增加JavaScript体积，且无必要地混淆展示层与状态逻辑。

Validação

验证环节

Executar os testes, lint e typecheck já definidos pelo projeto consumidor.
Exercitar estados nominal, loading, empty, error, disabled e permission denied quando forem relevantes.
Verificar mobile e desktop, zoom, overflow, conteúdo curto/longo, teclado, foco, contraste e reduced motion.
Confirmar que imports e assets externos existem e que nenhum pacote foi introduzido implicitamente.
Revisar a interface final com references/interface-quality-checklist.md e com
```
$specsfy-specialist-ui-design
```
.
Não declarar a interface integrada sem demonstrar interação por teclado, estados adversos e ausência de overflow nos breakpoints suportados.

运行目标项目已定义的测试、lint及类型检查。
测试相关的常规状态、加载状态、空状态、错误状态、禁用状态及无权限状态。
检查移动端和桌面端显示、缩放、溢出、长短内容、键盘导航、焦点、对比度及减少动画模式。
确认外部导入和资源存在，且未隐式引入任何包。
使用references/interface-quality-checklist.md及
```
$specsfy-specialist-ui-design
```
审核最终界面。
若未演示键盘交互、异常状态及各断点下无溢出情况，请勿宣布界面已集成完成。

Skills relacionadas

相关技能

```
$specsfy-specialist-shadcn-ui
```
identifica a base de primitives e fornece componentes adaptáveis; esta skill fornece composições TSX copiáveis, não uma dependência runtime.
```
$specsfy-specialist-ui-design
```
governa composição, hierarquia, densidade e coerência visual; esta skill fornece material React adaptável.
```
$specsfy-specialist-react
```
governa ownership de estado, effects, concorrência e testes de comportamento.
```
$specsfy-specialist-tailwind-css
```
governa tokens e utilitários usados na adaptação visual.
```
$specsfy-specialist-web-accessibility
```
conduz auditoria WCAG e testes com tecnologia assistiva além da checagem básica da interface.
```
$specsfy-specialist-nextjs
```
ou
```
$specsfy-specialist-astro
```
governa a fronteira server/client e o roteamento do framework hospedeiro.

Leia references/standards.md para regras de seleção, adaptação, estado, dependências e comprovação, e carregue os demais arquivos de

references/

somente no passo do Fluxo que os solicita.

```
$specsfy-specialist-shadcn-ui
```
负责识别primitive基础并提供可适配组件；本技能提供可复制的TSX组合方案，而非运行时依赖。
```
$specsfy-specialist-ui-design
```
管控组合方式、层级、密度及视觉一致性；本技能提供可适配的React素材。
```
$specsfy-specialist-react
```
管控状态所有权、effects、并发及行为测试。
```
$specsfy-specialist-tailwind-css
```
管控视觉适配中使用的tokens及工具类。
```
$specsfy-specialist-web-accessibility
```
负责WCAG审计及辅助技术测试，超出基础界面检查范围。
```
$specsfy-specialist-nextjs
```
或
```
$specsfy-specialist-astro
```
管控宿主框架的服务端/客户端边界及路由。

请阅读references/standards.md了解选择、适配、状态、依赖及验证规则，仅在流程步骤要求时加载

references/

目录下的其他文件。