Malevich

v1.0 architecture

CC work plan + Gantt

Claude Code work plan — what can ship tonight vs what's blocked

This is the action layer on top of the roadmap. It identifies what work CC can execute right now (parallel to your Figma design work), what work is blocked by Figma decisions, and the dependency graph between tasks.

Categorization

Every task falls into one of three buckets:

🟢 SHIP TONIGHT — pure architecture work

TASK-A1 — Write ADR-0006 (Component classification by functional role)

Estimated: 1-2 hours of CC time Blockers: None Output: llm-wiki/decisions/0006-component-classification-by-functional-role.md

CC writes the ADR documenting the four-layer model based on 01-master-diff-merge.md Section 2. References Section 1-2 quiz decisions. No visual elements. Pure text.

TASK-A2 — Write ADR-0007 (Modifier system as cross-cutting layer)

Estimated: 2 hours of CC time Blockers: None Output: llm-wiki/decisions/0007-modifier-system-cross-cutting.md

Pure architectural document. 7 categories, namespace separation, selective inheritance, applicability matrix.

TASK-A3 — Write ADR-0008 (Token tier strict separation)

Estimated: 1-2 hours of CC time Blockers: None Output: llm-wiki/decisions/0008-token-tier-strict-separation.md

TASK-A4 — Write ADR-0009 (Semantic typography naming)

Estimated: 1-2 hours of CC time Blockers: None Output: llm-wiki/decisions/0009-semantic-typography-naming.md

TASK-A5 — Write ADR-0013 (Form subsystem separation)

Estimated: 1 hour of CC time Blockers: None Output: llm-wiki/decisions/0013-form-subsystem-separation.md

TASK-A6 — Token system migration (M-3)

Estimated: 8-16 hours of CC time Blockers: None (token values stay numerically the same; only naming/structure changes) Output:

This is critical-path work. CC can knock it out in one focused session.

TASK-A7 — Modifier system rename (M-4)

Estimated: 4-8 hours of CC time Blockers: TASK-A6 must complete first (modifier values reference tokens) Output:

TASK-A8 — Component layer reorganization (M-5)

Estimated: 4-8 hours of CC time Blockers: None (file moves don't depend on tokens or modifiers) Output:

Can run in parallel with TASK-A6 and TASK-A7.

TASK-A9 — Lint rule additions (M-6)

Estimated: 4-6 hours of CC time Blockers: TASK-A6 (tokens) and TASK-A7 (modifiers) must complete first Output:

TASK-A10 — Component AGENTS.md generation (M-7 partial)

Estimated: 8-12 hours of CC time Blockers: TASK-A6 (need new token names for token-to-component mapping) Output:

TASK-A11 — Migration verification + v0.2.0 tag (M-8)

Estimated: 2-4 hours of CC time Blockers: All migration tasks (A6-A10) must complete first Output:

TASK-A12 — Build Divider component

Estimated: 1-2 hours of CC time Blockers: None (CSS-only, trivial) Output:

Divider is the simplest new v1.0 component. CC can build it as warm-up.

TASK-A13 — Build Kbd component

Estimated: 1 hour of CC time Blockers: None (CSS-only, trivial) Output:

TASK-A14 — Build Code (inline) component

Estimated: 2-3 hours of CC time Blockers: TASK-A14b (copyable behavior must exist first) Output:

TASK-A14b — Build Copyable behavior modifier (runtime)

Estimated: 2-3 hours of CC time Blockers: None Output:

This behavior is consumed by Code (TASK-A14), Code block (future v1.0 task), and any user component that opts in via data-copyable="true".

TASK-A15 — Build Spinner component

Estimated: 2-3 hours of CC time Blockers: None (no visual decisions needed — generic spinner) Output:

TASK-A16 — Build Skeleton component

Estimated: 2-3 hours of CC time Blockers: None Output:

TASK-A17 — Build Dots component

Estimated: 1-2 hours of CC time Blockers: None Output:

TASK-A18 — Build Image component (with <picture> support)

Estimated: 3-4 hours of CC time Blockers: None Output:

TASK-A19 — Build Breadcrumb component

Estimated: 1-2 hours of CC time Blockers: None (semantic HTML, simple styling) Output:

TASK-A20 — Update existing Button to 5 variants

Estimated: 2-3 hours of CC time Blockers: TASK-A6 (tokens) — new variants need status colors Output:

🟡 PARTIAL — can start, polish after Figma

TASK-B1 — Build Icon system foundation + Phosphor adapter

Estimated: 8-12 hours of CC time Why partial: CC can implement the technical infrastructure (mask-image rendering, data-icon system, pack adapter API). But the canonical icon name list (~100 icons) and the selection principles documentation needs your design taste. Output (CC can do tonight):

Needs your input later:

TASK-B2 — Build Field-group + Label + HelperText + Error

Estimated: 8-12 hours of CC time Why partial: Structure is well-defined (P-3.3, Q3.10). Visual rhythm between elements needs Figma reference for spacing, error indicator design. Output (CC can do tonight):

Needs your input later:

TASK-B3 — Build Switch + Toggle

Estimated: 4-6 hours of CC time Why partial: Behavioral logic is clear (binary state). Visual character (track style, thumb design) needs your eye. Output (CC can do tonight):

Needs your input later:

TASK-B4 — Build Accordion (built on <details>)

Estimated: 4-6 hours of CC time Why partial: Built on native <details>. Functionally clear. Visual transitions need design input. Output (CC can do tonight):

Needs your input later:

TASK-B5 — Build State block (4 variants)

Estimated: 4-6 hours of CC time Why partial: Structure clear (P-4.3). Per-variant visual treatment needs Figma. Output (CC can do tonight):

Needs your input later:

TASK-B6 — Token system extensions (typography role naming)

Estimated: 4-6 hours of CC time Why partial: Naming decided. Actual size values for display.hero/statement/title need verification with Figma type scale. Output (CC can do tonight):

Needs your input later:

TASK-B7 — Documentation site scaffold

Estimated: 16-24 hours of CC time Why partial: Architecture clear from prior Phase 3 work. But the visual character of the site is what's blocked — your Figma template defines the look. Output (CC can do tonight):

Needs your input later:

CC builds the "scaffolding without visuals" — meaning structure exists but uses raw Malevich defaults, no aesthetic refinement.

🔴 BLOCKED — needs Figma first

TASK-C1 — Card component refinement

Why blocked: Existing Card works but visual model is being redesigned (semantic-tag hybrid + data-pattern). Your Figma reference defines what "card patterns" look like.

TASK-C2 — Site-header component

Why blocked: This is the modifier-rich component (shape × surface × background × behavior). Visual variations need Figma reference.

TASK-C3 — Site-footer component

Why blocked: Heavily aesthetic. Your manifesto voice + visual rhythm define footer character.

TASK-C4 — Hero ready section

Why blocked: Most visible page element. Patterns (standard / centered / split / minimal) need Figma reference.

TASK-C5 — CTA ready section

Why blocked: Aesthetic-heavy component. Needs Figma.

TASK-C6 — Sheet overlay

Why blocked: Animation character, edge styling, internal layout all need design input.

TASK-C7 — Toast + Notifications

Why blocked: Visual character, animation feel, density decisions need Figma.

TASK-C8 — Popover styling

Why blocked: Functional (with Floating UI) can be done tonight. Visual chrome needs Figma.

TASK-C9 — Carousel visual chrome

Why blocked: Pagination dots design, prev/next button design, layout proportions need Figma.

TASK-C10 — Existing v0.1.0 components visual polish

Why blocked: All existing components may need adjustments after Figma reference reveals brand decisions. Visual refinement after Figma is faster than guessing now.

TASK-C11 — Effect category implementations (grain, glow, ring, noise, blur)

Why blocked: These are decorative visual effects. Without seeing how you want them to look in Figma, CC will produce generic CSS effects that may not match your aesthetic.

TASK-C12 — Landing page

Why blocked: This is the single most important visual surface of the project. Cannot be done without Figma reference.

TASK-C13 — Animation/motion tuning

Why blocked: Motion presets (none/subtle/standard/expressive) values and curves are tuned to your taste. CC can implement structure with default values; final feel needs your input.

Tonight's execution plan (recommended)

Realistic budget assuming you give CC ~10 hours of overnight work:

Wave 1 — ADRs (parallel, 2 hours total)

Run in 3 parallel CC sessions:

These are independent. CC writes them in parallel. Output: 3 ADR files committed by ~2 hours in.

Wave 2 — Migration sequence (sequential, 6-8 hours)

Single CC session running through M-3 through M-8:

This is the critical path. It cannot be parallelized within itself (each step depends on previous). But CC can crank through it efficiently in one long session.

Wave 3 — Trivial new components (parallel, 4-6 hours total)

Three more CC sessions in parallel:

These are all trivial CSS-only components with clear specs. CC can build 6-7 new components overnight.

What you wake up to

If all goes well:

You're then ready to start Figma work knowing the codebase architecture is solid.

Realistic risk assessment

Likely outcomes:

Possible issues:

If something breaks:

JSON for Gantt diagram visualization

Below is a structured JSON representation of the work plan, designed for use in Claude Cowork to generate a Gantt chart artifact.

{
  "project": "Malevich v1.0 — Architecture & Implementation",
  "start_date": "2026-05-19",
  "phases": [
    {
      "id": "wave-1",
      "name": "Wave 1 — Architectural ADRs",
      "color": "purple",
      "tasks": [
        {
          "id": "a1",
          "name": "ADR-0006 Component classification",
          "duration_hours": 2,
          "depends_on": [],
          "parallel_group": "wave-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a2",
          "name": "ADR-0007 Modifier system",
          "duration_hours": 2,
          "depends_on": [],
          "parallel_group": "wave-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a3",
          "name": "ADR-0008 Token tier separation",
          "duration_hours": 2,
          "depends_on": [],
          "parallel_group": "wave-1",
          "status": "🟢 ship tonight"
        }
      ]
    },
    {
      "id": "wave-2",
      "name": "Wave 2 — Migration sequence (v0.2.0)",
      "color": "blue",
      "tasks": [
        {
          "id": "a6",
          "name": "Token system migration (M-3)",
          "duration_hours": 12,
          "depends_on": ["a3"],
          "parallel_group": null,
          "status": "🟢 ship tonight"
        },
        {
          "id": "a7",
          "name": "Modifier rename (M-4)",
          "duration_hours": 6,
          "depends_on": ["a6"],
          "parallel_group": "migration-mid",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a8",
          "name": "Component layer reorg (M-5)",
          "duration_hours": 6,
          "depends_on": ["a6"],
          "parallel_group": "migration-mid",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a9",
          "name": "Lint rule additions (M-6)",
          "duration_hours": 5,
          "depends_on": ["a7", "a8"],
          "parallel_group": null,
          "status": "🟢 ship tonight"
        },
        {
          "id": "a10",
          "name": "Component AGENTS.md (M-7)",
          "duration_hours": 10,
          "depends_on": ["a6"],
          "parallel_group": "migration-late",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a11",
          "name": "Verify + tag v0.2.0 (M-8)",
          "duration_hours": 3,
          "depends_on": ["a9", "a10"],
          "parallel_group": null,
          "status": "🟢 ship tonight"
        }
      ]
    },
    {
      "id": "wave-3",
      "name": "Wave 3 — Trivial new components (parallel)",
      "color": "green",
      "tasks": [
        {
          "id": "a12",
          "name": "Divider component",
          "duration_hours": 1.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a13",
          "name": "Kbd component",
          "duration_hours": 1,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a14",
          "name": "Code (inline) with copy button",
          "duration_hours": 2.5,
          "depends_on": ["a11", "a14b"],
          "parallel_group": "trivial-batch-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a14b",
          "name": "Copyable behavior modifier (runtime)",
          "duration_hours": 2.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-1",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a15",
          "name": "Spinner component",
          "duration_hours": 2.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-2",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a16",
          "name": "Skeleton component",
          "duration_hours": 2.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-2",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a17",
          "name": "Dots component",
          "duration_hours": 1.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-2",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a18",
          "name": "Image (with picture support)",
          "duration_hours": 3.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-3",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a19",
          "name": "Breadcrumb component",
          "duration_hours": 1.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-3",
          "status": "🟢 ship tonight"
        },
        {
          "id": "a20",
          "name": "Button to 5 variants",
          "duration_hours": 2.5,
          "depends_on": ["a11"],
          "parallel_group": "trivial-batch-3",
          "status": "🟢 ship tonight"
        }
      ]
    },
    {
      "id": "wave-4",
      "name": "Wave 4 — Partial work (CC can start, you polish after Figma)",
      "color": "orange",
      "tasks": [
        {
          "id": "b1",
          "name": "Icon system + Phosphor adapter",
          "duration_hours": 10,
          "depends_on": ["a11"],
          "blockers_human": ["Canonical name list", "Selection principles"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b2",
          "name": "Field-group + Label + HelperText + Error",
          "duration_hours": 10,
          "depends_on": ["a11"],
          "blockers_human": ["Spacing rhythm", "Error visual"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b3",
          "name": "Switch + Toggle",
          "duration_hours": 5,
          "depends_on": ["a11"],
          "blockers_human": ["Track/thumb design", "Animation curve"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b4",
          "name": "Accordion",
          "duration_hours": 5,
          "depends_on": ["a11"],
          "blockers_human": ["Trigger indicator", "Expand animation"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b5",
          "name": "State block (4 variants)",
          "duration_hours": 5,
          "depends_on": ["a11"],
          "blockers_human": ["Per-variant emphasis", "Default icons"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b6",
          "name": "Token typography role names + sizes",
          "duration_hours": 5,
          "depends_on": ["a11"],
          "blockers_human": ["Verify sizes vs Figma type scale"],
          "status": "🟡 partial — polish after Figma"
        },
        {
          "id": "b7",
          "name": "Docs site scaffold",
          "duration_hours": 20,
          "depends_on": ["a11"],
          "blockers_human": ["All visual design from Figma"],
          "status": "🟡 partial — polish after Figma"
        }
      ]
    },
    {
      "id": "wave-5",
      "name": "Wave 5 — Blocked until Figma",
      "color": "red",
      "tasks": [
        {
          "id": "c1",
          "name": "Card component refinement",
          "duration_hours": 8,
          "depends_on": ["figma-cards"],
          "status": "🔴 blocked"
        },
        {
          "id": "c2",
          "name": "Site-header component",
          "duration_hours": 16,
          "depends_on": ["figma-header"],
          "status": "🔴 blocked"
        },
        {
          "id": "c3",
          "name": "Site-footer component",
          "duration_hours": 6,
          "depends_on": ["figma-footer"],
          "status": "🔴 blocked"
        },
        {
          "id": "c4",
          "name": "Hero ready section",
          "duration_hours": 12,
          "depends_on": ["figma-hero"],
          "status": "🔴 blocked"
        },
        {
          "id": "c5",
          "name": "CTA ready section",
          "duration_hours": 6,
          "depends_on": ["figma-cta"],
          "status": "🔴 blocked"
        },
        {
          "id": "c6",
          "name": "Sheet overlay",
          "duration_hours": 10,
          "depends_on": ["figma-sheet"],
          "status": "🔴 blocked"
        },
        {
          "id": "c7",
          "name": "Toast + Notifications",
          "duration_hours": 12,
          "depends_on": ["figma-notifications"],
          "status": "🔴 blocked"
        },
        {
          "id": "c8",
          "name": "Popover styling",
          "duration_hours": 6,
          "depends_on": ["figma-popover"],
          "status": "🔴 blocked"
        },
        {
          "id": "c9",
          "name": "Carousel visual chrome",
          "duration_hours": 8,
          "depends_on": ["figma-carousel"],
          "status": "🔴 blocked"
        },
        {
          "id": "c10",
          "name": "Existing components visual polish",
          "duration_hours": 12,
          "depends_on": ["figma-tokens-confirmed"],
          "status": "🔴 blocked"
        },
        {
          "id": "c11",
          "name": "Effect category implementations",
          "duration_hours": 8,
          "depends_on": ["figma-effects"],
          "status": "🔴 blocked"
        },
        {
          "id": "c12",
          "name": "Landing page",
          "duration_hours": 16,
          "depends_on": ["figma-landing"],
          "status": "🔴 blocked"
        },
        {
          "id": "c13",
          "name": "Animation/motion tuning",
          "duration_hours": 8,
          "depends_on": ["figma-motion-notes"],
          "status": "🔴 blocked"
        }
      ]
    },
    {
      "id": "human-track",
      "name": "Your Figma work (parallel to CC)",
      "color": "pink",
      "tasks": [
        {
          "id": "figma-tokens-confirmed",
          "name": "Confirm token values (colors, type scale, spacing)",
          "duration_hours": 4,
          "depends_on": [],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-cards",
          "name": "Design Card patterns (blog/product/feature/metric)",
          "duration_hours": 6,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-header",
          "name": "Design Site-header variations (shape × surface × background)",
          "duration_hours": 8,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-footer",
          "name": "Design Site-footer",
          "duration_hours": 3,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-hero",
          "name": "Design Hero patterns",
          "duration_hours": 8,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-cta",
          "name": "Design CTA section",
          "duration_hours": 3,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-landing",
          "name": "Design landing page (most important)",
          "duration_hours": 16,
          "depends_on": ["figma-hero", "figma-cta", "figma-header", "figma-footer"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-sheet",
          "name": "Design Sheet overlay",
          "duration_hours": 4,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-notifications",
          "name": "Design Toast + Notifications",
          "duration_hours": 4,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-popover",
          "name": "Design Popover",
          "duration_hours": 3,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-carousel",
          "name": "Design Carousel chrome",
          "duration_hours": 3,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-effects",
          "name": "Design effect variations (grain/glow/ring/noise/blur)",
          "duration_hours": 4,
          "depends_on": ["figma-tokens-confirmed"],
          "owner": "human",
          "status": "🎨 figma work"
        },
        {
          "id": "figma-motion-notes",
          "name": "Define motion character (preset values)",
          "duration_hours": 3,
          "depends_on": [],
          "owner": "human",
          "status": "🎨 figma work"
        }
      ]
    }
  ],
  "legend": {
    "🟢 ship tonight": "Can be done by CC overnight, no human blockers",
    "🟡 partial — polish after Figma": "CC builds structure now, you refine after Figma",
    "🔴 blocked": "Cannot start meaningfully without your Figma input",
    "🎨 figma work": "Your design work (parallel to CC)"
  }
}

Prompt for Cowork to generate Gantt diagram

Paste this prompt into Claude Cowork along with the JSON above:

Use the JSON below to generate an interactive Gantt chart artifact.

Requirements:
- Horizontal bars representing each task, length = duration_hours
- Group tasks by "phase" (color-coded per phase color)
- Show dependency arrows between tasks (depends_on field)
- Distinguish 4 task statuses by visual style:
  - 🟢 ship tonight — solid color bar
  - 🟡 partial — striped pattern
  - 🔴 blocked — outlined, hatched
  - 🎨 figma work — different color row, marked as "human track"
- Display task ID, name, and duration on hover or as label
- Show critical path through Wave 1 → Wave 2 → Wave 3 highlighted
- Add a "today" line at start (2026-05-19)
- Time axis in hours initially, then days for longer view
- Filterable by status (toggle which task types to show)
- Mobile-responsive (stacks tasks vertically on narrow screens)

The chart should help me see:
1. Which tasks CC can execute tonight in parallel
2. The critical path through migration (must be sequential)
3. Which tasks are blocked by my Figma work
4. The overall scope (how much work is in v1.0)

Use minimalist Suprematist-inspired aesthetic where possible:
- Limited palette
- Strong geometry
- High contrast
- No decoration

JSON:
[paste JSON here]

TL;DR — what to do right now

Step 1 (5 minutes): Read this document. Decide if you agree with task categorization.

Step 2 (30 minutes): Copy the JSON section above into a Cowork conversation along with the prompt. Get the Gantt chart artifact. Pin it somewhere you can reference.

Step 3 (1 hour): Open a new Claude Code session. Give CC this entire 05-cc-work-plan.md document plus 01-master-diff-merge.md and 02-principles.md as context. Ask CC to start Wave 1 (the three ADRs in parallel).

Step 4 (sleep): Go to bed.

Step 5 (morning): Wake up to v0.2.0 tagged, 6-7 new components, 5 new ADRs, and a clear path forward. Start Figma work knowing the architectural foundation is solid.

The architectural quiz was the hard part. Implementation is execution.