skills.rest
jshsakura
jshsakuraCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-developer

Implement scoped frontend UI changes with accessibility and design-system conformance.

22|2|Updated Mar 24, 2026
Search Tags:#ui#accessibility#frontend#component#design-system#bug-fix
One-click install
npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill frontend-developer-jshsakura
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-developer
Source: https://github.com/jshsakura/awesome-opencode-skills/tree/main/skills/frontend-developer
Command: npx skills add https://github.com/jshsakura/awesome-opencode-skills --skill frontend-developer-jshsakura

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers implement small, well-scoped frontend changes that preserve state integrity, accessibility, and design-system consistency while minimizing risk of regressions.

Core Features & Use Cases

  • Scoped UI changes: implement minimal UI changes with clear ownership.
  • State management and accessibility: ensure focus management, keyboard navigation, and ARIA attributes.
  • Design-system conformance: align with tokens, components, and interaction patterns across pages.
  • Regression-safe validation: test in isolation and across common flows to catch unintended side effects.

Quick Start

Implement a small UI bug fix for the product card to restore proper focus order and ensure aria-label on the action button.

Frequently Asked Questions about frontend-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix UI bugs without causing state regressions in web applications?▼

Fixing UI bugs without state regressions requires implementing scoped component changes with rigorous validation across common flows. You ensure state integrity by testing component behavior in isolation and verifying boundaries to catch unintended side effects before shipping.

How do I ensure accessibility when tweaking frontend components?▼

To ensure accessibility during frontend component tweaks, apply proper focus management, keyboard navigation, and ARIA attributes. Validating these interaction patterns in isolation guarantees that scoped UI changes maintain required accessibility standards without introducing regressions.

What is the best way to maintain design-system conformance during small UI updates?▼

The best way to maintain design-system conformance during small UI updates is aligning component modifications with established design tokens and interaction patterns. This approach ensures visual and functional consistency across pages while keeping the UI bug fix scoped.

Can I use this approach for component-level feature polish across existing routes?▼

Yes, you can use this approach for component-level feature polish across existing routes. It applies to small, well-scoped frontend changes like UI tweaks and bug fixes, ensuring clear ownership and minimal risk of state boundary regressions.

When do I need to validate frontend changes across common user flows?▼

You need to validate frontend changes across common user flows whenever implementing scoped UI tweaks or bug fixes. Regression-safe validation tests component behavior in isolation and across flows to catch unintended side effects and maintain state integrity.

Related Skills

Explore More Software Engineering Skills→
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
duggal1duggal1
2

normalize

Normalize frontend feature designs to align with design system tokens and guidelines.

Community
Advanced
Nickalus12Nickalus12
2

a11y-audit

Audit Loom-style applications for WCAG violations and ARIA usage.

Community
Advanced
M-Abdullah07M-Abdullah07
1

ui-visual-validator

Assess UI visual changes for consistency, accessibility, and design system conformance.

Community
Advanced