skills.rest
rashidee
rashideeCOMMUNITY
Explore all skills by this author →
GitHub

mockgen-shadcn

Generate shadcn/ui mockup screens from PRD.md files into a Vite + React 19 + TypeScript scaffold.

3|Updated Mar 15, 2026
Search Tags:#ui#react#vite#prd#shadcn#design-review#mockup
One-click install
npx skills add https://github.com/rashidee/co2-skills --skill mockgen-shadcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mockgen-shadcn
Source: https://github.com/rashidee/co2-skills/tree/main/skills/mockgen-shadcn
Command: npx skills add https://github.com/rashidee/co2-skills --skill mockgen-shadcn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of shadcn/ui mockup screens from PRD.md files to accelerate UI/UX designer reviews.

Core Features & Use Cases

  • Generate a Vite + React 19 + TypeScript mockup project scaffold with a per-role dashboard layout.
  • Produce module-specific pages and sub-pages (detail/create/edit) derived from PRD-driven user stories.
  • Output a MOCKUP.html sitemap and configuration files to preview and share designs with stakeholders.

Quick Start

Provide the application name and version (e.g., hub_middleware v1.0.0) to trigger generation.

Frequently Asked Questions about mockgen-shadcn

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

FAQPage Schema
How do I generate shadcn UI mockups from a PRD document?▼

You can generate shadcn UI mockups from a PRD by providing the application name and version, which triggers creation of a Vite + React 19 + TypeScript scaffold with per-role dashboards and module-specific pages derived from user stories.

Can I create React mockup screens from PRD.md files for design review?▼

Yes, creating React mockup screens from PRD.md files accelerates UI/UX design reviews by automatically producing per-role screen cards, module detail pages, and a MOCKUP.html sitemap to preview and share with stakeholders.

Does the generated mockup scaffold work with Vite and React 19?▼

Yes, the generated mockup scaffold works with Vite and React 19 by outputting a TypeScript project equipped with design tokens, configuration files, and a MOCKUP.html file to preview the shadcn/ui designs.

What is the best way to visualize PRD-driven user stories as UI dashboards?▼

The best way to visualize PRD-driven user stories as UI dashboards is to generate per-role dashboard layouts and module-specific sub-pages, producing a navigable MOCKUP.html sitemap for stakeholder design review.

Can I filter which modules are included when generating shadcn mockup pages?▼

Yes, you can filter which modules are included when generating shadcn mockup pages, as the scaffold supports optional module filtering to focus the design review output on specific application sections.

Related Skills

Explore More Design & Creative Skills→
rashideerashidee
3

specgen-laravel-eloquent-bladehtmx

Generate Laravel specification blueprints from CLAUDE.md, PRD.md, and MOCKUP inputs.

Community
Advanced
daithang-organizationdaithang-organization

React + Ant Design Frontend Development

Builds a React frontend with TypeScript, Vite, and Ant Design.

Official
Intermediate
billlzzz26billlzzz26
4

spark-app-template

Scaffold a Vite React TypeScript app with Tailwind CSS and shadcn UI.

Community
Intermediate
ragnar-pwninskjoldragnar-pwninskjold
125

prd-to-ux

Translate PRDs or product ideas into tool-agnostic screen prompts for UX generators.

Community
Advanced