skills.rest
FernanSuoza
FernanSuozaCOMMUNITY
Explore all skills by this author →
GitHub

web-frontend-development

Implement accessible frontend UI components with design-system tokens and automated tests.

Updated Mar 22, 2026
Search Tags:#testing#ui#accessibility#frontend#state-management#design-system
One-click install
npx skills add https://github.com/FernanSuoza/AIDD-project-bootstrap --skill web-frontend-development-fernansuoza
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frontend-development
Source: https://github.com/FernanSuoza/AIDD-project-bootstrap/tree/main/templates/skills/web-frontend-development
Command: npx skills add https://github.com/FernanSuoza/AIDD-project-bootstrap --skill web-frontend-development-fernansuoza

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often struggle with building accessible, design-system-aligned UI components and managing client-side state across stories; this Skill provides a structured approach to implement, test, and document these elements within approved work.

Core Features & Use Cases

  • Component implementation: Build UI components that conform to the design system and accessibility guidelines.
  • State management: Handle interactive widgets with predictable client-side state.
  • Quality & testing: Enforce semantic markup, keyboard navigation, and automated tests; track story decisions and changes.

Quick Start

Provide the next approved frontend component implementation following the project's design-system and accessibility guidelines.

Frequently Asked Questions about web-frontend-development

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

FAQPage Schema
How do I implement accessible UI components that conform to a design system?▼

Implement accessible UI components by applying semantic markup, keyboard navigation, and token-driven styling. This ensures design-system alignment and accessibility conformance while handling client-side state predictably across approved stories.

What's the best way to manage client-side state for interactive frontend widgets?▼

Manage client-side state for interactive widgets by structuring predictable state transitions within component implementations. This approach enforces semantic markup and tracks story decisions while maintaining design-system token usage across existing apps.

How do I automate tests for frontend component implementation?▼

Automate tests for frontend component implementation by enforcing semantic markup, keyboard accessibility, and token-driven styling rules. This generates automated test coverage and story documentation for approved UI work.

Does this approach work with existing apps or only greenfield projects?▼

This approach works with existing apps by applying component-level UI work, client-side state, and design-system token usage across current codebases. It satisfies accessibility conformance and automated testing requirements within approved stories.

Why does my UI component fail keyboard accessibility conformance?▼

UI components fail keyboard accessibility conformance when semantic markup and navigation rules are not enforced during implementation. Applying token-driven styling and structured state management ensures keyboard accessibility and automated test validation.

Related Skills

Explore More Software Engineering Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
MinBZKMinBZK
2

a11y-review

Automate WCAG 2.1 AA accessibility reviews for web templates, CSS, and HTML.

Official
Basic
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced
IsthisreelIsthisreel

Brand Design System

Enforce design tokens for color, typography, and spacing across UI components.

Community
Advanced