skills.rest
engrate
engrateOFFICIAL
Explore all skills by this author →
WebsiteGitHub

react-component-developer

Create and maintain Tailwind-based React components with accessible patterns.

1|Updated Jan 28, 2026
Search Tags:#accessibility#react#tailwind#design-patterns#component-library#ui-design-system
One-click install
npx skills add https://github.com/engrate/eg-components --skill react-component-developer-engrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-component-developer
Source: https://github.com/engrate/eg-components/tree/main/.github/skills/react-component-developer
Command: npx skills add https://github.com/engrate/eg-components --skill react-component-developer-engrate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create, extend, and maintain a Tailwind-based React component library that promotes consistency and reusability across teams.

Core Features & Use Cases

  • Scaffolds new components using a standardized, accessible pattern aligned with Tailwind design tokens.
  • Provides guidance for design-system primitives, form elements, and layout components with consistent APIs.
  • Triggers on requests for component creation, version updates, documentation, accessibility implementation, and API design.

Quick Start

Assemble a new component directory under components/, implement with Tailwind-styled patterns, and reference the SKILL.md guidelines to ensure consistency.

Frequently Asked Questions about react-component-developer

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

FAQPage Schema
How do I scaffold a React component library with Tailwind?▼

Scaffold React components by automating directory creation under components/ and applying standardized patterns with Tailwind design tokens, forwardRef, and class-merge utilities for consistent, reusable UI components.

How do I ensure accessibility in a React UI component?▼

Ensure React component accessibility by implementing semantic HTML and ARIA attributes aligned with standardized design-system patterns to support screen reader interaction and compliance.

What is the best way to maintain consistent component APIs in React?▼

Maintain consistent React component APIs by enforcing a standardized pattern with forwardRef, class-merge utilities, and clearly defined APIs across design-system primitives and form elements.

Can I use this to document APIs for existing React components?▼

Yes, you can document APIs for existing React components. The workflow triggers on requests for documentation, version updates, and accessibility implementation to maintain library consistency.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
zxpmailzxpmail
18

release-builder

Automate build, test, and publish lifecycle for web, desktop, and CLI applications.

Community
Advanced
fiatkongenfiatkongen

react-tailwind-v4-components

Standardize React UI components with Tailwind v4, shadcn/ui, and Radix primitives.

Community
Basic
MacPhobosMacPhobos

DaisyUI Component Library

Provides 50+ pre-styled semantic UI components with theming and dark mode for Tailwind CSS.

Community
Intermediate