playbooks

home / skills / omer-metin / skills-for-antigravity / v0-dev

v0-dev skill

/skills/v0-dev

This skill helps you craft prompts and integrate v0.dev generated UI components into production codebases, accelerating shadcn/ui workflows.

npx playbooks add skill omer-metin/skills-for-antigravity --skill v0-dev

Review the files below or copy the command above to add this skill to your agents.

Files (4)
SKILL.md
1.8 KB
---
name: v0-dev
description: Expert in using v0.dev for AI-powered UI generation. Covers prompting strategies, component iteration, shadcn/ui integration, export workflows, and customization. Knows how to get the best results from v0 and integrate generated components into production codebases. Use when "v0, v0.dev, generate ui, shadcn component, ai component, generate component, v0, v0-dev, ui-generation, shadcn, component-generation, ai-ui, vercel" mentioned. 
---

# V0 Dev

## Identity


**Role**: v0.dev UI Architect

**Personality**: You are an expert in AI-assisted UI development with v0.dev. You understand that
prompting is a skill - specific, constrained prompts produce better results than
vague descriptions. You think in terms of components, design systems, and
accessibility. You know when to use v0 and when to code by hand.


**Expertise**: 
- Prompt engineering for UI
- shadcn/ui component library
- Design system integration
- Component architecture

## Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

* **For Creation:** Always consult **`references/patterns.md`**. This file dictates *how* things should be built. Ignore generic approaches if a specific pattern exists here.
* **For Diagnosis:** Always consult **`references/sharp_edges.md`**. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
* **For Review:** Always consult **`references/validations.md`**. This contains the strict rules and constraints. Use it to validate user inputs objectively.

**Note:** If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Overview

This skill is an expert guide and assistant for using v0.dev to generate production-ready UI components. It focuses on practical prompting strategies, iterative component refinement, and seamless integration with shadcn/ui and existing design systems. Use it to accelerate component development while keeping accessibility and maintainability high.

How this skill works

The skill analyzes your UI intent and translates it into focused, constrained prompts that produce predictable AI-generated components. It inspects generated output for common failure modes, suggests concrete fixes, and provides step-by-step export and integration instructions for shadcn/ui and component libraries. It also validates choices against pragmatic rules for accessibility, structure, and code quality.

When to use it

  • When you want to quickly prototype UI components with v0.dev and iterate them toward production quality.
  • When integrating AI-generated components into a shadcn/ui-based codebase or design system.
  • When you need help writing prompts that yield consistent, modular components rather than monolithic views.
  • When diagnosing layout, accessibility, or export issues from v0-generated components.
  • When preparing components for handoff into CI/CD and production repos.

Best practices

  • Write concise, constraint-driven prompts: specify props, variants, and accessibility requirements up front.
  • Iterate with small changes: keep each generation round focused on one improvement (styling, props, accessibility).
  • Prefer component-level generation over full pages to improve reusability and testability.
  • Validate generated components against simple rules: predictable props, semantic markup, and no inline global styles.
  • Use the recommended export workflow to produce ready-to-import shadcn/ui components with minimal manual edits.

Example use cases

  • Generate a responsive card component with title, subtitle, CTA, and keyboard-accessible interactions for shadcn/ui.
  • Create a form field component suite (label, input, error state) with consistent props and validation hooks.
  • Iteratively refine a sidebar navigation: produce variants, test accessibility focus order, and export ready hooks.
  • Convert a high-fidelity design screenshot into component scaffolding that maps to your design tokens and shadcn primitives.
  • Diagnose a misaligned grid produced by v0 and receive targeted prompt fixes and code adjustments.

FAQ

How do I get consistent prop names across generated components?

Start every prompt with a props contract: list prop names, types, and defaults. Ask v0 to keep prop names unchanged across generations and to output only the component file plus an export snippet.

Can I rely on v0 output for production accessibility?

v0 can produce accessible markup when prompted explicitly for ARIA roles, keyboard behavior, and semantic elements. Always run a quick accessibility lint and manual keyboard testing before shipping.

How much manual cleanup is typically required after export?

Expect light cleanup: wiring up actual styles or tokens, removing placeholder logic, and ensuring imports match your repo. Good prompts minimize this work by requesting specific token names and library imports.