staqd.ai

The Problem

AI coding tools produce generic-looking UI. staqd sells curated 'skills' that give Claude/Cursor/Codex genuine visual taste, plus productized, buy-once AI solutions.

What I Built

A Next.js 16 (App Router / RSC) marketplace with file-native markdown content, Better Auth + Drizzle/Postgres, Stripe billing, and a live-demo engine that renders ten style-parameterized templates per skill through a Playwright + sharp screenshot pipeline.

Stack

What it is

staqd.ai is a marketplace of 67 original design-system 'skills' that install into Claude, Cursor, and Codex so AI coding agents produce distinctive, non-generic UI — plus finished, buy-once AI solution templates.

Architecture

Next.js 16 App Router with React Server Components; content is file-native markdown parsed with gray-matter (no CMS). Better Auth with Drizzle/Postgres handles accounts, Stripe handles billing, and gated Pro content is omitted server-side rather than blurred client-side. A live-demo engine renders ten style-parameterized templates per skill through a Playwright + sharp screenshot pipeline (67 skills × 3 responsive sizes).

Results and lessons

Launched June 2026 with the site designed to degrade gracefully without a database — auth and billing switch off cleanly, browsing stays up. Productizing taste for AI agents turned out to be a packaging problem as much as a design problem: the skill format matters as much as the styles.

Outcomes

• ✓67 original design skills (8 free, 59 Pro)
• ✓Live on Vercel; degrades gracefully without a database
• ✓Gating model that omits paid content server-side rather than blurring it
• ✓Screenshot pipeline: 67 skills × 3 responsive sizes