13 Phelan164

build-frontend Skill

使用仓库原生组件构建或修改前端界面,同时保持可访问性、响应式行为、状态处理和视觉验证。用于 UI 功能、设计实现、表单、客户端缺陷和前端重构;仅后端或仅基础设施的工作不适用。

安装方式:把技能目录放入 ~/.claude/skills/(Claude Code)或在 claude.ai 设置中启用;也可复制右侧安装命令一键添加。

查看源码

技能指令原文(SKILL.md)

Build Frontend

Domain contract

  • Preserve the project’s framework, styling system, and component conventions.
  • Do not invent API response fields or silently change backend contracts.
  • Do not replace an established design system with custom one-off styling.
  • Define loading, empty, error, success, and disabled states that the changed

flow can reach.

  • Keep semantic HTML, keyboard navigation, focus behavior, labels, and contrast in scope.
  • Avoid speculative shared abstractions for a single component.
  • Treat screenshots and mockups as visual references, not proof of interaction behavior.
  • Do not claim visual verification unless the UI was rendered or inspected.

Execute and verify

Read references/verification.md for UI, accessibility, responsive, and browser verification. Load it when the task changes rendered behavior or interaction.

Reuse existing components and tokens, implement the smallest coherent change,
and prove behavior at the lowest useful layer. Prefer:

component test → feature test → type/lint → build → visual/interaction check

If a command cannot run, report the exact blocker and what remains unverified.