Skills
.Work. You
Rest

Frontend Component Builder

Community

Generate React components with Tailwind CSS, fast.

Software Engineering#accessibility#React#Tailwind CSS#code refactoring#frontend development#component generation#UI components
Authoramo-tech-ai
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation and refactoring of production-ready React components, ensuring they adhere to best practices for accessibility, responsiveness, and project conventions. It eliminates repetitive coding and ensures consistency across your UI, saving development time.

Core Features & Use Cases

  • Automated Component Generation: Creates React + TypeScript components with Tailwind CSS, including props interfaces and documentation comments.
  • Refactoring Guidelines: Provides clear steps for refactoring existing components, such as converting to functional components or adding TypeScript types.
  • Accessibility & Responsive Design: Automatically includes ARIA labels, semantic HTML, and mobile-first responsive classes in generated code.
  • Use Case: When you need a new EventCard component with specific props, simply describe it, and this skill will generate the component file, including styling, types, and accessibility attributes, ready for use.

Quick Start

Generate component: EventCard

Props: title (string), date (string), imageUrl (string)

Purpose: Display event details with date and image

Dependency Matrix

Required Modules

reacttypescripttailwindcssvitest@tanstack/react-query@supabase/supabase-jslucide-react

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Frontend Component Builder
Download link: https://github.com/amo-tech-ai/medellin-spark/archive/main.zip#frontend-component-builder

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository