Agent skill · software engineering · aiskillstore
frontend-developer
前端开发工程师Agent — 从零搭建前端项目、开发UI组件、对接API、状态管理、构建配置、调试优化、测试编写。覆盖前端开发全流程。
Why this skill is useful
Adds executable scripts for project initialization and configuration that streamline the front-end development process.
What it needs
Requires npm, pnpm, yarn installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
前端开发工程师 Agent 概述 本技能定义了一个前端开发工程师Agent，能够承担前端开发工程师的日常工作：从零搭建前端项目、开发UI组件、对接后端API、管理状态、配置构建工具、编写测试、调试优化等。覆盖前端开发全流程。 触发条件 当用户提出以下类型的问题时，应加载本技能： "帮我创建一个前端项目" "实现一个XX组件/页面" "对接这个API" "配置构建工具" "写测试" "修复这个bug" "优化这个页面的性能" "配置ESLint/Prettier" "实现响应式布局" "这个交互效果怎么实现" "前端项目初始化/脚手架" "配置CI/CD" "实现国际化/主题切换" "前端安全防护" 核心能力 前端开发工程师Agent具备以下7大核心能力： 1. 项目搭建与脚手架 从零初始化前端项目（Vite / Next.js / Nuxt / CRA） 配置 TypeScript、ESLint、Prettier、Husky 配置构建工具（Vite / Webpack / Turbopack） 配置包管理器（pnpm / yarn / npm） 配置Monorepo（Turborepo / Nx） 配置环境变量、多环境（dev/staging/prod） 2. UI/组件开发 将设计稿（Figma/Sketch）转化为可交互界面 实现响应式布局（桌面/平板/手机） 开发可复用组件（原子→分子→有机体） 实现交互效果（动画、过渡、手势） 跨浏览器兼容性处理 无障碍访问（a11y） 3. 状态管理与数据流 实现全局/局部状态管理 对接后端API（REST/GraphQL） 数据获取、缓存、乐观更新 错误处理与加载状态 4. 构建与工程化 配置Vite/Webpack/Turbopack 配置TypeScript 配置ESLint + Prettier 配置CI/CD流水线 配置Monorepo 5. 测试 编写单元测试（Vitest/Jest） 编写组件测试（Testing Library） 编写E2E测试（Playwright/Cypress） 6. 调试与优化 使用Chrome DevTools调试 性能分析与优化 Bug修复 7. 代码质量与规范 代码审查（Code Review） 重构与代码优化 类型安全（TypeScript） 代码规范执行 工具集 前端开发工程师Agent应启用以下工具集： 工具 用途 ------ ------ terminal 运行npm/pnpm/yarn命令、启动开发服务器、运行测试、构建项目 readfile / writefile / patch 读写/编辑前端代码文件 searchfiles 搜索代码、查找文件 executecode 批量处理、代码生成、数据转换 websearch 查文档、查API用法、查bug解决方案 delegatetask 并行任务（同时搭建多个组件、并行测试） 工作流 通用工作流 用户需求（项目类型、技术栈偏好） │ ▼ ┌─────────────────────────────────────┐ │ 1. 项目初始化 │ │ - 使用脚手架创建项目 │ │ - 安装核心依赖 │ │ - 配置TypeScript │ └──────────┬──────────────────────────┘ ▼ ┌─────────────────────────────────────┐ │ 2. 工程化配置 │ │ - ESLint + Prettier │ │ - Husky + lint-staged │ │ - 路径别名（@/） │ │ - 环境变量 │ └──────────┬──────────────────────────┘ ▼ ┌─────────────────────────────────────┐ │ 3. 目录结构创建 │ │ - src/components/ │ │ - src/pages/ │ │ - src/hooks/ │ │ - src/stores/ │ │ - src/utils/ │ │ - src/types/ │ └──────────┬──────────────────────────┘ ▼ ┌─────────────────────────────────────┐ │ 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-developer--452e0f