Build Frontend Apps Faster — 现代前端应用开发技能

技能简介

davila7/senior-frontend 是面向现代前端工程师的全流程开发技能，特别针对 React 与 Next.js 项目。它为 Claude、Codex、Claude Code 等 AI 编程代理提供组件设计、性能审计、bundle 分析、项目脚手架等经过验证的最佳实践与本地辅助脚本。无论是规划一个新组件、审查既有页面，还是为团队建立统一的前端基线，该技能都能帮助前端团队快速产出符合生产标准、关注可维护性与 Core Web Vitals 的高质量代码。

核心能力

• 引导 React 与 Next.js 功能开发，覆盖 props 设计、状态管理、文件结构与项目规范。
• 提供组件生成工作流指引，支持可复用 UI 组件的设计与实现。
• 通过本地 Python 辅助脚本支持 bundle 分析流程，识别体积瓶颈。
• 文档化前端性能、安全、可维护性等核心实践要点。
• 涵盖设置、质量检查、故障排查与命令参考等完整章节，便于快速定位信息。
• 给出 Core Web Vitals、缓存策略、加载行为等关键性能维度的评审维度。

安装配置

1. 通过 npx 命令一键安装：npx skillstore add davila7/senior-frontend。
2. 启用后，AI 助手在处理前端项目时即可自动调用相应能力。
3. 项目需具备 Node.js ≥18、React ≥18、Next.js ≥14（可选）等现代前端栈。
4. 可选：本地启用 Python ≥3.9 以运行 bundle 分析等辅助脚本。

使用步骤

1. 明确目标：告诉 AI 助手具体要处理的组件、路由或性能问题，避免宽泛请求。
2. 设计组件结构：规划 props、状态、边界情况、可访问性要求与单元测试覆盖。
3. 代码实现：依据团队规范生成组件代码，关注可维护性与命名一致性。
4. 性能审查：使用 bundle 分析脚本审查产物体积，检查渲染成本、缓存策略与首屏加载行为。
5. 质量验证：运行项目 lint、单元测试与浏览器烟雾测试，确认改动无回归。
6. 沉淀基线：将验证有效的实践沉淀为团队脚手架，供后续新项目复用。

适用场景

• 设计并实现可复用的 React 组件，统一团队 UI 风格。
• 审查既有 Next.js 页面的可维护性、加载行为与用户体验问题。
• 为新前端项目搭建标准化的脚手架与目录结构。
• 排查首屏加载慢、Lighthouse 评分下降等性能瓶颈。
• 在团队内推广 React / Next.js 最佳实践与编码规范。

适用人群

• 中大型前端团队的 React / Next.js 工程师。
• 关注 Core Web Vitals 与用户体验的前端架构师。
• 需要为客户快速搭建高质量前端原型的全栈工程师。
• 正在为团队建立前端工程规范的 Tech Lead。
• 学习现代前端工程化、希望系统掌握 React 模式的新人。

工作原理

该技能内置 React / Next.js 主流设计模式、性能优化策略与项目工程化要点，AI 助手在生成建议时会依据用户给定的具体文件、组件或路由给出聚焦方案。技能自带的 Python 辅助脚本只读取本地构建产物并输出报告，不发起任何外部网络请求，所有改动需用户显式确认。技能强调"小步快跑"——拒绝大范围重写，优先解决影响最大的瓶颈，从而最大化工程效率。

官方链接

• Skillstore 主页：https://skillstore.io/skills/davila7-senior-frontend
• 仓库地址：https://github.com/davila7/claude-code-templates/tree/main/cli-tool/components/skills/development/senior-frontend
• Manifest 接口：https://skillstore.io/api/skills/davila7-senior-frontend/manifest