Generate Working Prototype

Create fully functional Next.js prototypes with shadcn/ui components from text descriptions. This skill generates design mockups using Composio's Gemini image generation, then immediately builds working React code.

When to Use This Skill

• User requests a working prototype or demo
• Building interactive UI components (kanban boards, dashboards, forms, etc.)
• Creating full-page layouts with shadcn/ui
• Generating designs that need to be immediately testable
• Skip Figma - go directly from idea to working code

Workflow

Step 1: Generate Mockup Image

1. Call Composio to search for Gemini tools:

COMPOSIO_SEARCH_TOOLS({
  queries: [{ use_case: "generate UI mockups and designs" }],
  session: { id: "post" }
})

2. Generate high-quality mockup:

COMPOSIO_MULTI_EXECUTE_TOOL({
  tools: [{
    tool_slug: "GEMINI_GENERATE_IMAGE",
    arguments: {
      model: "gemini-3-pro-image-preview",
      prompt: "[detailed prompt - see references/prompt-engineering.md]",
      aspect_ratio: "16:9",
      image_size: "2K",
      temperature: 0.7
    }
  }],
  session: { id: "post" }
})

3. Extract and save image:

• Get URL from response.data.results[0].response.data.image.s3url
• Save to docs/working/designs/[feature-name]-mockup.png

Reference: Read references/prompt-engineering.md for the base prompt template and example prompts for kanban boards, dashboards, and form pages.

Step 2: Build Working Components

Create actual Next.js components following these patterns:

File Structure:

app/[feature]/
├── page.tsx (main page with "use client" if interactive)
├── components/
│   ├── [main-component].tsx
│   ├── [sub-component].tsx
│   └── [dialog/modal-component].tsx
└── types.ts (TypeScript interfaces)

Component Requirements:

• Import from @/components/ui/* (shadcn components)
• Use TypeScript with proper interfaces
• Follow next-best-practices rules
• Include proper accessibility (ARIA attributes)
• Support dark mode
• Responsive design with Tailwind breakpoints

Reference: Read references/component-patterns.md for Card, Dialog, and Main Page template code examples.

Step 3: Test Instructions

Provide clear instructions:

npm run dev
# Navigate to http://localhost:3000/[feature]

Best Practices

Follow Installed Skills

1. next-best-practices: Promise.all() for parallel ops, avoid barrel imports, React.cache(), minimize re-renders
2. shadcn-ui: Compound components, leverage variants, forward refs, accessibility attributes
3. ui-ux-pro-max: Clear aesthetic direction, distinctive typography, cohesive color palette

Code Quality

• TypeScript for all files
• Proper error handling
• Loading states for async operations
• Optimistic UI updates where appropriate

Performance

• Lazy load heavy components with next/dynamic
• Use Suspense boundaries
• Optimize images with next/image
• Minimize bundle size

Prototype Gotchas

Prototype only. The scaffold uses date-fns (required by shadcn Calendar). Production code must use Luxon per Locked Decisions.

Date Handling

Timestamps in the data layer are always ISO 8601 strings. Date objects exist only at the UI boundary.

Calendar Auto-Close

Desktop inline popovers: auto-close after selection. Mobile sheets: stay open, user dismisses manually.

Error Handling

Composio Errors

• 503 Service Unavailable: Gemini overloaded, retry with backoff
• Rate limits: Queue requests, wait and retry
• Invalid prompts: Simplify and try again
• Missing S3 URL: Check response structure, may be in different field

Code Generation

• If user's request is unclear, ask clarifying questions
• Start with simpler version, then enhance
• Test assumptions with user before complex implementations

Success Criteria

After using this skill, the user should have:

• High-quality mockup image saved to docs/working/designs/
• Working Next.js page at /[feature]
• All components using shadcn/ui properly
• TypeScript types defined
• Responsive, accessible, production-ready code
• Clear instructions to run and test