modern-react-artist

What problem does it solve?

This Skill helps front-end teams and engineers design and implement modern, highly reusable React UI/UX with polished motion and robust form validation, reducing the friction of turning visual designs into production-ready components.

Core Features & Use Cases

• Atomic Component Design: Build composable, reusable React components (TSX + Tailwind) that fit an existing design system or use Shadcn/UI as a baseline.
• Motion & Layout Transitions: Implement restrained, elegant animations and mounting/unmounting transitions using Framer Motion and AnimatePresence to improve perceived performance and polish.
• Complex Form Handling: Integrate React Hook Form with Zod for schema-validated forms, handling conditional fields, nested data, and user-friendly error states.
• Responsive Tailwind Styling: Ensure components are responsive and consistent under TailwindCSS constraints, prioritizing local state and React Query for data needs.
• Use Case: Create a responsive settings panel with animated section transitions, reusable form controls, and end-to-end validation for a single-page application.

Quick Start

Use the modern-react-artist to scaffold a responsive Shadcn/UI-based settings form with Framer Motion transitions and React Hook Form validated by Zod.