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 web
Frontend · 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 确认。

不想安装?

阅读完整规范并直接复制到你的项目——或安装该技能,让智能体自动执行。