EasyPlatform wireframe-to-spec

[IMPORTANT] Use

TaskCreate

to break ALL work into small tasks BEFORE starting.

Critical Thinking Mindset — Apply critical thinking, sequential thinking. Every claim needs traced proof, confidence >80% to act. Anti-hallucination: Never present guess as fact — cite sources for every claim, admit uncertainty freely, self-check output for errors, cross-reference independently, stay skeptical of own confidence — certainty without evidence root of all hallucination.

AI Mistake Prevention — Failure modes to avoid on every task:

• Check downstream references before deleting. Deleting components causes documentation and code staleness cascades. Map all referencing files before removal.
• Verify AI-generated content against actual code. AI hallucinates APIs, class names, and method signatures. Always grep to confirm existence before documenting or referencing.
• Trace full dependency chain after edits. Changing a definition misses downstream variables and consumers derived from it. Always trace the full chain.
• Trace ALL code paths when verifying correctness. Confirming code exists is not confirming it executes. Always trace early exits, error branches, and conditional skips — not just happy path.
• When debugging, ask "whose responsibility?" before fixing. Trace whether bug is in caller (wrong data) or callee (wrong handling). Fix at responsible layer — never patch symptom site.
• Assume existing values are intentional — ask WHY before changing. Before changing any constant, limit, flag, or pattern: read comments, check git blame, examine surrounding code.
• Verify ALL affected outputs, not just the first. Changes touching multiple stacks require verifying EVERY output. One green check is not all green checks.
• Holistic-first debugging — resist nearest-attention trap. When investigating any failure, list EVERY precondition first (config, env vars, DB names, endpoints, DI registrations, data preconditions), then verify each against evidence before forming any code-layer hypothesis.
• Surgical changes — apply the diff test. Bug fix: every changed line must trace directly to the bug. Don't restyle or improve adjacent code. Enhancement task: implement improvements AND announce them explicitly.
• Surface ambiguity before coding — don't pick silently. If request has multiple interpretations, present each with effort estimate and ask. Never assume all-records, file-based, or more complex path.

Quick Summary

Goal: Bridge image inputs (wireframes, sketches) to structured UI specifications.

Workflow:

1. Detect Input Type — Hand-drawn, digital wireframe, or screenshot
2. Analyze Image — Use

   ai-multimodal

   with wireframe-specific prompts
3. Generate Spec — ASCII wireframe + components + states + responsive per

   ui-wireframe-protocol.md

4. Output — PBI-compatible

   ## UI Layout

   section or standalone spec file

Key Rules:

Frontend/UI Context (if applicable)

When this task involves frontend or UI changes,

UI System Context — For ANY task touching

.ts

,

.html

,

.scss

, or

.css

files:

MUST ATTENTION READ before implementing:

1. docs/project-reference/frontend-patterns-reference.md

   — component base classes, stores, forms

2. docs/project-reference/scss-styling-guide.md

   — BEM methodology, SCSS variables, mixins, responsive

3. docs/project-reference/design-system/README.md

   — design tokens, component inventory, icons

Reference

docs/project-config.json

for project-specific paths.

• Component patterns:

  docs/project-reference/frontend-patterns-reference.md

  (content auto-injected by hook — check for [Injected: ...] header before reading)
• Styling/BEM guide:

  docs/project-reference/scss-styling-guide.md

• Design system tokens:

  docs/project-reference/design-system/README.md

UI Wireframe Protocol — Wireframe-to-implementation flow: (1) Process design input (Figma/screenshot/sketch via ai-multimodal). (2) Create ASCII wireframe with box-drawing chars. (3) Build component inventory with tier classification (Common/Domain-Shared/Page). (4) Document states (Default/Loading/Empty/Error). (5) Map to design tokens. (6) Define responsive breakpoints. Search existing component libraries before creating new. Progressive detail by skill level (idea=sketch, story=full tree+specs).

• Always require human review — wireframe analysis is 70-80% accurate
• Route to other skills when appropriate (Figma URL →

  figma-design

  , app screenshot →

  design-screenshot

  )

Input Routing

figma.com

/figma-design

/design-screenshot

Wireframe Analysis

Use

ai-multimodal

Prompt 1: Layout Extraction

"Analyze this wireframe image. Identify: (1) page layout regions (header, sidebar, main, footer), (2) all UI elements with approximate position and type (button, input, table, card, dropdown, modal, tabs), (3) content hierarchy (what is primary vs secondary), (4) interactive elements, (5) any text labels or annotations, (6) navigation patterns."

Prompt 2: Component Identification

"From the wireframe, list every distinct UI component. For each: name it descriptively, classify its complexity (primitive=single element, composite=grouped elements, section=page region), note its purpose."

Output Generation

After image analysis, generate output per

ui-wireframe-protocol.md

1. ASCII Wireframe — Recreate layout using box-drawing characters
2. Component Inventory — List with tier classification (Common/Domain-Shared/Page)
3. States Table — Default, Loading, Empty, Error per view
4. Component Decomposition Tree — If detail level warrants (refine/story)
5. Responsive Suggestions — Based on layout complexity

Output Formats

Format A: PBI Section (default)

Output as

## UI Layout

Format B: Standalone Spec

Output as

team-artifacts/design-specs/{YYMMDD}-wireframe-spec-{slug}.md

Confidence & Review

• Always display confidence level for wireframe interpretation
• Always recommend human review before proceeding to implementation
• If confidence <70%: ask user clarifying questions about ambiguous elements via

  AskUserQuestion

Closing Reminders

• IMPORTANT MUST ATTENTION break work into small todo tasks using

  TaskCreate

  BEFORE starting
• IMPORTANT MUST ATTENTION search codebase for 3+ similar patterns before creating new code
• IMPORTANT MUST ATTENTION cite

  file:line

  evidence for every claim (confidence >80% to act)
• IMPORTANT MUST ATTENTION add a final review todo task to verify work quality MANDATORY IMPORTANT MUST ATTENTION READ the following files before starting: <!-- SYNC:ui-system-context:reminder -->
• IMPORTANT MUST ATTENTION read frontend pattern docs, SCSS guide, and design system tokens BEFORE any UI implementation. <!-- /SYNC:ui-system-context:reminder --> <!-- SYNC:ui-wireframe-protocol:reminder -->
• IMPORTANT MUST ATTENTION follow wireframe protocol: ASCII wireframe, component inventory with tiers, states table, design tokens, responsive breakpoints. <!-- /SYNC:ui-wireframe-protocol:reminder -->
• IMPORTANT MUST ATTENTION READ

  CLAUDE.md

  before starting <!-- SYNC:critical-thinking-mindset:reminder -->
• MUST ATTENTION apply critical thinking — every claim needs traced proof, confidence >80% to act. Anti-hallucination: never present guess as fact. <!-- /SYNC:critical-thinking-mindset:reminder --> <!-- SYNC:ai-mistake-prevention:reminder -->
• MUST ATTENTION apply AI mistake prevention — holistic-first debugging, fix at responsible layer, surface ambiguity before coding, re-read files after compaction. <!-- /SYNC:ai-mistake-prevention:reminder -->