skills.rest
aarushlohit
aarushlohitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-forge

Construct UI components with state management and WCAG 2.2 accessibility.

Updated Apr 1, 2026
Search Tags:#typescript#accessibility#ui component#react component#vue component#svelte component
One-click install
npx skills add https://github.com/aarushlohit/TheRocketProject --skill component-forge-aarushlohit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-forge
Source: https://github.com/aarushlohit/TheRocketProject/tree/main/rocket/.github/skills/component-forge
Command: npx skills add https://github.com/aarushlohit/TheRocketProject --skill component-forge-aarushlohit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating accessible and robust UI components that can handle various states and scenarios, ensuring a seamless user experience.

Core Features & Use Cases

  • Component States: Handles all states such as idle, loading, empty, error, success, idle, disabled, focus, and active.
  • Design Patterns: Supports compound components, polymorphic components, and controlled/uncontrolled usage.
  • Accessibility: Adheres to WCAG 2.2 standards, ensuring keyboard accessibility, proper ARIA roles, and more.
  • Use Case: For developers looking to create a comprehensive component library with TypeScript and accessibility in mind.

Quick Start

Use the component-forge skill to build a button component with loading state and accessibility features.

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 UI components with comprehensive state management in React or Vue?▼

Build accessible UI components by constructing production-ready elements with comprehensive state management and WCAG 2.2 compliance. This handles idle, loading, error, and disabled states for React, Vue, and Svelte frameworks.

What states should a production-ready UI component include?▼

A production-ready UI component should include idle, loading, empty, error, success, disabled, focus, and active states. Managing these scenarios ensures a seamless user experience and robust component reliability.

Can I use TypeScript to create polymorphic and compound UI components?▼

Yes, you can use TypeScript to create polymorphic and compound UI components. This approach supports controlled and uncontrolled usage patterns while maintaining strict type safety for your reusable component library.

Does component-forge support Svelte component generation with WCAG 2.2 compliance?▼

Yes, component-forge supports Svelte component generation with WCAG 2.2 compliance. It ensures keyboard accessibility and proper ARIA roles are implemented across React, Vue, and Svelte frameworks.

Do I need TypeScript to generate accessible React components?▼

Yes, TypeScript is a required dependency to generate accessible React components. It provides the strict typing necessary for supporting advanced design patterns like compound and polymorphic components.

What is the best way to ensure keyboard accessibility in a Vue component library?▼

The best way to ensure keyboard accessibility is to enforce WCAG 2.2 standards during component construction. This guarantees proper ARIA roles and keyboard navigation are built into the Vue components.

Related Skills

Explore More Software Engineering Skills→
gluestackgluestack
1

gluestack-ui-v4:variants

Define type-safe component variants with tva for Gluestack UI v4.

Official
Intermediate
cpfcoachingcpfcoaching

frontend-ui-engineering

Automate production-grade UI development with design, accessibility, and responsiveness.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

storybook-play-functions

Automate Storybook interaction tests with userEvent and waitFor assertions.

Official
Intermediate
solrac97grsolrac97gr
2

review-a11y

Review React components against WCAG 2.1 Level AA with jest-axe.

Community
Advanced