TASK GUIDE · SOURCE-AWARE
Best Agent Skills for frontend development
A minimal, source-aware Skill stack for frontend design, guardrails, and browser verification.
Build this plan for my Agent ↗Frontend files, local preview, and reversible browser checks only.
01 · SKILL STACK
A minimal three-role stack
Each role has one job. The personalized builder can adjust the selection for your Agent without changing the decision logic.
frontend-design
Sets the visual direction and implementation constraints.
- Main limitation
- Aesthetic judgments remain subjective and still need stakeholder review.
- First risk
- Style over function
- Source evidence
- Pinned · 0a64e398
web-design-guidelines
Checks accessibility, responsiveness, and common interface failures.
- Main limitation
- It depends on network access and a live guideline document whose contents can change over time.
- First risk
- Rule drift or context-free findings
- Source evidence
- Pinned · b8caa260
playwright-workflows
Produces browser evidence instead of relying on code inspection alone.
- Main limitation
- Detailed package files are not fully catalogued.
- First risk
- Review before install
- Source evidence
- Editorial source
02 · ACCEPTANCE
How to know the task is finished
- Open the changed page at desktop and mobile widths.
- Complete the page's primary action with keyboard and pointer input.
- Confirm there are no blocking console errors or obvious layout breaks.
03 · STOP CONDITIONS
When to stop
- The plan writes outside the agreed frontend scope.
- A visual change removes keyboard access or readable contrast.
- The browser result differs materially from the claimed outcome.
04 · METHOD
How this guide was produced
SkillSignal maps a defined task to three non-overlapping responsibilities, then selects from reviewed catalog metadata. Agent fit, source state, permissions, and published scores are evaluated with deterministic rules. No LLM writes or reorders the recommendation at request time.