关于 component-library
面向创建、重构或审查可复用 UI 组件的开发者的规范技能，提供命名、结构、组合方式、性能和无障碍方面的指导。
主要功能
- 01规范文件、属性和 Hook 命名
- 02定义组件结构与组合模式
- 03指导表单和泛型组件模式
- 04提供性能优化建议
- 05涵盖语义化 HTML 与键盘访问
适用场景
- 01创建可复用的 UI 组件
- 02将组件重构为共享模式
- 03审查组件架构
- 04检查组件的无障碍性和性能
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/component-library确认已加载。
附带文件plugin.jsonreferences/full-guide.md
详细介绍
组件库规范技能
适用场景
在以下情况下使用：
- 创建新的 UI 组件
- 重构现有组件以提高可复用性
- 审查组件架构
- 建立共享组件模式
- 优化组件性能
快速参考
命名
- 文件：PascalCase（
Button.tsx） - Props：
ComponentNameProps接口 - Hooks：
use-前缀（use-auth.ts）
结构
'use client'; // Only if needed
// Imports: types → hooks → utils → components
export interface MyComponentProps { ... }
export default function MyComponent({ ... }: MyComponentProps) { ... }
模式
- 优先采用组合，而非配置
- 复杂 UI 使用复合组件
- 表单使用受控组件
- 使用泛型组件确保类型安全
性能
- 纯组件使用
React.memo - 开销较大的操作使用
useMemo/useCallback - 使用
lazy+Suspense进行代码拆分 - 使用
react-window实现虚拟化
无障碍性
- 使用语义化 HTML（
button、nav，而非div） - 为图标添加 ARIA 标签
- 支持键盘导航
- 确保焦点状态清晰可见
参考资料
评论
支持 Markdown