staging-ui-first
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
Best use case
staging-ui-first is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
Teams using staging-ui-first should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/staging-ui-first/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How staging-ui-first Compares
| Feature / Agent | staging-ui-first | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
UI-first implementation and staging workflow for Zeus. Use when building routes, components, or forms before backend integration, or when creating UI scaffolds with mock data and later wiring to real APIs.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 mockUsers = [
{ id: '1', name: 'Jane Doe', email: 'jane@example.com' },
{ id: '2', name: 'John Smith', email: 'john@example.com' },
];
export default function UsersPage() {
return (
<section className="space-y-4">
<h1 className="text-2xl font-semibold">Users</h1>
<UsersTable users={mockUsers} isLoading={false} />
</section>
);
}
```
---
## Checklist (Staging UI First)
- [ ] Route/component skeleton created
- [ ] Mock data wired for primary views
- [ ] Loading/empty/error states included
- [ ] Responsive behavior validated
- [ ] Accessibility basics checked (labels, focus, contrast)
- [ ] Integration TODOs noted for API wiring
---
## Best Practices
1. Keep mock data realistic (shape and size).
2. Use consistent loading and empty state patterns.
3. Avoid hard-coding auth assumptions; gate later via auth layer.
4. Keep component props stable to minimize refactors.
5. Document mock-to-real integration steps in handoff.
---
## Stop Conditions
STOP and escalate if:
- Required route contracts are missing or ambiguous.
- Mock data conflicts with known schema constraints.
- UI scope changes without updated Product Spec.
---
*Skill Version: 1.0.0*Related Skills
research-first-principle-deconstructor
Rigorous Socratic interrogator and research architect that helps researchers overcome incremental thinking by applying First Principles analysis. Use when a researcher presents a research problem, proposed methodology, draft idea, or scientific hypothesis and wants to expose hidden assumptions, identify fundamental physical/mathematical constraints, generate unconventional radical alternatives, or deepen mechanistic understanding through probing questions. Triggers on phrases like "I want to improve X by doing Y", academic research brainstorming, scientific hypothesis generation, or any request to stress-test, challenge, or deconstruct a research idea. Do NOT trigger for pure literature reviews, writing assistance, or non-research tasks.
mobile-first-design-rules
Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.
koan-entity-first
Entity<T> patterns, GUID v7 auto-generation, static methods vs manual repositories
alignfirst
Collaborative problem-solving protocols: write technical specifications (spec, or alspec), create implementation plans (plan, or alplan), or use Align-and-Do Protocol (AAD). Also generates PR/MR descriptions (aldescription).
aps-doc-staging
Expert documentation generation for staging transformation layers. Auto-detects SQL engine (Presto/Trino vs Hive), documents transformation rules, PII handling, deduplication strategies, and data quality rules. Use when documenting staging transformations.
api-first-design
**API FIRST DESIGN**: 'API 만들어', 'API 설계', '엔드포인트', 'REST', 'Swagger', 'OpenAPI', 'DTO', 'CRUD' 요청 시 자동 발동. *.controller.ts/*.dto.ts/routes/** 파일 작업 시 자동 적용. Contract-First, 표준 응답 포맷, 타입 자동 생성.
hud-first
This skill should be used when the user asks to "build an AI assistant", "create a chatbot", "make an agent that does X for me", "design a copilot feature", "automate this workflow with AI", or requests delegation-style AI features. Offers a reframe from copilot patterns (conversation, delegation) to HUD patterns (ambient awareness, perception augmentation).
bgo
Automates the complete Blender build-go workflow, from building and packaging your extension/add-on to removing old versions, installing, enabling, and launching Blender for quick testing and iteration.
tdd-orchestrator
Master TDD orchestrator specializing in red-green-refactor discipline, multi-agent workflow coordination, and comprehensive test-driven development practices.
tavily-web
Web search, content extraction, crawling, and research capabilities using Tavily API
tauri2-react-rust
Guides development of cross-platform desktop apps with Tauri 2, TypeScript, React, and Rust. Use when building Tauri apps, implementing IPC, designing Rust backend or TypeScript/React frontend, when researching or cloning a website (open site, snapshot elements), when verifying local dev or built frontend in browser, or when the user mentions Tauri, Tauri 2, Rust backend, React frontend, desktop app architecture, invoke/commands, cross-platform, 调研网站, 验证效果, agent-browser.
tauri-svelte-typescript-general
General rules for developing desktop applications using Tauri with Svelte and TypeScript for the frontend.