nezam-design-context-init

skill_id	nezam-design-context-init
name	nezam-Design Context Init
description	Run before any design work on an unfamiliar codebase — extracts full UI context (components, layouts, routes, tokens, pages, extractable components) into 6 structured files in .cursor/context/design-init/.
version	1.0.0
updated	"2026-05-12T00:00:00.000Z"
changelog	null
owner	design-lead
tier	1
sdd_phase	Design
rtl_aware	true
certified	false
dependencies	null

Design Context Init

Purpose

Collect and document the full design context of the current codebase before any design iteration begins. Produces 6 structured reference files that every subsequent design skill depends on. Without this, design work operates blind.

Trigger Conditions

• Starting design work on a codebase for the first time.
• Any of the 6 output files are missing from .cursor/context/design-init/.
• Any output file is stale (source UI files have changed since the file was last written — check by comparing file modification timestamps).
• Explicitly invoked via /START design or design-context-init.

Prerequisites

• Access to the full codebase (read all component, layout, and style files).
• DESIGN.md exists at the repo root (design token contract).
• Tailwind config file exists (tailwind.config.ts or tailwind.config.js).

Procedure

1. Create output directory .cursor/context/design-init/ if it does not exist.

2. Write components.md

   • Find all UI primitive component files (Button, Input, Select, Card, Badge, Modal, etc.) — typically in components/ui/, src/components/, or app/components/.
   • Write the FULL source code of each file. No excerpts. No summaries.
   • Group by component type. Include the file path as a heading above each component's source.

3. Write layouts.md

   • Find all shared layout files (RootLayout, PageLayout, DashboardLayout, Sidebar, Header, Footer).
   • Write the FULL source code of each. Include file path headings.

4. Write routes.md

   • Map every route/page entry point.
   • Format: route path → file path → primary components used.
   • Include dynamic routes (e.g., /[id]), API routes if relevant to UI, and layout wrappers per route.

5. Write theme.md

   • Extract ALL CSS custom properties (variables) from globals.css or equivalent.
   • Extract ALL Tailwind config values (colors, spacing, fontFamily, borderRadius, animation, etc.).
   • Extract ALL design tokens from DESIGN.md.
   • Format: section per token category (Color, Spacing, Typography, Radius, Shadow, Motion).
   • Zero omissions — if a token exists, it is in this file.

6. Write pages.md

   • For each key page (prioritize: home, dashboard, auth pages, most-visited):
     • List all components imported (direct and transitive).
     • List all tokens consumed (which CSS variables / Tailwind classes are used).
     • Note which components are page-specific vs shared.

7. Write extractable-components.md

   • List components that are repeated across 2+ pages but not yet in components/ui/.
   • For each: current location, current prop surface (if any), recommended extraction name.
   • Also list any components in components/ui/ that are overly monolithic and could be split.

8. Write timestamp — append to each file: > Last updated: <ISO timestamp>. Re-run if source files changed.

Output Artifacts

• .cursor/context/design-init/components.md
• .cursor/context/design-init/layouts.md
• .cursor/context/design-init/routes.md
• .cursor/context/design-init/theme.md
• .cursor/context/design-init/pages.md
• .cursor/context/design-init/extractable-components.md

Validation Checklist

• All 6 files exist in .cursor/context/design-init/
• components.md contains full source, not excerpts
• theme.md contains every CSS variable from globals.css and every token from DESIGN.md
• routes.md covers all app entry points (check app/ or pages/ directory count matches)
• No file contains placeholder text like "TODO" or "..."
• All files have the timestamp footer

Handoff Target

design/design-iteration-protocol — use the init files as ground truth for all subsequent design work. Also feeds design/design-to-code-handoff, design/wireframe-pipeline, design/interaction-choreography.