前端开发助手

技能简介

该技能提供React、Next.js、TypeScript和Tailwind CSS应用的前端开发模式、性能优化方案及自动化工具，覆盖项目脚手架搭建、组件生成、包体积分析等场景。

业务背景

前端开发助手为Web团队提供标准化工程能力，覆盖React与Next.js技术栈。通过自动化脚手架和组件生成，减少重复配置工作；借助包体积分析与性能检测，提前发现潜在问题。帮助团队统一开发规范，缩短项目启动周期，让工程师更专注于业务逻辑实现。

落地案例：某电商团队需快速搭建营销活动页面，使用本技能输入"nextjs"模板及所需功能特性（表单、接口调用），一键生成含TypeScript、测试用例和Storybook文档的项目结构。开发过程中，技能自动检测出某第三方库导致包体积膨胀，给出轻量替代方案，避免上线后加载性能隐患。

能做什么

• 快速创建配置完善的Next.js或React+Vite项目
• 自动生成带测试和Storybook的TypeScript组件
• 分析依赖包体积并给出优化建议
• 检测React反模式并提供修复方案
• 优化Next.js应用路由与渲染性能

使用说明

1. 安装准备

确保已安装Python 3.8+和Node.js 18+，克隆技能仓库后进入目录：

git clone https://github.com/openclaw/skills.git
cd skills/alirezarezvani/senior-frontend

2. 创建新项目

python scripts/frontend_scaffolder.py my-app --template nextjs
cd my-app && npm install
npm run dev

3. 生成组件

python scripts/component_generator.py Button --dir src/components/ui --with-test

4. 分析包体积

python scripts/bundle_analyzer.py /path/to/project --verbose

输入与输出

见下方输入与输出表格。

风险提示

• 脚手架脚本会修改文件系统，建议先用--dry-run预览
• 包体积分析结果仅供参考，实际打包大小受构建配置影响
• 自动生成的代码需人工审查是否符合业务需求
• Server Components与Client Components类型选择错误可能导致运行时异常

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/alirezarezvani/senior-frontend/SKILL.md
来源类型：GitHub开源技能库