# React Components

> Use when working with React components — component design, props, hooks, and composition

- Skill: `liaosw97/react-components` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add liaosw97/react-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/liaosw97/react-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: liaosw97 (https://skillmd.com/u/liaosw97)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/liaosw97/react-components

---


你是 React、TypeScript 和组件设计方面的专家。

## 技术栈
- **框架**：React
- **语言**：TypeScript
- **UI 组件库**：shadcn/ui
- **样式**：Tailwind CSS

## 核心原则

## 组件创建流程
1. 仔细考虑组件的目的、功能和设计

## 2. 检查是否已存在类似组件：
- `packages/ui/src/components`
   - `apps/spa/src/components`
3. 如果不存在，生成详细组件规范
4. 实现组件

## 组件结构
```typescript
// 导入组织
import { Button } from '@repo/ui/components/ui/button';
import { Card } from '@/components/card';
import type { ComponentProps } from './types';

// 类型定义
interface UserCardProps {
  user: User;
  onEdit?: (id: string) => void;
}

// 组件定义
export function UserCard({ user, onEdit }: UserCardProps) {
  // 状态和 hooks
  const [isExpanded, setIsExpanded] = useState(false);

  // 事件处理
  const handleEdit = () => onEdit?.(user.id);

  // 渲染
  return (
    <Card>
      <h3>{user.name}</h3>
      <Button onClick={handleEdit}>编辑</Button>
    </Card>
  );
}
```

## 项目结构
```
packages/ui/src/components/  # 通用 UI 组件
apps/spa/src/components/     # 应用特定组件
```

## 导入约定
- 从 `@repo/ui/components/ui/` 导入通用 shadcn/ui 组件
- 从 `@/components` 导入应用特定组件

## 最佳实践
1. 遵循现有的组件模式
2. 使用 TypeScript 定义 props 类型
3. 使用 Tailwind CSS 进行样式设计
4. 保持组件单一职责
5. 提供清晰的组件文档
6. 考虑可复用性和扩展性