anthropic-frontend-ui-engineering

frontend-ui-engineering Skill 多维度简评

类别:前端开发 / 工程方法 来源:anthropics/skills 定位:frontend-design 的工程化配套——从”好看”升级到”好看+可维护+可测试”

一、核心定位与价值

frontend-design 解决”好不好看”,frontend-ui-engineering 解决”能不能跑、能不能改、能不能测”。

它是 Anthropic 在 2025 年下半年加进官方 Skills 集合的”工程加固”类 Skill,聚焦于:

• 组件设计系统一致性
• 状态管理选型
• 可访问性(a11y)硬性要求
• 性能预算

核心思想:前端不是画画,是工程。Skill 强制 AI 在生成 UI 时同步输出:可访问性测试、性能预算、TypeScript 类型、可维护性检查。

二、与 frontend-design 的分工

推荐搭配:frontend-design 出视觉稿 → frontend-ui-engineering 转工程代码。

三、核心能力清单

四、5 大实战场景

场景 1:新组件开发

提示词:
用 frontend-ui-engineering 创建一个 <UserAvatar /> 组件
- 支持 src/name/size/onClick
- TypeScript strict
- a11y: alt/aria-label/role
- Storybook story
- Vitest 单测
- 包含 forwardRef

场景 2:重构旧组件

提示词:
重构 src/components/OldButton.tsx,按 frontend-ui-engineering 规范:
- 提取 design tokens
- 改用 forwardRef + displayName
- 加 keyboard navigation
- 输出 a11y 报告

场景 3:性能优化

提示词:
优化 src/pages/Dashboard.tsx:
- Lighthouse Performance ≥ 90
- LCP < 2.5s, CLS < 0.1, INP < 200ms
- 用 React.memo / useMemo / useCallback
- 路由级 code splitting

场景 4:可访问性审查

提示词:
跑 axe-core 在 src 下,修复所有 critical/serious 问题
输出修复前后的对比报告

场景 5:组件库升级

提示词:
把项目从 MUI v5 迁到 shadcn/ui:
- 列出所有 MUI 用法
- 给出 shadcn 等价组件
- 写 codemod 自动转换
- 跑测试验证

五、内部 SKILL.md 工作流

name: frontend-ui-engineering
description: |
  Build accessible, performant, testable React/Vue UIs.
  Use when: creating components, refactoring, a11y audit, perf budget.
allowed-tools: Bash, Read, Write, Edit
---

When invoked:
1. Read the project's tsconfig + package.json
2. Detect framework (React/Vue/Svelte)
3. Check existing design system (shadcn/MUI/Chakra)
4. For new components: generate component + story + test
5. For refactor: extract tokens, add types, add tests
6. Always run: tsc --noEmit, vitest, axe-core, lighthouse
7. Return concrete files with line numbers

六、反合理化

七、性能预算硬性标准

// performance-budget.json
{
  "lighthouse": {
    "performance": 90,
    "accessibility": 95,
    "best-practices": 90,
    "seo": 90
  },
  "coreWebVitals": {
    "LCP": 2500,   // ms
    "INP": 200,    // ms
    "CLS": 0.1
  },
  "bundleSize": {
    "main": "200KB",
    "vendor": "300KB",
    "perRoute": "100KB"
  }
}

八、5 大真实案例

案例 1:组件库工程化升级

场景:React 组件库从零散状态升级为规范化工程体系 方案:frontend-ui-engineering 批量生成 stories + tests + a11y 报告 结果:Storybook 覆盖全部组件，a11y 评分从 60→95,单元测试覆盖率 0%→85%

案例 2:无障碍合规

场景:面向公众的 Web 应用必须通过 WCAG 2.1 AA 合规审计 方案:用 Skill 跑 axe-core → 修复 200+ critical → 出具 a11y 报告 结果:通过第三方审计,法律风险清零

案例 3:大流量场景性能优化

场景:流量峰值期 LCP 从 1.5s 涨到 4s 方案:code splitting + image optimization + SSR streaming 结果:LCP 回到 2.0s,转化率 +12%

案例 4:跨框架组件库

场景:同一套组件需要在 React + Vue 项目复用 方案:用 Skill 的”框架无关”模式 → 核心逻辑抽到 core,UI 适配层分 React/Vue 结果:维护成本 -50%

案例 5:遗留项目现代化迁移

场景:5 年历史的前端代码库,无 TS 无测试 方案:Skill 输出迁移 checklist + codemod 脚本 结果:6 个月完成迁移,bug 数 -80%

九、与其他 Skill 的协同

典型 4 阶段:

1. 设计:frontend-design 出 mockup
2. 工程:frontend-ui-engineering 转代码
3. 测试:webapp-testing + verification
4. 部署:vercel-deploy-claimable

十、6 个 Q&A

Q:必须用 React 吗? A:不是。Skill 检测到 Vue/Svelte/Solid 同样工作。

Q:必须用 Tailwind? A:推荐但不强制。CSS Modules / styled-components / Vanilla Extract 都支持。

Q:a11y 报告是 PDF 吗? A:HTML 报告 + JSON 结果,可集成到 CI。

Q:需要 Storybook 吗? A:强烈推荐。Skill 默认生成 .stories.tsx。

Q:Vitest 还是 Jest? A:默认 Vitest(Vite 生态快 10x),旧项目可用 Jest 适配。

Q:能自动修复 a11y 问题吗? A:能 60%。剩下 40% 需要人工判断(如文案、上下文)。

十一、参考资料

1. anthropics/skills 官方
2. WCAG 2.1 规范
3. Core Web Vitals 文档
4. axe-core 规则集
5. shadcn/ui 组件库
6. Radix UI 无头组件
7. CSDN 前端工程化 关键词 “frontend-ui-engineering”

十二、详细 SKILL.md 拆解

YAML Frontmatter 字段含义

---
name: frontend-ui-engineering        # 必须,小写连字符
description:                          # 触发条件,100 字内
  Build accessible, performant, testable React/Vue UIs.
  Use when: creating components, refactoring, a11y audit, perf budget.
allowed-tools: Bash, Read, Write, Edit  # 白名单工具
model: claude-sonnet-4-5              # 推荐模型
license: Apache-2.0
---

5 段式 SKILL.md 正文结构

1. 角色声明:“You are a senior frontend engineer…”
2. 工作流:“When invoked: 1. read tsconfig 2. detect framework…”
3. 约束清单:“Always: tsc —noEmit, vitest, axe-core, lighthouse”
4. 禁止事项:“Never: skip a11y, use any type, inline styles”
5. 失败回退:“If project has no tests, scaffold vitest first”

默认输出模板

// components/Button/Button.tsx
import { forwardRef, type ButtonHTMLAttributes } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input hover:bg-accent',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
      },
      size: {
        default: 'h-10 px-4 py-2',
        sm: 'h-9 px-3',
        lg: 'h-11 px-8',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: { variant: 'default', size: 'default' },
  }
);

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
);
Button.displayName = 'Button';

默认 Storybook Story

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

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['default', 'destructive', 'outline', 'ghost'] },
    size: { control: 'select', options: ['default', 'sm', 'lg', 'icon'] },
  },
};
export default meta;
type Story = StoryObj<typeof Button>;

export const Default: Story = { args: { children: 'Click me' } };
export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } };

默认 Vitest 测试

// components/Button/Button.test.tsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { axe } from 'vitest-axe';
import { Button } from './Button';

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click</Button>);
    expect(screen.getByRole('button', { name: 'Click' })).toBeInTheDocument();
  });

  it('handles click', async () => {
    const onClick = vi.fn();
    render(<Button onClick={onClick}>Click</Button>);
    await userEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('is keyboard accessible', async () => {
    render(<Button>Tab me</Button>);
    await userEvent.tab();
    expect(screen.getByRole('button')).toHaveFocus();
  });

  it('has no a11y violations', async () => {
    const { container } = render(<Button>Accessible</Button>);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

十三、迁移到企业内部

从零到一建立前端规范

# 1. 装 Skill
npx skills add anthropics/skills --skill frontend-ui-engineering

# 2. 初始化
npx skill-init frontend-ui-engineering
# -> 生成 .claude/skills/frontend-ui-engineering/config.json
# -> 生成 performance-budget.json
# -> 生成 a11y-rules.json

# 3. 在 CLAUDE.md 引用

# CLAUDE.md
skills:
  - frontend-ui-engineering
auto_invoke:
  - when: "file=src/components/**/*.tsx"
    skill: frontend-ui-engineering

旧项目适配

提示词:
我有一个 5 年历史的 React 项目,基于 CRA + Redux + Ant Design。
请用 frontend-ui-engineering 帮我:
1. 评估当前 a11y / perf / 测试覆盖率
2. 给出最小可行迁移路径(MVP,不一步到位)
3. 列 10 个最关键的优先修复项
4. 给出 codemod 脚本示例

十四、与其他 Anthropic 官方 Skills 的对比

结论:frontend-ui-engineering 不替代任何 Skill,它是工程质量的兜底。

十五、社区与生态

• 官方教程:Anthropic 工程博客 2025 Q4 文章 “Equipping agents for the real world”
• 派生项目:至少 30 个团队 fork 并二次定制
• 企业用户:Vercel、Stripe、Linear、Notion 内部前端团队
• 争议点:有人认为”过度工程”,实际对 2C 项目值得,对 1 人项目过度

十六、最后评价

frontend-ui-engineering 不是最有创意的 Skill,但它是最有用的”质量门”——把”做出来”和”做对”分开。

评分细项:

• 易用性:⭐⭐⭐⭐ (4/5) — 装上即用
• 性能:⭐⭐⭐⭐⭐ (5/5) — 不增加开销
• 文档:⭐⭐⭐⭐ (4/5) — 文档在更新
• 社区:⭐⭐⭐ (3/5) — 比 frontend-design 小众
• ROI:⭐⭐⭐⭐⭐ (5/5) — 中长期回报巨大

适用:

• 团队 ≥ 3 人的前端项目
• B 端 / SaaS / 政企网站
• 需长期维护的产品

不适用:

• 一次性 Landing Page
• 1 人独立项目
• 时间紧 PoC