skills.rest
f-campana
f-campanaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/f-campana/bifrost --skill react-component-f-campana
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
teamniteoteamniteo
5

website-builder

Generate Astro websites with Tailwind CSS v4 and Cloudflare Workers.

Official
Advanced
beemanbeeman
12

heroui-react

Implement HeroUI v3 components in React with Tailwind CSS v4 theming.

Community
Intermediate
codebar-agcodebar-ag
3

design

Standardize Blade UI components and styling across Laravel views.

Official
Advanced
shawn-sandyshawn-sandy

component-icon

Generate an accessible React Icon component with inline SVG paths and ARIA behavior.

Community
Basic