ui-kit-first-development

Guides dual-track UI development with hi-fi kit prototypes before permanent React/Inertia implementation.

Updated Jul 18, 2026
One-click install
npx skills add https://github.com/daviddatuX25/Serbizyu-2.0 --skill ui-kit-first-development-daviddatux25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-kit-first-development
Source: https://github.com/daviddatuX25/Serbizyu-2.0/tree/main/.cursor/skills/ui-kit-first-development
Command: npx skills add https://github.com/daviddatuX25/Serbizyu-2.0 --skill ui-kit-first-development-daviddatux25

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents teams from building permanent React/Inertia UI before the design direction is validated, by enforcing a dual-track workflow where backend domain work and hi-fi kit prototyping proceed together and the founder approves a prototype before live implementation. ## Core Features & Use Cases - Dual-track workflow: Coordinates backend Pest/domain work with UX psychology notes, placement decisions, and light hi-fi kit prototypes. - Gated permanent UI: Requires capability truth, UX placement notes, a kit prototype, and founder selection before writing permanent React/Inertia components. - Foundation pass exception: Skips alternate prototypes when an accepted kit already exists, aligning live foundation surfaces and stripping dead chrome. - Use Case: When adding a new marketplace listing page to a Laravel + Inertia + React app, produce one or two hi-fi kit prototypes themed to the design kit, get founder approval, then implement the permanent page with Pest and UI verification. ## Quick Start Ask the AI to apply the ui-kit-first-development workflow to prototype and then implement a new product page using the design kit before writing permanent React components.

Frequently Asked Questions about ui-kit-first-development

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

FAQPage Schema
How do I prototype UI before writing permanent React components?▼

Create one or two light hi-fi prototypes in the static design kit, have the founder choose a direction, solidify it in the kit and element inventory, then implement the permanent React/Inertia components from the approved kit.

What is required before building permanent UI in this workflow?▼

Five gates apply: capability truth from the backend, UX psychology and placement notes, a light hi-fi kit prototype, founder selection with kit solidification, and live implementation verified with Pest and UI checks.

Does this workflow work with Laravel, Inertia, and Tailwind?▼

Yes, the locked stack is Laravel with Inertia React, Tailwind v4, and real shadcn components themed to the design kit. The kit itself is a static visual source of truth, not a running React app.

When can I skip the alternate prototype step?▼

The foundation pass exception applies when an accepted kit already exists. You skip alternate prototypes, align live foundation surfaces to the kit, strip dead chrome, and avoid unique-feature scope.

Why must UI not be built before backend capability truth?▼

UI must not invent behavior or chrome without capability truth, so features like an activity feed cannot be designed before the underlying activity capability exists. This keeps the interface honest about what the product actually does.