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
Desired outcome

Ship a distinctive interface that still passes practical usability and browser checks.

Safe working boundary

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.

01 · Core execution

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
Inspect the Skill
02 · Guardrail

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
Inspect the Skill
03 · Evidence

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
Inspect the Skill

02 · ACCEPTANCE

How to know the task is finished

  1. Open the changed page at desktop and mobile widths.
  2. Complete the page's primary action with keyboard and pointer input.
  3. 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.