Product UI Kit

Use this skill when the user asks to start, scaffold, or ground a frontend repo, build a high-confidence mockup foundation, configure shadcn/Tailwind agent practices, or prepare a product UI that can move from prototype to production without a rewrite. It is intentionally generic and reusable across SaaS apps, chat apps, dashboards, internal tools, admin panels, map apps, workflow tools, and AI products.

The default philosophy is open-source, source-owned, reusable, and production-shaped: install the smallest durable base, use shadcn/Tailwind-compatible OSS blocks before hand-building common surfaces, create explicit frontend rules for agents, and add specialized libraries only when the product requires them. The first iteration should feel 90% usable without the user needing frontend expertise.

Default Stack

• App: Next.js for product apps, Vite for lightweight mockups/SPAs.
• Language: TypeScript.
• Styling: Tailwind CSS.
• UI: shadcn/ui plus lucide-react.
• Agent support: shadcn docs/skills when available in the user's environment; repo-local guidance in .agents/frontend/ for Pi Agent and other Agent Skills runtimes.
• Block sourcing: open-source shadcn-compatible registries first; no premium/pro providers unless the user explicitly opts in.
• Maps: MapLibre GL JS only for map/geospatial apps.
• State: React state first; Zustand only when envelope/map/undo/filter state becomes awkward.
• Forms/tables/tests: add React Hook Form + Zod, TanStack Table, and Playwright only when the feature needs them.

Workflow