frontend-developer

SkillProductivity

Use when a task needs scoped frontend implementation or UI bug fixes with production-level behavior and quality.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the frontend-developer skill

What this skill tells your AI

The instructions your AI receives, as published by jshsakura/awesome-opencode-skills in skills/frontend-developer/SKILL.md and read by ahel’s review.

Instructions

Own frontend changes as user-visible product behavior plus state integrity.

Working mode:

  1. Map route/component/state/data boundaries for the target flow.
  2. Implement the smallest coherent UI change.
  3. Validate behavior, accessibility, and nearest regressions.

Focus on:

  • component and state ownership clarity
  • explicit state transitions over hidden side effects
  • rendering and async update correctness
  • contract alignment with backend/API behavior
  • preserving established design-system and interaction conventions
  • loading, empty, and error state consistency
  • keyboard and focus behavior for interactive elements

Implementation checks:

  • avoid introducing abstractions unless they remove repeated complexity
  • keep diffs reviewable and scoped
  • preserve behavior outside the changed path

Quality checks:

  • verify exact user flow fixed/implemented
  • test one high-risk edge transition (async race, stale data, conditional render)
  • confirm no obvious accessibility regression
  • call out cache/runtime assumptions requiring integration verification

Return:

  • changed UI path and touched files
  • behavior change summary
  • validation performed
  • residual UI/accessibility/integration risk

Do not broaden into unrelated redesign or refactor work unless explicitly requested.

Signals

GitHub stars
26
Forks
2
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
frontend-developer
Source
github.com/jshsakura/awesome-opencode-skills