DEV Community: FounderPrompts

Making SVG social-media templates rebrandable in 6 lines with CSS classes

FounderPrompts — Mon, 01 Jun 2026 04:32:45 +0000

I just shipped a pack of 28 social-media templates (square posts, vertical stories, a carousel) and made one deliberate engineering decision: each template is a plain .svg whose entire color scheme lives in a single <style> block. Rebranding all 28 files means editing six hex values. The technique works for any SVG you want a non-designer to recolor.

The problem with "editable" templates

Most packs ship flattened PNGs, or .canva links you can only edit inside one tool. Want to change the brand color? You're hunting through every layer in every file. And AI image generators give you something that looks fine once but has zero consistency across a set.

Color tokens, but in SVG

SVG supports an internal <style> with CSS classes. So instead of fill="#FF6B5C" scattered across hundreds of nodes, every shape references a semantic class:

<style>
  .bg      { fill: #FFF6F0; }  /* fondo */
  .accent  { fill: #FF6B5C; }  /* color principal */
  .accent2 { fill: #FFB23E; }  /* secundario */
  .ink     { fill: #2B2B36; }  /* titulares */
  .muted   { fill: #8A8A99; }  /* texto apoyo */
  .onacc   { fill: #FFFFFF; }  /* texto sobre acento */
  text     { font-family: 'Poppins','Inter',sans-serif; }
</style>
...
<rect class="bg" .../>
<circle class="accent" .../>
<text class="ink">Hazlo con miedo, pero hazlo.</text>

Change .accent once and every button, badge and blob in the file updates. Because the class names are identical across all 28 files, the same six-line swap rebrands the whole pack. I ship two alternate palettes as ready-to-paste blocks.

Keep text as text

The other rule: never outline the type. Every headline is a real <text>/<tspan> node, so the buyer edits copy by changing the string — and it stays editable in Canva (Pro import), Figma, Inkscape or Illustrator. Fonts are Google Fonts (Poppins / Inter / Caveat, OFL) referenced with @import so a renderer loads them correctly.

Rendering to PNG

For the "ready to post" PNG that sits next to each SVG, I render with Playwright: load the SVG into a Chromium page that @imports the fonts, await document.fonts.ready, screenshot at the exact size (1080×1080 for posts, 1080×1920 for stories). Same pipeline gives pixel-exact output at any size.

Why I built it

The copy is all in Spanish — the pack targets Spanish-speaking small businesses and creators, an audience underserved by the English-first template world. But the SVG-as-design-system technique is language-agnostic; steal it for your own brand kit.

If you want the finished pack (28 templates, SVG + PNG, the two extra palettes, a usage guide), it's $1 on Ko-fi: https://ko-fi.com/s/45e7f1ce3e

How do you keep a set of graphics on-brand — design tokens, a Figma library, something else?

I built 6 AI app boilerplates that actually compile (RAG, lead scoring, support triage, resume parser, Slack bot, web scraper)

FounderPrompts — Mon, 01 Jun 2026 03:39:42 +0000

Ko-fi: https://ko-fi.com/s/7296aa7d89

Every time I need to prototype an AI feature, I go looking for a clean starting point. Ninety percent of the time, what I find is a Medium article with 40 lines of Python that imports three packages I have to guess the version of, calls openai.ChatCompletion.create (the old API), and has no error handling. I run it, it breaks, I spend an hour debugging the wrong thing.

So I built the versions I actually want to start from.

What I built

Six complete AI app repos — TypeScript and Python, all using the Anthropic SDK:

rag-pdf-chat — Upload a PDF, chunk it with token-aware splitting, embed it, store in a vector store (in-memory by default, Pinecone via env), and chat with the document. The answers include citations back to source chunks, so you can verify the model isn't hallucinating. It's Next.js 14 app-router, API routes only, with a minimal UI page.

lead-scoring-api — POST /score with a lead JSON payload, get back { score: 0-100, reasons: string[], tier }. Weights are configurable (JSON file or env vars). Fires a webhook when score crosses a threshold, so you can pipe hot leads straight into your CRM or notification system.

support-triage-agent — A FastAPI webhook that receives a support ticket and classifies it ({ category: bug|billing|howto|feature, priority: P0-P3, confidence }). When confidence is above a threshold it drafts a reply; when it's below, it escalates to a human. No LangChain — just the Anthropic SDK and Pydantic v2 models throughout.

resume-parser — POST /parse with a PDF or DOCX file, get back a structured JSON validated by a Pydantic schema: contact info, skills array, experience array (with dates, company, role, bullets), education array. Uses pypdf and python-docx for text extraction. Documented OCR fallback note for scanned-image PDFs.

slack-ai-bot — app_mention events reply with a Claude-generated response using the last N messages of the channel as context, so replies are coherent with the conversation. /summarize slash command summarizes a thread. Persists per-thread conversation history in an in-memory store (pluggable interface).

web-scraper-llm — POST /scrape with { url, schema } where schema is a JSON shape describing what you want extracted. The app fetches the page (rotating User-Agent pool), cleans the HTML to text, passes it to Claude, and returns data matching your schema. Local-fixture mode so tests don't hit the network.

The thing that makes them actually useful: offline tests

Every app has a test suite that runs without an API key or any network access. The Anthropic client is injected via a factory function — tests swap in a fake. Pinecone, Slack, and HTTP are all mocked.

app                   tests   result
──────────────────────────────────────
rag-pdf-chat          19      ✓ passed
lead-scoring-api      14      ✓ passed
support-triage-agent  12      ✓ passed
resume-parser          4      ✓ passed
slack-ai-bot           5      ✓ passed
web-scraper-llm        9      ✓ passed
──────────────────────────────────────
Total                 63      all green

When I say "it builds clean" I mean: npm install && npm run build && npm test goes green on a fresh clone, and pip install -r requirements.txt && pytest goes green too. No secret environment variables required for CI.

Why this matters more than you'd think

The reason AI-generated code is often useless in practice isn't that the logic is wrong — it's that it's missing the boring parts:

No lockfile, so npm install resolves different versions on your machine
No .env.example, so you don't know what to set
No retry logic, so one 429 from the LLM crashes the process
No error handling, so you get an unhandled exception instead of a { error: "..." } response
No tests, so you have no way to verify your changes don't break the happy path

These apps have all of that. Not because it's impressive — because it's what makes the difference between "I pasted this and it worked" and "I spent a day debugging before giving up."

Shared conventions and the prompts library

All six apps follow the same conventions: TypeScript apps use Vitest, ESM, strict mode, and Zod for input validation. Python apps use pytest and httpx for the test client. Every server exposes GET /health.

The prompt templates live in apps/_shared/prompts/ — one Markdown file per app. The apps load them at runtime, so you can tune a prompt without touching application code.

Cost estimates

Lead scoring and resume parsing are cheap — those run on claude-haiku-4-5 and cost under $1 for 1,000 requests. RAG chat and web scraping run on claude-sonnet-4-6 for quality and cost more. Full estimates (1k/10k/100k requests) are in COSTS.md.

What I packaged

All six apps are in a single zip. If you want to start building on one of these patterns instead of from scratch: https://ko-fi.com/s/7296aa7d89

12 Postgres schemas every B2B SaaS re-implements (and gets wrong the first time)

FounderPrompts — Sun, 31 May 2026 03:55:36 +0000

Ko-fi: https://ko-fi.com/s/006956d6b5

Every B2B SaaS ends up needing the same dozen pieces in its data layer: multi-tenancy, roles and permissions, an audit log, a billing mirror, a job queue, outbound webhooks, an events table for analytics. And almost every team builds each one twice — because the first version compiles, ships, and then quietly breaks at scale.

I wrote up the failure modes I keep seeing (and the Postgres 16 patterns that fix them).

Multi-tenancy: the forgotten `WHERE tenant_id`

Pooled multi-tenancy — one database, a tenant_id column on every table — is the model that actually stays operable past a few hundred tenants. The danger is a single query that forgets WHERE tenant_id = $1 and leaks another tenant's data.

Row-Level Security turns that from a breach into a non-event:

ALTER TABLE resources ENABLE ROW LEVEL SECURITY;

CREATE POLICY tenant_isolation ON resources
  USING (tenant_id = current_setting('app.current_tenant')::uuid);

Set app.current_tenant once per request and every query is constrained automatically. The matching index leads with tenant_id: (tenant_id, created_at DESC) — because in a pooled model every hot query filters by tenant first.

The job queue race nobody tests for

The naive "SELECT a pending job, then UPDATE it to running" has a race: two workers grab the same row. Under load you run the same job twice. The fix is one statement:

UPDATE jobs SET status = 'running', attempts = attempts + 1
WHERE id = (
  SELECT id FROM jobs
  WHERE status = 'pending' AND scheduled_at <= now()
  ORDER BY priority DESC, scheduled_at
  FOR UPDATE SKIP LOCKED
  LIMIT 1
) RETURNING *;

FOR UPDATE SKIP LOCKED lets N workers pull disjoint rows with zero collisions — a real queue, no Redis, backed by a partial index on (priority DESC, scheduled_at) WHERE status = 'pending'.

The audit log that's unqueryable at 50M rows

An audit trail grows forever. If it's a plain table, retention means a slow DELETE and endless vacuum. Declarative monthly partitioning makes retention a DROP TABLE of last year's partition — instant. The tax you accept: a partitioned table's primary key must include the partition key, so lookups need (id, created_at), not id alone.

The Stripe webhook that double-charges

Stripe delivers events at-least-once and sometimes out of order. A handler that just applies each event will eventually apply a stale subscription.updated after a newer one. The mirror needs a stripe_event_id UNIQUE for idempotency and a last_event_at guard so an older event can't overwrite a newer state.

Why an AI's first attempt isn't this

Ask a model for "a multi-tenant schema with RBAC and an audit log" and you get something plausible — and missing the partial unique index that lets you re-create a soft-deleted row, the BRIN index that keeps the events table from bloating, the deny-wins resolution in the permission check, the idempotency key on the webhook. Those are the parts you only add after the second rewrite.

The pack

I packaged the iterated versions: 12 Postgres 16 schemas, each with schema.sql + Drizzle + Prisma, up/down migrations, seed data, and a queries.md with EXPLAIN notes — plus an ARCHITECTURE.md showing how the 12 layer into one backend and a DECISIONS.md for the cross-schema trade-offs. Every schema + seed is verified to load on a clean Postgres instance; core PG16 only, no extensions.

If you're starting a B2B SaaS and want the "I'll just adapt these and move on" reference: https://ko-fi.com/s/006956d6b5

I Turned My Cursor + Claude Code Setup Into 12 Reusable Files

FounderPrompts — Sun, 31 May 2026 02:59:39 +0000

Ko-fi: https://ko-fi.com/s/fdb0e60135

Most Cursor and Claude Code configurations degrade to the same thing: you paste a vague system prompt, you coach the AI repeatedly through the same patterns every project, and the output is inconsistent because nothing is actually encoded anywhere permanent.

I spent a few weeks turning the patterns that work — the ones I kept re-explaining from scratch — into actual files. Proper format. The format Cursor and Claude Code expect. Drop them in, and they run.

Here is what I built and why each artifact required real iteration to get right.

The Code Reviewer Subagent

Claude Code supports subagents: .md files in .claude/agents/ with YAML frontmatter that defines a model, a description (which controls auto-delegation), and a system prompt. When you say "review my code," Claude Code reads the description field of every agent and delegates to the right one.

The code-reviewer agent's system prompt structures the output into four categories — correctness bugs, security issues (OWASP-tagged), data-loss risks, and performance problems — and requires a severity table and a merge verdict. That last part matters: without it, every review ends ambiguously and you're making the call yourself anyway.

Getting the OWASP tagging right took several iterations. The model would skip it when the issue wasn't an obvious injection or auth bypass. The fix was a constraint in the system prompt: every security finding must include an OWASP Top 10 reference or explicitly note "not mapped" with a reason. Now it does it consistently.

The other three subagents follow the same pattern:

test-generator — detects your test framework (Vitest, Jest, pytest), reads your existing conventions, and produces zero-stub tests with real assertions. The hard part was getting it to produce runnable tests rather than placeholder structures. The system prompt now explicitly bans // TODO and pass in test bodies.
dependency-auditor — runs native audit tools when available (npm audit, pip-audit), falls back to manual analysis with named CVE IDs. Naming real CVEs was the iteration — the model would otherwise produce vague "potential vulnerability" notes that are useless for prioritization.
migration-runner — the one that required the most work.

The Migration Runner: Safe SQL Against a Live Database

Writing SQL migrations that are safe to run against a production database is not a one-shot problem. The failure mode is a migration that works fine on a test database and blocks the primary lock on a table with 50 million rows in production.

The migration-runner subagent analyzes lock risks per operation before generating SQL. An ADD COLUMN NOT NULL with a default blocks the table for the duration of the migration on older PostgreSQL versions. The safe version is three operations: add the column as nullable, backfill in batches, then add the constraint separately.

The system prompt encodes this specifically. When the agent sees an ADD COLUMN NOT NULL, it rewrites it into the three-step sequence automatically and explains why. Each migration also gets a working down block — not a comment saying "reverse this manually," an actual rollback script.

That rewrite logic took about an hour of iteration: getting the batch size right, handling the constraint name consistently, making the down block correct for each of the three steps independently.

The Lint Hook That Blocks via Exit 2

Claude Code hooks run shell scripts at specific points in the tool lifecycle. A PreToolUse hook fires before any Edit, Write, or MultiEdit call. If the hook exits with code 2, Claude Code blocks the edit.

The pre-commit-lint hook does exactly this: it runs ESLint on JS/TS files, Ruff on Python files, or cargo clippy on Rust files, parses the output, and exits 2 if there are problems. Claude Code sees the lint errors in the hook output and fixes them before retrying the edit.

The non-obvious part: the hook needs to handle the case where no linter is installed without blocking the edit. An uninstalled linter should exit 0 silently, not exit 2 and break everything. The lint.sh script checks for each linter before calling it and skips cleanly if it's absent.

The post-edit-test hook is the mirror: it fires after each edit, runs related tests (Vitest, Jest, or pytest, detected from the project), and prints [test-hook] PASS / FAIL / SKIP. It never exits 2 — it informs without blocking.

Wiring hooks requires merging a JSON snippet into .claude/settings.json. The pack includes both the shell scripts and the JSON snippets with the exact merge result documented.

The Skills: Protocols, Not Instructions

Skills are a newer Claude Code primitive: folders in .claude/skills/ with a SKILL.md that Claude Code reads when it auto-delegates based on the skill's description.

The two skills in the pack encode protocols rather than instructions:

long-running-tasks — a checkpoint-based execution protocol. Before starting any multi-step task, write _state.json with the step list and current index. After each step completes, update the state file. On failure or restart, read the state file and resume from the last completed step. The skill includes a state.template.json and a _progress.log format. This is how you run a multi-hour pipeline through Claude Code without losing progress on a crash.
api-integration — a production-grade API integration protocol covering: credential lookup from environment variables (never hardcoded), connection timeouts, exponential backoff with jitter, Retry-After header handling, idempotency keys on POST requests, circuit breaker state, and webhook signature verification. Every integration Claude Code writes when this skill is active follows the full protocol.

What This Is and Is Not

These are functional files. They work because they're built to the format Cursor and Claude Code expect — the frontmatter, the glob patterns, the hook lifecycle, the skill directory structure. Dropping them in is not a configuration step; it is the installation.

Each file represents 30–60 minutes of real iteration: writing the first version, running it against real inputs, finding the failure modes, and encoding the fixes as constraints. You are skipping that work.

This is not a prompt pack. Prompts are instructions you give the model at conversation start. These files modify how the toolchain itself behaves — which agent runs on which request, which rules attach to which files, which hooks fire at which points in the edit lifecycle.

The pack is 12 files: 4 subagents, 4 Cursor rules, 2 hook scripts + 2 JSON snippets, 2 skill folders.

If you use Cursor or Claude Code daily and want the setup to behave like a senior engineer without coaching it from scratch on every project: https://ko-fi.com/s/fdb0e60135