mirror of https://github.com/glittercowboy/get-shit-done synced 2026-04-25 17:25:23 +02:00

Files

Lex Christopherson f983925eca feat: add /gsd-spike, /gsd-sketch, /gsd-spike-wrap-up, /gsd-sketch-wrap-up commands

First-class GSD commands for rapid feasibility spiking and UI design sketching,
ported from personal skills into the framework with full GSD integration:

- Spikes save to .planning/spikes/, sketches to .planning/sketches/
- GSD banners, checkpoint boxes, Next Up blocks, gsd-sdk query commits
- --quick flag skips intake/decomposition for both commands
- Wrap-up commands package findings into project-local .claude/skills/
  and write WRAP-UP-SUMMARY.md to .planning/ for project history
- Neither requires /gsd-new-project — auto-creates .planning/ subdirs

Pipeline integration:
- new-project.md detects prior spike/sketch work on init
- discuss-phase.md loads spike/sketch findings into prior context
- plan-phase.md includes findings in planner <files_to_read>
- do.md routes spike/sketch intent to new commands
- explore.md offers spike/sketch as output routes
- next.md surfaces pending spike/sketch work as notices
- pause-work.md detects active sketch context for handoff
- help.md documents all 4 commands with usage examples
- artifact-types.md registers spike/sketch artifact taxonomy

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-17 09:47:15 -06:00

2.4 KiB

Raw Blame History

Shared Theme System

All sketches share a CSS variable theme so design decisions compound across sketches.

Setup

On the first sketch, create .planning/sketches/themes/ with a default theme:

.planning/sketches/
  themes/
    default.css         <- all sketches link to this
  001-dashboard-layout/
    index.html          <- links to ../themes/default.css

Theme File Structure

Each theme defines CSS custom properties only — no component styles, no layout rules. Just the visual vocabulary:

:root {
  /* Colors */
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-border: #e5e5e5;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-accent: #f59e0b;
  --color-danger: #ef4444;
  --color-success: #22c55e;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shapes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

Adapt the default theme to match the mood/direction established during intake. The values above are a starting point — change colors, fonts, spacing, and shapes to match the agreed aesthetic.

Linking

Every sketch links to the theme:

<link rel="stylesheet" href="../themes/default.css">

Creating New Themes

When a sketch reveals an aesthetic fork ("should this feel clinical or warm?"), create both as theme files rather than arguing about it. The user can switch and feel the difference.

Name themes descriptively: midnight.css, warm-minimal.css, brutalist.css.

Theme Switcher

Include in every sketch (part of the sketch toolbar):

<select id="theme-switcher" onchange="document.querySelector('link[href*=themes]').href='../themes/'+this.value+'.css'">
  <option value="default">Default</option>
</select>

Dynamically populate options by listing available theme files, or hardcode the known themes.

2.4 KiB Raw Blame History