---
name: spriteops-studio
description: Build, debug, and extend SpriteOps, a browser app for turning sprite sheets, generated images, canvas refs, memory, and Stripe checkout into game-asset workflows.
---

# SpriteOps Studio

SpriteOps is a nimble asset foundry for 2D game creators. The core workflow is:

1. Write or refine a sprite asset prompt.
2. Generate fresh images through `/api/generate`.
3. Import or focus a sprite sheet by row, column, border, element set, drag-selected cells, or full sheet.
4. Add focused cells or generated outputs to the canvas.
5. Convert focused rows, drag selections, canvas selections, or generated sheets into downloadable GIF previews.
6. Export PNGs, GIFs, prompt briefs, canvas JSON, memory JSON, and pack manifests.

## Local Files

- `index.html`: static UI, panels, dialogs, and product copy.
- `styles.css`: SpriteOps visual system and responsive layout.
- `app.js`: browser state, generation flow, sheet focus, canvas drag/select, GIF export, memory, history, and Stripe demo UI.
- `api/generate.js`: Vercel serverless OpenAI image generation endpoint.
- `api/checkout.js`: Vercel serverless Stripe Checkout Session endpoint.
- `stripe-links.js`: fallback Creator Payment Link.
- `assets/`: bundled demo sprite sheets.

## Product Rules

- Landing page should be the default first screen.
- The left panel should stay compact: workspace, navigation, sessions, starter briefs, and Creator plan.
- The main product promise is converting sprite sheets and generated outputs into focused selections, canvas assemblies, and animated GIFs.
- Animation should be low effort: select a row, column, border, drag-selected cells, canvas group, or latest output, then press one button to preview, reject, retry, rename, and export a GIF.
- GIF preview quality matters: expose fit controls so users can switch between full-cell framing, balanced crop, and tight crop when an animation looks clipped.
- Sheet grids should stay editable. Let users override row and column counts, then use cursor drag-selection to choose exact frame groups.
- Result editing should support renaming, targeted attribute edits, remove-background/isolation, canvas handoff, animation handoff, PNG download, and delete confirmation.
- History should be useful as a timeline, kanban, and calendar view. Every output should reopen the editor, go to canvas, animate, or download.
- Memory should reduce cognitive load. Prefer reusable signals, grouped decisions, and recent rules over abstract graphs.
- Memory should feel like a visual creative library for backgrounds, sprites, transparent PNGs, GIFs, prompts, edits, packs, and workflow cases. Packaging and fine-grained editing are the differentiator: hover, open editor, download, animate, send to Assemble, reuse prompt, save case, and export manifests.
- Destructive actions should confirm before deleting outputs or canvas assets.

## OpenAI Setup

Set these Vercel environment variables:

```bash
vercel env add OPENAI_API_KEY production
vercel env add OPENAI_IMAGE_MODEL production
vercel deploy --prod --yes
```

`OPENAI_IMAGE_MODEL` defaults to `gpt-image-1`. Do not expose OpenAI secrets in the browser.

## Stripe Setup

Use Stripe Billing plus Checkout Sessions for subscriptions. Use dynamic Checkout Sessions for one-off asset packs instead of creating a Payment Link for every sheet.

Required production env vars:

```bash
vercel env add STRIPE_SECRET_KEY production
vercel env add STRIPE_CREATOR_PRICE_ID production
vercel deploy --prod --yes
```

Use a `sk_test_` secret and a recurring test Price for demos. Use a `sk_live_` secret only after the go-live checklist is complete. Stripe Tax is enabled in the checkout endpoint; enable Stripe Tax in the Dashboard and keep billing address and tax ID collection on for multi-country sales.

## Support And Contacts

- Product domain: `spriteops.com`
- Support email: `support@spriteops.com`
- Suggested auth backend: Supabase Auth or Convex Auth before real accounts, teams, and cloud storage.

## Development Commands

The app is static plus Vercel serverless functions. A local static server is enough for UI work, but API routes need Vercel dev or deployment.

```bash
vercel dev
vercel deploy --prod --yes
```

## Agent Priorities

When asked to improve SpriteOps:

1. Fix real workflow blockers first: selection, GIF framing, drag/drop, export, checkout, and history.
2. Keep UI dense but readable, with clear actions and little scrolling.
3. Use existing files and patterns unless a backend is explicitly required.
4. Avoid unsupported claims like unlimited model access unless billing and usage limits are actually implemented.