V0 Rapid UI Prototyping Workflow Skill

What This Skill Enables

Claude can generate React components and complete page layouts using v0 (Vercel) patterns. This skill covers prompt-driven component creation with shadcn/ui integration, Tailwind CSS styling, TypeScript, and Next.js App Router compatibility, then adding the generated components to your project with the shadcn CLI.

Compatibility

Native

• Claude Code / Claude: native skill usage via SKILL.md.
• Codex/OpenAI workflows: compatible with Agent Skills-style SKILL.md content as reusable workflow instructions.

Manual Adaptation

• Gemini CLI: native skill usage via .gemini/skills/<skill-name>/SKILL.md or .agents/skills/<skill-name>/SKILL.md where supported.
• Cursor: use the generated .cursor/rules/*.mdc adapter for project rules.
• OpenClaw and similar agents: use the same skill content as a reusable prompt/workflow file when native skill import is unavailable.

Prerequisites

Required:

• Next.js 15+ project (App Router)
• TailwindCSS v4.1+ configured
• shadcn/ui components installed
• Node.js 18+

What Claude handles automatically:

• Generating React 19 components with proper TypeScript types
• Applying TailwindCSS v4 styling with CSS variables
• Integrating shadcn/ui components
• Creating responsive, mobile-first layouts
• Adding framer-motion animations
• Implementing accessibility (WCAG 2.2 Level AA)
• Server/Client component distinction

How to Use This Skill

Component Generation from Description

Prompt: "Create a pricing table component with 3 tiers (Basic, Pro, Enterprise). Include monthly/annual toggle, feature lists with checkmarks, and prominent CTA buttons. Use shadcn/ui Card and Button components."

Claude will:

1. Generate TypeScript component with proper types
2. Use shadcn/ui primitives (Card, Button, Switch)
3. Apply TailwindCSS v4 utility classes
4. Implement state management with useState
5. Add responsive grid layout
6. Include accessibility attributes (ARIA labels)
7. Add smooth transitions with CSS

Dashboard Layout Creation

Prompt: "Build an analytics dashboard layout with sidebar navigation, header with search and notifications, stat cards showing KPIs, revenue chart using Recharts, and recent activity table. Make it fully responsive."

Claude will:

1. Create Server Component for static shell
2. Add Client Components for interactive elements
3. Implement responsive sidebar (mobile drawer)
4. Generate stat cards with icons from lucide-react
5. Integrate Recharts with proper TypeScript types
6. Add loading states with Suspense boundaries
7. Include dark mode support via next-themes

Form Generation with Validation

Prompt: "Create a user registration form with email, password, confirm password, and terms acceptance. Use react-hook-form with Zod validation. Show validation errors inline and disable submit until valid."

Claude will:

1. Generate form with shadcn/ui Form components
2. Define Zod schema with comprehensive validation
3. Integrate react-hook-form with zodResolver
4. Add password strength indicator
5. Implement real-time validation feedback
6. Create accessible error messages
7. Add loading state during submission

Landing Page Section

Prompt: "Design a hero section with gradient background, animated headline text, two CTA buttons, and three feature highlights below. Include subtle animations on scroll using framer-motion."

Claude will:

1. Create responsive hero layout
2. Add gradient backgrounds with TailwindCSS
3. Implement text animations with framer-motion
4. Add button hover effects
5. Create feature cards with icons
6. Implement scroll-triggered animations
7. Optimize for Core Web Vitals

Tips for Best Results

1. Be Specific About Components: Mention exact shadcn/ui components you want (Card, Button, Dialog, etc.) for consistent design system usage.

2. Request Mobile-First: Always specify "mobile-first responsive design" to ensure proper breakpoints and touch-friendly interactions.

3. Accessibility First: Ask for WCAG 2.2 Level AA compliance to get proper semantic HTML, ARIA labels, and keyboard navigation.

4. Server vs Client: Clarify if components need interactivity (Client Component with 'use client') or can be static (Server Component).

5. Animation Budgets: Request "performant animations" to get GPU-accelerated framer-motion transitions instead of heavy JavaScript.

6. Dark Mode: Specify "with dark mode support" to get proper color variable usage compatible with next-themes.

Common Workflows

Complete Page Generation

"Create a complete product details page with:
1. Image gallery with thumbnails (Client Component)
2. Product info section (title, price, description)
3. Add to cart button with quantity selector
4. Reviews section with star ratings
5. Related products carousel
6. Mobile-responsive layout with good UX
7. Loading states and error handling"

Component Library Starter

"Generate a set of reusable UI components:
1. CustomButton with variants (primary, secondary, outline, ghost)
2. CustomCard with header, content, footer slots
3. CustomInput with label, error message, help text
4. CustomSelect with search and multi-select
5. All components with TypeScript props, accessibility, and Storybook-ready"

Data Visualization Dashboard

"Build a data visualization dashboard component:
1. KPI summary cards at top (Revenue, Users, Conversion)
2. Line chart for 30-day trends using Recharts
3. Bar chart for category breakdown
4. Pie chart for traffic sources
5. Data table with sorting and filtering
6. Export to CSV functionality
7. Responsive grid that stacks on mobile"

Authentication UI Flow

"Create a complete authentication flow:
1. Login page with email/password and OAuth buttons
2. Registration page with form validation
3. Forgot password page with email input
4. Email verification pending page
5. Password reset page
6. All pages with consistent styling using shadcn/ui
7. Loading states and error handling"

Troubleshooting

Issue: Generated components don't match my design system colors Solution: Ask Claude to use CSS variables from globals.css (--primary, --secondary, etc.) instead of hardcoded color values. Specify "use our existing design tokens."

Issue: Components are not responsive on mobile Solution: Request "mobile-first responsive design with specific breakpoints: sm (640px), md (768px), lg (1024px)" and ask for preview at each breakpoint.

Issue: Too many client components affecting performance Solution: Ask Claude to "identify which components can be Server Components and only use 'use client' for interactive elements like forms, buttons with onClick."

Issue: Animations cause layout shift (CLS) Solution: Request "animations that don't affect layout, using transform and opacity only" to maintain good Core Web Vitals scores.

Issue: TypeScript errors with component props Solution: Ask Claude to "define explicit TypeScript interfaces for all component props with JSDoc comments" for better type safety.

Learn More

• V0.dev Documentation
• shadcn/ui Components
• TailwindCSS v4 Guide
• Next.js 15 App Router
• React 19 Documentation

Features

• Instant React component generation with V0 patterns and AI-powered code generation
• shadcn/ui integration with full type safety and component library compatibility
• TailwindCSS v4 styling with CSS variables and modern utility classes
• Responsive mobile-first layouts with proper breakpoints and touch-friendly interactions
• framer-motion animations with GPU-accelerated transitions for performance
• WCAG 2.2 Level AA accessibility with semantic HTML, ARIA labels, and keyboard navigation
• Server/Client component distinction for optimal Next.js 15 App Router performance
• TypeScript support with explicit prop interfaces and JSDoc comments

Use Cases

• Rapid prototyping of UI designs with instant component generation
• Building production-ready components with shadcn/ui and TailwindCSS
• Creating landing pages and marketing sites with hero sections and CTAs
• Dashboard and admin panel development with data visualization
• Form generation with validation using react-hook-form and Zod
• Component library creation with reusable UI primitives and Storybook-ready code

• Source repositorygithub.com 2025-10-16
• Documentationv0.app
• Package (SHA-256 pinned)/downloads/skills/v0-rapid-prototyping.zip