component-from-spec

Implement React components from specifications with TDD and accessibility standards.

Updated Apr 1, 2026

Search Tags:#typescript #tdd #accessibility #frontend #react #component #spec

Ready to run

npx skills add https://github.com/hpsgd/claude-marketplace --skill component-from-spec

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-from-spec
Source: https://github.com/hpsgd/claude-marketplace/tree/main/plugins/engineering/react-developer/skills/component-from-spec
Command: npx skills add https://github.com/hpsgd/claude-marketplace --skill component-from-spec

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert a design specification into a fully-implemented React component that adheres to an established project pattern, testing, and accessibility standards.

Core Features & Use Cases

Pattern-matching to existing project conventions (styling, component structure, export patterns) before coding.
Test-driven development: skeletons and tests written prior to implementation to ensure correct API and behavior.
Spec-driven architecture: defines a clear API, state management strategy, accessibility attributes, and responsive behavior.

Quick Start

Implement a React component from the specification at $ARGUMENTS.

Frequently Asked Questions about component-from-spec

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

FAQPage Schema

How do I turn a UI spec into a React component?▼

To turn a UI spec into a React component, you provide the specification as input. The system then designs the component architecture, state management, and accessibility attributes before writing tests and implementing the final code.

What is the best way to build React components using TDD?▼

The best way to build React components using TDD is to write test skeletons and tests prior to implementation. This ensures the correct API and behavior are established before the actual component logic is developed.

Can I generate accessible React components from a specification?▼

Yes, you can generate accessible React components from a specification. The process enforces strict accessibility attributes, responsive behavior, and semantic HTML structure as part of the stepwise architecture guidelines.

How do I match a new React component to existing project conventions?▼

To match a new React component to existing project conventions, the implementation process pattern-matches your established styling, component structure, and export patterns before coding to ensure consistency.

Does this React component generation workflow support TypeScript?▼

Yes, this React component generation workflow supports TypeScript. It enforces a strict prop interface for the component, ensuring type safety and a clear API definition during the spec-driven architecture phase.

When do I need a spec-driven workflow for frontend component development?▼

You need a spec-driven workflow for frontend component development when you require strict adherence to project conventions, testing, and accessibility standards, ensuring consistent UI component architecture across React projects.