Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Build a Webflow page, section, component, or full site from a Figma design using the Figma MCP and the Webflow MCP (Designer Bridge + Data API). Use whenever translating a Figma file/frame into Webflow, building directly in a Webflow project, or implementing a design as live Webflow elements/styles (not a copy-paste fragment). Triggers: "build this Figma in Webflow", "Figma to Webflow", "implement this design in Webflow", a figma.com URL + a Webflow site, "recreate this in my Webflow project".
Transform a user-supplied photo into an expressive minimal zine poster made only from original source-derived illustration, an artistic proposition, emotional tension, visual metaphor, spacious negative space, art-directed high-chroma color, and unconstrained authorial typography. Let wording, language, amount, placement, type voices, scale, direction, legibility, and image interaction follow expression and aesthetic judgment rather than presets. Preserve source orientation by default with a 3:5 portrait output or 5:3 landscape output. Add source-derived distributed supporting accents and a natural isolated-contour option alongside adaptive paper-edge transitions. Support an exact `单色块模式` trigger for one contiguous saturated color field with all remaining forms in neutral ink. Use for authored abstract or editorial reinterpretations that communicate an emotion or idea without embedding, cropping, tracing, or preserving the original photographic material in the final image.
Saleor storefront data + UX playbook. Covers GraphQL query design, channel handling, data contracts per surface (PLP/PDP/nav/pricing/availability/media), variant-selection UX, and Saleor-specific correctness rules. Framework-agnostic—agent inspects the repo and applies conventions locally.
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers.
Implements scroll-driven storytelling experiences with pinned sections, progressive reveals, and scroll-linked animations. Use when asked to build scrollytelling, scroll-driven animations, parallax effects, narrative scroll experiences, or story-driven landing pages
Implement Syncfusion Blazor Accumulation Chart (SfAccumulationChart) for proportional data visualization. Use this when creating pie charts, doughnut charts, funnel charts, or pyramid charts. This skill covers data labels, legends, tooltips, slice grouping, and part-to-whole visualizations in Blazor applications.
Creates comprehensive dashboard and analytics interfaces that combine data visualization, KPI cards, real-time updates, and interactive layouts. Use this skill when building business intelligence dashboards, monitoring systems, executive reports, or any interface that requires multiple coordinated data displays with filters, metrics, and visualizations working together.
Render an ARIS Markdown / JSON artifact (IDEA_REPORT, AUTO_REVIEW, KILL_ARGUMENT, PAPER_PLAN, research-wiki state, etc.) into a single-file HTML view designed for human reading. Use when the user says “渲染 HTML,” “出一份 HTML 报告,” “render html,” “make this readable,” “export to html,” or wants a polished web-rendered view of a Markdown artifact.
Turn any text, URL, or information into magazine-style HTML info cards, then automatically capture and save them as images. Accepts URLs directly (X/Twitter, web articles, etc.), fetches the content, extracts key points, and generates cards. Suitable for sharing on X (Twitter), WeChat, Xiaohongshu, and other platforms. Triggers: “生成信息卡,” “做张信息卡,” “把这段内容做成卡片,” “信息卡片,” “make info card,” “generate card,” “把这个链接做成卡片.” Card style features large type, expressive typography, and Swiss Internationalist magazine aesthetics. Automatically captures the result; very long content is intelligently split across images. Not for interactive isometric mechanism diagrams explaining how a system or algorithm works (use anatomy), data report webpages (use qiaomu-chart-report), or editable whiteboard canvases (use qiaomu-tldraw-skill).
Comprehensive guide for implementing Syncfusion Blazor calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this when building date selection interfaces, date range selection, date/time input, calendar displays, date constraints, formatting, globalization, and accessible calendar experiences in Blazor applications. Covers all calendar components from Syncfusion.Blazor.Calendars package.
Use when asked to review, critique, audit, or improve an existing user interface — "review this UI", "why does this look generic", "make this more polished", "design feedback", "does this look AI-generated", "audit this page". Also use as the final gate before shipping any frontend work, and when a UI renders correctly but feels unfinished, cheap, or inconsistent without an obvious cause.
Implement Syncfusion Blazor button components including Button, ButtonGroup, CheckBox, Chip, DropdownMenu, FloatingActionButton, ProgressButton, SpeedDial, SplitButton, and ToggleSwitch. Use this skill when working with button-related components in Blazor applications. Covers installation, configuration, styling, accessibility, event handling, and advanced features for all button component types.
Use for WoodMart site work through the wood MCP abilities (woodmart/*): finding or creating content, editing Gutenberg blocks, changing theme settings or header logos, and creating or assigning WoodMart layouts. Covers the queued block-finalization workflow and the safety rules that coordinate multiple abilities.
Reviews, writes, and fixes focus management code for all Apple platforms (tvOS, iOS/iPadOS, watchOS, visionOS, macOS), covering SwiftUI, UIKit, AppKit, and RealityKit. Use when reading, writing, or reviewing apps that handle focus, hover, key view loops, or Digital Crown navigation.
Build and troubleshoot Syncfusion Blazor diagrams using SfDiagramComponent. Trigger for flowcharts, org charts, mind maps, BPMN, UML sequence, swimlanes, symbol palettes, nodes/connectors/ports/annotations, layouts, data binding, serialization (load/save), export/print, and collaborative editing questions. Provide Blazor + Syncfusion setup steps, configuration patterns, and sample snippets
Generate, modify, and style React components from natural language using the Thesys SDK. Guides schema-driven UI generation, theme customisation, tool calling integration, and deployment to Vite, Next.js, or Cloudflare Workers. Use when the user says "generate UI", "create a component", "build an interface", "Thesys", "generative UI", or asks to turn a description into a React component.
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
Resume generation and optimization tool. Supports two modes: create a new resume from scratch (collecting information through structured dialogue), or optimize an existing resume (read and improve the existing resume). Outputs both HTML and PDF, with professional formatting and a strict limit of two pages. Supports resumes in Chinese and English. Trigger when users mention: generate a resume, write a resume, make a resume, resume creation, optimize a resume, edit a resume, resume styling, resume create, resume build, resume optimize, help me make a resume, resume layout, make a resume, change my resume, resume template, resume design. Also trigger when continuing from resume-match with an already optimized Markdown resume to generate HTML+PDF. Trigger even if the user only says “help me make a nice-looking resume” or “format my resume.”
Migrate projects from Bootstrap 5 to Bootstrap 6. Use when upgrading from Bootstrap 5, migrating v5 to v6, or updating v5 class names, components, Sass, or JavaScript to the latest version. For Bootstrap 4 projects, start with the v4-to-v6 migration skill instead.
Expert blueprint for mobile platforms (Android/iOS) covering touch controls, virtual joysticks, responsive UI, safe areas (notches), battery optimization, and app store guidelines. Use when targeting mobile releases or implementing touch input. Keywords mobile, Android, iOS, touch, InputEventScreenTouch, virtual joystick, safe area, battery, app store, orientation.
Implement the Syncfusion Blazor Rich Text Editor (SfRichTextEditor) using Syncfusion.Blazor.RichTextEditor. Supports HTML, Markdown, and IFrame editor modes. Use for toolbar configuration, image/video/audio insertion, table management, paste cleanup, Word/PDF import and export, accessibility, globalization, RTL, and inline or custom toolbar tool scenarios in Blazor applications.
Implements complete dark/light mode theming systems using CSS variables, Tailwind dark mode, React context, and system preference detection. Use when users request "add dark mode", "theme toggle", "dark theme", "light mode switch", or "color scheme".
Bring the Open Design catalogue into any agent session: 150+ brand DESIGN.md files, 110+ rendering templates (decks, prototypes, dashboards, posters, image/video/audio), 130+ functional skills, and 11 craft references. Pick a brand spec and a template/skill, layer in universal craft rules, then follow the resulting workflow. Use when the user wants to build a deck, prototype, landing page, dashboard, marketing artifact, or apply a specific brand's visual identity to their project.
Implement the Syncfusion Blazor DataForm component to create dynamic, data-bound forms with validation and field management. Use when building forms with Syncfusion components in Blazor, handling form validation, binding models, creating editable fields, or managing form events. Covers form layout customization, data binding, FormItems configuration, FormAutoGenerateItems setup, templates, events, and data annotation validation.
Implement the Syncfusion Blazor FileManager component for file browsing and management. Use when creating hierarchical file systems, handling multiple file operations, implementing data binding patterns, or setting up cloud provider integration. This skill covers file operations, data binding, event handling, and customization options.
Plan, conduct, and analyze UX research using proven methodologies. Use when planning user research, writing interview scripts, creating test plans, recruiting participants, analyzing qualitative data, or synthesizing findings into actionable insights. Covers generative, evaluative, and continuous discovery research with specific frameworks, scoring rubrics, and templates
Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices).
Generate or analyze poetic paper-texture minimal zine posters with large negative space, a small editorial collage or focal element, experimental typography, and one clear color accent. Use when the user gives a theme, sentence, article, mood, object, photo, content brief, reference images, or an image folder and wants a final poster image, a production-ready image prompt, reusable style rules, or varied layouts that stay in one visual family.
Maz-UI v4 - Modern Vue & Nuxt component library with 50+ standalone components, composables, directives, theming, i18n, and SSR support. Use when building Vue/Nuxt applications with forms, dialogs, tables, animations, or need responsive design system with dark mode.
Plan and execute a brand transformation — from diagnosis to new brand definition to rollout. Use when the user says "rebrand", "rebranding", "brand refresh", "update the brand", "modernize the brand", "our brand is outdated", "we've outgrown our brand", "the brand needs to change", "brand transformation", "pivot the brand", "we're changing the brand", "the old brand doesn't fit anymore", or when a brand has evolved in direction, audience, or market position and needs its identity to catch up
Implements Syncfusion Blazor Gantt for project scheduling. Covers SfGantt, GanttTaskFields, GanttColumns, GanttEditSettings, taskbar editing, dependencies, resources, timeline, critical path, baselines, and Excel/PDF export. Applicable for Blazor Gantt charts, task scheduling, WBS, and Syncfusion.Blazor.Gantt integration.
Use when asked to "opportunity solution tree", "OST", "Teresa Torres", "map customer opportunities to outcomes", "structure discovery around opportunities", or "compare solutions for a customer need". Helps product teams connect outcomes to customer opportunities and test solutions with Opportunity Solution Trees (created by Teresa Torres).
Create or refine game UI kits with SpriteCook's concept, component-sheet, extraction, and finalization tools. Use for a requested screen or matching set of reusable controls, including work from an existing SpriteCook concept. Pair with spritecook-workflow-essentials
Implement Syncfusion Blazor notification components (Toast, Message, Skeleton) for user feedback and loading states. ALWAYS use this when users need toast notifications, popup messages, alert boxes, success/error/warning/info messages, loading skeletons, shimmer effects, content placeholders, or any feedback UI. Trigger immediately when users mention notifications, toasts, alerts, messages, loading states, skeleton screens, shimmer loading, user feedback, status messages, SfToast, SfMessage, SfSkeleton, notification popups, or need to show temporary messages, form validation feedback, or loading placeholders
Implements the Syncfusion Blazor TreeGrid (SfTreeGrid) for hierarchical or self‑referential data with expandable nodes and nested row structures. Use this skill when building tree‑view workflows in Blazor Server, WebAssembly, Web App, or MAUI applications. Supports GraphQL binding, templates, sorting, filtering, editing, paging, aggregates, search, exporting, virtualization, clipboard actions, and state management for rich hierarchical data experiences.
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like “review website design,” “check the UI,” “fix the layout,” or “find design problems.” Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then fixes them in the source code
When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why isn't this page working." For signup/registration flows, see signup-flow-cro. For post-signup activation, see onboarding-cro. For forms outside of signup, see form-cro. For popups/modals, see popup-cro.
Implement Syncfusion Blazor Dropdown Tree component for hierarchical data selection with single/multi-selection, checkboxes, filtering, and advanced customization. Use this skill whenever the user needs to display tree-structured data in a dropdown, select single or multiple hierarchical items, implement checkboxes for multi-item selection, filter tree data, customize templates, bind to remote data sources, or handle tree-related events and validation
Scan an AEM Edge Delivery Services page for WCAG 2.1 AA accessibility violations and generate specific fixes. Identifies missing alt text, heading hierarchy issues, link text problems, color contrast concerns, and EDS-specific accessibility patterns. Use when fixing accessibility issues, preparing for compliance audits, or remediating WCAG violations.
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.