Run any Skill in Manus with one click

design-studio-production-audit

Stars4

Forks1

UpdatedMarch 7, 2026 at 17:35

Comprehensive audit of the SKAPARA design studio — canvas editor, AI generation pipeline, composition rendering, mockup generation, and design-to-product flow. Use when asked to audit the design studio, design editor, canvas, AI generation, or product creation pipeline.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

lroy-stack

lroy-stack/ai-pod-store

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

Design Studio Production Audit

Systematic audit of the Fabric.js-based design studio: canvas editor, AI multi-provider generation, composition rendering, mockup generation, persistence, and the full design-to-product pipeline.

Prerequisites

Before starting, read these files for architectural context:

CLAUDE.md — component standards, semantic tokens, route groups, Printful/Supabase connection reference
frontend/docs/design-studio-audit/DESIGN_STUDIO_AUDIT_E2E.md — prior E2E audit (Phases 1-3 status, known bugs)
frontend/docs/design-studio-research/11-gap-analysis.md — gap analysis across prior research reports

File Map

Keep this reference open throughout the audit. All paths relative to frontend/src/.

Canvas Editor

File	Role
`components/design-studio/DesignStudioPage.tsx`	Top-level orchestrator — mounts canvas, panels, header
`components/design-studio/CanvasWorkspace.tsx`	Fabric.js canvas init, object manipulation, export, clipboard
`components/design-studio/EditorHeader.tsx`	Save, preview, undo/redo, product info bar
`components/design-studio/CanvasToolbar.tsx`	Tool selection (text, image, shapes, draw)
`components/design-studio/CanvasProperties.tsx`	Object properties panel (fill, stroke, opacity, shadow, font)
`components/design-studio/LayersPanel.tsx`	Layer list, z-order, visibility, lock
`components/design-studio/PanelSwitcher.tsx`	Multi-position panel switching (front, back, sleeves)
`components/design-studio/ClipartPanel.tsx`	Clipart/asset browser
`components/design-studio/TemplatesPanel.tsx`	Template gallery
`components/design-studio/PreviewMockupModal.tsx`	Preview overlay with mockup rendering
`components/design-studio/EmbroideryConstraints.tsx`	Embroidery-specific validation (colors, line width)

Canvas Tools

File	Role
`components/design-studio/tools/TextTool.tsx`	Text object creation and editing
`components/design-studio/tools/ImageTool.tsx`	Image upload and placement
`components/design-studio/tools/ColorPicker.tsx`	Color selection with brand palette
`components/design-studio/tools/FontPicker.tsx`	Font browser and selection
`components/design-studio/tools/GradientEditor.tsx`	Gradient fill configuration
`components/design-studio/tools/ShadowControl.tsx`	Drop shadow configuration

State Management

File	Role
`hooks/useDesignEditor.ts`	Zustand store — canvas state, panels, selected object, variant color
`hooks/useCanvasHistory.ts`	Undo/redo stack management
`hooks/useCanvasExport.ts`	PNG/production export utilities
`hooks/useDesignPersistence.ts`	Auto-save and load from Supabase

AI Generation Pipeline

File	Role
`lib/ai-design-orchestrator.ts`	Intent classification, provider selection, prompt routing
`lib/design-generation.ts`	Generation execution, retry logic, result processing
`lib/design-presets.ts`	Style presets (meme, branded, minimalist, etc.)
`lib/design-cost-guard.ts`	Per-user generation limits, tier enforcement
`lib/providers/router.ts`	Multi-provider routing (cost, quality, speed)
`lib/providers/fal-provider.ts`	fal.ai provider (Flux, SDXL)
`lib/providers/openai-provider.ts`	DALL-E 3 provider
`lib/providers/ideogram-provider.ts`	Ideogram provider (text rendering)
`lib/providers/recraft-provider.ts`	Recraft provider (vector, brand)
`lib/providers/prompt-engineer.ts`	Prompt enhancement and safety filtering
`lib/providers/background-removal.ts`	Background removal via rembg sidecar
`lib/providers/storage-upload.ts`	Supabase Storage upload for generated images
`lib/providers/types.ts`	Shared TypeScript types for provider system

Composition & Mockup

File	Role
`lib/composition-renderer.ts`	Sharp-based server-side composition rendering
`lib/mockup-generator.ts`	Product mockup overlay generation
`lib/canvas-helpers.ts`	Canvas utility functions (print area, scaling, crop)
`lib/fabric-init.ts`	Fabric.js initialization and configuration

API Endpoints

Endpoint	Route File
`GET/POST /api/designs`	`app/api/designs/route.ts`
`POST /api/designs/ai-generate`	`app/api/designs/ai-generate/route.ts`
`POST /api/designs/generate`	`app/api/designs/generate/route.ts`
`POST /api/designs/compose`	`app/api/designs/compose/route.ts`
`POST /api/designs/compose-v2`	`app/api/designs/compose-v2/route.ts`
`GET /api/designs/composition/[id]`	`app/api/designs/composition/[id]/route.ts`
`GET /api/designs/history`	`app/api/designs/history/route.ts`
`POST /api/designs/estimate`	`app/api/designs/estimate/route.ts`
`POST /api/designs/mockup`	`app/api/designs/mockup/route.ts`
`POST /api/designs/remove-bg`	`app/api/designs/remove-bg/route.ts`
`GET /api/designs/logs`	`app/api/designs/logs/route.ts`
`POST /api/designs/[id]/create-product`	`app/api/designs/[id]/create-product/route.ts`

Database Tables

Table	Purpose
`designs`	Saved design documents (canvas JSON, metadata)
`design_sessions`	Active editing sessions (user, product, timestamps)
`ai_generations`	AI generation log (provider, prompt, cost, result)
`design_compositions`	Rendered compositions (production URLs, panel data)
`user_design_assets`	Uploaded user images/assets
`design_templates_clipart`	Template and clipart library entries

Pages

Page	File
Design editor	`app/[locale]/(editor)/design/[productId]/page.tsx`
Editor client wrapper	`app/[locale]/(editor)/design/[productId]/DesignEditorClient.tsx`
Designs gallery	`app/[locale]/(app)/designs/page.tsx`

Workflow

Execute each phase sequentially. Record every finding with severity, file path, and line number.

Phase 1: Canvas Editor UX (15 checks)

1.1 Canvas Initialization

Read lib/fabric-init.ts and CanvasWorkspace.tsx
Check: Is Fabric.js initialized with correct defaults (selection, rendering, retina)?
Check: Is canvas.dispose() called on unmount to prevent memory leaks?
Check: Does canvas resize correctly on window resize / container resize?
Benchmark: Canvas should initialize in <500ms on desktop

1.2 Object Manipulation

Read CanvasWorkspace.tsx — object add/select/transform methods
Check: Can user add text, images, shapes, and SVGs?
Check: Do alignment guidelines work (snap to center, edges)?
Check: Are transform controls (scale, rotate, skew) functional and constrained?
Check: Is multi-select supported (Shift+click or drag selection)?

1.3 Undo/Redo

Read hooks/useCanvasHistory.ts
Check: Does Ctrl+Z undo the last operation?
Check: Does Ctrl+Shift+Z (or Ctrl+Y) redo?
Check: Is history cleared correctly on panel switch?
Check: Are undo/redo stacks bounded (memory limit)?
Benchmark: Industry standard is 50+ undo steps

1.4 Keyboard Shortcuts

Search for keydown or addEventListener.*key in CanvasWorkspace.tsx and DesignStudioPage.tsx
Check: Ctrl+S (save), Ctrl+D (duplicate), Delete (remove), Escape (deselect), Arrows (nudge 1px), Shift+Arrows (nudge 10px)
Check: Are shortcuts documented in UI (tooltip or help modal)?
Check: Do shortcuts conflict with browser defaults?

1.5 Zoom & Pan

Search for zoomToPoint, viewportTransform, zoomLevel in canvas files
Check: Mouse wheel zoom works (clamp 0.25x-5x)
Check: Space+drag panning works
Check: Zoom controls UI shows percentage and has fit-to-canvas
Check: Viewport is reset before export (critical for production PNG)
Benchmark: Industry standard supports at least 10x-2000% zoom range

1.6 Color & Fill

Read tools/ColorPicker.tsx, tools/GradientEditor.tsx
Check: Brand palette is available as preset swatches
Check: Custom hex/RGB input works
Check: Gradient editor supports linear and radial gradients
Check: Color changes apply to selected object immediately

1.7 Typography

Read tools/TextTool.tsx, tools/FontPicker.tsx
Check: At least 12 fonts available (verify count in FontPicker)
Check: Font size, weight, style (italic), decoration (underline/strikethrough) all work
Check: Text alignment (left, center, right) works
Check: Letter spacing and line height adjustable
Check: Text editing on double-click canvas object
Benchmark: Competitors (Canva, Printful) offer 50+ fonts

1.8 Image Handling

Read tools/ImageTool.tsx
Check: Upload accepts PNG, JPG, SVG, WebP
Check: Blob URLs are converted to data URLs for persistence (blobUrlToDataUrl)
Check: Image cropping or masking available?
Check: Background removal integration works (calls /api/designs/remove-bg)
Check: Max file size validation exists

1.9 Layers Panel

Read LayersPanel.tsx
Check: Layer list displays all canvas objects with names/thumbnails
Check: Drag-to-reorder changes z-index
Check: Visibility toggle (eye icon) hides/shows objects
Check: Lock toggle prevents selection/editing
Check: Layer names are editable

1.10 Multi-Position Design

Read PanelSwitcher.tsx and panel-related state in useDesignEditor.ts
Check: Panels available per product type (front, back, sleeves, neck, wrist)
Check: Switching panels preserves design state for each panel
Check: Panel names map correctly to Printful placement names (PANEL_TO_PRINTFUL)
Check: Each panel has correct canvas dimensions per product type
Check: Ghost templates load for each panel (not just front)
Known Bug: BUG-06 — blankImages not panel-specific. Verify current status.

1.11 Templates & Clipart

Read TemplatesPanel.tsx, ClipartPanel.tsx
Check: Template gallery loads and templates can be applied to canvas
Check: Clipart browser loads assets from design_templates_clipart table
Check: At least 10 templates exist (query design_templates_clipart count)
Benchmark: Competitors offer 100+ templates per category

1.12 Print Area Enforcement

Search for clipPath, clipRectRef, getCanvasPrintArea in canvas files
Check: Visual clip path restricts objects to print area
Check: Objects outside print area are visually clipped (not hard-deleted)
Check: Ghost template outlines show safe zone
Check: Print area dimensions match Printful specs per product type
Known Bug: BUG-05 — fallback getCanvasPrintArea ignores product type. Verify status.

1.13 Embroidery Constraints

Read EmbroideryConstraints.tsx
Check: Max 3 thread colors enforced for embroidery products
Check: No gradients allowed on embroidery products
Check: Minimum line width enforced (1.5mm)
Check: Minimum text size enforced (5mm)
Check: Constraints activate only for embroidery product types

1.14 Preview & Mockup

Read PreviewMockupModal.tsx
Check: Preview modal renders canvas at 2x resolution
Check: Mockup overlay shows design on product photo
Check: Apply-to-cart button works from preview modal
Check: Multiple views available (front, back) if multi-position

1.15 DPI Validation

Search for dpi, resolution, PRODUCTION_DIMENSIONS across design studio files
Check: Production export outputs at 300+ DPI
Check: User is warned if uploaded image resolution is too low for print size
Check: PRODUCTION_DIMENSIONS match Printful printfile specs
Benchmark: 300 DPI minimum for print, 150 DPI minimum warning threshold

Phase 2: AI Generation Pipeline (12 checks)

2.1 Intent Classification

Read lib/ai-design-orchestrator.ts
Check: User prompt is classified into intent categories (meme, branded, text-only, photo, illustration, etc.)
Check: Classification drives provider selection (not random/hardcoded)
Check: Unknown/ambiguous intents have a sensible default path

2.2 Provider Routing

Read lib/providers/router.ts
Check: Router selects provider based on intent, quality preference, and cost
Check: Fallback chain exists (if primary provider fails, try secondary)
Check: Provider health/availability is checked before routing
Check: Routing decision is logged for debugging

2.3 Provider Implementations

Read each provider file: fal-provider.ts, openai-provider.ts, ideogram-provider.ts, recraft-provider.ts
Check: Each provider implements a consistent interface (from types.ts)
Check: API keys are read from server-side env vars (never exposed to client)
Check: Error handling catches provider-specific errors and returns normalized errors
Check: Timeouts are configured (no infinite hangs)
Check: Response format is normalized across providers

2.4 Prompt Engineering

Read lib/providers/prompt-engineer.ts
Check: Prompts are enhanced with style-specific suffixes
Check: Content safety filtering rejects harmful/prohibited content
Check: Prompt length is validated (provider-specific max lengths)
Check: Brand-specific keywords are injected when appropriate

2.5 Cost Guards

Read lib/design-cost-guard.ts
Check: Per-user generation limits exist (daily/monthly)
Check: Limits differ by user tier (free, pro, etc.)
Check: Cost estimation endpoint (/api/designs/estimate) returns accurate costs
Check: Generation is blocked when limit is exceeded (not just warned)
Check: Admin/staff bypass exists for testing

2.6 Generation API Security

Read app/api/designs/ai-generate/route.ts and app/api/designs/generate/route.ts
Check: Auth required (user must be logged in)
Check: Rate limiting exists (per-user, per-IP)
Check: Input validation (prompt length, parameters)
Check: Response does not leak internal error details
Check: Cost is deducted from user's balance/quota atomically

2.7 Background Removal

Read lib/providers/background-removal.ts and app/api/designs/remove-bg/route.ts
Check: Routes to self-hosted rembg sidecar (port 7000/8080)
Check: Fallback if rembg is unavailable
Check: Input validation (file type, size)
Check: Result quality — verify PNG with alpha channel is returned

2.8 Style Presets

Read lib/design-presets.ts
Check: Preset list covers key styles (meme, minimalist, branded, vintage, neon, etc.)
Check: Each preset defines provider preference, prompt template, and post-processing
Check: Presets are selectable in the UI
Benchmark: At least 8-10 presets for good coverage

2.9 Generation Latency

Search for timeout values, AbortController, signal in generation files
Check: Timeouts are set per provider (fal ~10s, DALL-E ~30s)
Check: User sees loading indicator during generation
Check: User can cancel in-progress generation
Benchmark: Quick generation <10s, quality generation <30s

2.10 Generation Logging

Read app/api/designs/logs/route.ts and search for ai_generations table inserts
Check: Every generation attempt is logged (provider, prompt, cost, duration, success/failure)
Check: Failed generations record the error reason
Check: Logs are queryable for cost analytics and debugging

2.11 Content Safety

Search for safety, nsfw, moderation, filter, block in provider and prompt files
Check: Prompt is checked against blocked terms/patterns before sending to provider
Check: Generated images are checked for NSFW content (provider-side or post-generation)
Check: Rejected content returns a user-friendly message (not a raw error)
Benchmark: All major POD platforms (Printful, Printify, Redbubble) enforce content policies

2.12 Storage Upload

Read lib/providers/storage-upload.ts
Check: Generated images are uploaded to Supabase Storage designs/ bucket
Check: File naming includes user ID and timestamp (prevents collisions)
Check: Public URL is returned for use in canvas
Check: Old/unused generations are cleaned up (or storage cost is bounded)

Phase 3: Composition & Production Pipeline (10 checks)

3.1 Production Export

Search for exportProductionPNG, PRODUCTION_DIMENSIONS in hooks and canvas files
Check: Export scales canvas to Printful-required dimensions per product type
Check: Viewport is reset before export (zoom/pan must not affect output)
Check: Guide objects, ghost templates, and background are excluded from export
Check: Output is PNG with transparency (no white background unless DTG on white)

3.2 Composition Rendering (compose-v2)

Read app/api/designs/compose-v2/route.ts and lib/composition-renderer.ts
Check: Server-side composition uses Sharp (not client-side canvas)
Check: All panels are composed (front + back + sleeves if designed)
Check: Production URLs are saved to design_compositions table
Check: Composition images are uploaded to Supabase Storage
Check: Error handling for Sharp failures (memory, format)

3.3 Mockup Generation

Read app/api/designs/mockup/route.ts and lib/mockup-generator.ts
Check: Mockup overlays design onto product photo at correct position/scale
Check: Perspective transform applied (design wraps on curved surfaces)
Check: Multiple mockup views available (if templates exist)
Check: Mockup templates exist for major product types
Search public/mockup-templates/ — count available templates
Known Gap: Prior audit found only 7 templates — hats, sneakers, tumblers, desk mats, kids, tanks missing

3.4 Design-to-Product Pipeline

Read app/api/designs/[id]/create-product/route.ts
Check: Creates product on Printful with correct blueprint, provider, and variants
Check: Print areas map correctly from canvas panels to Printful placements
Check: Pricing is set per PRICING_RULES (margin >= 35%)
Check: GPSR compliance data is attached before publish
Check: Product is synced to Supabase after Printful creation

3.5 Cart Integration

Search for composition_id, design_id in cart-related files
Check: cart_items table has composition_id column
Check: Adding designed product to cart stores composition reference
Check: Cart displays design preview (not generic product image)

3.6 Order Print Files

Search for files, productionUrlsMap, production_url in checkout/order files
Check: Stripe webhook reads production_url from composition
Check: Printful order includes files[] param with production URLs
Check: No temp products are created (direct files[] flow)
Check: Print file URLs are accessible to Printful (public or signed URLs)

3.7 Design Persistence

Read hooks/useDesignPersistence.ts
Check: Auto-save triggers on canvas change (debounced, not on every stroke)
Check: Canvas JSON is serialized correctly (guides/ghost excluded via filterGuideObjectsFromJSON)
Check: Loading a saved design restores all objects, positions, and styles
Check: Designs list page (/designs) shows user's saved designs
Check: Designs are user-scoped (RLS or explicit user_id filter)

3.8 Session Management

Search for design_sessions in API and hook files
Check: Session is created on editor open
Check: Session tracks active editing time
Check: Concurrent editing is handled (lock or last-write-wins)

3.9 Asset Management

Search for user_design_assets in API and component files
Check: Uploaded images are stored in Supabase Storage
Check: Asset library shows user's uploaded images
Check: Assets are user-scoped (no cross-user access)
Check: File size and type validation on upload

3.10 History Endpoint

Read app/api/designs/history/route.ts
Check: Returns user's design history (saved designs + generations)
Check: Auth required
Check: Pagination implemented
Check: Includes metadata (timestamps, thumbnails, product type)

Phase 4: API Security & Validation (8 checks)

4.1 Authentication on All Endpoints

Read every route file under app/api/designs/
Check: Every endpoint validates user auth (extracts user from session/token)
Check: Unauthenticated requests return 401
Check: User ID is extracted server-side (never trusted from request body)
Severity: CRITICAL if any mutating endpoint lacks auth

4.2 Input Validation

For each POST endpoint, check request body parsing:
Check: Prompt text is sanitized (no script injection)
Check: Image URLs are validated (no SSRF via internal URLs)
Check: Numeric parameters are bounded (width, height, count)
Check: File uploads validate type and size

4.3 Rate Limiting

Search for rateLimit, throttle, X-RateLimit in design API files
Check: AI generation endpoints have rate limits
Check: Upload endpoints have rate limits
Check: Rate limit headers are returned in responses
Benchmark: Typical limits: 10 generations/hour free tier, 50/hour pro

4.4 Error Handling

Search for try.*catch, NextResponse.json.*500 in design API files
Check: All endpoints wrap logic in try-catch
Check: Internal errors return generic message (not stack traces)
Check: Supabase/Printful errors are caught and normalized
Check: Error responses use consistent format { error: string, code?: string }

4.5 CORS & Headers

Search for headers, Access-Control, Content-Security-Policy in design API files
Check: API responses include appropriate security headers
Check: CORS is not overly permissive (no wildcard * in production)
Check: File upload responses set correct Content-Type

4.6 Supabase Client Usage

Search for supabase-admin, SUPABASE_SERVICE_KEY in design API files
Check: Admin client is used only where RLS bypass is needed (cron, admin ops)
Check: User-facing endpoints use server client with user auth
Check: No admin client usage in client-side code
Severity: CRITICAL if admin client is imported in any "use client" file

4.7 External Service Security

Check provider files for API key handling:
Check: fal.ai, OpenAI, Ideogram, Recraft keys are in env vars (not hardcoded)
Check: Keys are only accessed server-side (API routes, not lib/ imported by client)
Check: Provider responses are validated before processing (no blind trust)

4.8 Storage Security

Check Supabase Storage bucket configuration:
Check: designs/ bucket has appropriate RLS policies
Check: Users can only access their own uploads
Check: Public URLs are only generated for shared/published designs
Check: No directory traversal possible in upload paths

Phase 5: Database Schema & Integrity (6 checks)

5.1 Table Schema Completeness

Query or read migrations for designs, design_sessions, ai_generations, design_compositions, user_design_assets, design_templates_clipart
Check: All tables have created_at, updated_at timestamps
Check: All user-scoped tables have user_id with FK to auth.users
Check: Primary keys are UUIDs (consistent with rest of schema)

5.2 RLS Policies

Search for CREATE POLICY on design tables in migrations
Check: Every design table has RLS enabled
Check: SELECT policies enforce user_id = auth.uid()
Check: INSERT policies set user_id = auth.uid() (not user-provided)
Check: UPDATE/DELETE policies enforce ownership
Severity: CRITICAL if any table lacks RLS

5.3 Indexes

Search for CREATE INDEX on design tables
Check: designs has index on user_id
Check: ai_generations has index on user_id and created_at (for cost queries)
Check: design_compositions has index on design_id
Check: Any table queried by user_id has an index on it

5.4 Foreign Keys

Check: designs.user_id references auth.users
Check: design_compositions.design_id references designs.id
Check: ai_generations.user_id references auth.users
Check: ON DELETE behavior is appropriate (CASCADE or SET NULL)

5.5 Data Integrity

Check: designs.canvas_data is JSONB (not text)
Check: ai_generations.cost is numeric/decimal (not text)
Check: design_compositions.production_url is text (valid URL format)
Check: No orphaned compositions (compositions without valid design reference)

5.6 Storage Bucket Configuration

Check: designs bucket exists in Supabase Storage
Check: Max file size limit is configured
Check: Allowed MIME types are restricted (image/png, image/jpeg, image/svg+xml, image/webp)

Phase 6: Mobile UX (6 checks)

6.1 Responsive Layout

Read DesignStudioPage.tsx and check for responsive breakpoints
Check: Editor uses mobile-first CSS (base styles for 375px, md: for tablet, lg: for desktop)
Check: Panels collapse or switch to bottom sheets on mobile
Check: Canvas scales proportionally on small screens
Check: No horizontal scroll on mobile viewport

6.2 Touch Targets

Search for p-2, p-3, w-8, h-8, w-10, h-10 in toolbar and panel components
Check: All interactive elements have minimum 44px touch targets (p-3 or h-10+)
Check: Toolbar buttons are not cramped on mobile
Check: Close/dismiss buttons are easy to tap

6.3 Touch Gestures

Search for touch, pinch, gesture, pointer in canvas files
Check: Pinch-to-zoom supported on canvas
Check: Two-finger pan supported
Check: Long-press for context menu (alternative to right-click)
Benchmark: Canva and Printful both support pinch-zoom on mobile editor

6.4 Panel Management

Check: Only one panel visible at a time on mobile (not stacked)
Check: Panel switching is intuitive (bottom tabs or swipe)
Check: Canvas is not obscured by panels on small screens
Check: Keyboard does not break layout when editing text

6.5 Performance on Mobile

Search for useMemo, useCallback, React.memo in design studio components
Check: Heavy components are memoized
Check: Canvas operations are debounced for touch input
Check: No layout thrashing from frequent re-renders
Benchmark: Canvas should maintain 30fps during object manipulation on mobile

6.6 Offline / Network Resilience

Check: Auto-save handles network failures gracefully (retry, queue)
Check: AI generation shows clear loading states on slow connections
Check: Large image uploads show progress indicator

Phase 7: Performance & Bundle (5 checks)

7.1 Bundle Size

Check if Fabric.js is dynamically imported (not in initial bundle)
Check: fabric import uses dynamic() or import() (not top-level import in page)
Check: AI provider code is only loaded server-side (not bundled for client)
Check: Design studio page uses code splitting from the route

7.2 Canvas Performance

Search for requestAnimationFrame, renderAll, renderOnAddRemove in canvas files
Check: renderOnAddRemove is set to false for batch operations
Check: Canvas does not re-render on every state update (batched rendering)
Check: Large canvases (4000x5000px) do not cause OOM

7.3 Image Optimization

Check: Uploaded images are resized/compressed before storage (not raw 20MB files)
Check: Thumbnails are generated for design gallery
Check: Canvas preview images use appropriate resolution (not full production size)

7.4 Memory Management

Check: Canvas is disposed on component unmount
Check: Object URLs are revoked after use (URL.revokeObjectURL)
Check: Large data URLs are not held in React state unnecessarily
Check: Generation results are garbage-collected after placement

7.5 API Response Times

Check for caching, pagination, query optimization in design API routes
Check: Design list endpoint is paginated
Check: Composition fetch uses indexed queries
Check: Heavy operations (compose, mockup) return quickly or use streaming/polling

Output Format

Generate AUDIT_DESIGN_STUDIO_[DATE].md at the workspace root with the following structure:

# Design Studio Audit — [DATE]

## Executive Summary

[2-3 paragraph overview: what works well, what is broken, what is missing. State overall production-readiness.]

## Scorecard

| Category | Checks | Pass | Warn | Fail | Critical | Score |
|---|---|---|---|---|---|---|
| Canvas Editor UX | 15 | X | X | X | X | X% |
| AI Generation Pipeline | 12 | X | X | X | X | X% |
| Composition & Production | 10 | X | X | X | X | X% |
| API Security | 8 | X | X | X | X | X% |
| Database Schema | 6 | X | X | X | X | X% |
| Mobile UX | 6 | X | X | X | X | X% |
| Performance & Bundle | 5 | X | X | X | X | X% |
| **TOTAL** | **62** | **X** | **X** | **X** | **X** | **X%** |

## Findings

| ID | Severity | Category | Finding | File:Line | Recommendation |
|---|---|---|---|---|---|
| DS-001 | CRITICAL | API Security | [description] | `src/app/api/designs/generate/route.ts:42` | [fix] |
| DS-002 | FAIL | Canvas UX | [description] | `src/components/design-studio/CanvasWorkspace.tsx:310` | [fix] |
| DS-003 | WARN | Mobile UX | [description] | `src/components/design-studio/CanvasToolbar.tsx:88` | [fix] |
| ... | ... | ... | ... | ... | ... |

## Critical Blockers (Must Fix Before Production)

1. [DS-001] — [description and fix]
2. ...

## High Priority (Fix Within Sprint)

1. [DS-0XX] — [description]
2. ...

## Warnings (Fix Before V2)

1. [DS-0XX] — [description]
2. ...

## Industry Benchmark Comparison

| Capability | SKAPARA | Canva | Printful | Printify | Status |
|---|---|---|---|---|---|
| Canvas zoom range | 25%-500% | 10%-3000% | 50%-400% | 50%-200% | PASS |
| Font count | X | 2000+ | 50+ | 40+ | [PASS/FAIL] |
| Template count | X | 100K+ | 50+ | 20+ | [PASS/FAIL] |
| Undo depth | X | Unlimited | 50 | 20 | [PASS/FAIL] |
| Mobile editor | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| AI generation | [Y/N] | Yes (Magic) | No | No | ADVANTAGE |
| Multi-position | [Y/N] | N/A | Yes | Yes | [PASS/FAIL] |
| Embroidery constraints | [Y/N] | N/A | Yes | No | [PASS/FAIL] |
| Background removal | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| DPI validation | [Y/N] | Yes | Yes | Yes | [PASS/FAIL] |
| Design-to-order (no temp product) | [Y/N] | N/A | No | No | ADVANTAGE |

## Appendix: Known Bugs (from prior audits)

| Bug ID | Status | Description | Impact |
|---|---|---|---|
| BUG-05 | Open (LOW) | `getCanvasPrintArea` fallback ignores product type | Low — only affects legacy products |
| BUG-06 | Open (MEDIUM) | `blankImages` not panel-specific | Moderate — back panel shows front image |
| ... | ... | ... | ... |

Severity Levels

CRITICAL: Security vulnerability, data leakage, auth bypass, production data corruption. Blocks production launch.
FAIL: Broken functionality, missing validation, incorrect output. Must fix before release.
WARN: Sub-optimal pattern, missing best practice, UX gap. Should fix before V2.
PASS: Meets standards and industry benchmarks.

Notes

Always verify findings against actual code (read the file, cite the line number). Never report speculative issues.
Cross-reference with prior audits in frontend/docs/design-studio-audit/ to avoid duplicating known issues.
If a prior bug has been fixed, note it as RESOLVED with the fixing commit/PR.
For each CRITICAL or FAIL finding, include a concrete code-level recommendation (not just "fix this").
The benchmark comparison table should use real numbers from the codebase (count fonts, templates, etc.), not estimates.

name	Design Studio Production Audit
description	Comprehensive audit of the SKAPARA design studio — canvas editor, AI generation pipeline, composition rendering, mockup generation, and design-to-product flow. Use when asked to audit the design studio, design editor, canvas, AI generation, or product creation pipeline.

Design Studio Production Audit

Systematic audit of the Fabric.js-based design studio: canvas editor, AI multi-provider generation, composition rendering, mockup generation, persistence, and the full design-to-product pipeline.

Prerequisites

Before starting, read these files for architectural context:

CLAUDE.md — component standards, semantic tokens, route groups, Printful/Supabase connection reference
frontend/docs/design-studio-audit/DESIGN_STUDIO_AUDIT_E2E.md — prior E2E audit (Phases 1-3 status, known bugs)
frontend/docs/design-studio-research/11-gap-analysis.md — gap analysis across prior research reports

File Map

Keep this reference open throughout the audit. All paths relative to frontend/src/.

Canvas Editor

File	Role
`components/design-studio/DesignStudioPage.tsx`	Top-level orchestrator — mounts canvas, panels, header
`components/design-studio/CanvasWorkspace.tsx`	Fabric.js canvas init, object manipulation, export, clipboard
`components/design-studio/EditorHeader.tsx`	Save, preview, undo/redo, product info bar
`components/design-studio/CanvasToolbar.tsx`	Tool selection (text, image, shapes, draw)
`components/design-studio/CanvasProperties.tsx`	Object properties panel (fill, stroke, opacity, shadow, font)
`components/design-studio/LayersPanel.tsx`	Layer list, z-order, visibility, lock
`components/design-studio/PanelSwitcher.tsx`	Multi-position panel switching (front, back, sleeves)
`components/design-studio/ClipartPanel.tsx`	Clipart/asset browser
`components/design-studio/TemplatesPanel.tsx`	Template gallery
`components/design-studio/PreviewMockupModal.tsx`	Preview overlay with mockup rendering
`components/design-studio/EmbroideryConstraints.tsx`	Embroidery-specific validation (colors, line width)

Canvas Tools

File	Role
`components/design-studio/tools/TextTool.tsx`	Text object creation and editing
`components/design-studio/tools/ImageTool.tsx`	Image upload and placement
`components/design-studio/tools/ColorPicker.tsx`	Color selection with brand palette
`components/design-studio/tools/FontPicker.tsx`	Font browser and selection
`components/design-studio/tools/GradientEditor.tsx`	Gradient fill configuration
`components/design-studio/tools/ShadowControl.tsx`	Drop shadow configuration

State Management

File	Role
`hooks/useDesignEditor.ts`	Zustand store — canvas state, panels, selected object, variant color
`hooks/useCanvasHistory.ts`	Undo/redo stack management
`hooks/useCanvasExport.ts`	PNG/production export utilities
`hooks/useDesignPersistence.ts`	Auto-save and load from Supabase

AI Generation Pipeline

File	Role
`lib/ai-design-orchestrator.ts`	Intent classification, provider selection, prompt routing
`lib/design-generation.ts`	Generation execution, retry logic, result processing
`lib/design-presets.ts`	Style presets (meme, branded, minimalist, etc.)
`lib/design-cost-guard.ts`	Per-user generation limits, tier enforcement
`lib/providers/router.ts`	Multi-provider routing (cost, quality, speed)
`lib/providers/fal-provider.ts`	fal.ai provider (Flux, SDXL)
`lib/providers/openai-provider.ts`	DALL-E 3 provider
`lib/providers/ideogram-provider.ts`	Ideogram provider (text rendering)
`lib/providers/recraft-provider.ts`	Recraft provider (vector, brand)
`lib/providers/prompt-engineer.ts`	Prompt enhancement and safety filtering
`lib/providers/background-removal.ts`	Background removal via rembg sidecar
`lib/providers/storage-upload.ts`	Supabase Storage upload for generated images
`lib/providers/types.ts`	Shared TypeScript types for provider system

Composition & Mockup

File	Role
`lib/composition-renderer.ts`	Sharp-based server-side composition rendering
`lib/mockup-generator.ts`	Product mockup overlay generation
`lib/canvas-helpers.ts`	Canvas utility functions (print area, scaling, crop)
`lib/fabric-init.ts`	Fabric.js initialization and configuration

API Endpoints

Endpoint	Route File
`GET/POST /api/designs`	`app/api/designs/route.ts`
`POST /api/designs/ai-generate`	`app/api/designs/ai-generate/route.ts`
`POST /api/designs/generate`	`app/api/designs/generate/route.ts`
`POST /api/designs/compose`	`app/api/designs/compose/route.ts`
`POST /api/designs/compose-v2`	`app/api/designs/compose-v2/route.ts`
`GET /api/designs/composition/[id]`	`app/api/designs/composition/[id]/route.ts`
`GET /api/designs/history`	`app/api/designs/history/route.ts`
`POST /api/designs/estimate`	`app/api/designs/estimate/route.ts`
`POST /api/designs/mockup`	`app/api/designs/mockup/route.ts`
`POST /api/designs/remove-bg`	`app/api/designs/remove-bg/route.ts`
`GET /api/designs/logs`	`app/api/designs/logs/route.ts`
`POST /api/designs/[id]/create-product`	`app/api/designs/[id]/create-product/route.ts`

Database Tables

Table	Purpose
`designs`	Saved design documents (canvas JSON, metadata)
`design_sessions`	Active editing sessions (user, product, timestamps)
`ai_generations`	AI generation log (provider, prompt, cost, result)
`design_compositions`	Rendered compositions (production URLs, panel data)
`user_design_assets`	Uploaded user images/assets
`design_templates_clipart`	Template and clipart library entries

Pages

Page	File
Design editor	`app/[locale]/(editor)/design/[productId]/page.tsx`
Editor client wrapper	`app/[locale]/(editor)/design/[productId]/DesignEditorClient.tsx`
Designs gallery	`app/[locale]/(app)/designs/page.tsx`

Workflow

Execute each phase sequentially. Record every finding with severity, file path, and line number.

Phase 1: Canvas Editor UX (15 checks)

1.1 Canvas Initialization

Read lib/fabric-init.ts and CanvasWorkspace.tsx
Check: Is Fabric.js initialized with correct defaults (selection, rendering, retina)?
Check: Is canvas.dispose() called on unmount to prevent memory leaks?
Check: Does canvas resize correctly on window resize / container resize?
Benchmark: Canvas should initialize in <500ms on desktop

1.2 Object Manipulation

Read CanvasWorkspace.tsx — object add/select/transform methods
Check: Can user add text, images, shapes, and SVGs?
Check: Do alignment guidelines work (snap to center, edges)?
Check: Are transform controls (scale, rotate, skew) functional and constrained?
Check: Is multi-select supported (Shift+click or drag selection)?

1.3 Undo/Redo

Read hooks/useCanvasHistory.ts
Check: Does Ctrl+Z undo the last operation?
Check: Does Ctrl+Shift+Z (or Ctrl+Y) redo?
Check: Is history cleared correctly on panel switch?
Check: Are undo/redo stacks bounded (memory limit)?
Benchmark: Industry standard is 50+ undo steps

1.4 Keyboard Shortcuts

Search for keydown or addEventListener.*key in CanvasWorkspace.tsx and DesignStudioPage.tsx
Check: Ctrl+S (save), Ctrl+D (duplicate), Delete (remove), Escape (deselect), Arrows (nudge 1px), Shift+Arrows (nudge 10px)
Check: Are shortcuts documented in UI (tooltip or help modal)?
Check: Do shortcuts conflict with browser defaults?

1.5 Zoom & Pan

Search for zoomToPoint, viewportTransform, zoomLevel in canvas files
Check: Mouse wheel zoom works (clamp 0.25x-5x)
Check: Space+drag panning works
Check: Zoom controls UI shows percentage and has fit-to-canvas
Check: Viewport is reset before export (critical for production PNG)
Benchmark: Industry standard supports at least 10x-2000% zoom range

1.6 Color & Fill

Read tools/ColorPicker.tsx, tools/GradientEditor.tsx
Check: Brand palette is available as preset swatches
Check: Custom hex/RGB input works
Check: Gradient editor supports linear and radial gradients
Check: Color changes apply to selected object immediately

1.7 Typography

Read tools/TextTool.tsx, tools/FontPicker.tsx
Check: At least 12 fonts available (verify count in FontPicker)
Check: Font size, weight, style (italic), decoration (underline/strikethrough) all work
Check: Text alignment (left, center, right) works
Check: Letter spacing and line height adjustable
Check: Text editing on double-click canvas object
Benchmark: Competitors (Canva, Printful) offer 50+ fonts

1.8 Image Handling

Read tools/ImageTool.tsx
Check: Upload accepts PNG, JPG, SVG, WebP
Check: Blob URLs are converted to data URLs for persistence (blobUrlToDataUrl)
Check: Image cropping or masking available?
Check: Background removal integration works (calls /api/designs/remove-bg)
Check: Max file size validation exists

1.9 Layers Panel

Read LayersPanel.tsx
Check: Layer list displays all canvas objects with names/thumbnails
Check: Drag-to-reorder changes z-index
Check: Visibility toggle (eye icon) hides/shows objects
Check: Lock toggle prevents selection/editing
Check: Layer names are editable

1.10 Multi-Position Design

Read PanelSwitcher.tsx and panel-related state in useDesignEditor.ts
Check: Panels available per product type (front, back, sleeves, neck, wrist)
Check: Switching panels preserves design state for each panel
Check: Panel names map correctly to Printful placement names (PANEL_TO_PRINTFUL)
Check: Each panel has correct canvas dimensions per product type
Check: Ghost templates load for each panel (not just front)
Known Bug: BUG-06 — blankImages not panel-specific. Verify current status.

1.11 Templates & Clipart

Read TemplatesPanel.tsx, ClipartPanel.tsx
Check: Template gallery loads and templates can be applied to canvas
Check: Clipart browser loads assets from design_templates_clipart table
Check: At least 10 templates exist (query design_templates_clipart count)
Benchmark: Competitors offer 100+ templates per category

1.12 Print Area Enforcement

Search for clipPath, clipRectRef, getCanvasPrintArea in canvas files
Check: Visual clip path restricts objects to print area
Check: Objects outside print area are visually clipped (not hard-deleted)
Check: Ghost template outlines show safe zone
Check: Print area dimensions match Printful specs per product type
Known Bug: BUG-05 — fallback getCanvasPrintArea ignores product type. Verify status.

1.13 Embroidery Constraints

Read EmbroideryConstraints.tsx
Check: Max 3 thread colors enforced for embroidery products
Check: No gradients allowed on embroidery products
Check: Minimum line width enforced (1.5mm)
Check: Minimum text size enforced (5mm)
Check: Constraints activate only for embroidery product types

1.14 Preview & Mockup

Read PreviewMockupModal.tsx
Check: Preview modal renders canvas at 2x resolution
Check: Mockup overlay shows design on product photo
Check: Apply-to-cart button works from preview modal
Check: Multiple views available (front, back) if multi-position

1.15 DPI Validation

Search for dpi, resolution, PRODUCTION_DIMENSIONS across design studio files
Check: Production export outputs at 300+ DPI
Check: User is warned if uploaded image resolution is too low for print size
Check: PRODUCTION_DIMENSIONS match Printful printfile specs
Benchmark: 300 DPI minimum for print, 150 DPI minimum warning threshold

Phase 2: AI Generation Pipeline (12 checks)

2.1 Intent Classification

Read lib/ai-design-orchestrator.ts
Check: User prompt is classified into intent categories (meme, branded, text-only, photo, illustration, etc.)
Check: Classification drives provider selection (not random/hardcoded)
Check: Unknown/ambiguous intents have a sensible default path

2.2 Provider Routing

Read lib/providers/router.ts
Check: Router selects provider based on intent, quality preference, and cost
Check: Fallback chain exists (if primary provider fails, try secondary)
Check: Provider health/availability is checked before routing
Check: Routing decision is logged for debugging

2.3 Provider Implementations

Read each provider file: fal-provider.ts, openai-provider.ts, ideogram-provider.ts, recraft-provider.ts
Check: Each provider implements a consistent interface (from types.ts)
Check: API keys are read from server-side env vars (never exposed to client)
Check: Error handling catches provider-specific errors and returns normalized errors
Check: Timeouts are configured (no infinite hangs)
Check: Response format is normalized across providers

2.4 Prompt Engineering

Read lib/providers/prompt-engineer.ts
Check: Prompts are enhanced with style-specific suffixes
Check: Content safety filtering rejects harmful/prohibited content
Check: Prompt length is validated (provider-specific max lengths)
Check: Brand-specific keywords are injected when appropriate

2.5 Cost Guards

Read lib/design-cost-guard.ts
Check: Per-user generation limits exist (daily/monthly)
Check: Limits differ by user tier (free, pro, etc.)
Check: Cost estimation endpoint (/api/designs/estimate) returns accurate costs
Check: Generation is blocked when limit is exceeded (not just warned)
Check: Admin/staff bypass exists for testing

2.6 Generation API Security

Read app/api/designs/ai-generate/route.ts and app/api/designs/generate/route.ts
Check: Auth required (user must be logged in)
Check: Rate limiting exists (per-user, per-IP)
Check: Input validation (prompt length, parameters)
Check: Response does not leak internal error details
Check: Cost is deducted from user's balance/quota atomically

2.7 Background Removal

Read lib/providers/background-removal.ts and app/api/designs/remove-bg/route.ts
Check: Routes to self-hosted rembg sidecar (port 7000/8080)
Check: Fallback if rembg is unavailable
Check: Input validation (file type, size)
Check: Result quality — verify PNG with alpha channel is returned

2.8 Style Presets

Read lib/design-presets.ts
Check: Preset list covers key styles (meme, minimalist, branded, vintage, neon, etc.)
Check: Each preset defines provider preference, prompt template, and post-processing
Check: Presets are selectable in the UI
Benchmark: At least 8-10 presets for good coverage

2.9 Generation Latency

Search for timeout values, AbortController, signal in generation files
Check: Timeouts are set per provider (fal ~10s, DALL-E ~30s)
Check: User sees loading indicator during generation
Check: User can cancel in-progress generation
Benchmark: Quick generation <10s, quality generation <30s

2.10 Generation Logging

Read app/api/designs/logs/route.ts and search for ai_generations table inserts
Check: Every generation attempt is logged (provider, prompt, cost, duration, success/failure)
Check: Failed generations record the error reason
Check: Logs are queryable for cost analytics and debugging

2.11 Content Safety

Search for safety, nsfw, moderation, filter, block in provider and prompt files
Check: Prompt is checked against blocked terms/patterns before sending to provider
Check: Generated images are checked for NSFW content (provider-side or post-generation)
Check: Rejected content returns a user-friendly message (not a raw error)
Benchmark: All major POD platforms (Printful, Printify, Redbubble) enforce content policies

2.12 Storage Upload

Read lib/providers/storage-upload.ts
Check: Generated images are uploaded to Supabase Storage designs/ bucket
Check: File naming includes user ID and timestamp (prevents collisions)
Check: Public URL is returned for use in canvas
Check: Old/unused generations are cleaned up (or storage cost is bounded)

Phase 3: Composition & Production Pipeline (10 checks)

3.1 Production Export

Search for exportProductionPNG, PRODUCTION_DIMENSIONS in hooks and canvas files
Check: Export scales canvas to Printful-required dimensions per product type
Check: Viewport is reset before export (zoom/pan must not affect output)
Check: Guide objects, ghost templates, and background are excluded from export
Check: Output is PNG with transparency (no white background unless DTG on white)

3.2 Composition Rendering (compose-v2)

Read app/api/designs/compose-v2/route.ts and lib/composition-renderer.ts
Check: Server-side composition uses Sharp (not client-side canvas)
Check: All panels are composed (front + back + sleeves if designed)
Check: Production URLs are saved to design_compositions table
Check: Composition images are uploaded to Supabase Storage
Check: Error handling for Sharp failures (memory, format)

3.3 Mockup Generation

Read app/api/designs/mockup/route.ts and lib/mockup-generator.ts
Check: Mockup overlays design onto product photo at correct position/scale
Check: Perspective transform applied (design wraps on curved surfaces)
Check: Multiple mockup views available (if templates exist)
Check: Mockup templates exist for major product types
Search public/mockup-templates/ — count available templates
Known Gap: Prior audit found only 7 templates — hats, sneakers, tumblers, desk mats, kids, tanks missing

3.4 Design-to-Product Pipeline

Read app/api/designs/[id]/create-product/route.ts
Check: Creates product on Printful with correct blueprint, provider, and variants
Check: Print areas map correctly from canvas panels to Printful placements
Check: Pricing is set per PRICING_RULES (margin >= 35%)
Check: GPSR compliance data is attached before publish
Check: Product is synced to Supabase after Printful creation

3.5 Cart Integration

Search for composition_id, design_id in cart-related files
Check: cart_items table has composition_id column
Check: Adding designed product to cart stores composition reference
Check: Cart displays design preview (not generic product image)

3.6 Order Print Files

Search for files, productionUrlsMap, production_url in checkout/order files
Check: Stripe webhook reads production_url from composition
Check: Printful order includes files[] param with production URLs
Check: No temp products are created (direct files[] flow)
Check: Print file URLs are accessible to Printful (public or signed URLs)

3.7 Design Persistence

Read hooks/useDesignPersistence.ts
Check: Auto-save triggers on canvas change (debounced, not on every stroke)
Check: Canvas JSON is serialized correctly (guides/ghost excluded via filterGuideObjectsFromJSON)
Check: Loading a saved design restores all objects, positions, and styles
Check: Designs list page (/designs) shows user's saved designs
Check: Designs are user-scoped (RLS or explicit user_id filter)

3.8 Session Management

Search for design_sessions in API and hook files
Check: Session is created on editor open
Check: Session tracks active editing time
Check: Concurrent editing is handled (lock or last-write-wins)

3.9 Asset Management

Search for user_design_assets in API and component files
Check: Uploaded images are stored in Supabase Storage
Check: Asset library shows user's uploaded images
Check: Assets are user-scoped (no cross-user access)
Check: File size and type validation on upload

3.10 History Endpoint

Read app/api/designs/history/route.ts
Check: Returns user's design history (saved designs + generations)
Check: Auth required
Check: Pagination implemented
Check: Includes metadata (timestamps, thumbnails, product type)

Phase 4: API Security & Validation (8 checks)

4.1 Authentication on All Endpoints

Read every route file under app/api/designs/
Check: Every endpoint validates user auth (extracts user from session/token)
Check: Unauthenticated requests return 401
Check: User ID is extracted server-side (never trusted from request body)
Severity: CRITICAL if any mutating endpoint lacks auth

4.2 Input Validation

For each POST endpoint, check request body parsing:
Check: Prompt text is sanitized (no script injection)
Check: Image URLs are validated (no SSRF via internal URLs)
Check: Numeric parameters are bounded (width, height, count)
Check: File uploads validate type and size

4.3 Rate Limiting

Search for rateLimit, throttle, X-RateLimit in design API files
Check: AI generation endpoints have rate limits
Check: Upload endpoints have rate limits
Check: Rate limit headers are returned in responses
Benchmark: Typical limits: 10 generations/hour free tier, 50/hour pro

4.4 Error Handling

Search for try.*catch, NextResponse.json.*500 in design API files
Check: All endpoints wrap logic in try-catch
Check: Internal errors return generic message (not stack traces)
Check: Supabase/Printful errors are caught and normalized
Check: Error responses use consistent format { error: string, code?: string }

4.5 CORS & Headers

Search for headers, Access-Control, Content-Security-Policy in design API files
Check: API responses include appropriate security headers
Check: CORS is not overly permissive (no wildcard * in production)
Check: File upload responses set correct Content-Type

4.6 Supabase Client Usage

Search for supabase-admin, SUPABASE_SERVICE_KEY in design API files
Check: Admin client is used only where RLS bypass is needed (cron, admin ops)
Check: User-facing endpoints use server client with user auth
Check: No admin client usage in client-side code
Severity: CRITICAL if admin client is imported in any "use client" file

4.7 External Service Security

Check provider files for API key handling:
Check: fal.ai, OpenAI, Ideogram, Recraft keys are in env vars (not hardcoded)
Check: Keys are only accessed server-side (API routes, not lib/ imported by client)
Check: Provider responses are validated before processing (no blind trust)

4.8 Storage Security

Check Supabase Storage bucket configuration:
Check: designs/ bucket has appropriate RLS policies
Check: Users can only access their own uploads
Check: Public URLs are only generated for shared/published designs
Check: No directory traversal possible in upload paths

Phase 5: Database Schema & Integrity (6 checks)

5.1 Table Schema Completeness

Query or read migrations for designs, design_sessions, ai_generations, design_compositions, user_design_assets, design_templates_clipart
Check: All tables have created_at, updated_at timestamps
Check: All user-scoped tables have user_id with FK to auth.users
Check: Primary keys are UUIDs (consistent with rest of schema)

5.2 RLS Policies

Search for CREATE POLICY on design tables in migrations
Check: Every design table has RLS enabled
Check: SELECT policies enforce user_id = auth.uid()
Check: INSERT policies set user_id = auth.uid() (not user-provided)
Check: UPDATE/DELETE policies enforce ownership
Severity: CRITICAL if any table lacks RLS

5.3 Indexes

Search for CREATE INDEX on design tables
Check: designs has index on user_id
Check: ai_generations has index on user_id and created_at (for cost queries)
Check: design_compositions has index on design_id
Check: Any table queried by user_id has an index on it

5.4 Foreign Keys

Check: designs.user_id references auth.users
Check: design_compositions.design_id references designs.id
Check: ai_generations.user_id references auth.users
Check: ON DELETE behavior is appropriate (CASCADE or SET NULL)

5.5 Data Integrity

Check: designs.canvas_data is JSONB (not text)
Check: ai_generations.cost is numeric/decimal (not text)
Check: design_compositions.production_url is text (valid URL format)
Check: No orphaned compositions (compositions without valid design reference)

5.6 Storage Bucket Configuration

Check: designs bucket exists in Supabase Storage
Check: Max file size limit is configured
Check: Allowed MIME types are restricted (image/png, image/jpeg, image/svg+xml, image/webp)

Phase 6: Mobile UX (6 checks)

6.1 Responsive Layout

Read DesignStudioPage.tsx and check for responsive breakpoints
Check: Editor uses mobile-first CSS (base styles for 375px, md: for tablet, lg: for desktop)
Check: Panels collapse or switch to bottom sheets on mobile
Check: Canvas scales proportionally on small screens
Check: No horizontal scroll on mobile viewport

6.2 Touch Targets

Search for p-2, p-3, w-8, h-8, w-10, h-10 in toolbar and panel components
Check: All interactive elements have minimum 44px touch targets (p-3 or h-10+)
Check: Toolbar buttons are not cramped on mobile
Check: Close/dismiss buttons are easy to tap

6.3 Touch Gestures

Search for touch, pinch, gesture, pointer in canvas files
Check: Pinch-to-zoom supported on canvas
Check: Two-finger pan supported
Check: Long-press for context menu (alternative to right-click)
Benchmark: Canva and Printful both support pinch-zoom on mobile editor

6.4 Panel Management

Check: Only one panel visible at a time on mobile (not stacked)
Check: Panel switching is intuitive (bottom tabs or swipe)
Check: Canvas is not obscured by panels on small screens
Check: Keyboard does not break layout when editing text

6.5 Performance on Mobile

Search for useMemo, useCallback, React.memo in design studio components
Check: Heavy components are memoized
Check: Canvas operations are debounced for touch input
Check: No layout thrashing from frequent re-renders
Benchmark: Canvas should maintain 30fps during object manipulation on mobile

6.6 Offline / Network Resilience

Check: Auto-save handles network failures gracefully (retry, queue)
Check: AI generation shows clear loading states on slow connections
Check: Large image uploads show progress indicator

Phase 7: Performance & Bundle (5 checks)

7.1 Bundle Size

Check if Fabric.js is dynamically imported (not in initial bundle)
Check: fabric import uses dynamic() or import() (not top-level import in page)
Check: AI provider code is only loaded server-side (not bundled for client)
Check: Design studio page uses code splitting from the route

7.2 Canvas Performance

Search for requestAnimationFrame, renderAll, renderOnAddRemove in canvas files
Check: renderOnAddRemove is set to false for batch operations
Check: Canvas does not re-render on every state update (batched rendering)
Check: Large canvases (4000x5000px) do not cause OOM

7.3 Image Optimization

Check: Uploaded images are resized/compressed before storage (not raw 20MB files)
Check: Thumbnails are generated for design gallery
Check: Canvas preview images use appropriate resolution (not full production size)

7.4 Memory Management

Check: Canvas is disposed on component unmount
Check: Object URLs are revoked after use (URL.revokeObjectURL)
Check: Large data URLs are not held in React state unnecessarily
Check: Generation results are garbage-collected after placement

7.5 API Response Times

Check for caching, pagination, query optimization in design API routes
Check: Design list endpoint is paginated
Check: Composition fetch uses indexed queries
Check: Heavy operations (compose, mockup) return quickly or use streaming/polling

Output Format

Generate AUDIT_DESIGN_STUDIO_[DATE].md at the workspace root with the following structure:

# Design Studio Audit — [DATE]

## Executive Summary

[2-3 paragraph overview: what works well, what is broken, what is missing. State overall production-readiness.]

## Scorecard

| Category | Checks | Pass | Warn | Fail | Critical | Score |
|---|---|---|---|---|---|---|
| Canvas Editor UX | 15 | X | X | X | X | X% |
| AI Generation Pipeline | 12 | X | X | X | X | X% |
| Composition & Production | 10 | X | X | X | X | X% |
| API Security | 8 | X | X | X | X | X% |
| Database Schema | 6 | X | X | X | X | X% |
| Mobile UX | 6 | X | X | X | X | X% |
| Performance & Bundle | 5 | X | X | X | X | X% |
| **TOTAL** | **62** | **X** | **X** | **X** | **X** | **X%** |

## Findings

| ID | Severity | Category | Finding | File:Line | Recommendation |
|---|---|---|---|---|---|
| DS-001 | CRITICAL | API Security | [description] | `src/app/api/designs/generate/route.ts:42` | [fix] |
| DS-002 | FAIL | Canvas UX | [description] | `src/components/design-studio/CanvasWorkspace.tsx:310` | [fix] |
| DS-003 | WARN | Mobile UX | [description] | `src/components/design-studio/CanvasToolbar.tsx:88` | [fix] |
| ... | ... | ... | ... | ... | ... |

## Critical Blockers (Must Fix Before Production)

1. [DS-001] — [description and fix]
2. ...

## High Priority (Fix Within Sprint)

1. [DS-0XX] — [description]
2. ...

## Warnings (Fix Before V2)

1. [DS-0XX] — [description]
2. ...

## Industry Benchmark Comparison

| Capability | SKAPARA | Canva | Printful | Printify | Status |
|---|---|---|---|---|---|
| Canvas zoom range | 25%-500% | 10%-3000% | 50%-400% | 50%-200% | PASS |
| Font count | X | 2000+ | 50+ | 40+ | [PASS/FAIL] |
| Template count | X | 100K+ | 50+ | 20+ | [PASS/FAIL] |
| Undo depth | X | Unlimited | 50 | 20 | [PASS/FAIL] |
| Mobile editor | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| AI generation | [Y/N] | Yes (Magic) | No | No | ADVANTAGE |
| Multi-position | [Y/N] | N/A | Yes | Yes | [PASS/FAIL] |
| Embroidery constraints | [Y/N] | N/A | Yes | No | [PASS/FAIL] |
| Background removal | [Y/N] | Yes | Yes | No | [PASS/FAIL] |
| DPI validation | [Y/N] | Yes | Yes | Yes | [PASS/FAIL] |
| Design-to-order (no temp product) | [Y/N] | N/A | No | No | ADVANTAGE |

## Appendix: Known Bugs (from prior audits)

| Bug ID | Status | Description | Impact |
|---|---|---|---|
| BUG-05 | Open (LOW) | `getCanvasPrintArea` fallback ignores product type | Low — only affects legacy products |
| BUG-06 | Open (MEDIUM) | `blankImages` not panel-specific | Moderate — back panel shows front image |
| ... | ... | ... | ... |

Severity Levels

CRITICAL: Security vulnerability, data leakage, auth bypass, production data corruption. Blocks production launch.
FAIL: Broken functionality, missing validation, incorrect output. Must fix before release.
WARN: Sub-optimal pattern, missing best practice, UX gap. Should fix before V2.
PASS: Meets standards and industry benchmarks.

Notes

Always verify findings against actual code (read the file, cite the line number). Never report speculative issues.
Cross-reference with prior audits in frontend/docs/design-studio-audit/ to avoid duplicating known issues.
If a prior bug has been fixed, note it as RESOLVED with the fixing commit/PR.
For each CRITICAL or FAIL finding, include a concrete code-level recommendation (not just "fix this").
The benchmark comparison table should use real numbers from the codebase (count fonts, templates, etc.), not estimates.

design-studio-production-audit

More from this repository

Design Studio Production Audit

Prerequisites

File Map

Canvas Editor

Canvas Tools

State Management

AI Generation Pipeline

Composition & Mockup

API Endpoints

Database Tables

Pages

Workflow

Phase 1: Canvas Editor UX (15 checks)

1.1 Canvas Initialization

1.2 Object Manipulation

1.3 Undo/Redo

1.4 Keyboard Shortcuts

1.5 Zoom & Pan

1.6 Color & Fill

1.7 Typography

1.8 Image Handling

1.9 Layers Panel

1.10 Multi-Position Design

1.11 Templates & Clipart

1.12 Print Area Enforcement

1.13 Embroidery Constraints

1.14 Preview & Mockup

1.15 DPI Validation

Phase 2: AI Generation Pipeline (12 checks)

2.1 Intent Classification

2.2 Provider Routing

2.3 Provider Implementations

2.4 Prompt Engineering

2.5 Cost Guards

2.6 Generation API Security

2.7 Background Removal

2.8 Style Presets

2.9 Generation Latency

2.10 Generation Logging

2.11 Content Safety

2.12 Storage Upload

Phase 3: Composition & Production Pipeline (10 checks)

3.1 Production Export

3.2 Composition Rendering (compose-v2)

3.3 Mockup Generation

3.4 Design-to-Product Pipeline

3.5 Cart Integration

3.6 Order Print Files

3.7 Design Persistence

3.8 Session Management

3.9 Asset Management

3.10 History Endpoint

Phase 4: API Security & Validation (8 checks)

4.1 Authentication on All Endpoints

4.2 Input Validation

4.3 Rate Limiting

4.4 Error Handling

4.5 CORS & Headers

4.6 Supabase Client Usage

4.7 External Service Security

4.8 Storage Security

Phase 5: Database Schema & Integrity (6 checks)

5.1 Table Schema Completeness

5.2 RLS Policies

5.3 Indexes

5.4 Foreign Keys

5.5 Data Integrity

5.6 Storage Bucket Configuration

Phase 6: Mobile UX (6 checks)

6.1 Responsive Layout

6.2 Touch Targets

6.3 Touch Gestures

6.4 Panel Management

6.5 Performance on Mobile

6.6 Offline / Network Resilience

Phase 7: Performance & Bundle (5 checks)

7.1 Bundle Size

7.2 Canvas Performance