staging-ui-firstlisted
Install: claude install-skill diegosouzapw/awesome-omni-skill
# Staging UI First
> **Skill Purpose:** Build UI scaffolds early with mock data, validate layout and interactions, then integrate with real data sources.
---
## Core Skill Pattern
**Objective:** Deliver working UI flows fast by staging UI using mocks/placeholders, then replace with real data and auth.
**Universal Pattern:**
1. Define route/component scope from INTERFACE_CONTRACT and PRODUCT_SPEC.
2. Build UI with mock data and placeholder states.
3. Validate layout, accessibility, and responsive behavior.
4. Add loading/empty/error states.
5. Integrate real API/data once endpoints and schema are ready.
**Key Decisions (Project-Specific):**
- Mock data strategy (inline fixtures vs shared mock utilities)
- Loading/error state design
- When to switch from mock to live data
- Auth gating requirements for staged UI
---
## Project-Specific Implementation Notes (Zeus)
**Default stack:** Next.js App Router + shadcn/ui + Tailwind CSS.
**Staging rules:**
- Use mocks for UI-first build until API and schema are available.
- Clearly label mock data blocks and TODOs for integration.
- Preserve component contracts (props, types) to ease later wiring.
---
## Example Staging Flow (Next.js App Router)
1. Create route skeleton and layout.
2. Render with mock data arrays and placeholder UI.
3. Add empty/error states.
4. Replace mock data with real fetch when API is ready.
```tsx
// app/(dashboard)/users/page.tsx
import { UsersTable } from '@/components/users/users-table';
const mo