使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/helderberto/agent-skills --skill frontend-ui-engineering开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Frontend UI Engineering
Decide how to structure a UI unit before writing it, so the choices audits would catch late (accessibility, i18n, bundle cost, missing states) are made up front. Frontend counterpart to codebase-design: a component is a deep module — a lot of behaviour behind a small prop surface. This skill decides; tdd/build implement; the audit skills verify. Framework-agnostic.
1. Classify the unit
| Kind | Emphasis |
|---|---|
| Design-system primitive (Button, Input) | prop API, variants via props, tokens, a11y contract |
| Composite component | composition, state placement, required states |
| Page / route | data-fetching boundary, layout, loading/error at the route |
| Refactor of existing UI | shrink prop surface, extract states, remove magic values |
2. Decision pass — state each choice before coding
- Boundary & prop API. Smallest surface that serves callers. Prefer composition (
children/slots) over configuration. A growing set of boolean flags (isPrimary,isSmall,isLoading…) is a smell — three booleans is eight states, most untested; reach for avariant/sizeunion or composition. - Where state lives. The lowest owner that still works: local → lifted → server state → URL. No derived state stored twice; compute from source.
- Data & async. Decide the fetch boundary (route/loader vs. inside the component) and who owns caching. Keep rendering components separate from fetching ones where practical.
- Required UI states. Enumerate and design loading, empty, error, disabled (and partial/optimistic where relevant) now. Happy-path-only is unfinished.
- Styling. Design-system tokens, no magic colors/spacing. Variants through props, not one-off overrides.
- Responsive. Mobile-first; intentional breakpoints; no fixed widths that break small screens.
- Accessibility by construction. Semantic HTML first, ARIA last; keyboard + focus order; a label for every control; visible focus. Full WCAG pass belongs to
a11y-audit. - User-facing strings. Through the project's i18n path from the start. Coverage check belongs to
i18n.
3. Build and hand off
Apply the decisions. Call the Skill tool with tdd for non-trivial logic and its tests, then with visual-review in UI mode for before/after in a real browser. /hb:review then runs the audits as the QA pass before /hb:to-pr.
