skills.rest
EliasOulkadi
EliasOulkadiCOMMUNITY
Explore all skills by this author →
𝕏@EliasOulkadiGitHub

component-forge

Create accessible React, Vue 3, or Svelte 5 components with loading, empty, error, and success states.

110|14|Updated May 12, 2026
Search Tags:#accessibility#react#vue#wcag#svelte#ui components#state handling
One-click install
npx skills add https://github.com/EliasOulkadi/shokunin --skill component-forge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-forge
Source: https://github.com/EliasOulkadi/shokunin/tree/main/.pack/skills/component-forge
Command: npx skills add https://github.com/EliasOulkadi/shokunin --skill component-forge

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Building frontend components that are production-ready and resilient across loading, empty, error, and success states—while staying accessible and consistent—is hard and easy to get wrong.

Core Features & Use Cases

  • State-complete components: Implements discriminated-union state modeling so every data-fetching component renders idle, loading, empty, error, and success paths.
  • Accessibility-first architecture: Covers keyboard navigation, ARIA patterns (including focus trap and live regions), and WCAG 2.2-oriented checklist items.
  • Compound + reusable UI patterns: Encourages compound component structure, server component readiness (RSC), and framework scaffolding for React, Vue 3, and Svelte 5.
  • Error and edge-case handling: Provides guidance for race conditions (AbortController), retry behavior, and layout/overflow stability.

Quick Start

Ask the agent to use Component Forge to create an accessible React component for a user profile widget that includes all five states and keyboard/focus behavior.

Frequently Asked Questions about component-forge

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

FAQPage Schema
How do I build accessible React components that handle loading, empty, and error states?▼

Build accessible React components with complete state handling by using discriminated-union state modeling to render idle, loading, empty, error, and success paths. This ensures interactive widgets like modals and forms remain stable and accessible during all data-fetching phases.

What's the best way to manage focus traps and ARIA live regions in Vue 3 interactive widgets?▼

Manage focus traps and ARIA live regions in Vue 3 by applying WCAG 2.2-oriented accessibility patterns, ensuring proper keyboard navigation and focus management. This approach guarantees that dynamic content updates in popovers and tooltips are announced correctly to assistive technologies.

Does Component Forge support Svelte 5 and strict TypeScript usage for UI component scaffolding?▼

Yes, Component Forge supports Svelte 5 and strict TypeScript usage for UI component scaffolding. It provides framework-specific scaffolding for React, Vue 3, and Svelte 5, ensuring compound component structures and server component readiness (RSC) are maintained across all frameworks.

How do I prevent race conditions in frontend data-fetching components with AbortController?▼

Prevent race conditions in data-fetching UI components by implementing AbortController logic to cancel outdated network requests. This approach handles error and edge-case behaviors, ensuring layout and overflow stability while supporting retry mechanisms for failed requests.

Why do my UI components fail WCAG 2.2 accessibility requirements for keyboard navigation?▼

UI components fail WCAG 2.2 keyboard navigation requirements when they lack proper ARIA patterns, focus traps, and responsive edge-case behavior. Address this by modeling complete loading, empty, error, and success states with built-in focus management and live regions for assistive technology compatibility.

Related Skills

Explore More Software Engineering Skills→
HsnSaboorHsnSaboor

frontend-development

Provide frontend development guidelines for React, Vue 3, Svelte 5, and Angular.

Community
Advanced
charlesjones-devcharlesjones-dev
34

accessibility-auditing

Audit codebases and live sites for WCAG 2.1/2.2 compliance gaps.

Community
Advanced
theofernandezztheofernandezz

Accessibility (a11y)

Apply WCAG-compatible patterns and ARIA semantics to web interfaces.

Community
Advanced
seo-jinseokseo-jinseok

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 compliance.

Community
Advanced