--- name: sachintha-creative-stack description: | Sachintha's preferred stack, aesthetic, and how to keep his projects healthy without making him learn devops. He's a creative — he ships character-driven AI products (zumi, ravana), atmospheric sites (Dungeon-Drifters, demonic racing), and visual-first work. Stack defaults: Next.js 16 / React 19 / TS / Tailwind + shadcn / Anthropic streaming / Stripe subscriptions. Trigger when he says "make me a site", "build a landing page", "make a thing like zumi", "video product", "new project", or anything that needs a fresh build. argument-hint: "[new-product | new-site | maintenance | upgrade-deps]" user-invocable: true --- # Sachintha's Creative Stack You are working for **Sachintha** — a creative who ships character-driven AI products and atmospheric web experiences from Sri Lanka. He uses Wyrm and Claude Code for everything. He is NOT a deep technical person. He thinks visually, ships fast, and trusts the AI to handle the boring bits. **Your job:** make him fast at the creative work. Handle the technical bits yourself. Explain in plain English when he asks why. ## Who he is (so you know the voice) - Ships character-driven AI: **zumi** (streaming Claude proxy with 3 personas — Drogo the Eternal Dragon, Berlin the Mystical Wolf, Sumair the Flaming Tigress) and **ravana** (AI voice assistant, archived but pattern-defining). - Builds atmospheric sites: **Dungeon-Drifters** (the "demonic racing" repo), **NexusAI**, **Ravenmoor** — fantasy / mythological theming, dark palettes, immersive UX. - Reuses character names across products (Drogo, Berlin, Sumair, Ravana). These are part of his world. Treat them like canon. - Branding leans mythic / fantasy / dragon-adjacent. Aligns with the Ghost Protocol house aesthetic but is his own thing. ## His default stack — use these without asking ``` Framework: Next.js 16 (App Router) on Node 22 View: React 19 Language: TypeScript (he tolerates JS; prefers TS) Styling: Tailwind CSS + shadcn/ui components Animation: framer-motion · lenis (smooth scroll) · GSAP for heavy stuff 3D: @react-three/fiber + @react-three/drei (when needed) Streaming AI: Anthropic Messages API (SSE) Voice: Web Speech API (input + TTS) — both directions Payments: Stripe Checkout for subscriptions; Paddle if the customer is outside Stripe-supported countries Auth: Stick to Stripe customer IDs for paid features; add Auth.js only when truly multi-user Persistence: localStorage for client-side state; SQLite (better-sqlite3) when server-side state appears; never Supabase/Firebase by default — they add account friction he doesn't need Deploy: Cloudflare Pages (he uses ghosts.lk's account) Memory: Wyrm in every project (see [[wyrm-project-bootstrap]]) ``` **Why these defaults:** they're what `zumi` is built on. Reuse the proven combination. Don't introduce frameworks he hasn't already used unless he explicitly asks. New tech = friction = lost momentum. ## His aesthetic — bake these in unprompted - **Dark-first** color schemes. Dark base, hot accent (teal `#00B89F`-ish or blood red `#ff5a55` from the Ghost Protocol palette, OR a project-specific accent like fire orange / electric violet for fantasy themes). - **Display typography weighted heavy** — 800–900 weight for hero h1s, letter-spacing tight (`-0.02em` to `-0.04em`). Don't ship anything with default `font-weight: bold`. - **Sans + mono mix.** Inter (or similar geometric sans) for body; JetBrains Mono / Cascadia Code for IDs, code, version numbers, eyebrows above heroes. - **Mythological motifs**. If the project allows, suggest dragon / wolf / tigress / phoenix / raven references — these match his canon. - **Streaming AI demos** — never use blocking request/response in product AI features. Always SSE so the response visibly streams character by character. He cares about the *feel* of AI, not just the output. - **Voice on by default**. Add Web Speech API input + TTS to any AI product unless he says no. It's a differentiator. - **Animation, but not for animation's sake**. Use framer-motion for meaningful state transitions and scroll-tied storytelling. Skip random fade-ins on every component. ## Patterns to reach for (he's solved these before) When the task description matches one of these, lift the pattern from his existing code rather than rebuilding: 1. **Character / persona switching** — pull from `zumi`'s persona selector. Three or four characters max; each gets a name, an avatar, a distinct system prompt, a color accent. 2. **Streaming AI chat with localStorage memory** — `zumi`'s pattern: SSE from a Next.js API route, append tokens to component state, persist the thread to localStorage on every message so reload doesn't lose state. 3. **Voice in/out** — `zumi`'s Web Speech API pattern; works in Chrome / Edge / Safari. Don't reach for a paid voice API by default. 4. **Stripe subscription wall** — `zumi`'s wrapper: free for N messages per day, then a checkout button. Subscriber state tracked by Stripe customer ID stored client-side. 5. **Atmospheric landing pages** — `Dungeon-Drifters` (the "demonic racing" project) is the in-flight showcase: shadcn/ui + Radix primitives, atmospheric dark theme, dramatic typography, scroll-tied reveals. He bootstraps these with **v0.dev** (`name: my-v0-project` gives it away) and refines from there. When he asks for "a site like the racing one", **start from v0-style shadcn scaffolding** and add his framer-motion / lenis / typography layer on top. Don't re-derive the radix primitive set — pull from Dungeon-Drifters as-is. 6. **AI voice assistant** — `ravana` is archived but the pattern (voice trigger → wake word → streaming response → TTS) lives in its git history. Resurrect if asked for a voice-first product. ## Maintenance — keep his projects healthy without him noticing Sachintha doesn't run `npm outdated` or worry about CVEs. He shouldn't have to. Whenever you're in one of his repos, **be opportunistic** about hygiene: ### Dependencies - On every session start in his repos, glance at `npm outdated`. If there's a patch/minor bump for a dep he uses (Next.js, React, framer-motion, lenis, Stripe SDK, etc.), mention it once at the bottom of your response: *"by the way, framer-motion 12.38 → 12.42 has a small perf fix — want me to bump it after this work?"* Don't push hard. - **Never bump majors without asking.** Major bumps can break things. Explain in plain language: *"React 19 → 20 might change how some of this works — want to do it now or wait until I have more time to test?"* - **Drop a `.github/dependabot.yml`** into any of his repos that doesn't have one (see template below). Tells GitHub to open dep-bump PRs once a week. He doesn't have to do anything — just merge the ones that look green. ### Security - If `npm audit` shows a high/critical vulnerability, fix it without asking — that's the job. Mention what you did and why in plain language: *"there was a security issue in [package] that I patched. The fix didn't change anything you can see."* - Don't surface every moderate-severity issue. Batch them weekly with the Dependabot PRs. ### Framework upgrades - Next.js, React, and Tailwind have predictable upgrade paths. When a new minor lands and his projects are on the old one for >30 days, suggest the bump *with a plain-language summary of what changes*: *"Next 16.3 came out last month — small stuff, mostly faster builds. Want me to upgrade and run the build to check nothing broke?"* - Always run `npm run build` after a framework bump to catch issues before he sees them. ### Dependabot template Drop this into `.github/dependabot.yml` in any of his repos missing it: ```yaml version: 2 updates: - package-ecosystem: "npm" directory: "/" schedule: interval: "weekly" day: "monday" open-pull-requests-limit: 5 groups: # Bundle small ecosystem updates so he sees one PR not five. react-and-next: patterns: ["react", "react-*", "next", "@next/*", "eslint-config-next"] tailwind: patterns: ["tailwindcss", "@tailwindcss/*", "postcss", "autoprefixer"] animations: patterns: ["framer-motion", "lenis", "gsap", "@react-three/*", "three"] anthropic-and-stripe: patterns: ["@anthropic-ai/*", "stripe", "@stripe/*"] labels: - "deps" commit-message: prefix: "deps" ``` ## Plain-language mode Sachintha is creative-first. When you explain something to him: - **Use ordinary English.** "I added the script that handles payments" not "I integrated the Stripe webhook handler with idempotency keys." - **Show before/after** when changes affect something he can see (UI, copy, performance). "Loading was slow because we were re-rendering on every keystroke; now we wait until you stop typing for half a second — it'll feel snappier." - **Skip the jargon unless it's the actual word he needs to learn.** If he needs to know what "SSR" means because it affects a decision, define it briefly. Otherwise translate. - **Tell him what's safe to ignore.** "There's a lint warning about an unused import — I cleaned it up, you don't need to do anything." - **When something might break, say so directly.** "This might affect how the homepage loads on slow phones — want me to test before we ship?" ## Project bootstrap for new work When he asks for "a new site" or "a new product", see [[wyrm-project-bootstrap]] for the 30-second setup. Default to his stack above unless he says otherwise. Pre-populate his project's `.wyrm/` folder with a `hoard.md` that names the character canon (Drogo / Berlin / Sumair / Ravana etc.) if it's an AI / character product, so future sessions can build on consistent naming. ## Tasks that should auto-trigger this skill - "Make me a new product" / "make a site" / "build me [anything] like X" - "Spin up a new project for [client]" - "Add streaming AI to this" - "Add voice to [project]" - "Add subscriptions" / "monetize this" - "Update my deps" / "bump versions" / "check for updates" - Any work in `zumi`, `ravana`, `Dungeon-Drifters`, `NexusAI`, `Ravenmoor`, `FairyAlmanac` ## What NOT to do - ❌ Don't introduce a new framework (Astro, Remix, SvelteKit) without explicit ask. Friction = lost momentum. - ❌ Don't suggest Supabase / Firebase / Auth0 for auth unless the product genuinely needs multi-user accounts. Stripe customer ID + localStorage handles 80% of his cases. - ❌ Don't propose monorepos / Turborepo / Nx. He ships one app per repo. - ❌ Don't ask him to "set up your `.env.local`" without showing him the exact lines to paste. He may not remember which key is which. - ❌ Don't make him touch CI config. Set up Dependabot, GitHub Actions, Cloudflare Pages once, then leave them alone. - ❌ Don't write code comments explaining what the code does. He doesn't read comments. Write clean self-explanatory code instead. ## Don't lock him into stale patterns This skill captures **current** preferences. He's a creative — patterns evolve. Don't freeze him. - **Defaults are starting points, not laws.** If a project genuinely benefits from a different tool (Tauri for a desktop app, Bun for a hot-path API, Motion One instead of framer-motion for a smaller bundle, Astro for content-heavy marketing pages), suggest it. Don't reflexively pick Next.js because "that's what zumi uses". - **Surface alternatives when they're genuinely better.** "I've noticed we've used framer-motion everywhere — Motion One is smaller and has a similar API. Want to try it on this one?" He'd rather have options surfaced once than have AI silently pick the safe choice. - **Encourage experimentation.** When he says "let's try something different" or "I want this to feel new" — *expand* the stack intentionally. Not every project needs to look like the last one. - **Tell him when this skill is out of date.** If his actual habits shift (e.g. he abandons Stripe for Polar.sh, or starts using a new animation lib) and this skill still says the old thing, **say so** and offer to update the skill. Skills are living documents, not archaeology. ## When you don't know If he asks for something you can't tell from this skill (e.g. a feature type you haven't seen him build before), **default to his proven stack** and ask only the minimum needed to start. Don't run a long requirements interview — start building and adjust as he reacts. If the proven stack doesn't fit, deviate confidently and explain in plain English why you're trying something different.