skills.rest
amo-tech-ai
amo-tech-aiCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Component Builder

Generate React and TypeScript components with Tailwind CSS and accessibility attributes.

Updated Oct 12, 2025
Search Tags:#accessibility#React#Tailwind CSS#code refactoring#frontend development#component generation#UI components
One-click install
npx skills add https://github.com/amo-tech-ai/medellin-spark --skill frontend-component-builder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Component Builder
Source: https://github.com/amo-tech-ai/medellin-spark/tree/main/.claude/archive/skills/frontend-builder
Command: npx skills add https://github.com/amo-tech-ai/medellin-spark --skill frontend-component-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, tailwindcss, vitest, @tanstack/react-query, @supabase/supabase-js, lucide-react.

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

Frequently Asked Questions about Frontend Component Builder

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

FAQPage Schema
How do I generate React components with Tailwind CSS automatically?▼

This Skill generates production-ready React components with Tailwind CSS styling, TypeScript types, and semantic HTML in one step. Describe your component's purpose and props, and it creates the full component file following accessibility and responsive design conventions.

Can I use this to refactor existing React components?▼

Yes. The Skill refactors existing components by converting them to functional components, adding TypeScript types, applying Tailwind CSS classes, and ensuring accessibility attributes are included. It follows Medellin Spark conventions for consistency.

Does the generated code include accessibility features?▼

Yes. Generated components automatically include ARIA labels, semantic HTML elements, and mobile-first responsive Tailwind classes. All code meets accessibility and responsive design best practices out of the box.

What dependencies do I need to use this Skill?▼

You need React, TypeScript, and Tailwind CSS in your project. The Skill also supports vitest for testing, @tanstack/react-query for data fetching, @supabase/supabase-js for backends, and lucide-react for icons.

How does this compare to writing components manually?▼

Manual component writing is repetitive and error-prone. This Skill eliminates boilerplate, ensures consistent typing and styling, adds accessibility by default, and integrates tests—saving development time while maintaining code quality.

Can I generate components for forms, cards, and dashboards?▼

Yes. The Skill generates components for forms, cards, dashboards, wizards, and grids. Each is created with full TypeScript support, Tailwind styling, semantic HTML, and optional vitest-compatible tests.

Related Skills

Explore More Software Engineering Skills→
amo-tech-aiamo-tech-ai

React Frontend Development

Develop React frontend components with TypeScript, Tailwind CSS, and shadcn/ui.

Community
Intermediate
ferdousbhaiferdousbhai
3

tanstack-start

Create and deploy full-stack React applications with TanStack Start.

Community
Advanced
pedronauckpedronauck
567

react

Guides React development with best practices for component architecture, state management, and TypeScript integration.

Community
Intermediate
skilld-devskilld-dev
174

unovis-vue-skilld

Provide modular Vue charting components for data visualization across multiple frameworks.

Official
Advanced