返回 Skill 列表
extension
分类: 开发与工程无需 API Key

frontend-quality-bar

在这个Next.js + Chakra UI前端仓库中,强制执行高质量、生产就绪的标准。用于用户体验优化、可访问性、性能、错误/加载状态、代码整洁度以及“准备合并”检查(lint/format/build)。

person作者: jakexiaohubgithub

Frontend Quality Bar (Stacked Poker)

Always start here

  1. Read .cursor/rules/frontend-guidelines.mdc (project expectations).
  2. Identify the user-facing surface (page/component) and list required states:
    • loading, empty, error, success
  3. Prefer small, incremental changes; avoid broad refactors unless requested.

Definition of done (minimum)

  • UI has loading/error handling for async work that affects UX.
  • No console errors in normal flows; logs are purposeful for debugging only.
  • Accessibility basics: labels, keyboard access, focus visibility.
  • Responsive: works in both portrait/landscape where applicable.
  • Styling uses theme tokens/semantic tokens (no random hexes).

Commands

  • npm run lint
  • npm run build
  • npm run format (when touching many files)

For convenience, run scripts/quality.sh from this skill.

What to load next

  • For a detailed PR checklist: read references/checklist.md.
  • For perf/a11y patterns that match this repo: read references/perf-a11y.md.