skills.rest
jamsmac
jamsmacCOMMUNITY
Explore all skills by this author →
GitHub

vhm24-ui-generator

Generates TypeScript/React UI screens with tRPC, Drizzle, and Zustand after a spec phase.

Updated Aug 27, 2026
Search Tags:#ui#TypeScript#zustand#generator#tRPC#Drizzle#VendHub
One-click install
npx skills add https://github.com/jamsmac/VHM24 --skill vhm24-ui-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vhm24-ui-generator
Source: https://github.com/jamsmac/VHM24/tree/main/skills/vhm24-ui-generator
Command: npx skills add https://github.com/jamsmac/VHM24 --skill vhm24-ui-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

VendHub OS UI development often involves repetitive boilerplate and inconsistent patterns across frontend and backend layers. This Skill automates the generation of production-ready TypeScript/React screens that adhere to the Warm Brew design system, accelerating delivery and ensuring uniform UX.

Core Features & Use Cases

  • Full-stack screen scaffolding: auto-generates React/TypeScript screens with tRPC routes, Drizzle ORM models, and Zustand stores.
  • Design system compliance: enforces shadcn/ui components, consistent typography, colors, and dark mode support.
  • Spec-driven workflow: relies on an upfront vhm24-ux-spec specification to guide generation and approvals.
  • Use Case: quickly create an admin page, detail view, or modal form for VendHub modules with consistent structure.

Quick Start

Use the vhm24-ui-generator to scaffold a new VendHub screen after validating the spec with vhm24-ux-spec.

Frequently Asked Questions about vhm24-ui-generator

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

FAQPage Schema
How do I generate React TypeScript screens with tRPC and Drizzle ORM?▼

To generate React TypeScript screens with tRPC and Drizzle ORM, you use a spec-driven workflow that scaffolds frontend components and API layers simultaneously. The generator requires an upfront UX specification before creating production-ready code.

What's the best way to scaffold a full-stack admin dashboard with Zustand and shadcn/ui?▼

Scaffolding a full-stack admin dashboard with Zustand and shadcn/ui is best handled by automating boilerplate generation across frontend and backend layers. This ensures consistent design system compliance and uniform UX across all generated screens.

Do I need a UX specification before generating UI components?▼

Yes, a validated UX specification is required before generating UI components. The spec-driven workflow mandates an upfront specification phase to guide the code generation process and ensure approvals are met before implementation begins.

Can I use this UI generator for modal forms and detail views?▼

Yes, you can use this UI generator for modal forms and detail views. It supports scaffolding various screen types including admin dashboards, lists, detail views, and modal forms across the frontend and API layers with consistent structure.

Does the generated TypeScript UI code support dark mode?▼

Yes, the generated TypeScript UI code supports dark mode. Dark mode readiness is implemented natively alongside shadcn/ui components to ensure end-to-end consistency in styling and user experience across all generated screens.

Why does UI development for VendHub require a specific generator?▼

UI development for VendHub requires a specific generator to eliminate repetitive boilerplate and inconsistent patterns across layers. The generator enforces the Warm Brew design system, accelerating delivery while maintaining strict uniform UX standards.

Related Skills

Explore More Software Engineering Skills→
traylinxtraylinx
2

web-artifacts-builder

Bundle React, Tailwind, and shadcn/ui artifacts into a single HTML file.

Official
Advanced
ArieGoldkinArieGoldkin

trpc-scaffolder

Generate type-safe tRPC routers, procedures, and Zod schemas.

Community
Intermediate
AdigunQAdigunQ

supabase-nextjs

Integrate Next.js with Supabase and Drizzle ORM for type-safe database operations.

Community
Advanced
BrunoAlpezdevBrunoAlpezdev

scaffold

Generate Atomic Design boilerplate for Next.js components and TypeScript types.

Community
Intermediate