krea-build
Patterns for building applications that integrate the Krea API. Auth, polling discipline, error handling, validation, frontend integration (SvelteKit/React/Vue), and the 'prototype in chat, productize in app' workflow. Use when the user is writing code that calls the Krea API directly — building a generator UI, a content pipeline, a creative tool — not when they just want to generate one image. For interactive generation use the sibling krea-ai skill instead.
What this skill does
# Krea Build — Integration Patterns for Developers
This skill is for **building apps that integrate Krea**. Not for one-off generations — that's the sibling `krea-ai` skill, which uses the Krea CLI by default and MCP as fallback.
Use this skill when the user is:
- Writing a TypeScript/Python/Go client that calls the Krea API directly
- Building a frontend that lets users generate content (SvelteKit, Next.js, etc.)
- Designing a content pipeline that runs in CI or production
- Embedding Krea outputs in a portfolio, document, or tool
## Self-update check (opt-in)
Once per session, if sibling `../krea-ai/scripts/update-check.sh` exists, run it. Prints `UPGRADE_AVAILABLE <local> <remote>` if a newer version is out. Surface that to the user once, then continue. Snoozes 24h→48h→7d. Disable with `touch ~/.krea-skills/update-check-disabled`.
## When to use this skill vs. `krea-ai`
| Situation | Use |
|---|---|
| "Generate me an image of X" | `krea-ai` (CLI-first generation) |
| "Build me a moodboard app that uses Krea" | `krea-build` (this) |
| "Write a TypeScript helper to call Krea" | `krea-build` |
| "Run a one-off pipeline now" | `krea-ai` |
| "Add Krea generation to my React form" | `krea-build` |
| "Build an animation production UI around shot lists and Krea video jobs" | `krea-build`, with `krea-animation` as the creative workflow contract |
## Critical workflow rule: prototype in chat, productize in the app
The single most expensive mistake when building Krea apps is writing app code around unproven generation output. Always:
1. **Prototype** — run the generation manually with `krea-ai` (CLI by default, MCP fallback) to see what the actual output looks like.
2. **Confirm** — show the user the result. Iterate on prompt, model, parameters until it's right.
3. **Productize** — once the output is approved, hardcode the URLs and parameters into the app.
If you skip step 1–2 and go straight to writing SvelteKit pages with placeholder prompts, the app will look broken when generation fails or returns unexpected results. Validating in chat takes seconds; debugging a broken app takes minutes.
See `references/integration-patterns.md` for the full workflow.
## Architecture recommendation: server-side only
The Krea API key must **never** be exposed to the browser. All Krea calls go through your server:
- **SvelteKit:** `+page.server.ts`, `+server.ts`, or `actions` in `+page.server.ts`
- **Next.js:** API routes (`app/api/*/route.ts`), server actions, or `getServerSideProps`
- **Express/Hono/Fastify:** standard server routes
The client triggers a generation by hitting your server, which hits Krea, polls until done, and streams the result back.
## Auth, polling, errors
All three live in `references/api-client.md` with reusable TypeScript and Python snippets. The key shapes:
- **Auth:** `Authorization: Key ${KREA_API_KEY}` header.
- **Submit:** `POST /generate/image/<provider>/<model>` with `{ prompt, ... }` → returns `{ job_id }`.
- **Poll:** `GET /jobs/<job_id>` every 3–10s until `status` is `completed` or `failed`.
- **Errors:** see `references/validation.md` for the full table.
## Frontend integration
See `references/frontend-snippets.md` for ready-to-paste TypeScript that handles common patterns:
- Generation form with progress UI
- Image preview with click-to-expand
- Multi-image gallery with state
- Video player with loading states
- Hardcoded asset arrays (the "productize" step)
## Validation discipline
User-provided prompts, image URLs, and parameter values must be validated server-side before forwarding to Krea. See `references/validation.md` for the validation checklist and content moderation handling.
## Reference docs
- `references/integration-patterns.md` — prototype→productize workflow, app structure, when to chat-first
- `references/api-client.md` — auth, polling, retries, error handling (TS + Python)
- `references/validation.md` — input checks, content moderation, common API errors
- `references/frontend-snippets.md` — ready-to-paste TS for SvelteKit/React/Vue
## Quick-start
If the user is starting a brand new app and asks "how do I integrate Krea":
1. Read `references/api-client.md` to understand the auth+poll shape.
2. Drop the TypeScript helper from `references/frontend-snippets.md` into `src/lib/krea/index.ts` (or wherever fits the project).
3. Build a server route that calls the helper.
4. Build a client component that hits the server route.
5. For each user-facing generation, **prototype the prompt in chat with `krea-ai` first**, then hardcode the approved version.
Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.