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

1.7 KiB

Raw Blame History

Making Sketches Feel Alive

Static mockups are barely better than screenshots. Every interactive element in a sketch must respond to interaction.

Required Interactivity

Element	Must Have
Buttons	Click handler with visible feedback (state change, animation, toast)
Forms	Input validation on blur, submit handler that shows success state
Lists	Add/remove items, empty state, populated state
Toggles/switches	Working toggle with visible state change
Tabs/nav	Click to switch content
Modals/drawers	Open/close with transition
Hover states	Every clickable element needs a hover effect
Dropdowns	Open/close, item selection

Transitions

Add transition: all 0.15s ease as a baseline to interactive elements. Subtle motion makes the sketch feel real and helps judge whether the interaction pattern works.

Fake the Backend

If the sketch shows a "Save" button, clicking it should show a brief loading state then a success message. If it shows a search bar, typing should filter hardcoded results. The goal is to feel the full interaction loop, not just see the resting state.

State Cycling

If the sketch has multiple states (empty, loading, populated, error), include buttons to cycle through them. Label each state clearly. This lets the user experience how the design handles different data conditions.

Implementation

Use vanilla JS in inline <script> tags. No frameworks, no build step. Keep it simple:

<script>
  // Toggle a panel
  document.querySelector('.panel-toggle').addEventListener('click', (e) => {
    e.target.closest('.panel').classList.toggle('collapsed');
  });
</script>

1.7 KiB Raw Blame History