Skills
Practical instructions for better interface work.
adaptExternal
Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.
animation-systemsExternal
Use when building a coherent animation system instead of one-off motion tweaks.
apply-design-systemExternal
Reconnect an existing Figma design to published design system components instead of detached layers, local wrappers, or one-off assets.
ask-mattExternal
Router that picks the right Matt Pocock engineering flow for the current task.
audit-design-systemExternal
Audit a Figma screen or component for design-system drift, including missing shared components, local overrides, and unbound tokens.
banner-designExternal
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
baseline-uiExternal
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
bencium-innovative-ux-designerExternal
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
better-colorsExternal
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
better-interfaceExternal
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
better-layoutExternal
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
brandExternal
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
brandkitExternal
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
build-primitiveExternal
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
cc-figma-componentExternal
Generate variable-bound Figma component sets from component-contract definitions after the token collections exist.
cc-figma-tokensExternal
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
clarifyExternal
Improve labels, microcopy, and UX messaging so interface text is clearer and easier to act on.
codebase-designExternal
Guidance for designing deep modules with small interfaces and clean seams.
colorizeExternal
Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
company-logosExternal
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
container-linesExternal
Use when using borders and container structure as part of the visual system.
create-anatomyExternal
Generate a visual anatomy annotation in Figma showing numbered markers on a component instance with an attribute table. Use when the user mentions anatomy, anatomy annotation, component anatomy, create anatomy, or wants to annotate a component's structural elements.
create-design-mdExternal
Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.
create-voiceExternal
Generate VoiceOver, TalkBack, and ARIA screen reader specs in Figma with focus order, property tables, and announcements by component state.
dashboard-information-density
Fit more real information on screen without it reading as cluttered, by controlling hierarchy instead of shrinking everything uniformly.
define-goalExternal
Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.
designExternal
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
design-first-ui-promptingExternal
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
design-labExternal
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
design-systemExternal
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
distillExternal
Simplify noisy interfaces by removing non-essential complexity and restoring clear visual focus.
domain-modelingExternal
Builds and sharpens project domain models and terminology.
effectExternal
Opinionated guidance for building production TypeScript applications with Effect v4, including workflows, services, layers, schemas, configuration, scheduling, caching, streams, HTTP clients, and tests.
engineeringExternal
Routing bundle for code work covering planning, debugging, TDD, architecture, and execution flows.
explain-interfaceExternal
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
figma-code-connectExternal
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
figma-create-new-fileExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
figma-design-to-codeExternal
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
figma-generate-designExternal
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
figma-generate-diagramExternal
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
figma-generate-libraryExternal
Build or update a professional design system in Figma from a codebase, including tokens, variant sets, theming, and component libraries.
figma-swiftuiExternal
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
figma-useExternal
Mandatory prerequisite before every use_figma call — plugin API rules for creating, editing, and inspecting Figma files through MCP.
figma-use-figjamExternal
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
figma-use-slidesExternal
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
fixing-metadataExternal
Audit and fix page metadata including titles, meta descriptions, Open Graph, Twitter cards, canonical URLs, and JSON-LD structured data. Use when shipping new pages or fixing SEO and social preview issues.
frontend-designExternal
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-ui-engineeringExternal
Frontend UI engineering guidance covering component architecture, responsive design, accessibility, and maintainable implementation patterns.
gh-stackExternal
Manage stacked branches and dependent pull requests with the gh stack GitHub CLI extension.
gpt-tasteskillExternal
High-agency UX/UI skill with strict layout variance, typography, and GSAP motion engineering constraints.
grill-with-docsExternal
Sharpens the domain model and updates supporting docs while grilling through design choices.
hardenExternal
Make interfaces production-ready with robust empty states, edge cases, errors, onboarding, and i18n resilience.
impeccableExternal
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
improveExternal
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 take the project next, or generate handoff plans for another agent to implement.
improve-codebase-architectureExternal
Scans a codebase for deepening opportunities and turns them into a prioritized visual report.
improve-reactExternal
Survey a React codebase using React Doctor's findings, then produce prioritized audits and self-contained implementation plans without modifying source code.
improve-uiExternal
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.
interface-designExternal
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
layoutExternal
Fix spacing, composition, and hierarchy rhythm when UI layout feels crowded, flat, or misaligned.
linear-finish-installExternal
Complete Linear tracking installation by writing always-on rules and verifying Linear MCP authentication.
linear-methodologyExternal
Route Linear tracking work through a methodology for setting up, syncing, monitoring, and maintaining honest project data.
linear-monitorExternal
Health-check Linear projects for slipping dates, stale in-progress work, orphan issues, and tracking anti-patterns.
linear-setupExternal
Bootstrap or extend Linear project tracking with evidence-based backfill, milestones, dependencies, and repository discipline.
linear-syncExternal
Audit and rescue an existing Linear project by reconciling its issues, milestones, dependencies, and tracking protocol with repository reality.
minimalist-skillExternal
Editorial minimal interfaces with monochrome palettes, typographic contrast, and restrained visuals.
oklch-skillExternal
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
pick-ui-libraryExternal
Choose an opinionated, trusted library for common frontend tasks including components, motion, charts, interaction, state, and styling.
piniaExternal
Pinia state management best practices for type-safe Vue stores, getters, and actions.
polishExternal
Final quality pass for spacing, alignment, and consistency to prepare UI for launch.
prefer-container-queriesExternal
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
mattpocock-prototypeExternal
Builds throwaway prototypes to answer design or logic questions quickly.
emilkowalski-prototypeExternal
Build multiple genuinely different UI variants behind a visual picker so the strongest direction can be evaluated and promoted.
quieterExternal
Tone down overly intense designs while keeping quality high and preserving hierarchy.
rad-spacingExternal
Apply hierarchical spacing variables across Figma layouts using proximity-based 4px and 8px increments from the file's library.
react-router-framework-modeExternal
React Router framework-mode patterns for loaders, actions, middleware, route modules, and full-stack rendering flows.
setup-matt-pocock-skillsExternal
One-time repo setup for the engineering skill workflow and related conventions.
shadcnExternal
Project-aware shadcn/ui workflow for searching, adding, composing, and fixing components with correct patterns.
shapeExternal
Plan feature UX before coding via a structured design interview that produces an actionable design brief.
slidesExternal
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
smooth-shadow-ringExternal
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
stitch-skillExternal
Semantic design-system skill for Google Stitch with strict anti-generic UI generation rules.
swiftui-ui-patternsExternal
Best practices and example-driven guidance for building SwiftUI views and components. Includes tab architecture and screen composition.
swiss-designExternal
Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.
sync-figma-tokenExternal
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
tailwindcssExternal
Use when you are implementing UI with Tailwind and want reusable, practical utility-first patterns.
thermo-nuclear-code-quality-reviewExternal
Run an extremely strict maintainability review for abstraction quality, giant files, and spaghetti-condition growth.
to-issuesExternal
Breaks a plan or PRD into independently actionable issues.
to-prdExternal
Turns a conversation into a PRD and publishes it to the issue tracker.
triageExternal
Moves issues through a structured triage state machine.
ui-skills-rootExternal
Use when the user needs UI help and you must route by topic, stack, and intent to the smallest useful set of UI skills.
ui-stylingExternal
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
ui-ux-pro-maxExternal
Comprehensive UI/UX design intelligence with 50+ styles, 97 palettes, and 9 technology stacks for building professional interfaces.
react-best-practicesExternal
Vercel React best practices for rendering performance, bundle efficiency, and scalable component architecture.
vue-pinia-best-practicesExternal
Patterns for clean, scalable state management in Vue apps using Pinia stores.
web-cloneExternal
网站复刻 / 克隆方法论。Use when the user says to clone, reproduce, or recreate a website or WebGL/Canvas/Three.js effect. Covers source-first reconstruction, repo scaffolding, reverse engineering, implementation paths, and verification for static sites, content sites, and heavy front-end experiences.
write-swiftExternal
How to write modern Swift well — modeling with value types, Swift 6 data-race safety and approachable concurrency (@concurrent, main-actor-by-default, actors, task groups), protocols and generics (some vs any), API design, performance and ARC, Swift Testing, macros, and the modern language features agents don't know about yet. Use when writing, reviewing, or migrating Swift, or when a concurrency error, a hang, a data race, a retain cycle, or a performance problem needs fixing.