AgentSkillsCN

frontend-quality-bar

为 Next.js + Chakra UI 前端仓库中的各项变更，制定并践行高质量、生产就绪的标准。适用于 UX 优化、无障碍设计、性能提升、错误与加载状态处理、代码整洁度维护，以及“已准备好合并”的检查（如 lint、format、build）。

SKILL.md
--- frontmatter
name: frontend-quality-bar
description: Enforce a high-quality, production-ready standard for changes in this Next.js + Chakra UI frontend repo. Use for UX polish, accessibility, performance, error/loading states, code hygiene, and “ready to merge” checks (lint/format/build).

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.