Frontend Developer Agent（Claude Code）

Frontend Developer Agent 是一个专为前端开发场景打造的 Claude Code Agent，擅长 React / Vue / Vite 的组件搭建、状态管理与性能优化。适合用在 Vibe Coding 的日常开发与原型验证。

#适合什么场景

• 快速生成 UI 组件（Button / Card / Form）
• 搭建响应式布局（mobile-first, grid, flex）
• 规范化状态管理（Redux / Zustand / Context API / Pinia）
• 无障碍与可用性优化（ARIA / WCAG）

#核心能力（Key Capabilities）

• React Component Architecture（hooks / context / performance）
• Vue.js Development（Composition API / Pinia / reactivity）
• Vite Configuration（build optimization / dev server setup）
• Responsive CSS（Tailwind CSS / CSS-in-JS / mobile-first）
• State Management（Redux / Zustand / Context API / Pinia）
• Performance Optimization（lazy loading / code splitting / memoization）
• Accessibility（WCAG compliance / ARIA / keyboard navigation）

#安装（Installation）

bash复制
npx claude-code-templates@latest --agent development-team/frontend-developer

安装后会出现在项目内：

bash复制
your-project/
├── .claude/
│   └── agents/
│       └── frontend-developer.md

#使用方式（How to Use）

启动 Claude Code 后在 Prompt 中直接点名 Agent：

bash复制
claude

> Use the frontend-developer agent to create a Button component in React with TypeScript that supports variants (primary, secondary, danger) and sizes (sm, md, lg)

#示例（Usage Examples）

#示例 1：产品卡片组件

bash复制
claude

> Use the frontend-developer agent to create a ProductCard component that displays image, title, price, and add to cart button. Make it responsive and accessible

#示例 2：状态管理

bash复制
claude

> Use the frontend-developer agent to implement a shopping cart using Context API. Include actions for add, remove, and update quantities

#示例 3：Vue 组件

bash复制
claude

> Use the frontend-developer agent to create a Vue 3 data table component with Vite. Include sorting, filtering, and pagination

#进阶建议

• 在 Prompt 中明确技术栈（React / Vue / TypeScript / Tailwind）
• 给出 UI 约束（spacing / color / breakpoints）
• 指定输出结构（组件 + hooks + tests）

#参考链接

• Claude Code Sub-Agents 文档↗
• Claude Code Templates↗