Kittl

WORKING SLICE
Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions.

Build this scoped Kittl-inspired workflow with a documented data model and visible failure states.

Architecture
- Vite, React, TypeScript and Fabric.js for editable vector/text composition.
- IndexedDB project snapshots, licensed local font assets and SVG/PDF export with explicit physical dimensions.

Prerequisites and limits
A supported Node release for development and a modern browser. Ship a static bundle that can work locally without an account.
Outside this release: Universal print-shop compatibility and merchandise fulfillment are excluded.

Data model and correctness
vector layers, text runs, font references, ornament assets, print dimensions and export profiles
Invariant: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.

Security and privacy
Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry.

Recovery and export
Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Universal print-shop compatibility and merchandise fulfillment are excluded.
2. Phase 2 — Durable model. Model vector layers, text runs, font references, ornament assets, print dimensions and export profiles Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.
4. Phase 4 — Permissions and integration failure. Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [pdf](https://github.com/anthropics/skills/blob/main/skills/pdf/SKILL.md) — Process PDFs through extraction, generation, page operations, form filling and OCR workflows. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: vector layers, text runs, font references, ornament assets, print dimensions and export profiles
Project rule — preserve this invariant: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
Project rule — acceptance evidence: Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.

# AGENTS.md — Build guide for Kittl

## Project scope
Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions.

Catalogue verdict: kinda. The core loop is buildable, but a dependable replacement becomes a real weekend or multi-day project. For Kittl, create typography-heavy graphics, labels, posters, and merchandise-ready exports. The hard boundary is specialized templates, fonts, vector effects, asset library, and mockups, plus editor polish, assets, collaboration, and distribution.
Use the implementation prompt below to define the deliverable. Complete each phase's acceptance checks before extending the scope.

## Working agreement
- Inspect the repository and its existing instructions before choosing paths, dependencies or commands. Keep one coherent stack and explain changes to the proposed architecture.
- Plan a vertical slice that accepts a real input and produces the useful output described below. Persist only the state the prompt calls for; respect memory-only and upstream-managed workflows. Use fixtures only when they are clearly labelled.
- After scaffolding, document the actual install, development, check and build commands in README and keep them synchronized with the package or project manifest. Do not report commands as successful unless they ran.
- Work in small steps. At handoff, list implemented flows, checks actually performed, remaining blockers, and any credentials or provider setup the owner must supply.
- Do not publish, spend money, contact customers, delete source data or run irreversible migrations without the project owner's authorization.

## Prerequisites
- A supported Node release for development and a modern browser. Ship a static bundle that can work locally without an account.
- Implementation components: Vite, React, TypeScript and Fabric.js for editable vector/text composition. IndexedDB project snapshots, licensed local font assets and SVG/PDF export with explicit physical dimensions.
- Scope boundary: Universal print-shop compatibility and merchandise fulfillment are excluded.

## Stack and architecture
- Vite, React, TypeScript and Fabric.js for editable vector/text composition.
- IndexedDB project snapshots, licensed local font assets and SVG/PDF export with explicit physical dimensions.
- Domain model: vector layers, text runs, font references, ornament assets, print dimensions and export profiles

## Security and data integrity
- Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry.
- Correctness boundary: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
- Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.
- Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups.

## Agent implementation rules
- Project rule — data model: vector layers, text runs, font references, ornament assets, print dimensions and export profiles
- Project rule — preserve this invariant: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
- Project rule — acceptance evidence: Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.

## Optional agent skills and references
- Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
- Optional external skill: [pdf](https://github.com/anthropics/skills/blob/main/skills/pdf/SKILL.md) — Process PDFs through extraction, generation, page operations, form filling and OCR workflows. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.

Read the linked SKILL.md and its dependencies before adding a skill. Select only the skills matching this project's runtime and task; their documentation does not supply API access, credentials or approval to perform external actions. Pin the reviewed revision where the tool supports it. Follow the chosen agent's documented project-level installation mechanism.

## Distribution ideas
These are optional planning notes. Obtain the owner's approval before publishing or contacting anyone.
- Demonstrate the actual Kittl-inspired workflow with owned or clearly labeled sample data: Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions.
- Publish a reproducible walkthrough with this observable result: Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.
- Explain who can operate this scoped tool, its setup and ongoing costs, and these remaining product gaps: Universal print-shop compatibility and merchandise fulfillment are excluded. Avoid guaranteed savings, performance scores or implied endorsement.

## Engineering roadmap
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Universal print-shop compatibility and merchandise fulfillment are excluded.
2. Phase 2 — Durable model. Model vector layers, text runs, font references, ornament assets, print dimensions and export profiles Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.
4. Phase 4 — Permissions and integration failure. Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

## Paid-product capabilities outside this build
- specialized templates, fonts, vector effects, asset library, and mockups
- huge template and asset libraries
- real-time multiplayer
- brand governance
- professional print workflows

## Implementation prompt
WORKING SLICE
Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions.

Build this scoped Kittl-inspired workflow with a documented data model and visible failure states.

Architecture
- Vite, React, TypeScript and Fabric.js for editable vector/text composition.
- IndexedDB project snapshots, licensed local font assets and SVG/PDF export with explicit physical dimensions.

Prerequisites and limits
A supported Node release for development and a modern browser. Ship a static bundle that can work locally without an account.
Outside this release: Universal print-shop compatibility and merchandise fulfillment are excluded.

Data model and correctness
vector layers, text runs, font references, ornament assets, print dimensions and export profiles
Invariant: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.

Security and privacy
Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry.

Recovery and export
Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups.

Implementation order
1. Phase 1 — Scope and fixtures. Implement this bounded workflow: Design a typography-led poster or label with editable text, curves, ornaments and reusable layouts. Show font licensing/source information and export SVG plus a reviewed PDF at explicit physical dimensions. Record prerequisites, select representative user-owned fixtures and document the unsupported features: Universal print-shop compatibility and merchandise fulfillment are excluded.
2. Phase 2 — Durable model. Model vector layers, text runs, font references, ornament assets, print dimensions and export profiles Add migrations or a versioned document format, explicit validation, stable IDs and a visible import-error report. Preserve this rule: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
3. Phase 3 — Complete the first useful path. Implement the workflow's input, review and output interface, with clear controls and explicit empty/error states. Represent edits as reversible commands, debounce autosave, and persist a complete project snapshot before destructive structural changes.
4. Phase 4 — Permissions and integration failure. Sanitize imported SVG, reject external scripts and oversized assets, and require user selection before reading local files. Keep document contents out of telemetry. Request integration credentials and permissions only for the enabled feature; show a disconnected state instead of mock results.
5. Phase 5 — Portable handoff. Export editable JSON with assets and an SVG or PNG rendering. Reopen the editable export to retain layers, relationships and IDs; image exports alone are not backups. Include setup, operating limits, fixture walkthrough and shutdown/restart instructions in the README.
6. Phase 6 — Acceptance scenarios. Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references. Repeat the workflow after restart and with a denied permission or unavailable dependency; show recoverable failure rather than a success placeholder.

Acceptance
Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.
Use real source data or clearly labeled fixtures. Explain unsupported input and provider failures; do not fabricate analytics, delivery receipts, accuracy claims or security guarantees.

Optional agent guidance
Optional external skill: [vercel-composition-patterns](https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md) — Design reusable React components with composition, context and explicit component variants. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [web-design-guidelines](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md) — Review web interfaces for accessibility, keyboard focus, forms, navigation and interaction quality. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Optional external skill: [pdf](https://github.com/anthropics/skills/blob/main/skills/pdf/SKILL.md) — Process PDFs through extraction, generation, page operations, form filling and OCR workflows. Review its instructions and compatibility before use; it does not grant deployment, data-access or publication permission.
Project rule — data model: vector layers, text runs, font references, ornament assets, print dimensions and export profiles
Project rule — preserve this invariant: A raster placed inside SVG is still raster; output must disclose missing fonts and cannot claim print readiness from DPI metadata alone.
Project rule — acceptance evidence: Export a 200 mm label and confirm its dimensions and text bounds; reopening editable JSON preserves layer order and licensed font references.

## Completion evidence
Demonstrate the prompt's acceptance scenarios against the scoped workflow. Include setup from a clean checkout and failure recovery. Check persistence across restart and export/restore only for the state the prompt says to store; for memory-only tools, confirm that temporary content is discarded as specified. Record actual results and remaining limitations. A detailed plan alone does not establish a working replacement.