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.6 KiB

Raw Blame History

Multi-Variant HTML Patterns

Every sketch produces 2-3 variants in the same HTML file. The user switches between them to compare.

Tab-Based Variants

The standard approach: a tab bar at the top of the page, each tab shows a different variant.

<div id="variant-nav" style="position:fixed;top:0;left:0;right:0;z-index:9998;background:var(--color-surface, #fff);border-bottom:1px solid var(--color-border, #e5e5e5);padding:8px 16px;display:flex;gap:8px;font-family:system-ui;">
  <button class="variant-tab active" onclick="showVariant('a')">A: Sidebar Layout</button>
  <button class="variant-tab" onclick="showVariant('b')">B: Top Nav</button>
  <button class="variant-tab" onclick="showVariant('c')">C: Floating Panels</button>
</div>

<div id="variant-a" class="variant active">
  <!-- Variant A content -->
</div>
<div id="variant-b" class="variant" style="display:none">
  <!-- Variant B content -->
</div>
<div id="variant-c" class="variant" style="display:none">
  <!-- Variant C content -->
</div>

<script>
function showVariant(id) {
  document.querySelectorAll('.variant').forEach(v => v.style.display = 'none');
  document.querySelectorAll('.variant-tab').forEach(t => t.classList.remove('active'));
  document.getElementById('variant-' + id).style.display = 'block';
  event.target.classList.add('active');
}
</script>

Add padding-top to the body to account for the fixed tab bar.

Marking the Winner

After the user picks a direction, add a visual indicator to the winning tab:

<button class="variant-tab active">A: Sidebar Layout ★ Selected</button>

Keep all variants visible and navigable — the winner is highlighted, not the only option.

Side-by-Side (for small variants)

When comparing small elements (button styles, card layouts, icon treatments), render them next to each other with labels rather than using tabs:

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px;">
  <div>
    <h3>A: Rounded</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>B: Sharp</h3>
    <!-- variant content -->
  </div>
  <div>
    <h3>C: Pill</h3>
    <!-- variant content -->
  </div>
</div>

Variant Count

First round (dramatic): 2-3 meaningfully different approaches
Refinement rounds: 2-3 subtle variations within the chosen direction
Never more than 4 — more than that overwhelms. If there are 5+ options, narrow before showing.

Synthesis Variants

When the user cherry-picks elements across variants, create a new variant tab labeled descriptively:

<button class="variant-tab" onclick="showVariant('synth1')">Synthesis: A's layout + C's palette</button>

2.6 KiB Raw Blame History