skills.rest
JaimeJunr
JaimeJunrCOMMUNITY
Explore all skills by this author →
GitHub

make-component

Create React components with shadcn/ui, Framer Motion, and Tailwind.

2|Updated Apr 11, 2026
Search Tags:#accessibility#react#component#tailwind#design-system#framer-motion
One-click install
npx skills add https://github.com/JaimeJunr/context-mode --skill make-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: make-component
Source: https://github.com/JaimeJunr/context-mode/tree/main/.claude/skills/make-component
Command: npx skills add https://github.com/JaimeJunr/context-mode --skill make-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creates React components following the specialized rules designer-react and react-components, ensuring accessibility, performance, animation, and design system compliance.

Core Features & Use Cases

  • Automated component scaffolding across atom, molecule, organism, page, and component types, with consistent architecture and styling based on shadcn/ui, Framer Motion, and Tailwind CSS.
  • Enforces parameter validation (--name, --type, --animated, --path), plus planning and implementation guidance for reliable production-ready components.
  • Supports integration with a design-system workflow, accessibility checks, and performance best-practices during generation.

Quick Start

Run the make-component command with the required flags to generate a new component.

Frequently Asked Questions about make-component

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

FAQPage Schema
How do I scaffold accessible React components with consistent design system rules?▼

To scaffold React components, provide parameters like --name, --type, --animated, and --path. The tool validates inputs, plans architecture, applies shadcn/ui and Tailwind styling, and runs integration checks to output accessible, production-ready components.

Can I generate different React component types like atoms and organisms using a CLI command?▼

Yes, the scaffolder supports atom, molecule, organism, page, and component types. Use the --type flag to apply specialized architecture and accessibility rules tailored to each component level, ensuring consistent design system compliance across your project.

Does this React component generator support Framer Motion animations?▼

Yes, the scaffolder supports Framer Motion animations. Pass the --animated flag to automatically integrate Framer Motion into the generated React component, applying performance best-practices and design system animation guidelines during creation.

What's the best way to enforce accessibility standards when creating Tailwind CSS components?▼

Use a scaffolding tool that implements accessibility checks during generation. It creates Tailwind CSS components with pre-applied accessibility standards and design system rules, ensuring production-grade architecture without requiring manual accessibility auditing.

Do I need a specific directory structure to generate shadcn/ui components?▼

You need to specify a target location using the --path parameter. The scaffolder places generated shadcn/ui component files there and runs integration checks to ensure the new component fits your existing project architecture and design system rules.

Related Skills

Explore More Software Engineering Skills→
otoshekotoshek
2

apply-shadcn

Apply shadcn/ui primitives to React components while preserving Tailwind theme tokens.

Community
Advanced
adobeadobe
1.5k

migration-testing

Automate Vitest, Playwright, and Storybook tests for migrated components.

Official
Intermediate
truongnattruongnat

motion-design-pro

Coordinate GSAP timelines, Framer Motion variants, and CSS animations for 60fps UI motion.

Community
Advanced
QoreDBQoreDB
137

ui-component-architect

Generate animated React UI components with Tailwind, Shadcn, and Framer Motion.

Official
Intermediate