skills.rest
human-centric-engineering
human-centric-engineeringOFFICIAL
Explore all skills by this author →
WebsiteGitHub

component-builder

Generate reusable React components with TypeScript interfaces and accessibility attributes.

3|Updated Dec 12, 2025
Search Tags:#typescript#accessibility#react#next.js#component#shadcn/ui
One-click install
npx skills add https://github.com/human-centric-engineering/sunrise --skill component-builder-human-centric-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-builder
Source: https://github.com/human-centric-engineering/sunrise/tree/main/.claude/skills/component-builder
Command: npx skills add https://github.com/human-centric-engineering/sunrise --skill component-builder-human-centric-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of reusable React components for the Sunrise project, ensuring consistency, adherence to best practices, and efficient development.

Core Features & Use Cases

  • Component Generation: Creates new React components based on descriptions, following shadcn/ui patterns.
  • TypeScript Interfaces: Automatically generates proper TypeScript interfaces for component props.
  • Accessibility: Incorporates essential accessibility attributes into components.
  • Use Case: When you need to add a new marketing section like a "Features Grid" or a "Pricing Table" to your application, this Skill will generate the component file with all necessary structure and best practices.

Quick Start

Use the component-builder skill to create a new marketing component for a pricing table.

Frequently Asked Questions about component-builder

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

FAQPage Schema
How do I generate a reusable React component with TypeScript and accessibility built in?▼

To generate a reusable React component with TypeScript and accessibility, describe the component you need and the builder creates a file adhering to shadcn/ui patterns, proper TypeScript interfaces, and standard accessibility attributes.

Can I create shadcn/ui pattern components for Next.js marketing sections?▼

Yes, you can create shadcn/ui pattern components for Next.js marketing sections like Features Grids or Pricing Tables, generating the complete file structure with Tailwind CSS styling.

Does the generated component include TypeScript interfaces for props?▼

Yes, the generated component includes TypeScript interfaces for props automatically, ensuring proper type safety and adherence to TypeScript standards within your React project.

What's the best way to build accessible forms in a Next.js project?▼

The best way to build accessible forms in a Next.js project is using a component builder that automatically incorporates essential accessibility attributes into the generated React component files.

Are there limitations when building shared utility components with Tailwind CSS?▼

There are no specific limitations mentioned for building shared utility components with Tailwind CSS, as the builder supports creating various component types including shared utilities using Tailwind.

Related Skills

Explore More Software Engineering Skills→
tambo-aitambo-ai
11.2k

start-from-scratch

Recommend stacks and setup steps for starting a new Tambo project.

Official
Advanced
masermediagroup-stackmasermediagroup-stack
1

shadergradient

Integrate shader-based animated gradients into React/Next.js interfaces.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
jhl-labsjhl-labs
50

React & shadcn/ui Components

Guides React component development with TypeScript and shadcn/ui for consistent UI primitives and accessibility compliance.

Official
Intermediate