All authors
Claude Skills by tommylower
github.com/tommylower94 skills0 installs2 views
- Muller Brockmann Grid SystemsOpt-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.Votes: 0GitHub stars: 2
- Nothing DesignNothing-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.Votes: 0GitHub stars: 2
- Swiss DesignOpt-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.Votes: 0GitHub stars: 2
- AgentationAdd 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.Votes: 0GitHub stars: 2
- Design ToolsInventory 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.Votes: 0GitHub stars: 2
- DialkitAdd 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.Votes: 0GitHub stars: 2
- Figma McpSet 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 Figma design, convert a Figma frame to React/Tailwind, sync tokens from Figma, or do any Figma-to-code workflow.Votes: 0GitHub stars: 2
- Funky ShadowInstall 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.Votes: 0GitHub stars: 2
- Interface KitAdd 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.Votes: 0GitHub stars: 2
- PaperPaper 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.Votes: 0GitHub stars: 2
- PretextPretext by Cheng Lou. Pure JavaScript/TypeScript library for fast, accurate multi-line text measurement and layout without DOM reflow. Use when text dimensions drive a layout decision: button or label overflow checks, text height before render, shrink-wrap or balanced text, virtualized lists and masonry, input autosizing, or layout-shift prevention on async text loads.Votes: 0GitHub stars: 2
- RamsRams 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.Votes: 0GitHub stars: 2
- Shader LabInstall 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 include shader, shaders, shader-lab, basement shader, shader effects, gpu effects, shader composition, warped text, liquid background, displacement text, hero shader, shader ...Votes: 0GitHub stars: 2
- WiretextASCII 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, wirete...Votes: 0GitHub stars: 2
- AsbuiltAsbuilt 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.Votes: 0GitHub stars: 2
- PackageUse this package when extending or auditing {{project_name}} UI. It captures the derived tokens, component grammar, architecture, and platform mapping from the shipped code.Votes: 0GitHub stars: 2
- Minimal PackageUse this package when extending the Tiny App example UI. It captures derived tokens, component grammar, architecture, and platform mapping from example code.Votes: 0GitHub stars: 2
- BreakRenders a component you choose under every scenario that can reach it on a temporary page and stress tests it.Votes: 0GitHub stars: 2
- Build DesignBuilds UI from a Figma file or a design image so it matches the design, using your project's existing tokens and components.Votes: 0GitHub stars: 2
- Spec Mapturn a spec into a hand-editable system map in paperVotes: 0GitHub stars: 2
- State MachineRenders every state of a component you choose on a throwaway page, with mock data and a switcher, so you can work on each state.Votes: 0GitHub stars: 2
- StudioThe house practice for design and front-end product work. Load before any design, UI, component, canvas (Paper, Figma), or project-scaffolding work, in any project. Holds the rules (invariants and defaults, including motion numbers), the per-situation playbook, tool practices for Paper, Figma, print, and front-end builds, the one index of design skills, tools, and saved resources, and the doctrine for component intake, tool intake (evaluating a new tool, system, or guide), scaffolding, and en...Votes: 0GitHub stars: 2
- VariantBuilds multiple variants of a component you're working on and helps you iterate and pick one.Votes: 0GitHub stars: 2
- BlindspotPre-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".Votes: 0GitHub stars: 2
- CavemanUltra-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.Votes: 0GitHub stars: 2
- Codebase DesignShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.Votes: 0GitHub stars: 2
- Deadcodefind 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.Votes: 0GitHub stars: 2
- DiagnoseDisciplined 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.Votes: 0GitHub stars: 2
- Grill MeInterview 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".Votes: 0GitHub stars: 2
- Grill With DocsGrilling 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.Votes: 0GitHub stars: 2
- Grugshortest 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.Votes: 0GitHub stars: 2
- HandoffCreate 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.Votes: 0GitHub stars: 2
- Improve Codebase ArchitectureFind 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.Votes: 0GitHub stars: 2
- Merge QuizBefore 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".Votes: 0GitHub stars: 2
- PrototypeBuild 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".Votes: 0GitHub stars: 2
- Setup Matt Pocock SkillsSets 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.Votes: 0GitHub stars: 2
- TddTest-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.Votes: 0GitHub stars: 2
- TeachTeach the user a new skill or concept, within this workspace.Votes: 0GitHub stars: 2
- To IssuesBreak 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.Votes: 0GitHub stars: 2
- To PrdTurn 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.Votes: 0GitHub stars: 2
- TriageTriage 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.Votes: 0GitHub stars: 2
- Write A SkillCreate new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill.Votes: 0GitHub stars: 2
- Writing Great SkillsReference for writing and editing skills well — the vocabulary and principles that make a skill predictable.Votes: 0GitHub stars: 2
- Zoom OutTell 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.Votes: 0GitHub stars: 2