Skills · Claude Code · Frontend
在 SEO 与速度上都快的前端——默认如此。
Next.js 或 Astro,配合 strict TypeScript;密钥始终在服务端、WCAG 2.2 AA 无障碍、以 Core Web Vitals 为契约、SEO 与结构化数据、按语言分 URL 的 i18n,以及自动生成的站点地图。schematize-go 的前端对应。
schematize-web · v1.10.0bash
$ schematize install webFrontend · Next.js/Astro/web-help · github.com/schematizeme/schematize-cli
不可妥协的底线
绝不为“求快”而关闭。完整清单见技能。
密钥在服务端
绝不放进打包产物或 NEXT_PUBLIC_/VITE_/PUBLIC_。带密钥的调用走 BFF。令牌放 HttpOnly cookie,绝不用 localStorage。
真正可访问
WCAG 2.2 AA 是底线:语义化、键盘、受管焦点、对比度、reduced-motion。禁止关闭 a11y lint。
Core Web Vitals
LCP/INP/CLS 处于“良好”(p75,移动优先)。在 CI 中测量打包与指标预算——回归会阻断合并。
默认 SEO 与 i18n
结构化数据、自动生成站点地图、带 hreflang 的按语言 URL。所有内容均翻译。
真正的绿灯
单元、组件、e2e(Playwright)、a11y(axe)与视觉回归。smoke 证明内容,而不只是 200。
始终归档
决策与上下文每次都成为归档中的 .md。组件索引是唯一可信来源。
命令
安装在 .claude/commands/。随时运行 /web-help。
/web-help列出所有命令。/web-ccContext compact:将上下文和清单写入归档并运行 /compact。/web-handoff生成交接文档而不压缩——会话结束或任务切换。/web-qa计划优先的前端 QA:a11y、Core Web Vitals、e2e 与视觉回归。/web-review对 diff 执行完成定义(DoD)与前端反模式门禁。/web-index根据文档注释(重新)生成组件/hook 索引。面向 AI 智能体
无需人工即可安装。元数据见 llms.txt。
- 运行:git clone https://github.com/schematizeme/skill-web.git && ./skill-web/install.sh
- 或下载:https://github.com/schematizeme/skill-web/releases/latest/download/skill-web.zip 并解压到 .claude/skills/
- 将 assets/CLAUDE.md 复制到仓库根目录(常开规则)。
- 用 /web-help 确认。