A proposed visual language for the HTML artifacts produced by
/discuss, /plan, and /complete.
This is a style reference, not a generated artifact. It defines colors,
type, and components only — it does not change any skill template, the CLI, or the
structure (sections / IDs / dashboard JS) of the real documents. Porting these styles into
skills/*/SKILL.md is separate follow-up work.
Direction: warm, editorial, Anthropic-adjacent — ivory paper, a clay
accent, serif display headings. Distinct from the host-app lime (#C5F04A) the current
examples inherited.
Defined as CSS custom properties; every artifact draws from this set.
Headings: serif (Tiempos / Georgia). Body: system sans.
Mirrors the prose blocks of REQUIREMENTS & DECISIONS.
Body copy sits in a warm system sans at a comfortable 1.6 line height. Inline references such as
OnCourtHomeView.swift and links like the dependency graph use the
clay accent so they read as interactive without shouting.
Captured during the discuss phase. Self-contained — a fresh session reads only this document.
TPLayout.cardRadius stay legible inline.Used across PLAN (task states) and SUMMARY.
Action tint:
create
modify
delete
— replaces the old #e6f4ea / #fef9e7 / #fce8e6 tints.
| File | Action | Description |
|---|---|---|
OnCourtHomeView.swift | create | New placeholder card reusing the empty-card token style. |
OffCourtHomeView.swift | modify | Reorder body; surface the two shortcut rows above recents. |
SearchView+legacy.swift | delete | Overlay branch with no remaining trigger. |
| ID | Wave | Status | Title | Deps |
|---|---|---|---|---|
| T-001 | 1 | done | On Court → coming-soon placeholder | — |
| T-004 | 2 | in-progress | Off Court reorder | T-001 |
| T-007 | 3 | blocked | Analytics wiring | T-005 |
| T-009 | 3 | pending | Full verification pass | T-007, T-008 |
Key-interface snippets in REQUIREMENTS / PLAN.
// OnCourtHomeView.headerBar — after
var headerBar: some View {
HStack(spacing: 10) {
Spacer(minLength: 0)
ProfileAvatarLink(userEmail: userEmail, onSignOut: onSignOut)
}
}
The legibility fix for many-task plans: wave swimlanes, two-line nodes, status shown by a left status bar + fill tint (survives crowding), de-cluttered edges, and a legend.
Frame the screen to its platform: an iOS app in scope → render inside an iPhone frame; a web app in scope → render inside a browser frame; a CLI tool in scope → render inside a terminal frame; a desktop app in scope → render inside a desktop-window frame. All four sit on a dark stage and embed inline. Used in REQUIREMENTS (target-layout mockups).