# Fs Spec Frontend

> 全栈·前端方向实现规格生成器。Web 界面类交付物：响应式官网、SPA、SSR/SSG、组件库与设计系统、微前端、PWA、浏览器扩展、CSS 与动画、跨端 H5。用户提"页面/组件库/仪表板/官网/可视化大屏"的规范与实现细节时使用。属 it-project-spec-generator 体系。

- Skill: `wufufu770/fs-spec-frontend` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wufufu770/fs-spec-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wufufu770/fs-spec-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: wufufu770 (https://skillmd.com/u/wufufu770)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wufufu770/fs-spec-frontend

---


# 前端实现规格生成器

## 角色

资深前端架构师：把界面需求翻译成像素级、帧级可开工可验收的规格。

## 生成前置（每次必做）

按序读取本 skill 目录同级的 `_spec-core/` 下 `core-laws.md` → `protocol.md` → `structure.md` 并遵照执行；内核不可读时降级为无内核模式：直接按本 skill 领域骨架生成，全部精确值标 [待验证] 并在文末注明「核心铁律未加载」。

## 章节骨架（叠加于通用 10 章；第 3 章全局视觉、第 6 章 UI/UX 为最重两章）

```
Why → Features → Getting Started → Usage → Components/Props →
Theming → Accessibility → Performance → Testing → Browser Support
```

## 子形态要点

| 子形态 | 规格必含 |
|--------|---------|
| 响应式网站 | 断点表（如 375/768/1024/1440），每断点栅格列数、容器宽度、导航形态（汉堡/全量）、字号间距缩放系数；移动优先 |
| SPA (React/Vue/Svelte) | 路由表（path→组件→权限）、状态管理选型、数据获取策略、懒加载分割点、错误边界清单 |
| SSR (Next/Nuxt) | 渲染策略矩阵（每页 SSR/SSG/ISR/CSR + revalidate 值）、数据获取层级、水合警告豁免清单、缓存标头 |
| SSG (Astro/Hugo) | 内容模型 frontmatter 字段表、构建速度预算、增量构建、图片优化管线 |
| 组件库/设计系统 | Props 表（`name\|type\|default\|description` 必用）、组件状态矩阵、design tokens 四组表（color/space/typography/radius/shadow）、WCAG AA + ARIA 角色清单、受控/非受控契约、语义化版本与废弃策略 |
| 微前端 | 应用边界划分、共享依赖允许/禁止清单、样式隔离方案、跨应用通信契约、版本漂移策略、路由归属表 |
| 实时应用 (WS) | 连接生命周期（建连/心跳/重连/优雅关闭）、心跳间隔、消息 JSON schema、重连退避（1s/2s/4s 封顶 30s + jitter）、断线队列、幂等处理 |
| PWA | manifest 字段表、Service Worker 缓存策略表（每类资源：network-first/cache-first/stale-while-revalidate）、离线页、SW 版本化更新策略、安装提示 |
| WebAssembly | 加载策略（懒/预加载）、内存分配上限、JS↔WASM 数据传递规范、线程支持、fallback 方案 |
| 浏览器扩展 | 权限最小化 manifest 表、background/content/popup 职责划分、消息协议、MV2/MV3 兼容、发布渠道 |
| 前端工具链 | 构建目标、分包策略、产物大小预算、dev server 配置、HMR 边界 |
| CSS (Tailwind) | 配置主题扩展点、设计令牌映射、暗色模式实现、组件类组织规范 |
| 动画库 (GSAP/FM) | 动画清单表（元素→触发→时长→缓动→延迟）、滚动触发表、交错动画间隔 |

## 领域增补铁律

8. 色彩对比 MUST 满足 WCAG AA（正文 ≥ 4.5:1，大字 ≥ 3:1）；图片 MUST 带 width/height 占位，CLS SHOULD ≤ 0.1。
9. 字体 MUST 授权明确；MUST NOT 使用系统默认栈之外的未授权字体。图标风格全站统一命名。
10. 点击反馈 MUST ≤ 100ms 可见；触控目标 ≥ 44×44pt（iOS）/ 48×48dp（Android Web）。
11. Core Web Vitals 目标写入第 7 章：LCP ≤ 档位预算、CLS ≤ 0.1、INP ≤ 200ms（S/A 档）。

## 动效曲线速查（配合铁律 3）

| 用途 | 时长 | 曲线 |
|------|------|------|
| 微交互/按钮 | 80–150ms | ease-out |
| 面板展开/收起 | 200–250ms | cubic-bezier(0.4, 0, 0.2, 1) |
| 页面切换 | 200–300ms | cubic-bezier(0.4, 0, 0.2, 1) |
| 弹窗 | 150ms 入 / 120ms 出 | ease-out / ease-in |
| 大元素入场 | 600–900ms | cubic-bezier(0.16, 1, 0.3, 1) |
| 弹性反馈 | 300–500ms | cubic-bezier(0.34, 1.56, 0.64, 1) |

## 验收惯例

Lighthouse（移动端节流）达档位分值；Playwright E2E 断言交互路径；视觉回归快照（像素 diff 阈值显式给出）；axe 扫描零 critical；DevTools Performance 面板录屏验证帧率达标。

## 开工检查单默认项

技术栈一行 / 目录结构草案（pages|components|stores|api|styles）/ 最先实现的 3 个文件（设计 tokens → 布局壳 → 一个完整功能切片）/ 最低验收门槛 = 档位对应测试要求。

## 不适用（When NOT to use）

- 后端接口契约、数据库、部署管道细节分别归 fs-spec-backend / fs-spec-devops。
- 原生移动 App 归 fs-spec-mobile；纯 CLI/TUI 归 fs-spec-desktop-cli。
- 视觉创意本身（配色美学、品牌设计）不属规格范畴——本 skill 只约束可验收的实现形态。