gsd-antigravity-kit 2.0.1 → 2.1.0

package/.agent/skills/gsd/references/workflows/sketch-wrap-up.md

@@ -0,0 +1,283 @@
+<purpose>
+Curate sketch design findings and package them into a persistent project skill for future
+UI implementation. Reads from `.planning/sketches/`, writes skill to `./.antigravity/skills/sketch-findings-[project]/`
+(project-local) and summary to `.planning/sketches/WRAP-UP-SUMMARY.md`.
+Companion to `/gsd-sketch`.
+</purpose>
+
+<required_reading>
+Read all files referenced by the invoking prompt's execution_context before starting.
+</required_reading>
+
+<process>
+
+<step name="banner">
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ GSD ► SKETCH WRAP-UP
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+</step>
+
+<step name="gather">
+## Gather Sketch Inventory
+
+1. Read `.planning/sketches/MANIFEST.md` for the design direction and reference points
+2. Glob `.planning/sketches/*/README.md` and parse YAML frontmatter from each
+3. Check if `./.antigravity/skills/sketch-findings-*/SKILL.md` exists for this project
+   - If yes: read its `processed_sketches` list and filter those out
+   - If no: all sketches are candidates
+
+If no unprocessed sketches exist:
+```
+No unprocessed sketches found in `.planning/sketches/`.
+Run `/gsd-sketch` first to create design explorations.
+```
+Exit.
+
+Check `commit_docs` config:
+```bash
+COMMIT_DOCS=$(gsd-sdk query config-get commit_docs 2>/dev/null || echo "true")
+```
+</step>
+
+<step name="curate">
+## Curate Sketches One-at-a-Time
+
+Present each unprocessed sketch in ascending order. For each sketch, show:
+
+- **Sketch number and name**
+- **Design question:** from frontmatter
+- **Winner:** which variant was selected (if any)
+- **Tags:** from frontmatter
+- **Key decisions:** summarize what was decided visually
+
+Then ask the user:
+
+╔══════════════════════════════════════════════════════════════╗
+║  CHECKPOINT: Decision Required                               ║
+╚══════════════════════════════════════════════════════════════╝
+
+Sketch {NNN}: {name} — Winner: Variant {X}
+
+{key design decisions summary}
+
+──────────────────────────────────────────────────────────────
+→ Include / Exclude / Partial / Let me look at it
+──────────────────────────────────────────────────────────────
+
+**If "Let me look at it":**
+1. Provide: `open .planning/sketches/NNN-name/index.html`
+2. Remind them which variant won and what to look for
+3. After they've looked, return to the include/exclude/partial decision
+
+**If "Partial":**
+Ask what specifically to include or exclude from this sketch's decisions.
+</step>
+
+<step name="group">
+## Auto-Group by Design Area
+
+After all sketches are curated:
+
+1. Read all included sketches' tags, names, and content
+2. Propose design-area groupings, e.g.:
+   - "**Layout & Navigation** — sketches 001, 004"
+   - "**Form Controls** — sketches 002, 005"
+   - "**Color & Typography** — sketches 003"
+3. Present the grouping for approval — user may merge, split, rename, or rearrange
+
+Each group becomes one reference file in the generated skill.
+</step>
+
+<step name="skill_name">
+## Determine Output Skill Name
+
+Derive from the project directory name: `./.antigravity/skills/sketch-findings-[project-dir-name]/`
+
+If a skill already exists at that path (append mode), update in place.
+</step>
+
+<step name="copy_sources">
+## Copy Source Files
+
+For each included sketch:
+
+1. Copy the winning variant's HTML file (or the full index.html with all variants) into `sources/NNN-sketch-name/`
+2. Copy the winning theme.css into `sources/themes/`
+3. Exclude node_modules, build artifacts, .DS_Store
+</step>
+
+<step name="synthesize">
+## Synthesize Reference Files
+
+For each design-area group, write a reference file at `references/[design-area-name].md`:
+
+```markdown
+# [Design Area Name]
+
+## Design Decisions
+[For each validated decision: what was chosen, why it won over alternatives, the key visual properties (colors, spacing, border radius, typography)]
+
+## CSS Patterns
+[Key CSS snippets from winning variants — layout structures, component patterns, animation patterns. Extracted and cleaned up for reference.]
+
+## HTML Structures
+[Key HTML patterns from winning variants — page layout, component markup, navigation structures.]
+
+## What to Avoid
+[Design directions that were tried and rejected. Why they didn't work.]
+
+## Origin
+Synthesized from sketches: NNN, NNN
+Source files available in: sources/NNN-sketch-name/
+```
+</step>
+
+<step name="write_skill">
+## Write SKILL.md
+
+Create (or update) the generated skill's SKILL.md:
+
+```markdown
+---
+name: sketch-findings-[project-dir-name]
+description: Validated design decisions, CSS patterns, and visual direction from sketch experiments. Auto-loaded during UI implementation on [project-dir-name].
+---
+
+<context>
+## Project: [project-dir-name]
+
+[Design direction paragraph from MANIFEST.md]
+[Reference points mentioned during intake]
+
+Sketch sessions wrapped: [date(s)]
+</context>
+
+<design_direction>
+## Overall Direction
+
+[Summary of the validated visual direction: palette, typography, spacing system, layout approach, interaction patterns]
+</design_direction>
+
+<findings_index>
+## Design Areas
+
+| Area | Reference | Key Decision |
+|------|-----------|--------------|
+| [Name] | references/[name].md | [One-line summary] |
+
+## Theme
+
+The winning theme file is at `sources/themes/default.css`.
+
+## Source Files
+
+Original sketch HTML files are preserved in `sources/` for complete reference.
+</findings_index>
+
+<metadata>
+## Processed Sketches
+
+[List of sketch numbers wrapped up]
+
+- 001-sketch-name
+- 002-sketch-name
+</metadata>
+```
+</step>
+
+<step name="write_summary">
+## Write Planning Summary
+
+Write `.planning/sketches/WRAP-UP-SUMMARY.md` for project history:
+
+```markdown
+# Sketch Wrap-Up Summary
+
+**Date:** [date]
+**Sketches processed:** [count]
+**Design areas:** [list]
+**Skill output:** `./.antigravity/skills/sketch-findings-[project]/`
+
+## Included Sketches
+| # | Name | Winner | Design Area |
+|---|------|--------|-------------|
+
+## Excluded Sketches
+| # | Name | Reason |
+|---|------|--------|
+
+## Design Direction
+[consolidated design direction summary]
+
+## Key Decisions
+[layout, palette, typography, spacing, interaction patterns]
+```
+</step>
+
+<step name="update_antigravity_md">
+## Update Project ANTIGRAVITY.md
+
+Add an auto-load routing line:
+
+```
+- **Sketch findings for [project]** (design decisions, CSS patterns, visual direction) → `Skill("sketch-findings-[project-dir-name]")`
+```
+
+If this routing line already exists (append mode), leave it as-is.
+</step>
+
+<step name="commit">
+Commit all artifacts (if `COMMIT_DOCS` is true):
+
+```bash
+gsd-sdk query commit "docs(sketch-wrap-up): package [N] sketch findings into project skill" .planning/sketches/WRAP-UP-SUMMARY.md
+```
+</step>
+
+<step name="report">
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ GSD ► SKETCH WRAP-UP COMPLETE ✓
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+**Curated:** {N} sketches ({included} included, {excluded} excluded)
+**Design areas:** {list}
+**Skill:** `./.antigravity/skills/sketch-findings-[project]/`
+**Summary:** `.planning/sketches/WRAP-UP-SUMMARY.md`
+**ANTIGRAVITY.md:** routing line added
+
+The sketch-findings skill will auto-load when building the UI.
+```
+
+───────────────────────────────────────────────────────────────
+
+## ▶ Next Up
+
+**Start building** — implement the validated design
+
+`/gsd-plan-phase`
+
+───────────────────────────────────────────────────────────────
+
+**Also available:**
+- `/gsd-ui-phase` — generate a UI design contract for a frontend phase
+- `/gsd-sketch` — sketch additional design areas
+- `/gsd-explore` — continue exploring
+
+───────────────────────────────────────────────────────────────
+</step>
+
+</process>
+
+<success_criteria>
+- [ ] Every unprocessed sketch presented for individual curation
+- [ ] Design-area grouping proposed and approved
+- [ ] Sketch-findings skill exists at `./.antigravity/skills/` with SKILL.md, references/, sources/
+- [ ] Winning theme.css copied into skill sources
+- [ ] Reference files contain design decisions, CSS patterns, HTML structures, anti-patterns
+- [ ] `.planning/sketches/WRAP-UP-SUMMARY.md` written for project history
+- [ ] Project ANTIGRAVITY.md has auto-load routing line
+- [ ] Summary presented with next-step routing
+</success_criteria>

package/.agent/skills/gsd/references/workflows/sketch.md

@@ -0,0 +1,263 @@
+<purpose>
+Explore design directions through throwaway HTML mockups before committing to implementation.
+Each sketch produces 2-3 variants for comparison. Saves artifacts to `.planning/sketches/`.
+Companion to `/gsd-sketch-wrap-up`.
+</purpose>
+
+<required_reading>
+Read all files referenced by the invoking prompt's execution_context before starting.
+
+@references/docs/sketch-theme-system.md
+@references/docs/sketch-variant-patterns.md
+@references/docs/sketch-interactivity.md
+@references/docs/sketch-tooling.md
+</required_reading>
+
+<process>
+
+<step name="banner">
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ GSD ► SKETCHING
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+```
+
+Parse `$ARGUMENTS` for:
+- `--quick` flag → set `QUICK_MODE=true`
+- `--text` flag → set `TEXT_MODE=true`
+- Remaining text → the design idea to sketch
+
+**Text mode (`workflow.text_mode: true` in config or `--text` flag):** Set `TEXT_MODE=true` if `--text` is present in `$ARGUMENTS` OR `text_mode` from init JSON is `true`. When TEXT_MODE is active, replace every `AskUserQuestion` call with a plain-text numbered list and ask the user to type their choice number. This is required for non-Antigravity runtimes (OpenAI Codex, Gemini CLI, etc.) where `AskUserQuestion` is not available.
+</step>
+
+<step name="setup_directory">
+Create `.planning/sketches/` and themes directory if they don't exist:
+
+```bash
+mkdir -p .planning/sketches/themes
+```
+
+Check for existing sketches to determine numbering:
+```bash
+ls -d .planning/sketches/[0-9][0-9][0-9]-* 2>/dev/null | sort | tail -1
+```
+
+Check `commit_docs` config:
+```bash
+COMMIT_DOCS=$(gsd-sdk query config-get commit_docs 2>/dev/null || echo "true")
+```
+</step>
+
+<step name="mood_intake">
+**If `QUICK_MODE` is true:** Skip mood intake. Use whatever the user provided in `$ARGUMENTS` as the design direction. Jump to `decompose`.
+
+**Otherwise:**
+
+Before sketching anything, explore the design intent through conversation. Ask one question at a time using AskUserQuestion, with a paragraph of context and reasoning for each.
+
+**Questions to cover (adapt to what the user has already shared):**
+
+1. **Feel:** "What should this feel like? Give me adjectives, emotions, or a vibe." (e.g., "clean and clinical", "warm and playful", "dense and powerful")
+2. **References:** "What apps, sites, or products have a similar feel to what you're imagining?" (gives concrete visual anchors)
+3. **Core action:** "What's the single most important thing a user does here?" (focuses the sketch on what matters)
+
+You may need more or fewer questions depending on how much the user shares upfront. After each answer, briefly reflect what you heard and how it shapes your thinking.
+
+When you have enough signal, ask: **"I think I have a good sense of the direction. Ready for me to sketch, or want to keep discussing?"**
+
+Only proceed when the user says go.
+</step>
+
+<step name="decompose">
+Break the idea into 2-5 design questions. Present as a table:
+
+| Sketch | Design question | Approach | Risk |
+|--------|----------------|----------|------|
+| 001 | Does a two-panel layout feel right? | Sidebar + main, variants: fixed/collapsible/floating | **High** — sets page structure |
+| 002 | How should the form controls look? | Grouped cards, variants: stacked/inline/floating labels | Medium |
+
+Each sketch answers one specific visual question. Good sketches:
+- "Does this layout feel right?" — build with real-ish content
+- "How should these controls be grouped?" — build with actual labels and inputs
+- "What does this interaction feel like?" — build the hover/click/transition
+- "Does this color palette work?" — apply to actual UI, not a swatch grid
+
+Bad sketches:
+- "Design the whole app" — too broad
+- "Set up the component library" — that's implementation
+- "Pick a color palette" — apply it to UI instead
+
+Present the table and get alignment before building.
+</step>
+
+<step name="create_manifest">
+Create or update `.planning/sketches/MANIFEST.md`:
+
+```markdown
+# Sketch Manifest
+
+## Design Direction
+[One paragraph capturing the mood/feel/direction from the intake conversation]
+
+## Reference Points
+[Apps/sites the user referenced]
+
+## Sketches
+
+| # | Name | Design Question | Winner | Tags |
+|---|------|----------------|--------|------|
+```
+
+If MANIFEST.md already exists, append new sketches to the existing table.
+</step>
+
+<step name="create_theme">
+If no theme exists yet at `.planning/sketches/themes/default.css`, create one based on the mood/direction from the intake step. See `sketch-theme-system.md` for the full template.
+
+Adapt colors, fonts, spacing, and shapes to match the agreed aesthetic — don't use the defaults verbatim unless they match the mood.
+</step>
+
+<step name="build_sketches">
+Build each sketch in order.
+
+### For Each Sketch:
+
+**a.** Find next available number by checking existing `.planning/sketches/NNN-*/` directories.
+Format: three-digit zero-padded + hyphenated descriptive name.
+
+**b.** Create the sketch directory: `.planning/sketches/NNN-descriptive-name/`
+
+**c.** Build `index.html` with 2-3 variants:
+
+**First round — dramatic differences:** Build 2-3 meaningfully different approaches to the design question. Different layouts, different visual structures, different interaction models.
+
+**Subsequent rounds — refinements:** Once the user has picked a direction or cherry-picked elements, build subtler variations within that direction.
+
+Each variant is a page/tab in the same HTML file. Include:
+- Tab navigation to switch between variants (see `sketch-variant-patterns.md`)
+- Clear labels: "Variant A: Sidebar Layout", "Variant B: Top Nav", etc.
+- The sketch toolbar (see `sketch-tooling.md`)
+- All interactive elements functional (see `sketch-interactivity.md`)
+- Real-ish content, not lorem ipsum
+- Link to `../themes/default.css` for shared theme variables
+
+**All sketches are plain HTML with inline CSS and JS.** No build step, no npm, no framework. Opens instantly in a browser.
+
+**d.** Write `README.md`:
+
+```markdown
+---
+sketch: NNN
+name: descriptive-name
+question: "What layout structure feels right for the dashboard?"
+winner: null
+tags: [layout, dashboard]
+---
+
+# Sketch NNN: Descriptive Name
+
+## Design Question
+[The specific visual question this sketch answers]
+
+## How to View
+open .planning/sketches/NNN-descriptive-name/index.html
+
+## Variants
+- **A: [name]** — [one-line description of this approach]
+- **B: [name]** — [one-line description]
+- **C: [name]** — [one-line description]
+
+## What to Look For
+[Specific things to pay attention to when comparing variants]
+```
+
+**e.** Present to the user with a checkpoint:
+
+╔══════════════════════════════════════════════════════════════╗
+║  CHECKPOINT: Verification Required                           ║
+╚══════════════════════════════════════════════════════════════╝
+
+**Sketch {NNN}: {name}**
+
+Open: `open .planning/sketches/NNN-name/index.html`
+
+Compare: {what to look for between variants}
+
+──────────────────────────────────────────────────────────────
+→ Which variant feels right? Or cherry-pick elements across variants.
+──────────────────────────────────────────────────────────────
+
+**f.** Handle feedback:
+- **Pick a direction:** "I like variant B" → mark winner in README, move to next sketch
+- **Cherry-pick elements:** "Rounded edges from A, color treatment from C" → build a synthesis as a new variant, show again
+- **Want more exploration:** "None of these feel right, try X instead" → build new variants
+
+Iterate until the user is satisfied with a direction for this sketch.
+
+**g.** Finalize:
+1. Mark the winning variant in the README frontmatter (`winner: "B"`)
+2. Add ★ indicator to the winning tab in the HTML
+3. Update `.planning/sketches/MANIFEST.md` with the sketch row
+
+**h.** Commit (if `COMMIT_DOCS` is true):
+```bash
+gsd-sdk query commit "docs(sketch-NNN): [winning direction] — [key visual insight]" .planning/sketches/NNN-descriptive-name/ .planning/sketches/MANIFEST.md
+```
+
+**i.** Report:
+```
+◆ Sketch NNN: {name}
+  Winner: Variant {X} — {description}
+  Insight: {key visual decision made}
+```
+</step>
+
+<step name="report">
+After all sketches complete, present the summary:
+
+```
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ GSD ► SKETCH COMPLETE ✓
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+## Design Direction
+{what we landed on overall}
+
+## Key Decisions
+{layout, palette, typography, spacing, interaction patterns}
+
+## Open Questions
+{anything unresolved or worth revisiting}
+```
+
+───────────────────────────────────────────────────────────────
+
+## ▶ Next Up
+
+**Package findings** — wrap design decisions into a reusable skill
+
+`/gsd-sketch-wrap-up`
+
+───────────────────────────────────────────────────────────────
+
+**Also available:**
+- `/gsd-plan-phase` — start building the real UI
+- `/gsd-explore` — continue exploring the concept
+- `/gsd-spike` — spike technical feasibility of a design pattern
+
+───────────────────────────────────────────────────────────────
+</step>
+
+</process>
+
+<success_criteria>
+- [ ] `.planning/sketches/` created (auto-creates if needed, no project init required)
+- [ ] Design direction explored conversationally before any code (unless --quick)
+- [ ] Each sketch has 2-3 variants for comparison
+- [ ] User can open and interact with sketches in a browser
+- [ ] Winning variant selected and marked for each sketch
+- [ ] All variants preserved (winner marked, not others deleted)
+- [ ] MANIFEST.md is current
+- [ ] Commits use `docs(sketch-NNN): [winner]` format
+- [ ] Summary presented with next-step routing
+</success_criteria>