用途:该技能面向 React 开发者,讲解如何构建可复用、可访问、文档完善的组件库,覆盖组件 API 设计、变体与组合、Storybook 文档、npm 包发布与维护等环节。
主要能力:设计灵活的组件 API(如 Card 的复合结构优于刚性属性传参);默认实现可访问性,示例中的 Button 使用 type="button" 与 aria-disabled;提供 Button、Input、Modal、Dropdown 等基础组件写法,Modal 含焦点管理与 createPortal,Dropdown 含点击外部关闭与角色属性;介绍 Tabs 等复合组件模式,通过 Context 共享状态;集成 Storybook,命令为 npx storybook@latest init,并给出 Button 的 stories 与 argTypes 用法;展示 TypeScript 接口与 forwardRef 类型支持;说明 npm 发布的 package.json 配置,包括 main、module、types、files 与 peerDependencies;同时提及 Chromatic 与设计令牌,但未展开具体用法。
使用方式:需要 React 基础与组件架构知识,按资料中的组件模式实现组件,使用 Storybook 编写文档与示例,再按给出的 package.json 字段构建发布。资料未提供完整步骤清单与测试工具的具体配置。
适用场景与限制:适合构建 React 组件库、设计系统与可复用 UI。难度为中高级,预计 3-4 周。资料提及测试与 Chromatic,但未给出测试框架、断言或 CI 配置细节;收费、价格与效果等信息暂未提供。