tommylower
- 80 skills
- 0 followers
- 15 hours ago last updated
- ▌ Tdd · tommylower bundleTest-driven development with red-green-refactor loop. Use when user wants to build features or fix bugs using TDD, mentions "red-green-refactor", wants integration tests, or asks for test-first development.
- ▌ To Prd · tommylowerTurn the current conversation context into a PRD and publish it to the project issue tracker. Use when user wants to create a PRD from the current context.
- ▌ Triage · tommylower bundleTriage issues through a state machine driven by triage roles. Use when user wants to create an issue, triage issues, review incoming bugs or feature requests, prepare issues for an AFK agent, or manage issue workflow.
- ▌ Diagnose · tommylower bundleDisciplined diagnosis loop for hard bugs and performance regressions. Reproduce → minimise → hypothesise → instrument → fix → regression-test. Use when user says "diagnose this" / "debug this", reports a bug, says something is broken/throwing/failing, or describes a performance regression.
- ▌ Grill Me · tommylowerInterview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".
- ▌ Zoom Out · tommylowerTell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.
- ▌ Prototype · tommylower bundleBuild a throwaway prototype to flesh out a design before committing to it. Routes between two branches — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route. Use when the user wants to prototype, sanity-check a data model or state machine, mock up a UI, explore design options, or says "prototype this", "let me play with it", "try a few designs".
- ▌ To Issues · tommylowerBreak a plan, spec, or PRD into independently-grabbable issues on the project issue tracker using tracer-bullet vertical slices. Use when user wants to convert a plan into issues, create implementation tickets, or break down work into issues.
- ▌ Write A Skill · tommylowerCreate new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.
- ▌ Grill With Docs · tommylower bundleGrilling session that challenges your plan against the existing domain model, sharpens terminology, and updates documentation (CONTEXT.md, ADRs) inline as decisions crystallise. Use when user wants to stress-test a plan against their project's language and documented decisions, or is starting to build something new and the design is not yet pinned down. In-session skill; the async hand-off counterpart is improve.
- ▌ Setup Matt Pocock Skills · tommylower bundleSets up an `## Agent skills` block in AGENTS.md/CLAUDE.md and `docs/agents/` so the engineering skills know this repo's issue tracker (GitHub or local markdown), triage label vocabulary, and domain doc layout. Run before first use of `to-issues`, `to-prd`, `triage`, `diagnose`, `tdd`, `improve-codebase-architecture`, or `zoom-out` — or if those skills appear to be missing context about the issue tracker, triage labels, or domain docs.
- ▌ Improve Codebase Architecture · tommylower bundleFind deepening opportunities in a codebase, informed by the domain language in CONTEXT.md and the decisions in docs/adr/. Use when the user wants to improve architecture, find refactoring opportunities, consolidate tightly-coupled modules, or make a codebase more testable and AI-navigable.
- ▌ Grug · tommylowershortest possible ELI5 answers in simple words. jargon dies, correctness stays. user-invoked and session-sticky until "grug off". For expert technical compression, use caveman instead.
- ▌ Rams · tommylower bundleRams review routing for its local skill, hosted MCP, and GitHub App. Use when the user names Rams, requests its scored external UI review, or wants to configure Rams. For Cortex-native review, use studio-audit or preflight.
- ▌
- ▌ Paper · tommylowerPaper 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.
- ▌ Caveman · tommylowerUltra-compressed technical communication mode. Cuts token usage by dropping filler, articles, and pleasantries while keeping exact technical terms. Use only when user explicitly says "caveman mode", "talk like caveman", "use caveman", "compress tokens", "less tokens", or invokes /caveman. For ELI5/simple-word answers, use grug instead.
- ▌ Handoff · tommylowerCreate a compact restart capsule before leaving or clearing an active session. Use proactively at a natural stopping point while the session is still cache-warm.
- ▌ Dialkit · tommylowerAdd 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.
- ▌ Pretext · tommylowerPretext 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 dimensions affect layout decisions. Triggers on: text measurement, text layout, text overflow, button label, label fits, multi-line text, text height, shrink-wrap, balanced text, virtualization, masonry, typography rules, layout shift, async text, label overflow, input autosize.
- ▌ Deadcode · tommylowerfind 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.
- ▌ Wiretext · tommylowerASCII 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 hierarchy, or rapidly iterate on a layout without committing to code or Figma. Triggers: wireframe, wiretext, sketch layout, ascii wireframe, plan a page, mock up, low fidelity, layout sketch.
- ▌ Blindspot · tommylowerPre-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".
- ▌ Pickup · tommylower bundleRestore compact continuity from the latest cleared session in the current project. Use in a fresh session after clearing context when the user asks to pick up or continue prior work.
- ▌ Gradients · tommylowerPatterns 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 fixing muddy/banded gradients. Triggers: gradient, background, oklch, oklab, color interpolation, mesh gradient, glow, hero background.
- ▌ Better UI · tommylower bundleUI-polish principles for product interfaces. Use when building or reviewing surfaces, icons, micro-interactions, motion details, borders, shadows, optical alignment, or an interface that feels off.
- ▌ Figma MCP · tommylowerSet 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: figma, design tokens, design system sync, figma to code, figma to react, extract from figma, figma mcp, design variables.
- ▌ Merge Quiz · tommylowerBefore merging or deploying a diff the user didn't watch being written (delegated to Codex, parallel chats, long autonomous runs), build an HTML report explaining the change with context and intuition, plus a quiz the user must pass before merge. Prevents the user's mental model from drifting away from the codebase. Triggers on "quiz me", "merge quiz", "do i understand this diff".
- ▌ Improve · tommylower bundleSurvey 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 take the project next (roadmap, product direction), or generate handoff plans for another agent to implement.
- ▌ Cmyk Proof · tommylower bundleICC-accurate CMYK proofing for print work designed in screen-native canvas tools (Paper, Figma, or any hex-only design surface). Converts brand hexes to press recipes plus print-simulated canvas hexes, soft-proofs whole exports, derives ink tints, and flags out-of-gamut colors and total-ink violations via a bundled ImageMagick script. Use when designing anything physically printed (brochures, posters, packaging, stationery) in a tool without CMYK support, or when the user mentions CMYK, print-ready, gamut, ICC, press profiles, or colors that must survive printing.
- ▌
- ▌ Agentation · tommylowerAdd 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.
- ▌
- ▌
- ▌
- ▌ Oklch Skill · tommylower bundleOKLCH color systems and semantic color usage. Use when converting colors, generating palettes, measuring contrast, handling gamut, theming Tailwind, defining color tokens, reviewing light and dark appearances, or when the user asks for better-colors.
- ▌ Asbuilt · tommylower bundleAsbuilt 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.
- ▌ Design Tools · tommylowerInventory 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, Leva, Interface Kit, Agentation, Rams, Wiretext, Pretext, and responsive preview fit together.
- ▌ Funky Shadow · tommylowerInstall 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.
- ▌
- ▌ Studio Audit · tommylower bundleSenior Studio audit for finished UI. Use for a quick or full ship check of a component, page, flow, app, or branch before handoff, commit, or deployment, including requests for better-interface.
- ▌ Interface Kit · tommylowerAdd 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.
- ▌ Workbench · tommylower bundleOpt-in component review canvas (the "workbench"). NEVER auto-load. Load ONLY when the operator explicitly asks for the workbench or a review canvas by name. Starting a project, scaffolding, or design work are NOT triggers; the default scaffold path is studio doctrine. When called, it ports a project into a /workbench canvas that reviews any registered section at 375/768/1024/1440 and runs the intake -> review -> elevate pipeline. The workbench is the tool; studio is the law.
- ▌ Agent Swarm · tommylowerMulti-agent parallel workflow — wave execution, review loops, adversarial dual-review
- ▌ Fable Codex · tommylowerOpt-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 plugin and an authenticated codex CLI.
- ▌ Better Writing · tommylowerUX writing for product interfaces. Use when writing or reviewing voice, terminology, labels, links, errors, placeholders, settings, onboarding, notifications, or empty states.
- ▌ Framer Motion · tommylowerProduction-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 in a Next.js app. Triggers: framer motion, animate, motion, transition, fade in, scroll reveal, stagger, whileInView, animation library, react animation.
- ▌ Apple Design · tommylower bundleOpt-in Apple interface reference for translating WWDC principles into web UI. Use when the user explicitly asks for Apple-style, iOS-like, or fluid physical interaction behavior.
- ▌ Swiss Design · tommylowerOpt-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.
- ▌ Codex Review · tommylowerSet up Codex plugin for cross-model code review and task delegation inside Claude Code
- ▌ Emil Design Eng · tommylower bundleDesign-engineering craft and motion advisor. Use for UI polish, animation decisions, motion-only review, a codebase motion audit with implementation plans, or finding restrained animation opportunities.
- ▌
- ▌ Vercel Deploy · tommylowerDeploy 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.
- ▌ Interface Sound · tommylowerDesign 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.
- ▌ Nothing Design · tommylower bundleNothing-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.
- ▌ Wip Quickstart · tommylower bundleNew-project intake and scaffold workflow for turning a rough brief, voice dump, or idea into an operable code project. Use when the user wants to start, scaffold, bootstrap, or set defaults for a project. It establishes the right workspace through workspace-setup and applies the Cortex web defaults when appropriate. Use workspace-setup directly for workspace-only review, repair, or migration.
- ▌ View Transitions · tommylowerImplement 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.
- ▌
- ▌ Claude Workflow · tommylowerClaude Code working patterns — plan mode, subagents, verification, context management, hooks
- ▌ Designing Loops · tommylowerDesign 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 loops, see agent-swarm.
- ▌
- ▌ Workspace Setup · tommylower bundleEstablish, review, migrate, or repair the workspace operator layer for a standalone or multi-repository code project. Use when organizing existing project information, replacing a control-room or planning layer, choosing a local, tracked, or mixed workspace, routing work to a dedicated project agent, or reducing duplicated documentation. Use wip-quickstart for end-to-end new-project intake and scaffolding.
- ▌ Component Libraries · tommylower bundleUI component-library supply shelf. Use when saving a UI library, asking what Cortex has, choosing a component supplier, or when Studio needs existing component anatomy before building.
- ▌ Fluid Functionalism · tommylower bundleFluid 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.
- ▌ Better Layout · tommylower bundleLayout structure for web interfaces. Use when building or reviewing grouping, alignment, spacing, reading order, progressive disclosure, responsive adaptation, safe areas, or RTL layout.
- ▌ UI Principles · tommylowerCore 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 hierarchy, layout rules, design fundamentals, what padding, what font size, design system basics.
- ▌ Writing Great Skills · tommylower bundleReference for writing and editing skills well — the vocabulary and principles that make a skill predictable.
- ▌ Agent Interviewer · tommylower bundleInterview 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 set up agent personality, configure assistant behavior, write a CLAUDE.md, run an interview, pick a preset, define how Claude/Codex/ChatGPT should behave, or create system instructions. Triggers: interview me, agent personality, behavior file, CLAUDE.md, AGENT.md, system prompt, personalize, preset.
- ▌ CSS Interaction Tips · tommylowerQuick-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 micro-interaction tuning. Triggers: hover, transition, button feel, tap target, tooltip, popover, animation jitter, interaction polish, micro-interaction, will-change, first-frame stutter, gpu layer, compositing.
- ▌ Loading States · tommylowerDesign 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.
- ▌ Animation Vocabulary · tommylowerReverse-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 designing or building one.
- ▌ Responsive Craft · tommylower bundleImplement 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 mobile issues, adding breakpoints, working with sticky/scroll patterns, previewing breakpoints, or when the user mentions responsive, mobile, breakpoints, viewport, adaptive design, or responsive preview.
- ▌ Better Typography · tommylower bundleWeb typography from font choice through rendered text behavior. Use when building or reviewing type systems, font loading and features, hierarchy, spacing, wrapping, truncation, punctuation, or text accessibility.
- ▌ Reference Patterns · tommylowerCurated 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 of best-in-class SaaS sites. Triggers: linear style, vercel style, reference site, inspiration, how does X do this, like linear, like vercel, marketing page patterns, hero layout.
- ▌ Agentation Self Driving · tommylower bundleAgentation 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.
- ▌ Google Developer Style · tommylower bundleApplies an agent-focused adaptation of the Google developer documentation style guide to substantial technical prose. Use when the user asks for Google developer style, clearer or easier-to-read writing, a readability pass, or help drafting or revising technical documentation, explanations, reports, instructions, or long-form agent output. For interface copy, also use better-writing.
- ▌ Better Accessibility · tommylower bundleAccessibility engineering for product interfaces. Use when building or reviewing semantics, keyboard and focus behavior, ARIA, forms, screen-reader output, hit areas, zoom, or reduced motion.
- ▌ Muller Brockmann Grid Systems · tommylower bundleOpt-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, visible grid overlays, or rigorous grid alignment.
- ▌ Project Design System · tommylower bundleUse this package when extending or auditing {{project_name}} UI. It captures the derived tokens, component grammar, architecture, and platform mapping from the shipped code.
- ▌ Tiny App Design System · tommylower bundleUse this package when extending the Tiny App example UI. It captures derived tokens, component grammar, architecture, and platform mapping from example code.