f983925eca
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>
1.6 KiB
Sketch Toolbar
Include a small floating toolbar in every sketch. It provides utilities without competing with the actual design.
Implementation
A small <div> fixed to the bottom-right, semi-transparent, expands on hover:
<div id="sketch-tools" style="position:fixed;bottom:12px;right:12px;z-index:9999;font-family:system-ui;font-size:12px;background:rgba(0,0,0,0.7);color:white;padding:8px 12px;border-radius:8px;opacity:0.4;transition:opacity 0.2s;" onmouseenter="this.style.opacity='1'" onmouseleave="this.style.opacity='0.4'">
<!-- Theme switcher -->
<!-- Viewport buttons -->
<!-- Annotation toggle -->
</div>
Components
Theme Switcher
A dropdown that swaps the theme CSS file at runtime:
<select onchange="document.querySelector('link[href*=themes]').href='../themes/'+this.value+'.css'">
<option value="default">Default</option>
</select>
Viewport Preview
Three buttons that constrain the sketch content area to standard widths:
- Phone: 375px
- Tablet: 768px
- Desktop: 1280px (or full width)
Implemented by wrapping sketch content in a container and adjusting its max-width.
Annotation Mode
A toggle that overlays spacing values, color hex codes, and font sizes on hover. Implemented as a JS snippet that reads computed styles and shows them in a tooltip. Helps understand visual decisions without opening dev tools.
Styling
The toolbar should be unobtrusive — small, dark, semi-transparent. It should never compete with the sketch visually. Style it independently of the theme (hardcoded dark background, white text).