savecraft.gg: Skill for Claude Code

Working on Views

Read docs/views.md for architecture, response format, and constraints. Read docs/view-design.md for when to build a view, interaction patterns, and visual principles.

CRITICAL: Rebuild After Every .svelte Change

worker/src/mcp/views.gen.ts is a committed build artifact — CI does not rebuild it. After modifying ANY .svelte file (in views/, worker/src/mcp/views/, or plugins/*/reference/views/), you MUST:

1. Run just build-views
2. Commit the regenerated views.gen.ts alongside your other changes

Forgetting this means production serves stale view HTML even after a successful cloud deploy. The deploy will succeed, the tests will pass, but users see the old view.

Verification

just build-views    # Rebuild views.gen.ts (required after any .svelte change)
just test-worker    # Handler + tool tests
just storybook-views  # Visual verification on port 6007

Two View Types

Game state views — one self-contained HTML per tool. Component + bridge bundled together.

• Location: worker/src/mcp/views/<slug>.svelte
• Slug maps to tool name: search-saves.svelte → tool search_saves

Reference views — one bundled HTML for query_reference containing ALL reference module components. Routes on structuredContent.module.

• Location: plugins/<game>/reference/views/<module-id>.svelte
• Filename maps to module ID: card-search.svelte → module card_search
• Auto-discovered by build — adding a .svelte file and rebuilding is sufficient.

Adding a New View

1. Create <name>.svelte — Svelte 5 component: let { data } = $props()
2. Create <name>.stories.svelte — Storybook story with fixture data
3. For game state views: update tool in tools.ts to return viewResult(structuredContent, narrative) instead of textResult()
4. Run just build-views then just test-worker
5. Commit views.gen.ts with other changes — CI does not rebuild it

Response Format

// Old (presentation hints — being replaced):
textResult(data, "Display as card gallery...");

// New (structured content for view rendering):
viewResult({ cards, total: cards.length }, "Found 5 cards.");
// For query_reference, handler injects module automatically:
// → { module: "card_search", cards: [...], total: 5 }