frontend-mobile-development-component-scaffold

React 组件脚手架技能

技能概述

自动化生成生产级、可访问且高性能的 React 和 React Native 组件，内置 TypeScript 类型定义、测试代码、样式配置和 Storybook 文档。

适用场景

1. 项目初始化和组件快速创建

在项目启动阶段或开发新功能时，需要快速创建规范一致的组件结构。该技能能自动生成包含完整类型定义、样式和测试的组件代码，大幅提升开发效率，确保团队代码风格统一。

2. React 和 React Native 跨平台开发

需要同时为 Web 和移动端开发组件时，技能可以识别平台差异并生成对应的组件模板。支持 React Native 原生组件、StyleSheet 样式以及移动端可访问性配置。

3. 规范化组件开发流程

适用于需要严格代码规范和测试覆盖的团队项目。生成的组件包含完整的测试套件（支持 @testing-library/react 和 axe 可访问性测试）、Storybook 文档以及类型安全检查，帮助建立标准化的组件开发工作流。

核心功能

1. 智能组件分析与生成

解析用户需求，自动推断组件类型、Props 定义、状态管理和所需 Hooks。支持功能性组件、页面组件、布局组件、表单组件和数据展示组件等多种类型，生成符合现代 React 最佳实践的代码。

2. 多样式方案支持

灵活支持 CSS Modules、Styled Components 和 Tailwind CSS 三种主流样式方案。根据选择自动生成对应的样式文件或配置，确保样式与组件逻辑的清晰分离。

3. 完整配套文件生成

一键生成组件所需的全部配套文件：TypeScript 类型接口、单元测试（含可访问性测试）、Storybook 文档以及导出索引文件，开箱即用，直接投入生产环境。

常见问题

React 组件脚手架是什么？

这是一个自动化工具，通过分析你的组件需求，自动生成符合最佳实践的 React 或 React Native 组件代码。它会创建完整的文件结构，包括组件主体、类型定义、样式、测试和文档，让你跳过重复的样板代码编写，专注于业务逻辑实现。

生成的组件支持哪些样式方案？

技能支持三种主流样式方案：CSS Modules（适合需要局部作用域样式的项目）、Styled Components（适合主题化和动态样式的场景）以及 Tailwind CSS（适合快速开发和设计系统一致性的项目）。你可以在生成时选择符合项目需求的方案。

生成的组件可以直接用于生产环境吗？

可以。生成的组件遵循现代 React 最佳实践，包含完整的 TypeScript 类型定义、可访问性支持（ARIA 属性和语义化 HTML）、单元测试以及 Storybook 文档。代码结构清晰、易于维护，可以直接集成到生产级项目中。不过建议根据具体业务需求调整默认实现逻辑。