Shawnchee

Token-saving terse mode — no filler, no narration, just results

Use this skill whenever the user asks to build, create, design, redesign, polish, audit, animate, improve, fix, or "make prettier/cleaner/nicer" ANY frontend interface — landing pages, dashboards, portfolios, SaaS apps, marketing sites, components, hero sections, navbars, footers, pricing tables, posters, mobile UIs, or any web/React/Next.js/Vue/Svelte UI work. Also use when the user mentions Tailwind, shadcn, Framer Motion, 21st.dev, React Bits, animations, typography, color palettes, design taste, "make it look premium," "fix the look," or "make this less generic." Enforces production-grade design discipline (typography, color, motion, layout, accessibility, copy) and bans generic AI aesthetics like Inter font, purple-to-blue gradients, three-card feature rows, h-screen heroes, John Doe placeholder data, and "elevate/seamless/unleash" filler copy. Generates a project DESIGN.md to lock in tokens across sessions. Consolidates rules from UI/UX Pro Max, Framer Motion, 21st.dev Magic, React Bits, Anthropic front

Scan the current codebase for production readiness. Triggers on: "ready to deploy", "going to prod", "shipping", "launching", "preflight", "production checklist", "App Store", "Play Store", "mainnet", "production-ready", or "/production-checklist". Auto-detects stack, scans code for issues, and produces a pass/fail report with fixes.

Use this skill whenever the user asks to build, create, design, redesign, polish, audit, animate, or improve ANY frontend interface — landing pages, dashboards, portfolios, SaaS apps, marketing sites, components, hero sections, navbars, footers, pricing tables, posters, mobile UIs, or any web/React/Next.js/Vue/Svelte UI work. Also use when the user mentions Tailwind, shadcn, Framer Motion, 21st.dev, React Bits, animations, typography, color palettes, design taste, or "make it look premium." Enforces production-grade design discipline (typography, color, motion, layout, accessibility, copy) and bans generic AI aesthetics like Inter font, purple-to-blue gradients, three-card feature rows, h-screen heroes, John Doe placeholder data, and "elevate/seamless/unleash" filler copy. Consolidates rules from UI/UX Pro Max, Framer Motion, 21st.dev Magic, React Bits, Anthropic frontend-design, Impeccable, and design-taste-frontend.

Scans a live website and produces design.md — a replication-grade spec of its look and motion. Runs a bundled Playwright crawler that template-dedupes and visits up to ~6 pages, captures screenshots at 3 breakpoints plus full-page and scroll frames, and extracts structured design data: CSS custom properties, fonts, computed typography, a color palette with usage counts, CSS @keyframes, Web Animations API animations with real keyframes/durations/easings, transitions, :hover rules, animation-library detection (GSAP, Framer Motion, Lottie, AOS, Lenis), layout metrics, and a component inventory. Claude then reads the screenshots plus JSON and writes design.md. Trigger on "design scan", "/design-scan <url>", "replicate this website's design", "scan <url> and make a design.md", "clone this site's look", or "extract the design system from <url>".

Adversarial pre-ship interrogation of a Solana program's design and security. Walks the design decision-tree branch-by-branch, one question at a time, with a recommended answer for each, grounding every question in the user's actual Anchor / native code when it exists. Use BEFORE an audit — when a user says "review my program design", "roast my program", "is my Solana program safe", "design review", "threat model my program", "pre-audit", "am I missing signer checks", "check my PDA design", "before I deploy to mainnet", or pastes an Anchor program / `#[derive(Accounts)]` struct and asks whether the design is sound. Outputs design-spec.md, threat-model.md, and a pre-audit checklist that downstream audit/scanner skills consume.

Adds HTTP content negotiation to a Next.js app so AI agents fetching a page get clean Markdown (via the Accept header) while browsers get normal HTML from the same URL. Use when a Next.js developer wants to make a blog, docs, changelog, help center, or knowledge base "agent-readable", "AI-friendly", "readable by AI agents / LLMs", to "serve text/markdown", add an "llms.txt" or Markdown sitemaps, or implement "Accept header content negotiation". Covers Next.js App Router (server-rendered) and static export (output: 'export'). It ALWAYS asks which pages to target before changing anything, and verifies the result with a live HTTP request before reporting done. Next.js only — if the project is a different framework, it says so rather than guessing.