react-component
使用 TypeScript 构建 React 组件
使用 TypeScript 创建 React 函数组件和钩子。本技能提供遵循现代 React 最佳实践的可访问、高性能和可维护 UI 组件构建模式。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "react-component". Create a button component with loading state
Resultado esperado:
- 组件文件：Button.tsx 包含类型化的 props 接口
- 使用 React.memo 进行性能优化
- 处理禁用和加载状态
- 包含适当的 TypeScript 类型
- 测试文件：Button.test.tsx 包含交互测试
- Storybook：Button.stories.tsx 包含变体
A utilizar "react-component". Build a useUserData custom hook
Resultado esperado:
- 钩子文件：useUserData.ts 包含类型化的返回接口
- 包含加载和错误状态
- 使用 useCallback 确保回调函数稳定性
- useEffect 中的清理处理
- 覆盖成功和错误路径的单元测试
A utilizar "react-component". Create a modal dialog component
Resultado esperado:
- Modal.tsx 包含打开/关闭状态管理
- 使用 ARIA 属性和键盘支持的可访问性
- Portal 渲染以实现正确的 z-index 处理
- 点击背景关闭功能
- 打开/关闭过渡动画支持
Auditoria de Segurança
SeguroPure documentation skill containing only markdown guidance and TypeScript code examples. No executable code, network calls, file system access, or environment variable access. All static analyzer findings are false positives: backticks in TypeScript code blocks were misidentified as shell execution, and metadata fields were flagged as file access. This is a legitimate React development guidance skill.
Fatores de risco
🌐 Acesso à rede (5)
📁 Acesso ao sistema de arquivos (1)
⚙️ Comandos externos (27)
Pontuação de qualidade
O Que Você Pode Construir
构建 UI 小部件和 KPI 卡片
为企业应用程序创建可重用的 KPI 卡片、数据表和仪表板小部件
提取可重用的自定义钩子
使用适当的类型定义和错误处理将组件逻辑重构为自定义钩子
构建带验证的表单组件
创建带有 TypeScript、验证和可访问错误状态的表单组件
Tente Estes Prompts
创建一个名为 StudentKPICard 的 React 函数组件，显示学生姓名和出勤率。使用 TypeScript 并包含加载状态。
构建一个名为 useAttendance 的自定义钩子，用于获取学生出勤数据。包含加载状态、错误处理和重新获取函数。
使用组合模式创建一个可重用的 Card 组件。它应该接受标题、children 内容和可选的页脚。使用 TypeScript。
使用 React Hook Form 创建 StudentForm 组件。包含带有必填验证和错误显示的姓名和邮箱字段。
Melhores Práticas
- 始终使用带有显式 TypeScript props 接口的函数组件
- 在 useEffect 中包含清理函数以防止内存泄漏
- 对于频繁接收相同 props 的组件应用 React.memo 和 useCallback
- 确保通过适当的 ARIA 标签和键盘导航支持实现可访问性
Evitar
- 避免使用类组件；应使用带有钩子的函数组件
- 不要使用 any 类型；始终定义明确的 TypeScript 接口
- 避免硬编码文本；使组件准备国际化
- 不要跳过异步操作的错误处理或加载状态
Perguntas Frequentes
此技能支持哪个 React 版本？
此技能是否创建测试文件？
我可以将此与 Next.js 一起使用吗？
数据是否被存储或传输？
这是否适用于 shadcn/ui 组件？
这与通用代码生成相比如何？
Detalhes do Desenvolvedor
Autor
Awais68Licença
MIT
Repositório
https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/react-componentReferência
main
Estrutura de arquivos
📄 SKILL.md