1. 引言

AI 编程助手已经深度融入前端开发工作流，但很多人的体验还停留在「自动补全代码」的层面。真正让 AI 从「能用」变成「好用」的关键，往往不是模型本身，而是你给它配置的 Skill（技能）。

Skill 可以理解为给 AI 编程助手预置的「专业能力包」：告诉它你的技术栈、代码规范、项目结构，甚至教会它如何排查特定类型的问题。配置得当，AI 生成的代码会更贴合你的项目，少走弯路。

这篇文章整理了一份前端开发者的必装 Skill 清单，覆盖工程化、样式、测试、性能、可访问性等核心场景，帮你把 AI 编程体验原地起飞。

2. 什么是 Skill，为什么前端开发需要它

Skill 本质上是一组结构化的指令和上下文，让 AI 在特定场景下表现得像一名资深前端工程师。它通常包含：

• 角色设定：让 AI 以特定专家身份思考；
• 技术栈约束：锁定框架、版本、构建工具；
• 代码规范：命名、目录结构、提交规范；
• 常见陷阱清单：避免重复踩坑。

前端开发尤其适合使用 Skill，因为：

• 技术栈碎片化严重（React/Vue/小程序/跨端），AI 默认行为往往「大而全」但不精准；
• 工程化链路长（构建、lint、测试、部署），AI 需要理解上下文才能给出有效建议；
• 样式和交互细节多，通用模型容易给出「能跑但不符合规范」的代码。

3. 必装 Skill 清单总览

下面按场景分类，列出前端开发最值得安装的 Skill。你可以根据自己的技术栈按需取舍。

分类	Skill 名称	核心价值
工程化	项目脚手架生成	一键生成规范的项目结构
工程化	依赖与构建配置	正确配置 Vite/Webpack/TS
样式	设计系统落地	把设计稿转成符合 Design Token 的代码
样式	响应式布局	输出可靠的响应式方案
测试	单元测试生成	生成覆盖边界用例的测试
测试	E2E 测试编写	编写稳定的端到端用例
性能	性能诊断	定位并修复渲染/加载瓶颈
可访问性	A11y 检查	发现并修复无障碍问题
代码质量	代码评审	按团队规范审查 MR
文档	组件文档生成	自动生成 Storybook/API 文档

4. 工程化类 Skill

4.1 项目脚手架生成

这个 Skill 让 AI 根据你的技术栈偏好，一次性生成完整的项目骨架，而不是让你手动复制粘贴模板。

# 示例：让 AI 生成一个 React + TypeScript + Vite 项目
请使用「项目脚手架生成」Skill，创建一个满足以下要求的项目：
- 框架：React 18 + TypeScript
- 构建：Vite
- 目录：src/components、src/hooks、src/utils、src/pages
- 规范：ESLint + Prettier 已配置

4.2 依赖与构建配置

前端依赖版本更新频繁，AI 默认知识可能滞后。这个 Skill 让 AI 基于当前项目实际版本给出配置建议，避免「装了个不存在的版本」或「配置项已废弃」的问题。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx"
  }
}

5. 样式与设计类 Skill

5.1 设计系统落地

这个 Skill 让 AI 理解你的 Design Token（颜色、间距、字体、圆角），把设计稿还原成符合规范的代码，而不是随手写死魔法数字。

// 错误示范：魔法数字
const Card = () => <div style={{ padding: '16px', borderRadius: '8px' }} />;

// 正确示范：使用 Design Token
const Card = () => (
  <div style={{ padding: 'var(--space-md)', borderRadius: 'var(--radius-md)' }} />
);

5.2 响应式布局

这个 Skill 让 AI 输出可靠的响应式方案，覆盖移动端、平板、桌面三种断点，并考虑容器查询等现代方案。

.container {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

6. 测试类 Skill

6.1 单元测试生成

这个 Skill 让 AI 为组件和工具函数生成覆盖边界用例的单元测试，而不是只测「正常路径」。

import { render, screen } from '@testing-library/react';
import { Button } from './Button';

describe('Button', () => {
  it('renders children', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('handles click event', () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click</Button>);
    fireEvent.click(screen.getByText('Click'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('is disabled when disabled prop is true', () => {
    render(<Button disabled>Click</Button>);
    expect(screen.getByText('Click')).toBeDisabled();
  });
});

6.2 E2E 测试编写

这个 Skill 让 AI 编写稳定的端到端用例，正确处理等待策略和选择器，避免「测试跑一次挂一次」的尴尬。

import { test, expect } from '@playwright/test';

test('user can complete checkout flow', async ({ page }) => {
  await page.goto('/products');
  await page.getByRole('button', { name: 'Add to cart' }).first().click();
  await page.getByRole('link', { name: 'Cart' }).click();
  await page.getByRole('button', { name: 'Checkout' }).click();
  await expect(page).toHaveURL(/\/checkout/);
});

7. 性能与体验类 Skill

7.1 性能诊断

这个 Skill 让 AI 从「渲染性能」和「加载性能」两个维度定位问题，并给出可落地的优化建议。

// 使用 React.memo 避免不必要的重渲染
const ExpensiveComponent = memo(function ExpensiveComponent({ data }: Props) {
  return <Chart data={data} />;
});

// 使用 useMemo 缓存计算结果
const filteredList = useMemo(
  () => list.filter((item) => item.active),
  [list]
);

7.2 可访问性检查

这个 Skill 让 AI 主动发现无障碍问题，比如缺失的 aria-label、不合理的对比度、键盘无法操作等。

// 错误示范：图标按钮没有可访问名称
<button onClick={handleClose}>
  <CloseIcon />
</button>

// 正确示范：补充 aria-label
<button onClick={handleClose} aria-label="关闭">
  <CloseIcon />
</button>

8. 代码质量与协作类 Skill

8.1 代码评审

这个 Skill 让 AI 按团队规范审查代码，关注正确性、可维护性、性能隐患和测试覆盖，而不是只挑语法毛病。

请使用「代码评审」Skill 审查以下 MR：
- 变更范围：src/components/Form.tsx
- 关注点：表单校验逻辑、错误处理、可访问性
- 输出格式：按「问题 / 严重程度 / 修改建议」列出

8.2 组件文档生成

这个 Skill 让 AI 根据组件源码自动生成 Storybook 故事和 API 文档，减少文档维护成本。

// Button.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary', 'ghost'],
    },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Primary Button',
  },
};

9. 如何配置和管理你的 Skill

9.1 按项目维度组织

建议把 Skill 按项目维度组织，而不是全局堆一堆。每个项目维护一份 .ai/skills/ 目录，包含该项目专属的规范和技术栈约束。

my-project/
├── .ai/
│   └── skills/
│       ├── project-context.md      # 项目技术栈、目录结构
│       ├── code-style.md           # 命名规范、lint 规则
│       └── testing-guide.md        # 测试框架与约定
├── src/
└── package.json

9.2 定期迭代

Skill 不是一次配好就完事。建议每两周回顾一次，把团队踩过的坑沉淀进 Skill，让 AI 越来越懂你的项目。

10. 总结

Skill 是让 AI 编程助手从「通用」走向「专业」的关键。前端开发技术栈碎片化、工程化链路长，配置合适的 Skill 能显著提升 AI 输出的质量和一致性。

建议从工程化、样式、测试三个方向入手，先装最贴合你日常工作的 3-5 个 Skill，跑通后再逐步扩展。配置得当，你会发现 AI 生成的代码越来越像团队资深工程师写的——这就是体验原地起飞的感觉。