Agent Swarm
Multi-agent parallel workflow — wave execution, review loops, adversarial dual-review
Framer Motion
Production-ready Framer Motion patterns for React/Next.js: scroll-triggered fade-ups, staggered children for grids and lists, hover and tap micro-interactions, page transitions, layout animations, and shared element transitions. Use when adding animation to a React component, doing entrance animations on scroll, animating cards or list items, building interactive hover states, or polishing motion…
Animation Vocabulary
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not d…
Codex Review
Set up Codex plugin for cross-model code review and task delegation inside Claude Code
Caveman
>
Interface Craft
Interface Craft for polished React interfaces. Use for three branches: storyboard animation, DialKit-style live tuning, or design critique. Trigger on storyboard, dialkit, sliders, controls, tune, critique, polish, animated interface, or Josh Puckett.
Wip Senior Audit
Senior live-site UX audit. Use when the user asks to audit a whole running product, review the live app, judge first impressions, or diagnose understanding/trust/conversion across desktop and mobile. Distinct from preflight: this boots the site and writes docs/design-audit/.
Studio
Load before ANY design work (canvas or code, any project). The single front door to the design practice: the house law (rules.md grades, invariants, motion defaults), the playbook (playbook.md, what to do per situation), the inventory (inventory.md, every tool/skill/mcp and its verdict), and doctrine/ (intake, scaffold, package format), one self-contained package that travels to every project. En…
Figma Mcp
Set up and use the official Figma MCP server in Claude Code to read design tokens, components, frame layouts, and variables directly from Figma files, and to generate code from Figma frames. Use when the user wants to connect Figma to Claude, extract colors/typography/spacing from a design, convert a Figma frame to React/Tailwind, sync design tokens, or do any Figma-to-code workflow. Triggers: fi…
Blindspot
Pre-mortem pass before infra, deploy, data-model, or unfamiliar-territory work. Surfaces unknown unknowns by cross-referencing the task against past gotchas in memory and the actual repo surfaces it touches. Use before schema changes, deploys, auth work, or any task in territory the user hasn't worked in. Triggers on "blindspot pass", "blind spots", "unknown unknowns", "what am i missing".
Project Defaults
Default project scaffold, stack, conventions, development setup, deployment flow, and environment rules for Cortex web projects. Use when starting a new project, setting project defaults, choosing stack/conventions, configuring env vars, or preparing a Next.js/Tailwind/Supabase/Bun/Vercel app.
Dialkit
Add DialKit floating control panel for tuning animations and visual properties. Use when the user explicitly asks for DialKit, live dials, sliders, spring controls, or runtime visual tuning.
Wiretext
ASCII wireframe tool with an MCP server for Claude Code. Generate and edit wireframes from the terminal using primitives (box, text, line, arrow) and components (button, input, select, table, modal, navbar, tabs, card, etc.), then fine-tune in the browser via an editable URL. Use when the user wants to wireframe a page or section before building, sketch out layout structure, plan content hierarch…
Claude Workflow
Claude Code working patterns — plan mode, subagents, verification, context management, hooks
Responsive Craft
Implement responsive design for websites and web apps — from standard mobile-first layouts to complex patterns (sticky elements, scroll coordination, data tables, dashboards). Three modes: transform existing sites, build responsive from scratch, or launch a live multi-breakpoint preview. Surfaces design forks where there's no single right answer. Use when building responsive layouts, fixing mobil…
Preflight
Preflight design review before shipping. Use for static UI/a11y checks, visual consistency, AI-slop detection, or a final component/page ship check. Triggers: preflight, design review, accessibility audit, WCAG, UI polish, design critique, AI slop check.
Loading States
Design and implement loading states, skeletons, spinners, progress indicators, and dot-matrix micro-loaders. Use when the user asks for a loader, loading state, skeleton, pending state, progress UI, shadcn loader, Dot Matrix, smooth loader animation, reduced-motion loading behavior, or empty/pending state polish.
Designing Loops
Design agent loops — pick the loop primitive that fits a task and define its stop condition. Use when the user wants recurring or automated agent work, wants an agent to keep iterating until done, asks which of /goal, /loop, or /schedule to use, or a running loop needs a turn cap, stop condition, or token budget. For prompting one big Fable build loop, see fable-prompting; for multi-agent review…
Swiss Design
Opt-in Swiss International Style design system for clean editorial interfaces: grid discipline, grotesque typography, restrained color, generous whitespace, opacity hierarchy, and one accent color. Use only when the user explicitly asks for Swiss design, International Typographic Style, modernist editorial UI, grid-first composition, Helvetica-like typography, or this specific design system.
View Transitions
Implement native React and browser View Transitions for page transitions, route changes, shared element transitions, list reorder animations, Suspense reveals, and directional navigation. Use when the user mentions ViewTransition, startViewTransition, shared element transition, native page transitions, route animation, transition types, or animating UI states without a third-party motion library.
Agent Interviewer
Interview the user and produce a personalized, agent-agnostic behavior file (CLAUDE.md, AGENT.md, PERSONALIZATION.md, etc.) that defines how an AI agent should think, disagree, teach, decide, and communicate. Supports two modes: preset (return one of the built-in fast/balanced/strict/brutal profiles) or interview (short adaptive Q&A producing concrete operational rules). Use when the user asks to…
Ui Principles
Core principles for building high-quality UI: spacing scale, typography hierarchy, layout rules, max content widths, grid systems, card consistency, proximity grouping, and section rhythm. Reference these when creating components, laying out pages, choosing font sizes, picking padding values, or setting up a new design from scratch. Triggers: ui principles, spacing scale, typography, type hierarc…
Shader Lab
Install and use Basement Studio's Shader Lab runtime to drop GPU shader compositions into a Next.js or React app. Use when the user wants shader-driven visual effects — warped text, liquid backgrounds, distortion, noise flows, post-processing passes, animated hero treatments — sourced from the Shader Lab editor. Triggers: shader, shaders, shader-lab, basement shader, shader effects, gpu effects,…
Css Interaction Tips
Quick-reference recipes for common CSS interaction and animation problems: button press feedback, smooth element entrances, hover flicker fixes, popover transform-origin, sequential tooltip timing, mobile tap targets, hover-on-touch issues, and subtle blur masking. Use when polishing UI interactions, fixing janky animations, making buttons feel responsive, addressing hover bugs on mobile, or any…
Emil Design Eng
Design-engineering craft review for UI polish, motion judgment, interaction feel, and component details. Use when the user asks for Emil Kowalski-style critique, invisible UI details, animation decisions, or to make an interface feel right.
Design Tools
Inventory of Cortex design tools and what each one can do. Use when the user asks what design tools are available, what can we do visually, what design tooling exists in Cortex, which tool to use for UI polish, or how Paper, Figma, Shader Lab, Funky Shadow, DialKit, Interface Kit, Agentation, Rams, Wiretext, Pretext, and responsive preview fit together.
Muller Brockmann Grid Systems
Opt-in Muller-Brockmann grid system for editorial, magazine, report, and longform web pages: modular columns, baseline rhythm, grotesque type, restrained color, inspectable grid overlays, subgrid bands, and optical display-type alignment. Use when explicitly asked for Muller-Brockmann, Swiss/International Typographic Style grids, magazine spreads, editorial layout, grid systems, baseline grids, v…
Reference Patterns
Curated design patterns from high-quality reference sites (Linear, Vercel, Lovable, and others): hero layouts, feature sections, navigation styles, motion timing, card treatments, typography hierarchy, and color usage. Use when the user wants inspiration for a section, asks 'how does Linear/Vercel do X', is building a marketing page and needs proven layouts, or wants to match the visual quality o…
Studio Audit
Senior studio design audit for finished UI. Use when the user says a page, flow, app, or branch feels done and wants a final senior-designer flaw pass, studio law review (the `studio` skill), ship check, or design QA before handing off or deploying.
Vercel Deploy
Deploy or manage projects on Vercel from an agent workflow. Use when the user asks to deploy to Vercel, create a preview deployment, push a Vercel preview, link a project to Vercel, explain Vercel deployment flow, or work with Vercel CLI/token setup.
Nightcap
Nightcap, a nightly agent journal. Reads recent Claude Code and Codex transcripts off disk, skips trivial sessions, and writes one first-person narrative journal entry per real session, like a handwritten end-of-day journal. Use when the user wants an agent session journal, a daily log of AI sessions, transcript summaries, "what did i work on today/this week", to set up or troubleshoot nightcap,…
Agentation
Add Agentation visual feedback toolbar to a Next.js project. Use when the user explicitly asks for Agentation, visual feedback annotations, browser annotation toolbar, or agentation MCP setup.
Fluid Functionalism
Fluid Functionalism component-kit workflow for React/Next.js. Use when the user asks for @fluid components, animated shadcn components, proximity hover, spring controls, Micka components, or polished form/control micro-interactions.
Asbuilt
Asbuilt design-system extraction and conformance. Use when the user asks to derive a design system from existing code, extract tokens/components/states, conform a finished UI to a derived package, or retrofit studio law onto a project. Never for greenfield design systems.
Paper
Paper design canvas workflow for active design work through paper.design or a Paper MCP when available. Use when the user asks to use Paper, paper.design, a visual canvas, artboards, or active design iteration outside Figma. If Paper tools are unavailable, state that clearly and fall back to Figma, Wiretext, browser artifacts, or code.
Interface Sound
Design and implement tasteful interface sound for web apps using @web-kits/audio or Web Audio. Use when the user asks for UI sounds, sound effects, audio feedback, button clicks, success tones, error tones, notification sounds, procedural audio, sound patches, or wants to audit whether sound belongs in an interface.
Project Design System
Use this package when extending or auditing {{project_name}} UI. It captures the derived tokens, component grammar, architecture, and platform mapping from the shipped code.
Oklch Skill
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Use when working with oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, or dark mode colors.
Fable Codex
Opt-in split-stack session mode — one strong model plans and reviews from the orchestrating harness while a model from a different vendor executes via CLI handoff. Reference configuration. Claude (Fable 5) plans at high effort, Codex (gpt-5.5 at xhigh reasoning) executes, Claude reviews at maximum scrutiny. Use only when the user invokes /fable-codex; never auto-apply. Requires the openai-codex p…
Interface Kit
Add Interface Kit visual design overlay to a Next.js project. Use when the user explicitly asks for Interface Kit, browser visual editing, or a style-editing overlay.
Improve
Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to ta…
Agentation Self Driving
Agentation self-driving design review. Use when the user asks to critique a page, add design annotations, auto-annotate, or run a visible browser-based UI review through the Agentation toolbar. Requires Agentation and agent-browser.
Fable Prompting
Router for prompting Fable 5 so it performs like a next-generation model instead of a current one — give it the goal not the steps, hold it to a hard self-checkable bar, loop against that bar, and never let the builder grade itself. On invocation, ask which job the user wants and run that branch: set up house rules in a project, start a /loop on a goal, grade an artifact, or draft a Fable prompt.…
Pretext
Pretext by Cheng Lou. Pure JavaScript/TypeScript library for fast, accurate multi-line text measurement and layout without DOM reflow. Use whenever working on typography rules, text-heavy components, button or label overflow checks, virtualized lists, masonry layouts, balanced text, shrink-wrap text, dynamic input autosizing, layout-shift prevention on async text loads, or any case where text dim…
Funky Shadow
Install and use the funky-shadow package for dithered, gradient-colored shadows behind UI elements. Use when the user asks for dithered shadows, pixel shadows, Bayer matrix texture, retro gradient shadows, canvas-rendered shadows, Oklab shadow gradients, or wants to add the funky-shadow tool to a React or web project.
Nothing Design
Nothing-inspired design system — monochrome, typographic, industrial. Swiss typography, OLED blacks, Space Grotesk/Mono font stack, segmented widgets. Only use when explicitly asked for "Nothing style" or "Nothing design". Never auto-apply.
Deadcode
find and remove dead code. scans for unused files, exports, dependencies, and types using knip. lists every finding with reasoning before deleting anything. Triggers: deadcode, dead code, unused code, clean up code, remove unused, prune dependencies.
Rams
Rams external design-review command for accessibility, visual consistency, and UI polish. Use when the user explicitly asks for Rams or /rams. For Cortex-native review without the Rams command, use preflight for static review or wip-senior-audit for a live product audit.
Gradients
Patterns and principles for building high-quality CSS gradients: choosing the right color space (sRGB vs oklab vs oklch), linear / radial / conic gradient syntax, layering, performance, hue-shift avoidance, and common recipes (mesh-like backgrounds, button glows, text gradients, masked overlays). Use when building hero backgrounds, button styles, glow effects, gradient text, mesh backgrounds, or…
Tiny App Design System
Use this package when extending the Tiny App example UI. It captures derived tokens, component grammar, architecture, and platform mapping from example code.