03 · Apps · Workflows · Frontends
Three phases, one toolkit, a token economy that decides between success and money pit. Everything you need to ship your first product yourself.
We have no partnerships with the providers mentioned here. We recommend what we use ourselves.
Setup
Tools first, concept second. We go through the order we use ourselves — account, app, editor, repo, rules, skills, MCPs. An hour of setup, then never think about it again.
An Anthropic account with an active subscription is the baseline. One plan is enough — Pro to start, Max once you need longer sessions or more token budget. Without an active subscription there's no Cowork and no Claude Code.
Cowork lives as a third tab inside the Claude Desktop App — you don't need a separate app. In Cowork you describe what your product should do and the AI asks questions until the concept is solid. At the end you get a markdown file you hand to Claude Code in phase 2.
The build tool for phase 2. Two setup paths: terminal (maximum flexibility) or VS Code (code, terminal and Claude in one window) — the output is the same. Security tip: ideally work on a separate computer with no personal data on it. Claude Code gets full file access, so a clean separation matters.
npm install -g @anthropic-ai/claude-codeBackup after every sprint. API keys, internal notes and early architecture sketches stay locked down. Vercel and Netlify deploy directly from GitHub — so the workflow pays off twice.
git init
git remote add origin git@github.com:dein-user/dein-repo.git
echo ".env" >> .gitignoreEvery project folder gets a file called CLAUDE.md. It's the rulebook for your sessions. How you work, which stack you use, which mandatory checks (GDPR, performance, accessibility) always run, what's off-limits. Claude Code reads it automatically on every start. Without a CLAUDE.md the AI starts from zero each time.
Skills are folders with a markdown instruction file plus optional scripts. Claude loads them only when they fit the current task. Four skills are worth it from day 1: UI/UX Design (components, layouts, design tokens), Superpowers (planning, brainstorming, test-driven development), Code Review (a second pair of eyes before you commit) and Memory (CLAUDE.md maintenance and lessons-learned tracking across sessions).
/plugin install ui-ux-pro-max@anthropic
/plugin install superpowers@anthropic
/plugin install code-review@anthropic
/plugin install memory@anthropicMCPs (Model Context Protocol) give Claude access to your world — files, GitHub, database, browser. Three to start with: Filesystem (Claude builds in your project), GitHub (Claude becomes a team member), Context7 (current docs instead of stale hallucinations). Need a backend? Add Supabase (database, auth, storage). Tip: at project start, ask your planning session (Cowork or Superpowers) which MCPs your specific use case really needs — otherwise you accumulate things that don't do anything.
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projekt
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"
claude mcp add context7 --transport http https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: ctx7sk_..."
claude mcp add supabase -- npx -y @supabase/mcp-server-supabase --access-token YOUR_SUPABASE_PATBonus to step 05 · CLAUDE.md
Andrej Karpathy (OpenAI co-founder) has publicly described where AI coding tends to fail: wrong assumptions, over-engineering, unasked-for changes, an unverified “done”. Forrest Chang turned that into four CLAUDE.md rules as an installable plugin, now at over 190,000 GitHub stars. Install once and they apply in every session.
Think Before Coding
Think first, build second. Claude states its assumptions before writing code.
Simplicity First
The simplest solution that works. No over-engineering just in case.
Surgical Changes
Only change what the task requires. Unrelated code stays untouched.
Goal-Driven Execution
Done means verified. Every success gets proven, never just claimed.
/plugin marketplace add forrestchang/andrej-karpathy-skills
/plugin install andrej-karpathy-skills@karpathy-skillsB · Slash commands and modes
Slash commands clean up the context and steer Claude Code. Three modes decide how independently Claude works.
/clearClear the context between different tasks — saves tokens.
/compactSummarise the history when the session gets too long.
/debugSystematic debugging. Reproduce, hypothesise, test, propose a fix.
/planActivate plan mode. Claude analyses the task and writes a plan before coding.
/dreamBrainstorm and ideation mode. Claude thinks out loud with you without coding directly.
/initSet up a project, create CLAUDE.md, set defaults.
/rewindRoll back to an earlier state — restore a checkpoint.
/pluginInstall or manage a plugin, add an MCP server.
/loopRepeat a request or slash command on a fixed interval (e.g. /loop 5m /babysit). Without an interval, Claude paces itself.
/usageCheck current token usage.
/effortHow much reasoning effort Claude spends on an answer, from low to max. More for tricky tasks, less for routine ones.
/modelSwitch models (Opus, Sonnet, Haiku). opusplan lets Opus plan and Sonnet execute: quality on the plan, cheaper on the code.
/goalSet a goal Claude keeps working toward until it is met. /goal clear removes it.
/resumePick up an earlier session with full context. Handy when you continue exactly where you left off after a break.
/quitEnd the session and restart. You need this so freshly installed skills and plugins get loaded.
You type these without a slash, directly in your request.
ultracodeNot a classic slash command: you use the word "ultracode" in your request. Claude Code then orchestrates several agents in parallel and plans or builds larger tasks in one go.
Claude researches and proposes a plan before code gets written. You read it, say „looks good“, then Claude starts.
When to use it: For anything that isn't trivial. Standard for every new feature.
Claude carries out a confirmed task directly without asking again. Step by step, with visibility into tool calls.
When to use it: When the plan is set and you just want the result.
Claude works through autonomously and doesn't ask in between. Riskier but faster.
When to use it: For clear, small tasks or when you need sprint power.
The three phases
Whether you build a web app, an iOS app or a small automation, the path is the same. You plan, you build, you test. We walk through it on our own tool, the KI-Bundestrainer, and you take the same three steps for your idea.
Tool · Claude Cowork
Tool · Claude Code
Tool · Browser, simulator, logs
Main tool: Claude Cowork.
You describe what your app should do and tell Claude to keep asking until the concept is solid. At the end Claude generates a markdown file with the finished concept. That's your briefing for the coding phase.
Default prompt for Claude Cowork (adapt and copy):
I want to build a [web app / iOS app / Android app].
It should have the following features:
[describe features here]
The target audience is:
[describe the target audience here]
Keep asking me questions about features, edge cases, and target audience until you fully understand the concept.
Also clarify the data and architecture side with me:
- Which data does the app store and process?
- Which of it is critical (sensitive, confidential, regulated — e.g. health, finance, personal notes)?
- Which data must WE own as the operator (server, database, backups)?
- Which data should belong exclusively to the user (local on device only, end-to-end encrypted, never on our servers)?
- Which software architecture fits (pure frontend app with local storage, backend with auth + database, E2E-encrypted sync …)?
Then build a markdown file with the finished concept that I can share with Claude Code in the next step.Second route: the Ultracode commandNew in Opus 4.8
Instead of planning step by step, since Opus 4.8 you can use the word "ultracode" in your request (briefly called "workflow" at launch). Claude Code then writes an orchestration script itself, starts several agents in parallel and plans out a whole process or a complete app. If you prefer to think in dialogue, the brainstorm skill or the ECC plugin with its planning agents will help.
You don't need to code yourself today. A basic grasp of software architecture still pays off. The most interesting question is almost always: what actually happens to the data? Which ends up on your servers, which only on the user's device, which must never leave the browser?
Once you build an app that handles sensitive data (health, finance, journal, customer data), you make that architecture call consciously, before a single line of code gets written. That's exactly what the data block in the prompt above is for.
Your tool: Claude Code. Details on setup, slash commands and plan mode are in section B.
Workflow:
Default prompt for Claude Code (copy and paste):
Read the markdown file I placed in the project folder.
Based on this concept, build the application. If you have questions, please ask them before you start.
Please program the app in several sprints — we always do only one clearly scoped part at a time. At the end of each sprint, tell me what you built and what is next.
Important:
- Plan mode before every larger change. First the plan, then my confirmation, then the code.
- Actively raise the mandatory checks: GDPR, performance, multilingual support, accessibility.
- After each milestone, propose a commit command (private repo on GitHub).Up to here it's easy. You talk to the AI, say what it should do, and the AI handles the rest. Test and optimisation are the interesting part. Real problem-solving lives here. Does the UX hold up when a user does something unexpected? Does your tool give the answers it should, or is the model hallucinating? How much do the tokens cost per call?
The details on token economics, hallucinations and timeouts are in section G. Here are the typical questions that come up in this phase:
Workflow/planbrainstorm/clear/compact/rewind/debugcode-reviewChrome-DevTools-MCPA few commands are enough to start. You learn the rest when you need them.
Skills
Skills are folders with a markdown instruction file plus optional scripts. Claude loads them only when they fit the current task. That keeps the context lean and makes recurring tasks reproducible.
Distinctions in one sentence:
claude mcp add <name>./plugin install <name>@<marketplace>.Where skills live: ~/.claude/skills/ (personal), .claude/skills/ (project-wide), or bundled inside a plugin.
Atomic instructions Claude should have on hand in every session. Plugins (see next section) bundle skills like these into complete workflows.
What · Anthropic skill for persistent memory across sessions. Stores decisions, lessons learned and project context.
Install
/plugin install memory@anthropicUse case: You explain your project once. From then on Claude starts every session knowing what worked recently and which paths turned out to be dead ends.
What · Anthropic skill for UI/UX design — generates components, watches design-system consistency, typography, spacing and accessibility.
Install
/plugin install ui-ux-pro-max@anthropicUse case: You describe a section or component and get production-ready code that looks designed. The skill checks spacing, typography and contrast along the way.
What · Web search from inside Claude — researches current facts, checks claims against real sources, returns links. The best tool against hallucinations on current topics.
Install
/plugin install web-search@anthropicUse case: Current price of a model, fresh library version, is a claim still true? Claude searches, verifies and hands you the source with the answer.
What · UI/UX implementation — generates layouts, checks design consistency, builds components.
Install
/plugin install frontend-design@claude-plugins-officialUse case: You describe „a pricing page in bento-grid style“, the skill delivers production-ready React/HTML components with real design quality.
What · Maintains and audits the CLAUDE.md project memory, captures lessons learned from each session.
Install
/plugin install claude-md-management@claude-plugins-officialUse case: After two or three weeks on the same project Claude starts to feel forgetful. The skill writes the key rules back into CLAUDE.md, and you stop repeating the same corrections.
What · Analyses an existing codebase and recommends fitting hooks, skills, MCP servers and subagents.
Install
/plugin install claude-code-setup@claude-plugins-officialUse case: First session in a new repo. The skill suggests the right automations for your stack („you have Next.js + Supabase → install XYZ“).
What · Helps you build your own skills, improve existing ones and test them with evals.
Install
/plugin install skill-creator@claude-plugins-officialUse case: You type the same instruction for the third time („format every input in our style“). skill-creator turns it into a reusable /format-input skill. From then on, one command is all it takes.
What · Slash commands for git commit, git push and PR creation with clean messages.
Install
/plugin install commit-commands@claude-plugins-officialUse case: You've made ten changes and want to commit them cleanly. /commit writes the message, stages, commits — all in one step.
What · React-based programmatic videos — you code animations like a component and Remotion renders them to MP4. Good for tutorials, product demos, social clips.
Install
/plugin install remotion@claude-plugins-communityUse case: Onboarding video for your app: Claude builds the Remotion composition with text, motion and sound, you render the final product with one command.
What · Skill that cuts Claude's replies hard — drops filler and pleasantries, keeps technical terms and code. Control it with /caveman lite, /caveman full and /caveman ultra (the stronger, the terser).
Install
npx skills add JuliusBrussee/cavemanUse case: Long sessions where the verbose explanations cost you tokens. You switch to /caveman ultra and Claude keeps answering in telegram style without losing the content.
What · Skill against AI prose: it removes the typical patterns (throat-clearing openers, em-dash inflation, the „not X but Y" shape) so text reads human. Then a second pass checks what still smells like AI.
Install
npx skills add hardikpandya/stop-slopUse case: You have Claude draft something and don't want to de-slop it by hand. The skill catches the AI tells before the text reaches you.
What · Over 40 marketing skills by Corey Haynes: competitor research, CRO reviews, positioning, copywriting, campaign planning, reporting. The skills build on each other and share the same product context.
Install
npx skills add coreyhaines31/marketingskillsUse case: You have no marketing team. You describe your product once, then Claude handles the landing-page copy, the conversion analysis or the campaign plan in the same style.
Found a skill you don't have yet? Hand Claude the job directly. It finds the official skill, downloads it and sets it up across your projects.
Prompt to copy
I want to install the [SKILL-NAME] skill. Go online, find the official skill and install it on all my projects. Don't stop until it is actually installed.Then restart the session once with /quit so the freshly installed skill gets loaded.
When you type the same instruction for the third time, turn it into a skill. The skill-creator (top of the list) walks you through it: you describe what the skill should do, it builds the rest.
Example: a tone-of-voice skill
Hey Claude, I want to create a new, custom skill: a tone-of-voice skill. Use the skill-creator skill for it. The skill should kick in whenever I write emails, work on documents or any text that has to sound like me. You should know how I write and speak. Let's build the skill together. If you need anything from me, just ask.Official marketplaces
claude-plugins-official
Automatically available in Claude Code.
claude-plugins-community
Community marketplace, add manually.
/plugin marketplace add anthropics/claude-plugins-communityMCPs
At some point you want more than answers. You want Claude to touch your files, commit to your GitHub, query a database, take browser screenshots. That's what MCP is for — the Model Context Protocol. An open standard, a kind of universal connector for AI. Every MCP server exposes tools that the AI may use after you approve them.
Setup basics:
claude mcp add <name> ... to add, /mcp to manage.Per card: what it does, one-line setup, security note, link.
What · Controlled read/write access to specific local folders. The foundation for „Claude builds in my project“.
Why · Claude works directly in your project instead of you copying files back and forth.
Setup
claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem /pfad/zum/projektSecurity: Whitelist only specific project folders. Never / or ~. Don't include .env, keys or SSH folders.
Repo / docsWhat · Read repos, create issues and PRs, write reviews, trigger actions. Claude becomes a team member.
Why · Claude reads repos, opens issues and comments on pull requests like a teammate.
Setup
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ --header "Authorization: Bearer YOUR_GITHUB_PAT"Security: Use a fine-grained PAT, scoped to the repos Claude works in. Never commit the token.
Repo / docsWhat · Create and query tables, run migrations, edge functions and auth from Claude.
Why · Claude creates tables, runs migrations and manages your backend without touching the dashboard.
Setup
claude mcp add --transport http supabase https://mcp.supabase.com/mcp (OAuth-Login im Browser)Security: Never connect against production. Supabase explicitly recommends dev/staging projects. Set read_only=true and project_ref. The most common MCP disaster in 2025/26 was someone wiring the MCP to prod.
Repo / docsWhat · Browser automation and E2E tests. Claude can click around your own code in the browser, take screenshots and see errors.
Why · Claude clicks through its own code in the browser and sees for itself whether it works.
Setup
claude mcp add playwright npx @playwright/mcp@latestSecurity: Default starts an isolated browser instance. Only share your own login sessions if you know exactly who you're giving them to.
Repo / docsWhat · Full access to Chrome DevTools. Performance profiles, network traces, console logs, Lighthouse.
Why · Claude reads the console, network requests and performance of the running page itself and finds browser bugs without you copying logs or screenshots.
Setup
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latestSecurity: If you attach to your normal Chrome session, Claude sees all your logged-in tabs. For sensitive logins use a debug profile instead.
Repo / docsWhat · Web scraping, search and crawling. Firecrawl fetches any web page and returns clean Markdown that Claude can work with directly.
Why · Claude does its own web research and gets page content in structured form. The basis for research and comparison workflows with real sources.
Setup
claude mcp add firecrawl -e FIRECRAWL_API_KEY=fc-... -- npx -y firecrawl-mcpSecurity: The API key runs on paid credits — keep it in an env variable, never in the repo. And: scraped pages are third-party input. Treat them as data, never as instructions (prompt injection).
Repo / docsWhat · Gives Claude version-specific, current docs for libraries (React, Next.js, Tailwind …) to counter LLM hallucinations with outdated APIs.
Why · Claude gets current, version-accurate docs for a library and stops inventing functions that no longer exist.
Setup
Remote https://mcp.context7.com/mcp mit CONTEXT7_API_KEY: ctx7sk_..., lokal: npx -y @upstash/context7-mcp --api-key ctx7sk_...Security: Read-only. No risk beyond the API key.
Repo / docsWhat · Manage deployments, read logs, set env variables. Claude can deploy and debug on its own.
Why · Claude deploys, reads build logs and sets environment variables without you opening the dashboard.
Setup
claude mcp add --transport http vercel https://mcp.vercel.com (OAuth-Login)Security: Check OAuth scopes. Grant access to production deployments deliberately.
Repo / docsWhat · Query error events, stack traces and performance issues. Claude sees what's crashing for your users.
Why · Claude sees what crashes in production, with stack trace, and can tackle the bug directly.
Setup
claude mcp add sentry -e SENTRY_AUTH_TOKEN=... -- npx -y @sentry/mcp-serverSecurity: Scope the auth token to the project/org you need.
Repo / docsWhat · Stripe API (products, prices, customers, subscriptions, test charges) plus search in the Stripe docs. Build pricing, checkout and subscriptions from Claude.
Why · Claude creates products, prices and subscriptions and tests payments when you build checkout.
Setup
claude mcp add --transport http stripe https://mcp.stripe.com (OAuth im Stripe-Dashboard)Security: Start strictly in test mode. Only release live keys once the flows hold up. Audit MCP sessions regularly in the Stripe dashboard.
Repo / docsWhat · Read and write Notion pages and databases. PRDs, specs, knowledge base without context-switching to a browser tab. Claude can, for example, read your current spec from Notion and put it into code.
Why · Claude reads your specs from Notion and keeps the docs in sync with the code.
Setup
claude mcp add --transport http notion https://mcp.notion.com/mcp (OAuth-Login im Browser)Security: Limit the OAuth scope to the workspaces you need. Exclude sensitive databases (HR, finance) in the setup.
Repo / docsWhat · Web search from inside Claude. Complement to the web-search skill: an MCP variant that returns structured search results and is easier to instrument for agent workflows.
Why · Claude searches the web live when its knowledge is not enough for a question.
Setup
claude mcp add brave-search -e BRAVE_API_KEY=... -- npx -y @modelcontextprotocol/server-brave-searchSecurity: Keep the API key in a .env, don't hardcode it. The free tier has a quota — don't run it in loops, otherwise rate limits hit.
Repo / docsWhat · OpenAI's coding agent as an MCP server. Claude can call Codex from the editor to have a second model review its own code — cross-model second opinions often catch blind spots that a single model talking to itself misses.
Why · Claude gets a second opinion from OpenAI's Codex, for example for an independent code review.
Setup
claude mcp add codex -- npx -y @openai/codex-mcpSecurity: Keep the OpenAI API key in .env, don't hardcode it. Code reviews are read-only operations, but each call costs against the key — check the quota first for loops or large diffs.
Repo / docsWhat · Access to the Apify Store: thousands of ready-made scrapers and automations (Actors) for social media, search engines, maps, shops. Claude runs an Actor and gets structured data back.
Why · Claude pulls real web data through ready-made scrapers instead of you crawling every page yourself.
Setup
claude mcp add --transport http apify https://mcp.apify.com (OAuth-Login im Browser)Security: Runs on paid Apify credits — token in an env variable, never in the repo. Scraped content is foreign input: treat it as data, never as instructions (prompt injection).
Repo / docsWhat · Image and video generation from Claude — 30+ models (Veo, Kling, Flux, Seedream and more) behind one endpoint. Claude creates images, renders videos and trains characters.
Why · You build social clips or product visuals right in the conversation instead of switching between tools.
Setup
claude mcp add --transport http higgsfield https://mcp.higgsfield.ai/mcp (Login mit Higgsfield-Account)Security: Authenticates through your Higgsfield account, generation costs credits. Check usage rights on generated content before you publish it.
Repo / docsWhat · Cloud connector for social media: manage Instagram DM automations — set up keyword triggers, collect leads from posts, see which automation gets the most replies. All in conversation instead of clicking through the tool.
Why · Claude runs your DM automations while you just describe what should happen.
Setup
In Claude: Einstellungen → Connectors → BooSend verbinden (claude.ai/customize/connectors), dann Instagram-Account autorisierenSecurity: Touches your Instagram account and real user messages — personal data (GDPR). Grant connector permissions deliberately, never push an automation live unchecked.
Repo / docsWhat · Anthropic's design tool (claude.ai/design), connected to Claude Code. With /design-sync every design starts from your real design system, and finished drafts go back to Claude Code as a handoff bundle, no screenshot detour.
Why · Design and code stay in sync: shape clickable prototypes and finish building them in the same workflow.
Setup
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp (danach einmal /design-login)Security: Beta for Pro, Max, Team and Enterprise. Design usage counts against the same limit pool as chat and Claude Code, so keep an eye on how much budget your design sessions burn.
Repo / docsThey give the agent an unrestricted shell. Combined with prompt-injected input from the web, GitHub issues or mail, that's extremely risky. If at all: in an isolated VM, never on the main system.
Generic REST wrappers that allow arbitrary HTTP calls. They sound handy and are exactly the pattern that caused the Supabase demo data leak in 2025.
Even the official MCP is dangerous when you hook it up to the live prod DB. Dev project, read_only=true, project_ref set to dev.
General rule:
Don't install an MCP without thinking for 30 seconds about the blast radius. If a malicious string from a webpage or an issue lands in the agent unfiltered — what can the MCP do in the worst case?
Plugins
Plugins bundle skills, hooks, slash commands, subagents, and MCP configs into one GitHub repo. You install them in two lines and instantly get a full workflow instead of wiring each piece up manually.
Skill vs Plugin
Atomic instruction. A skill is a single focused recipe Claude follows — e.g. "this is how you validate an API response" or "this is how you write a commit message". Drop-in via file in ~/.claude/skills/.
Bundle. A plugin = multiple skills + hooks + slash commands + subagents + optional MCP configs in one install. You don't get one recipe — you get the whole workflow.
Plugins are, at their core, several skills bundled together. The cleanest mental model: "plugin = workflow bundle".
How installation works
Marketplaces are GitHub repos that list plugins. For the official Anthropic marketplaces (claude-plugins-official, claude-plugins-community) you can skip the marketplace-add step — community repos need both commands.
Two-step pattern
/plugin marketplace add <github-repo>
/plugin install <name>@<marketplace>A curated set: one generalist (ECC), official bundles for planning, review and security, persistent memory, an autonomous loop and a context-engineering pack. Enough for most workflows.
What it does · Agent-harness operator system: 61 agents, 246 skills, 76 slash commands, memory optimization, security scanning, research-first workflow. Works across Claude Code, Codex, Cursor and OpenCode.
Use it for One install covers planning, building, reviewing and securing. You save yourself ten separate setups and get agents that work together.
Two-step pattern
/plugin marketplace add affaan-m/ECC
/plugin install ecc@eccExample prompts
Plan the next feature of my Next.js app in research-first mode and write the tests first.Audit app/api/auth/* for OWASP top 10 and insecure defaults.What it does · Official 7-phase feature workflow: discovery → codebase exploration → clarifying questions → architecture → implementation → quality review → summary.
Use it for For every feature bigger than a bugfix: architecture first, then code. That saves you the refactoring loop afterwards.
Two-step pattern
/plugin install feature-dev@claude-plugins-officialExample prompts
feature-dev: design a Stripe webhook for subscription cancellations and implement it with tests.Plan a dark-mode toggle for our dashboard — codebase first, then architecture, then code.What it does · Multiple Sonnet agents in parallel: CLAUDE.md compliance, diff-level bug hunt, git-blame context, PR history check. Returns a clean review markdown.
Use it for Before every push. Catches what the linter misses — logic bugs, architecture drift, sloppy repeats.
Two-step pattern
/plugin install code-review@claude-plugins-officialExample prompts
Review my current branch against CLAUDE.md and give me only the issues as a markdown table.Look at my last 5 commits and find bugs the linter would never spot.What it does · Hook-based security review: OWASP top 10, insecure-default detection, sharp-edges checks when you edit auth or crypto code.
Use it for The moment you build login, payments or your own API routes. First line of defense against the classic mistakes.
Two-step pattern
/plugin install security-guidance@claude-plugins-officialExample prompts
Check my login route for CSRF, session hijacking and missing rate limits.Walk through my .env logic and find insecure default fallbacks.What it does · Persistent cross-session memory: Claude compresses what happens in each session and re-injects relevant context into later ones. Massively reduces repetition.
Use it for For projects spanning weeks. Claude starts each session knowing what you decided last time, and you save yourself the "remember when we decided X".
Two-step pattern
/plugin marketplace add thedotmack/claude-mem
/plugin install claude-mem@thedotmackExample prompts
What did we decide about the daily-goals admin in our recent sessions?Remember: from now on we use Inter, not Plus Jakarta, in admin areas.What it does · Autonomous loop for Claude Code: instead of stopping after one attempt, Claude works the same task in rounds until a defined done-signal appears. A Stop hook intercepts the exit and feeds the task back in.
Use it for Clearly scoped tasks with a real success criterion (tests green, everything migrated) that you don't want to babysit step by step. Like the superpowers build workflow: see it through instead of leaving it half-done. Always set --max-iterations as a safety net.
Two-step pattern
/plugin install ralph-wiggum@claude-plugins-officialExample prompts
/ralph-loop "Migrate all tests from Jest to Vitest. Output COMPLETE when all tests are green." --completion-promise "COMPLETE" --max-iterations 50/ralph-loop "Build a REST API for todos with CRUD, validation and tests." --completion-promise "DONE" --max-iterations 30What it does · Plugin bundle of 15 skills around context engineering: keep context lean, avoid degradation, memory and multi-agent patterns. The skills kick in automatically depending on the task.
Use it for When your sessions get long and Claude starts losing the thread or burning tokens. The bundle curates what actually belongs in context.
Two-step pattern
/plugin marketplace add muratcankoylan/agent-skills-for-context-engineering
/plugin install context-engineering@context-engineering-marketplaceExample prompts
Keep the context for this long migration lean: summarize what's done and keep only what matters for the next steps.Restructure our CLAUDE.md so it stays under 5k tokens and still holds all the important rules.Vibe coding tools
Because it burns token money you don't need to spend. Vibe-coding builders get you to 70 percent — the last 30 percent (auth flows, custom logic, security) you pay in credit loops that escalate fast. With Claude Code it's cheaper, and there are still good products out there.
The tool cards — Lovable, Bolt, v0, Rork, Replit, Cursor, Figma Make — live on the tools page, with pricing, strengths and weak spots. That's where they belong.
Go to the tool cardsD · Connection tools
Backend, AI connection, hosting, automation — depending on the product type. One recommendation per area plus a note on when you really need it.
Supabase
When: As soon as your app stores data: logins, profiles, posts, caches.
Postgres + auth + storage + edge functions in one. EU region in Frankfurt. The free tier covers your first projects.
Anthropic API · OpenAI · Google Gemini
When: When your product calls AI (not just the coding AI).
Call it through a backend proxy, never directly from the frontend. API keys as environment variables, not in code.
Vercel
When: When your web app should go online.
Connect a GitHub repo, push, automatic deploy. Your own domain in 5 minutes. Edge functions included.
n8n · Make · Zapier
When: For workflows between tools — without your own app.
n8n self-hosted for cheap, predictable costs. Make for visual mid-market workflows. Zapier for maximum simplicity.
Security · Before your product goes live
The same three mistakes show up in vibe-coding projects again and again. All three are avoidable if you walk through them once before launch.
Keys belong on the server as environment variables. Whatever lands in your frontend bundle or git history is public, and automated scanners look for exactly that.
Every public function that triggers AI or API calls needs a limit per user and time window. Without one, a single script can call your app endlessly, and you pay for every single request.
In Supabase that means: enable RLS on every table, with policies that only allow each user their own rows. Without RLS, anyone with your public key can read other people's data.
And before all that, the basic question: Which user data do you actually need to store on your server? Anything that can stay on the user's device stays out of your database and makes data protection much simpler.
The check for it
Claude Code ships with its own security review. Run it once before every launch, it finds exactly these classics.
/security-reviewToken economics & scaling
Cheap to build is one thing. Running the tool long-term without the bill crushing you is another. Tokens are the operating cost of your AI app. If you don't control models, caching and pre-computation, the first viral day turns into a money pit.
Projection: 100,000 users × 2 generations × 16,000 tokens on a premium reasoning model. Result: around 156,000 USD per day. After the four levers below we were at around 65 USD per day. A reduction of −99.96 percent.
The four levers at a glance
From 156,000 USD/day to around 65 USD/day. The four levers stacked on top of each other:
| Lever | What happens | Effect |
|---|---|---|
| 1 · Model choice | Switch from Opus 4 to GPT-4o-mini | −95% model cost |
| 2 · Pre-computation | Research data once, store it in the DB | −98% web search |
| 3 · Caching | Repeats from cache instead of recomputing | ≈ −65% requests |
| 4 · Max-tokens cap | Hard limit on output length | −30% latency |
First · What you can do while building
Token optimisation doesn't start with model pricing. It starts with how you work with Claude Code. Three levers that take effect immediately, before you touch a single line of model logic:
Setup · Three cost levers inside Claude Code itself
Your setup has its own dials, before a single line of product code runs. Three things we use ourselves:
Sonnet 5 instead of Opus
For most coding tasks Sonnet 5 is close to Opus 4.8 at a fraction of the cost: 2 USD input and 10 USD output per million tokens (intro pricing until August 31, 2026, then 3 and 15; Opus is at 5 and 25). Plus a 1M context window. On Free and Pro plans Sonnet 5 is now the default model.
# switch inside a running session:
/model
# or right at startup:
claude --model sonnet
# permanently, in ~/.claude/settings.json:
{ "model": "claude-sonnet-5" }Headroom as a compression proxy
A local proxy between Claude Code and the model. It compresses tool outputs, logs and file reads before they hit your context, and stays reversible: the model can fetch the original anytime. Benchmarks show 60 to 95 percent fewer tokens on JSON- and tool-heavy workflows, more like 15 to 20 on pure coding sessions. Open source (Apache 2.0, around 58,000 GitHub stars), everything runs locally on your machine.
# install (Python; Node works too):
pip install "headroom-ai[all]"
# start Claude Code compressed:
headroom wrap claude
# optional: learns from failed sessions,
# writes fixes to CLAUDE.local.md:
headroom learnponytail for shorter code
The plugin keeps Claude's code compact and focused. Fewer generated lines means fewer output tokens. For shortening replies and your CLAUDE.md we also use the caveman skill from the skills section.
/plugin marketplace add DietrichGebert/ponytail
/plugin install ponytail@ponytail
# control afterwards:
/ponytail lite | full | ultra | offPremium reasoning models (Claude Opus, GPT-4) are too much for most use cases when you make structured decisions from a predefined pool. Switch to stats-optimised classes (GPT-4o-mini, Claude Haiku 4.5) and you pay sub-cent per call instead of multiple cents.
Model table (pricing bars relative to Opus 4 = 100%):
| Model | Input · 1M tok | Output · 1M tok | Output relative | Notes |
|---|---|---|---|---|
| Claude Opus 4 | 15 USD | 75 USD | 100 % | Top quality, often too expensive for structured picks |
| GPT-4 (Classic) | 30 USD | 60 USD | 80 % | Overkill when you only pick from a pool |
| Claude Haiku 4.5Our pick | 1 USD | 5 USD | 7 % | Our pick for texts with tone — best voice quality at sub-cent |
| OpenAI GPT-4o-miniOur pick | 0,15 USD | 0,60 USD | 0,8 % | Our pick for structured tasks — JSON, classification, picks |
| DeepSeek V3 | 0,27 USD | 1,10 USD | 2 % | German generation: weak, especially in style/satire registers |
| Qwen 2.5 72B | 0,35 USD | 0,40 USD | 0,6 % | German generation: weak in non-neutral registers |
| Gemini 2.0 Flash | 0,10 USD | 0,40 USD | 0,5 % | Very cheap but schema fails on strict JSON requirements |
List prices rounded. Chinese models are nominally cheap but unusable for German generation in certain registers (e.g. satire). The word choice slips into generic fast.
Practice tip: Use models in parallel. On the KI-Bundestrainer we use Anthropic for texts with style (satire, opinion pieces) and OpenAI for structured tasks (squad selection). That saves money and gives each use case the right tool.
Data that rarely changes you research once and store in a database. When generating, the AI only reads from there instead of searching again on every call. Live data you pull in larger intervals (e.g. once per day), not per user request.
Example: On the KI-Bundestrainer we researched the 108 candidates once. Current form, injuries and opponent analysis we fetch once per World Cup match.
Effect · −98 percent web search cost.
When two users ask the same thing, the AI shouldn't compute twice. Save the inputs plus the result on every request. On a repeat you serve the cached result instead of running the AI again.
Effect · Around 65 percent of requests drop entirely, more depending on the use case.
Bonus: prompt caching at the provider
Prompt caching at the provider. Both Anthropic and OpenAI cache recurring prompt parts (system prompts, fixed instructions) automatically. Cache hits cost roughly a tenth of the normal input price at Anthropic — up to 90 percent savings. Build your prompt so the stable part comes first and the variable user input comes last.
Models often allow „up to 16,000 output tokens“ and use it as a free pass to think out loud, even when the output would be much shorter. Set a hard cap (e.g. 7,000). The model reads that as a budget signal and shortens automatically. No quality loss because the real output volume usually sits below.
Effect · −30 percent latency, fewer timeouts as a side effect.
Advanced
Four concepts you don't need on day one, but they sharpen your setup once you build regularly.
Output styles give Claude a different persona — e.g. "learning" (explains every step) or "explanatory" (more inline code comments). You install them as plugins and switch via /output-style. Handy when you want to flip between "just ship it" and "I want to learn while I build".
Hooks are small automations that fire on specific events — before or after a tool call, before a commit, when a file is edited. You use them to enforce behaviour you'd otherwise trigger by hand („run tests before every commit“, „show a security warning when editing an auth file“).
Permissions define what Claude can do without asking and what it can't. Three levels: allow, ask, deny. Important as soon as the AI runs on its own (auto mode, subagents, hooks). Defaults are safe, but you can tighten them per project — e.g. filesystem writes only in specific folders, no shell commands without confirmation.
The Agent SDK is how you put Claude directly into your finished product. The console tool becomes an agent that lives in your app. You build your own tools, define system prompts, give the agent access to your database — and end users talk to Claude through your interface instead of the console.
Your build challenge
You only understand AI by using it yourself. A small tool, a weekend experiment, an internal script. Doesn't matter. You don't need to become a techie. You just need to have started once.
Pick a form: web app, iOS app, small automation or workflow. Walk through the three phases from section A — planning with Claude Cowork, coding with Claude Code, testing in the browser or simulator. Block off a weekend. You'll be surprised how far you get.
Recommendations for this topic
Creators and newsletters that fit this cluster thematically. Outside voices, curated by us.
Out in front on building with Claude Code. Deep practical insights and his own academy (SKAILE) for everyone who's serious about building software with AI.
Founder case studies by Pat Walls: how real founders launched and marketed their products, with concrete numbers. Great for learning growth tactics from real examples.
On to the next station
Build automation with AI
Plan workflows, then ship them with Claude Code. n8n + Hetzner — cheap, fast, yours.