Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file.
Luxury dark-editorial HyperFrames template for three-page cinematic storyboards, inspired by haute couture title cards and magazine chapter spreads. Use when the user asks for premium fashion-style motion pages, moody serif-led storytelling, or a high-end dark presentation aesthetic with rich transitions.
The entry point for Intent, a UX and design strategy system. Sets project context, routes to specialized skills, and loads foundational UX knowledge. Activate when starting any UX or product design work, setting project context, routing to other skills, evaluating an existing product's UX, or when the user asks about design intent, user experience strategy, ethical design, dark patterns, or design systems thinking.
Structure information so people can find what they need, understand where they are, and navigate confidently. Covers navigation pattern design, taxonomy, labeling systems, search and browse strategy, wayfinding, and IA research methods. Trigger when designing navigation structures, categorization schemes, site maps, taxonomies, labeling systems, search experiences, or asking "how should we organize this?" Also trigger for card sorting, tree testing, information findability problems, or when users report they can't find things. Use this skill any time the structural organization of information is the problem — not the flow through it, not the words in it, not the visual presentation of it.
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Evidence-first design review of a PR's UI. Walks the changed screens in a real browser, performs the user's tasks, and posts findings ranked by user impact, each with evidence, a pattern, a trade-off and an acceptance criterion. A --guard mode checks code statically against the design contract, per PR or repository-wide with --health
Structured UX evaluation that ranks specific issues by severity and states the change that fixes each. Part of the Intent design strategy system. Runs heuristic evaluations, cognitive walkthroughs, anti-pattern detection, and task success analysis. Rates every finding critical, major, minor or cosmetic, names the heuristic it violates, and states the fix in design terms; which skill makes the fix is said in the reply. Trigger on: UX review, design audit, heuristic evaluation, usability assessment, "review this design", "what's wrong with this", "evaluate the experience", "is this accessible", "check for dark patterns", "how good is this UX", "rate this design", "find the problems", or any request to systematically assess the quality of a user experience. This is the diagnostic entry point of the Intent system — the UX doctor that diagnoses issues and refers to specialists
Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex choreographed animations. Triggers on tasks involving Anime.js, timeline animations, staggered sequences, SVG path animations, morphing, or multi-step animation choreography. Alternative to GSAP for SVG-heavy animations and React-independent projects.
Editorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when users ask for a premium magazine-style business report, board memo one-pager, or elegant data storytelling layout.
Retro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck with heavyweight slab headlines, clean cream paper sections, structured grids, and fast premium motion pacing (3 slides, each hold under 3s in video mode)
Swiss-grid fintech deck template in black / warm paper / neon-lime contrast. Use when users ask for premium data-story slides with strict modular layout, bold numeric cards, restrained motion, and keyboard/click navigation in one HTML file.
Design, implement, or critique website and web-app UX/UI: information structure, user flows, responsive layouts, visual systems, content, and interaction states. Use for a requested interface or visual-design change; do not expand a small component edit into an unrequested product redesign
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).
AI-powered image generation for Salesforce visuals via Nano Banana Pro. Use this skill when the user needs rendered PNG/SVG output such as visual ERDs (Entity Relationship Diagrams), UI mockups, wireframes, or architecture illustrations. TRIGGER when: user asks for PNG/SVG output, UI mockups, wireframes, visual ERDs, or says "generate image" / "create mockup". DO NOT TRIGGER when: text-based Mermaid diagrams (use generating-mermaid-diagrams), or non-visual documentation tasks.
Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
Swiss-inspired creative-mode presentation template skill with bold editorial typography, high-contrast geometric cards, interactive slide navigation, theme switching, hotspot overlays, and palette choreography in a single-file HTML artifact. Use when users ask for a premium presentation-style landing, a Swiss/brutalist deck look, or a creative launch page with rich interactions.
Design the words in a product — labels, instructions, errors, confirmations, empty states, onboarding copy, tooltips, voice and tone frameworks, and content models. UX writing and content strategy as a deep discipline. Trigger when writing or reviewing UI copy, error messages, empty states, onboarding text, CTAs, tooltips, confirmation dialogs, or any user-facing text in a product. Also trigger for voice and tone frameworks, content models, microcopy patterns, inclusive language guidance, or asking "what should this say?" and "how should we sound?" Use this skill any time the words in an interface are the problem — not the flow they live in, not the structure they navigate, not the visual presentation.
Harden designs for real-world use by systematically identifying and designing for every condition outside the happy path. Part of the Intent design strategy system. Covers state inventories, error recovery, empty states, loading patterns, first-run experiences, stress testing, internationalization readiness, and latency handling. Trigger on: edge cases, error states, empty states, loading states, first-run experience, onboarding, offline mode, "what happens when", "what if the user", "stress test this", "what could go wrong", "harden this design", "edge case review", "what are the failure modes", zero states, timeout handling, or any question about how a design behaves outside ideal conditions.
Editorial studio deck template in burgundy / blush / muted-gold palette. Use when users ask for premium manifesto or culture slides with pill tags, large typographic statements, principle cards, and guided keyboard/click navigation.
Design for everyone by treating accessibility as a first-class design discipline, not a compliance checklist. Part of the Intent design strategy system. Covers WCAG 2.2 for designers, screen reader experience design, keyboard navigation, cognitive accessibility, motor accessibility, inclusive design beyond compliance, and accessibility testing methodology. Trigger on: accessibility, a11y, WCAG, screen reader, keyboard navigation, color contrast, alt text, focus management, touch targets, inclusive design, assistive technology, "is this accessible", "check accessibility", "design for everyone", "who are we excluding", ADA compliance, Section 508, EAA, reduced motion, or any question about whether all users can perceive, operate, understand, and benefit from the experience.
Packages an approved design for the people or agents who will build it. Part of the Intent design strategy system. The handoff is the project's own artifacts, the brief and the wireframes always and the service blueprint, journey map, information architecture, state inventory, accessibility documentation, measurement framework and copy deck when the project made them, with one entry page in front that says what the product is, what is in the package, how the pieces fit, and what is left to the builder. No visual design. Checks readiness first and runs the ethical review before packaging. Trigger when: a design is approved and someone needs to build it, "prepare the handoff", "package this for the build", "what does the coding agent need", "write the handoff", "is this ready to build"
Guide and conduct user research — from planning through synthesis. Interview scripts, survey design, usability test plans, diary studies, contextual inquiry. Plus synthesis: affinity mapping, thematic coding, insight extraction. Trigger when: planning user research, writing interview guides, designing usability tests, creating surveys, synthesizing research findings, "what should we research?", "how do I test this?", "write an interview guide", or any question about understanding users through evidence.
Extract the repository's design contract (tokens, component registry, screen archetypes, conventions) into .uxproof/ so every UX skill judges against THIS repo's design system, whatever it is — including one shipped by a dependency, imported as a version-stamped layer. Run once per repository; re-run to refresh after design-system changes
Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.
Map, analyze, and redesign the systems behind product experiences. Part of the Intent design strategy system. Creates service blueprints, ecosystem maps, process architecture, and dependency diagrams. Understands how services, teams, tools, and data flows connect to produce (or fail to produce) user outcomes. Proposes structural changes to how products and services are organized. Trigger on: service blueprints, system maps, process architecture, actor/role mapping, dependency analysis, cross-functional workflows, operational design, "how does this system work?", "what breaks when X happens?", "map out the service", "where are the dependencies?", or any question about the structural machinery behind a product experience. Use this skill broadly — whenever someone needs to understand or redesign how a system works, not just what a user sees.
Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Adapts experiences across cultures and languages — not just translation, but cultural reconception. Part of the Intent design strategy system. When a product enters a new market, everything is in play: information density, navigation patterns, color meaning, icon comprehension, date formats, trust signals, payment flows, and the fundamental assumptions about how people make decisions. Trigger when: planning international expansion, auditing i18n readiness, adapting designs for RTL languages, reviewing cultural assumptions in a design, preparing localization test plans, or when someone says "we need to launch in [country]" and the plan is "just translate it." Also trigger for compliance reviews across markets (GDPR, PIPL, accessibility laws).
Swiss-style user-research narrative template in warm-paper editorial aesthetics. Use when users ask for a premium research deck or story-first live artifact with minimalist typography, high-clarity layout, subtle motion, donut breakdowns, and keyboard/click navigation across slides in a single HTML file.
Frames product design problems before solutions exist. Synthesizes research, sizes opportunities, defines hypotheses, scopes projects, and maps customer journeys. Use this skill for new project kickoffs, ambiguous business asks, translating research into briefs, strategic framing sessions, opportunity assessments, project scoping, stakeholder alignment, and competitive analysis—even if the user doesn't explicitly say "strategize."
When the user wants to design, test, or improve their app icon to increase tap-through rate and conversions in App Store search and browse. Use when the user mentions "app icon", "icon design", "icon A/B test", "icon variants", "tap-through rate", "icon conversion", "icon refresh", or wants to know what makes a good app icon. For screenshot optimization, see screenshot-optimization. For full listing A/B tests, see ab-test-store-listing.
Defines and tracks UX success through metrics, measurement frameworks, and experimentation. Part of the Intent design strategy system. Connects design decisions to observable evidence — did the thing we built actually help? Guards against measurement becoming manipulation. Trigger when: defining success metrics, designing A/B tests, building measurement frameworks, analyzing funnels, reviewing metric dashboards, questioning whether the right things are being measured, or when someone says "how do we know if this worked," "what should we measure," "let's run a test," or "the numbers look good but something feels off." Also trigger for ethical measurement reviews and counter-metric definition.
This skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.