react/component

Generate React components from design contracts and component specifications.

Updated Aug 27, 2026

Search Tags:#typescript #frontend #react #component #tailwind #code-generation #aria

Ready to run

npx skills add https://github.com/f-campana/bifrost --skill react-component-f-campana

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react/component
Source: https://github.com/f-campana/bifrost/tree/main/skills/react/react-component
Command: npx skills add https://github.com/f-campana/bifrost --skill react-component-f-campana

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates the creation of production-grade React components from a Design Contract and component spec, ensuring correct API design, state modeling, and integration patterns.

Core Features & Use Cases

Reads the Design Contract and component specification to drive component generation.
Reads relevant React source material from sanctum/40 Sources/React/ to align with project conventions.
Produces one functional React component as a .tsx file under runestone/src/components/[ComponentName].tsx.
Writes a run report to sanctum/00 Inbox/react-component-[name]-[date].md.
Enforces TypeScript strict mode, Tailwind v4 styling via Press adapter, and React Aria primitives for accessibility.

Quick Start

Produce a production-ready React component from the Design Contract and component specification.

Frequently Asked Questions about react/component

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

FAQPage Schema

How do I generate a production-ready React component from a design spec?▼

To generate a React component, provide a Design Contract and component specification. The Skill outputs a functional .tsx file under your components directory, enforcing TypeScript strict mode, Tailwind v4, and React Aria accessibility.

Can I automate React component engineering with TypeScript strict mode and Tailwind v4?▼

Yes, you can automate React component engineering by feeding a Design Contract into the generation process. It produces a TypeScript strict mode .tsx file styled with Tailwind v4 and integrated with React Aria primitives for accessibility.

What's the best way to ensure React Aria accessibility is correct when creating components?▼

The best way to ensure React Aria accessibility is to drive component generation from a structured Design Contract. This enforces React Aria primitives automatically, ensuring correct API design and repeatable accessibility integration.

Does generating React components this way require a specific project structure?▼

Generating React components requires a specific project structure to place outputs correctly. The Skill writes the component .tsx file to runestone/src/components/ and saves a run report under the sanctum directory.

How does a Design Contract drive React state modeling and API design?▼

A Design Contract drives React state modeling by defining the component specification upfront. The generation process reads this contract to automate correct API design, state modeling, and integration patterns for the output .tsx file.

Why use a Design Contract for React component code generation?▼

Using a Design Contract for React code generation ensures correct API design and repeatable state modeling. It automates the creation of production-grade components while enforcing TypeScript strict mode and React Aria accessibility standards.