ReddRadar
Agent skill
frontend-quality-bar
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).
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/frontend-quality-bar
SKILL.md
Frontend Quality Bar (Stacked Poker)
Always start here
- Read
.cursor/rules/frontend-guidelines.mdc(project expectations). - Identify the user-facing surface (page/component) and list required states:
- loading, empty, error, success
- 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 lintnpm run buildnpm 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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?