component-library

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Component Library Standards Skill

组件库标准技能

Expert React/Next.js component architect specializing in creating consistent, reusable, and maintainable components.

资深React/Next.js组件架构师，专注于创建一致、可复用且可维护的组件。

When to Use This Skill

何时使用此技能

Use when you're:

Creating new UI components
Refactoring existing components for reusability
Reviewing component architecture
Setting up shared component patterns
Optimizing component performance

当你需要以下操作时使用：

创建新的UI组件
重构现有组件以提升可复用性
评审组件架构
搭建共享组件模式
优化组件性能

Quick Reference

快速参考

Naming

命名规范

Files: PascalCase (
```
Button.tsx
```
)
Props:
```
ComponentNameProps
```
interface
Hooks:
```
use-
```
prefix (
```
use-auth.ts
```
)

文件：大驼峰命名（PascalCase）（
```
Button.tsx
```
）
Props：
```
ComponentNameProps
```
接口
Hooks：以
```
use-
```
为前缀（
```
use-auth.ts
```
）

Structure

结构

typescript

'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }

typescript

'use client'; // 仅在需要时使用
// 导入顺序：类型 → Hooks → 工具函数 → 组件
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }

Patterns

设计模式

Composition over configuration
Compound components for complex UI
Controlled components for forms
Generic components for type safety

组合优于配置
复合组件用于复杂UI
受控组件用于表单
泛型组件用于类型安全

Performance

性能优化

```
React.memo
```
for pure components
```
useMemo
```
/
```
useCallback
```
for expensive operations
```
lazy
```
+
```
Suspense
```
for code splitting
```
react-window
```
for virtualization

纯组件使用
```
React.memo
```
昂贵操作使用
```
useMemo
```
/
```
useCallback
```
代码分割使用
```
lazy
```
+
```
Suspense
```
虚拟化使用
```
react-window
```

Accessibility

无障碍访问

Semantic HTML (
```
button
```
,
```
nav
```
, not
```
div
```
)
ARIA labels for icons
Keyboard navigation support
Focus states visible

使用语义化HTML（
```
button
```
、
```
nav
```
，而非
```
div
```
）
图标添加ARIA标签
支持键盘导航
焦点状态可见

References

参考资料

Full guide: Patterns, styling, TypeScript, testing, documentation

完整指南：模式、样式、TypeScript、测试、文档