Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Extract a brand's design from any reference the user provides (site URL, screenshot, or existing assets) and generate a full design system reference page AND a 1-page A4 brand book PDF. Triggers on "design system", "brand book", "make design assets", "extract design", "brand page", "one page brand".
Identify and design for edge cases that disproportionately affect users with disabilities. Use when reviewing designs for completeness, planning test cases, or when someone says 'that's an edge case.' Triggers on: edge case, corner case, that's unlikely, only a few users, exception, unusual scenario, we'll handle that later, happy path, unhappy path, error state, empty state.
Design feedback and status communication that works across senses — visual, auditory, and haptic. Use when designing loading states, success messages, progress indicators, notifications, alerts, or any system response to user action. Triggers on: feedback, status, notification, alert, loading, progress, success message, confirmation, toast, snackbar, screen reader announcement, aria-live, colour alone.
Design a Field Service Mobile Data Capture Flow from either a natural-language description OR a PDF/image of an existing paper form. Extracts field labels, types, required-state, and section structure into an intermediate JSON spec, confirms the plan with the user, then hands off to fs-data-capture-form-deployer for compile + deploy. Handles both input modes in one skill — prose ('build a Field Service form for asset inspection', 'make a DataCaptureFlow that asks the technician to…', 'create an inventory transfer form') and visual sources ('convert this PDF to a Data Capture Flow', 'make a Field Service form from this image', 'turn this paper form into a DataCaptureFlow'). Detects the input mode automatically from a .pdf/.png/.jpg/.jpeg path, else extracts from the prose. Do NOT use this skill to patch an already-deployed flow — that's fs-data-capture-form-editor.
Provides comprehensive guidance for Figma design tool including design creation, components, prototyping, collaboration, and design systems. Use when the user asks about Figma, needs to create designs, work with Figma components, or collaborate on design projects.
Design typography systems that adapt to user needs — scaling, spacing, and font preferences. Use when designing type systems, setting font sizes, defining line heights, or reviewing text readability across conditions. Triggers on: typography, font size, line height, letter spacing, word spacing, text scaling, dyslexia font, readable font, type scale, font units, rem, em, px, reading difficulty.
Build interfaces using Microsoft's Fluent 2 design system via @fluentui/react-components (v9). Use when the user requests UI built with Fluent UI, Fluent 2, Microsoft design language, Teams-style UI, or Office-style interfaces. Covers: React component usage, theming with FluentProvider, styling with makeStyles/tokens/Griffel, design token application, layout patterns, typography, color system, accessibility, dark/light/high-contrast themes, and custom branding. Also triggers for: "make it look like Teams/Outlook/Office", "use Fluent", "Microsoft design system", "@fluentui", or any request to build UI that follows Microsoft's design language. Do NOT use for Fluent UI v8 (@fluentui/react) unless migrating to v9.
Design form labels, instructions, and grouping that work for screen readers and cognitive accessibility. Use when designing or reviewing forms, input fields, checkboxes, radio buttons, select menus, or any data entry interface. Triggers on: form label, label, input label, fieldset, legend, placeholder, form instructions, form group, radio group, checkbox group, required field, form accessibility.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
Handles the Genie Editor host-side client integration workflow, including adjusting panel editable items, page-level attribute aggregation, multi-option design comparisons and option switching, and completing page resource context and locator information. Use when the user wants to make an element or page editable in the adjustment panel, organize editable items per page uniformly, produce multiple directions first and then switch to compare them, or fill in page locator information to quickly find the current page and its implementation during debugging.
Build taste through volume of output, deliberate failure, and speed. Taste cannot be developed by watching. It's sharpened by making, failing, and making again. Use when designing practice routines, breaking through creative blocks, or helping someone move from analysis to execution.
World-class level design expertise - spatial storytelling, player flow, blockout methodology, and the invisible hand that guides players without them knowingUse when "level design, blockout, graybox, whitebox, player flow, level layout, combat arena, exploration space, map design, multiplayer map, pacing, weenie, landmark, gating, metroidvania, open world design, linear level, environmental storytelling, teaching through design, playtesting, heatmap, metrics, sightlines, level-design, game-development, spatial-design, blockout, graybox, player-flow, pacing, environmental-storytelling, combat-design, multiplayer-maps, open-world, linear-design, metroidvania" mentioned.
Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, mobile apps, slide decks, documents, animations, 3D objects, HTML email, diagrams, and fliers. Use whenever the user asks to design, mock up, prototype, wireframe, visualize, explore, or make a PPT/deck for an interface, product screen, user flow, content layout, or visual artifact, even without the word 'design'. Also covers authoring/importing design systems and UI kits, and saving deliverables as PDF or standalone HTML. Named pma-design for collection consistency only — it does not require or trigger the PMA workflow.
[Hyper] Create or update a layered product planning package under `.hyper/prd/[slug]/` in the order PRD → feature specification → user flow → low-fidelity wireframe, with supporting planning diagram, HTML preview, source log, and optional flow tracking. Use when the user wants product requirements and downstream planning artifacts before implementation, not just a standalone PRD.
Use this skill to screenshot a local dev server or HTML file with shot-scraper whenever the user wants to "screenshot my app", "take a screenshot of localhost", "generate screenshots for the README", "batch screenshot my pages", or "set up shot-scraper" — even if they never name shot-scraper and just ask for an image of a page, an OG image, or pictures for the docs. Do NOT use this skill for terminal or CLI recordings (see record-tui), for starting or debugging the app itself (see the project's run skill), or for editing an image that already exists.
Search Experience Optimization (SXO), the bridge between SEO and UX/CRO. Audits the journey from the SERP click to the on-page goal: click-through factors (title, meta, rich results), then post-click signals that keep users and drive conversions: above-the-fold relevance and intent match, page speed / Core Web Vitals, readability, clear CTAs, mobile usability, and what causes pogo-sticking back to Google. Use when the user has decent rankings but poor CTR or poor on-page conversion, wants better dwell time / engagement, less bounce, or a page experience aligned with search intent. Trigger on: "SXO", "search experience optimization", "good rankings but low CTR", "high bounce rate from search", "pogo-sticking", "improve dwell time", "SEO and conversion", "ranking but not converting", "engagement signals", "make this page convert search traffic". For pure landing-page conversion in ads use /google-ads-landing; for content quality use /seo-page.
Guides implementation of Syncfusion WinForms ComboBoxBase control with flexible, pluggable ListControl architecture. Use this when working with advanced combo box implementations requiring custom ListControl-derived controls, CheckedListBox integration, or multi-column dropdowns with GridListControl.
Guide for implementing Syncfusion ComboDropDown control in Windows Forms. Use this when you need a flexible combo box that hosts any control (TreeView, ListView, GridList, custom controls) in the dropdown area. Essential for custom dropdown UI requirements and complex dropdown content beyond standard ListBox functionality.
Implement Syncfusion WinForms GradientLabel control - an enhanced label with gradient backgrounds and custom borders. Use this when creating visually styled labels, colorful headers, or decorative text displays. Covers gradient effects, custom borders, shading configuration, and appearance customization for attractive label designs in Windows Forms applications.
Implement Syncfusion WinForms GradientPanelExt for styled container panels with gradient backgrounds, rounded corners, and border primitives. Use this when building panels with gradient effects, rounded corner containers, collapsible sections, or panels with border elements (text, images, buttons) in WinForms.
Guide for implementing Syncfusion layout managers in Windows Forms applications. Use when creating container layouts with BorderLayout (5-region docking), CardLayout (wizards/property pages), FlowLayout (horizontal/vertical flow), GridLayout (uniform grids), or GridBagLayout (flexible grids with spanning). Covers container controls, child control management, spacing configuration (HGap, VGap), positioning constraints, and designer integration for automatic control arrangement and structured layouts.
Guide for implementing Syncfusion GroupBar (Navigation Pane) control in Windows Forms applications. Use when creating Outlook-style navigation, hierarchical sidebar navigation, collapsible group containers, or toolbox-style interfaces. Covers stacked navigation panes, Office 2007/2010/2016 themed navigation, nested GroupBar containers, and categorized control collections for structured navigation layouts.
Implement Syncfusion Windows Forms Pivot Chart control for visualizing multidimensional data with interactive drill-down capabilities. Use this when working with pivot charts, pivot data visualization, drill-down charts, hierarchical chart data, or business intelligence visualizations. Supports 11+ chart types (Line, Spline, Column, Area, Stacking), data binding with IEnumerable/DataTable, drill up/down operations, pivot table field list, grouping bar, legend customization, Excel export, zooming, scrolling, and touch support.
Guide for implementing Syncfusion RadialMenu control in Windows Forms applications. Use when creating circular context menus, hierarchical radial navigation, or touch-friendly circular menu interfaces. Covers RadialColorPalette for color pickers, RadialFontListBox for font selection, RadialMenuSlider for numeric input, and Office 2016 themed menus for modern circular navigation beyond standard context menus.
Implement Syncfusion WinForms Rating control for star ratings and user feedback inputs. Use this when building product reviews, satisfaction surveys, or quality rating UIs in WinForms. Covers rating precision (standard/half), built-in shapes (star, circle, heart, diamond), custom image shapes, orientation and Office-themed gradient styling.
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.