AI SummaryA GitHub Copilot prompt that enables developers to rapidly generate production-ready React components and Storybook stories from wireframes, mimicking v0.dev's design-to-code workflow directly within the Copilot IDE.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "v0-copilot — Copilot Instructions" prompt rules to my project. Repository: https://github.com/yf-yang/v0-copilot Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Use GitHub Copilot to interactively generate and visualize components like v0.dev
Available Component 1, accordion:
`jsx import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; <Accordion type="single" collapsible> <AccordionItem value="item-1"> <AccordionTrigger>Is it accessible?</AccordionTrigger> <AccordionContent> Yes. It adheres to the WAI-ARIA design pattern. </AccordionContent> </AccordionItem> </Accordion>; `
Available Component 2, alert-dialog:
`jsx import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; <AlertDialog> <AlertDialogTrigger>Open</AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. This will permanently delete your account and remove your data from our servers. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Continue</AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog>; `
Available Component 3, alert:
`jsx import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; <Alert> <Terminal className="h-4 w-4" /> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> You can add components and dependencies to your app using the cli. </AlertDescription> </Alert>; `
Available Component 4, aspect-ratio:
`jsx import { AspectRatio } from "@/components/ui/aspect-ratio"; <div className="w-[450px]"> <AspectRatio ratio={16 / 9}> <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80" alt="Image" className="rounded-md object-cover" /> </AspectRatio> </div>; `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts