nezam-wireframe-catalog

skill_id	nezam-wireframe-catalog
name	nezam-Wireframe Catalog
tier	3
description	Generate precise high-fidelity ASCII wireframes as implementation contracts during /PLAN design wireframes.
version	2.0.0
updated	"2026-05-11T00:00:00.000Z"
changelog	[]

[!CAUTION] DEPRECATED: This skill has been merged into wireframe-pipeline. Please use skills/design/wireframe-pipeline/SKILL.md instead.

Wireframe Catalog Skill

Purpose

Generate precise, high-fidelity ASCII wireframes that serve as implementation contracts. Not sketches — spatial specifications that developers can build from directly.

Quality Standard

Every wireframe produced by this skill must include:

1. Grid structure — column count, named zones (sidebar/content/aside)
2. Component slots — every UI piece named with variant
3. Content hierarchy — H1/H2/H3/body/caption zones labeled
4. All interaction states — default, hover, focus, active, loading, empty, error
5. Spacing annotations — named tokens (xs/sm/md/lg/xl), not px values
6. Responsive pair — desktop (1440px) + mobile (390px) always
7. Navigation context — where in user flow, breadcrumb
8. Accessibility map — tab order, landmarks, ARIA roles

Output Format

For each screen, produce in this exact structure:

╔══════════════════════════════════════════════════════════════════╗
║  SCREEN: [Name]              ID: [screen_id]                    ║
║  Route: [url path]           Type: [auth/public/admin]          ║
║  User: [who sees this]       Flow: [step N of N]                ║
╚══════════════════════════════════════════════════════════════════╝

─── DESKTOP — 12 col · 1440px ────────────────────────────────────

┌──────────────────────────────────────────────────────────────────┐
│ NAVIGATION [col 1–12]                              gap: none     │
│ ┌──────────┐ ┌─────────────────────────┐ ┌────────────────────┐ │
│ │ Logo     │ │ Home · About · Pricing  │ │ Login  [Sign Up ▶] │ │
│ │ [brand]  │ │ gap: lg between items   │ │                    │ │
│ └──────────┘ └─────────────────────────┘ └────────────────────┘ │
│ col: 2       col: 6                       col: 4                │
│ State: default / scrolled (shadow + bg-surface)                  │
│ Mobile: hamburger menu [≡], drawer slides from right             │
└──────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────────────────┐
│ HERO [col 1–12]                            padding: xl top/bottom│
│ ┌────────────────────────────┐ ┌─────────────────────────────┐  │
│ │ [BADGE] New — v2 launch    │ │                             │  │
│ │                            │ │   [Illustration / Video]    │  │
│ │ H1: [Main headline text]   │ │   ratio: 16:9               │  │
│ │ max-width: 560px           │ │   bg: gradient-subtle       │  │
│ │                            │ │                             │  │
│ │ Body: [Supporting text]    │ │   Loading state:            │  │
│ │ max-width: 480px           │ │   → skeleton rect           │  │
│ │ color: text-muted          │ │                             │  │
│ │                            │ └─────────────────────────────┘  │
│ │ [Primary CTA  →]  [Demo]   │ col: 5                           │
│ │ gap: sm between CTAs       │                                  │
│ └────────────────────────────┘                                  │
│ col: 7                                                           │
│ States: default · hover-cta (scale 1.02) · loading (skeleton)   │
└──────────────────────────────────────────────────────────────────┘

─── MOBILE — 4 col · 390px ───────────────────────────────────────

[Reflow to single column — show nav → badge → H1 → body → CTA → image]
[Image moves below CTA on mobile]
[CTA becomes full-width button]

─── STATES ───────────────────────────────────────────────────────

  Default:  [as wireframe above]
  Loading:  Nav intact · Hero: skeleton (title/body/cta blocks) · Image: shimmer
  Empty:    N/A for landing
  Error:    Toast notification: "[Error description]" · Retry link

─── COMPONENT INVENTORY ──────────────────────────────────────────

  NavBar         variant: transparent · scrolled: solid + shadow
  Badge          variant: info · size: sm
  Heading        level: h1 · size: display-lg · weight: bold
  BodyText       size: body-lg · color: text-muted
  CTAButton      variant: primary · size: lg · icon: arrow-right
  CTAButton      variant: ghost · size: lg
  HeroMedia      type: illustration · loading: skeleton

─── ACCESSIBILITY ────────────────────────────────────────────────

  Landmarks:   <header> nav · <main> · <section aria-label="Hero">
  Tab order:   Logo → Nav links → Login → Sign Up → Hero CTA → Demo
  Focus rings: 2px solid · color: primary-500 · offset: 2px
  Heading:     H1 is first and unique on page
  Images:      descriptive alt · decorative → alt=""
  Motion:      hero animation respects prefers-reduced-motion

Element Sequence by Product Type

Present elements ONE AT A TIME. User picks variant before next element appears.

Website / Landing Page

1. Navigation / Header (3 variants: centered logo / left logo + nav / transparent hero-overlap)
2. Hero / Above-fold (3 variants: split / centered / full-bleed)
3. Feature Grid (3 variants: 3-col icons / alternating / bento)
4. Social Proof (3 variants: logo row / testimonial cards / metrics bar)
5. Pricing (3 variants: 2-tier / 3-tier / usage-based)
6. CTA Section (3 variants: centered / split / sticky-bar)
7. Footer (3 variants: 4-col / minimal / with newsletter)

Web App / SaaS

1. App Shell (3 variants: top nav / sidebar / hybrid)
2. Dashboard Layout (3 variants: metric cards / data tables / activity feed)
3. Data Table / List (3 variants: full table / card list / kanban)
4. Detail / Edit View (3 variants: side panel / full page / modal)
5. Empty States (show 3 types: first-use / no-results / error)
6. Onboarding Flow (3 variants: checklist / wizard / interactive tour)
7. Settings Page (3 variants: vertical tabs / horizontal / sections)
8. Modal / Drawer (3 variants: centered modal / right drawer / bottom sheet)

Mobile App

1. Navigation Pattern (3 variants: bottom tab / top tab / gesture-drawer)
2. Home Screen (3 variants: feed / dashboard / map)
3. List / Feed (3 variants: cards / rows / story)
4. Detail Screen (3 variants: hero image / info card / split)
5. Onboarding (3 variants: swipe cards / illustration / progress bar)
6. Profile / Settings (3 variants: header card / sections list / edit inline)

Output Files (after all selections made)

1. .nezam/core/plans/04-design/DESIGN_CHOICES.yaml — locked YAML of every selection (or DESIGN_CHOICES.md if the active /plan contract uses markdown — keep repo-consistent)
2. Updated root DESIGN.md — full token contract + component specs
3. .nezam/core/plans/04-design/WIREFRAMES.md — all screens with full wireframes
4. .nezam/core/plans/04-design/COMPONENT_INVENTORY.md — every component, variant, state

Trigger

• During /PLAN design wireframes after IA is locked
• Standalone when the user or plan phase invokes this skill by name