Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Design web pages and app UIs with Efecto — create sessions, build layouts with JSX and Tailwind CSS, manage artboards, and push real-time design changes via MCP tools. Use when asked to "design a page," "build a landing page," "create a website," "design a dashboard," "make a UI," or any visual design task. Requires Efecto MCP server.
Create distinctive, production-grade frontend interfaces with strong hierarchy, thoughtful systems, and polished implementation that avoid generic AI aesthetics. Use when the user wants to build or redesign web pages, flows, components, or full app surfaces, or when another better-web-ui skill needs shared project design context before other better-web-ui skills.
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.
Create payment-ready invoices from line items, rates, client details, tax rules, and terms—structured so totals reconcile and AP can pay without back-and-forth. Use when the user asks for an invoice, bill, receivable, pro forma invoice, or branded invoice PDF. Create invoices with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity.
Turn venue notes, dish lists, and brand cues into a scannable food or beverage menu with clear categories, consistent item anatomy, and mood-matched visual intent—not a flyer, recipe book, or website sitemap. Use when the user asks for a restaurant menu, café menu, bar or wine list, catering sheet, room-service card, tasting menu, or seasonal insert for hospitality print or PDF. Create menus with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity.
Guide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions joyride, guided tour, onboarding tour, walkthrough, tooltip tour, step-by-step guide, product tour, or wants to highlight UI elements sequentially. Also use when debugging tour issues like tooltips not appearing, targets not found, or controlled mode problems. This skill covers the useJoyride hook, Joyride component, step configuration, events, controls, custom components, and styling.
Use this skill whenever the user wants to create, customize, or troubleshoot X6 v3 graph editor diagrams. Triggers include: any mention of 'X6', 'antv x6', '@antv/x6', 'X6 editor', 'X6 图编辑', '流程图', 'DAG', 'ER图', '实体关系图', '血缘图', '组织架构图', 'UML类图', 'flowchart', 'DAG diagram', 'ER diagram', 'lineage graph', 'org chart', 'network topology', 'stencil', 'drag-and-drop editor', 'port connection', 'node port edge', 'graph editor', 'diagram editor', or requests about X6 node/edge styling, plugins (Selection, History, Clipboard, Keyboard, MiniMap, Scroller, Snapline, Stencil, Dnd, Transform, Export), interactions (panning, mousewheel, connecting, embedding), HTML shape nodes, custom shapes, serialization, or layout. Also use when debugging X6 rendering errors, v2→v3 migration, or editor interaction issues. Do NOT use for G2 statistical charts, G6 network graphs, or S2 pivot tables.
Direct visual and creative work for campaigns, photography, illustration, video, and branded experiences. Use this skill whenever the user wants to brief a photographer, direct illustrators, plan a creative campaign, develop visual concepts, or evaluate creative work for fit. Triggers on art direction, photo brief, photography brief, illustration brief, campaign concept, creative concept, visual direction, mood board, look and feel, visual treatment, video direction. Also triggers when the user has approved brand identity but needs to extend it into specific creative deliverables. Use `creative-direction` instead when the ask is the project-wide aesthetic brief that this skill consumes as input.
Apple Human Interface Guidelines for platform-specific design. Use this skill when the user asks about "designing for iOS", "iPad app design", "macOS design", "tvOS", "visionOS", "watchOS", "Apple platform", "which platform", platform differences, platform-specific conventions, or multi-platform app design. Also use when the user says "should I design differently for iPad vs iPhone", "how does my app work on visionOS", "what's different about macOS apps", "porting my app to another platform", "universal app design", or "what input methods does this platform use". Cross-references: hig-foundations for shared design foundations, hig-patterns for interaction patterns, hig-components-layout for navigation structures, hig-components-content for content display.
Apply Disney's 12 principles as practical design and engineering rules for procedural animation. Use when creating, improving, reviewing, or debugging code-driven motion in web, SVG, canvas, React, Remotion, game, UI, character, camera, or 3D scenes; especially when motion feels stiff, weightless, mechanical, unclear, or physically correct but visually weak.
Turn notes, specs, or release details into a single-page brief that aligns stakeholders on one story—problem, solution, proof, scope, or changelog—not a deck, flyer, or multi-page PRD. Use when the user asks for a one-pager, product brief, executive summary page, solution overview, initiative brief, or printable one-page spec. Create one pagers with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity.
A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.
Read funnels, retention curves, and event data as a designer — separating a design problem from a tracking artefact. Use when handed product data you did not design and asked why people drop off. For choosing what to measure, use `metrics-definition` (ux-strategy); for running a controlled test, use `a-b-test-design` (prototyping-testing).
Adapt toolbars, navigation bars and tab bars for the vertical axis on iPhone Duo — item ordering, symbol vs text representations, axis behavior, overflow menus, visibility priority, and when to opt out. Use when toolbar items look wrong, overflow too early, or need to move to the side on the outer display.
Use when reference images, screenshots, moodboards, style frames, brand boards, cinematic stills, product interface shots, or a live site URL must become a production design system, design tokens, art direction, motion rules, or a YAML style specification. Covers reverse engineering visual references into a deterministic YAML contract with graded confidence, evidence boundaries, and typefaces drawn from the live Google Fonts catalog and ranked as rarely used. Not for generating images or for ordinary frontend work where no reference has to be decoded first.
Turn confirmed schedules, social slate decisions, and sponsor lists into attendee-facing programs with time-first wayfinding and publish-safe social copy—not posters, invitations, or slide decks. Use when the user asks for a conference program, festival booklet, gala run-of-show, performance playbill, or multi-day badgeholder agenda. Create event programs with AI-native design and the highest aesthetic standards, powered by the K2F format and engine. Purpose-built for AI agents, K2F lets them focus on semantic content and design intent while automatically handling layout, typography, and formatting complexity
Comprehensive guide for implementing Syncfusion React button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a React application.
Design skills for Apple platform UI — Liquid Glass, animations, game feel (haptics, sound, celebrations), UI prototyping, UX writing, SF Symbols, and typography. Use when implementing design language features, adding juice/feedback, writing interface copy, or choosing type and iconography.
The craft of turning a single quote, line, or stat into a designed typographic graphic — quote cards, pull-quotes, text-on-image, stat cards, typography posts. Use when someone wants a quote card, a text graphic, a pull-quote, a stat card, or to turn a strong line into a shareable image. The design amplifies a strong line; it can't create one. Uses the QUOTE framework. Reads brand-profile + design-and-templates + voice-builder first, and pulls the line from hook-writer, storytelling, or data-and-original-research (a stat). The agent picks the line and specs the card; a design tool renders; the human approves; WoopSocial publishes the image (it does not generate media). NEVER fabricates a quote, attributes an invented line to a real person, or strips context; verifies wording + source; consent + likeness. Distinct from infographic-and-data-viz, design-and-templates, caption-writer, and social-proof-and-testimonials.
Build, configure, and debug apps with the Quasar framework (`quasar` npm package, v2.33.1). Use when writing, reviewing, or debugging code that imports "quasar" or "quasar/wrappers", configuring Quasar with Vite, Vitest, Storybook, UMD, or Quasar CLI, styling with Quasar Sass variables, or upgrading between Quasar v2 releases.
Comprehensive guide for implementing Syncfusion React input components including Uploader, NumericTextBox, TextBox, TextArea, CheckBox, OTP Input, Signature, RangeSlider, ColorPicker, MaskedTextBox, and Rating. Use this when building file upload UIs with async/chunk uploads, drag-and-drop functionality, numeric inputs with validation and formatting, text inputs with floating labels, custom adornments, form integration, accessibility compliance, and styling in React applications.
Apple HIG guidance for selection and input controls including pickers, toggles, sliders, steppers, segmented controls, combo boxes, text fields, text views, labels, token fields, virtual keyboards, rating indicators, and gauges. Use this skill when the user says "picker or segmented control," "how should my form look," "what keyboard type should I use," "toggle vs checkbox," or asks about picker design, toggle, switch, slider, stepper, text field, text input, segmented control, combo box, label, token field, virtual keyboard, rating indicator, gauge, form design, input validation, or control state management. Cross-references: hig-components-menus, hig-components-dialogs, hig-components-search.
Reconcile what the numbers say with what users say, and design the study that settles it rather than restates it. Use when behavioural data and research findings point different ways. For reading the data on its own, use `behavioural-analytics`; for synthesising interviews on their own, use `affinity-diagram`.
The Pinterest pin design skill — the visual half that pairs with pinterest-seo's keyword layer. Use when someone wants to design a pin, a Pinterest pin image, a pin text overlay, fresh pin variations for an existing URL, or board covers. Designs and briefs the 2:3 (1000x1500) vertical pin: one focal point, a keyword text overlay readable at feed size, brand-consistent template, safe zones, and 3-5 visually distinct FRESH designs per destination URL. Uses the SAVED framework. Reads brand-profile + the destination + the pinterest-seo keyword first. A HUMAN or an image/design tool (ideogram/canva/nano-banana/a designer) creates the final raster; WoopSocial publishes the finished pin image + title + description + board + link. No misleading pins, no repin-as-fresh dupes, engagement never fabricated. Distinct from pinterest-seo (the keyword layer -- they PAIR), pinterest-growth (the strategy), design-and-templates (the template system), and ideogram/canva (render the raster this briefs).
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
A comprehensive guide to implementing Syncfusion React dropdown components, including AutoComplete, ComboBox, DropDownList, ListBox, Mention, MultiSelect, and MultiColumn ComboBox. Use when building selection interfaces, data binding, filtering, cascading dropdowns, custom templates, and accessible dropdown experiences in React applications.
The TikTok Photo Mode format-execution skill. Use when someone wants a “TikTok photo carousel,” “photo mode,” “TikTok slideshow,” “swipeable TikTok post,” or to publish a multi-image TikTok post via WoopSocial (postType PHOTO). Builds a TikTok-native carousel designed for completion rate: hook slide 1, progressive reveal with cliffhangers, reward + one CTA — and sets the exact WoopSocial PHOTO publish config (privacy, comments, music, truthful disclosure flags). Uses the SWIPE framework. Reads brand-profile + goals-and-kpis first. The agent writes the slide plan + overlay copy + caption + config; the IMAGES are made by a human/image skill, not WoopSocial; WoopSocial publishes the native PHOTO post; metrics are never fabricated and photo mode is never promised as a reach hack. Distinct from tiktok-script (VIDEO) and carousel-writer (cross-platform copy)
Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts, responsive treatments, motion, and empty/error/loading states. Produces a reusable pattern library that other audits can compare against. The inverse of ux-audit — asks 'what is the bar?' rather than 'does this match the bar?'. Trigger with 'learn from X', 'extract patterns from X', 'study X's UX', 'reverse engineer the UX of X', 'build a pattern library from X'.
Apple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says "should I use an alert or a sheet," "how do I show a confirmation dialog," "when should I use a popover," "my modals are annoying users," or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.
Comprehensive guide for implementing Syncfusion React popup components including Dialog, ToolTip. Use this when building modal/modeless dialogs, confirmation popups, forms in dialogs, draggable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in React applications.
This skill should be used when the user asks to "write motion guidelines", "create a brand motion system", "define easing and timing tokens", "document our animation principles", "build a motion language like Slack/IBM/Klarna", "set up entrance/exit/transition rules", or "add a reduced-motion / accessibility section". It outputs a fill-in-ready brand motion guidelines document.
Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast or tap-target sizes, or designing native-feeling Apple UI (e.g., 'audit my iOS app against the HIG', 'is this text readable on Liquid Glass?').
The craft of turning real data into honest, scannable, shareable infographics and charts. Use when someone wants to visualize data, make an infographic, build a chart/graph, turn a finding or stat into a visual, or fix a chart that's confusing or misleading. A great data viz makes one insight land in 3 seconds. Uses the CHART framework (chart choice, headline takeaway, honest scale, reduce to signal, tag source + accessibility). Reads brand-profile + design-and-templates first and pulls real data from data-and-original-research / analytics-and-reporting. The agent designs the spec; a design/chart tool renders it; the human approves; WoopSocial publishes the image (it does not generate media). NEVER distorts scales or fabricates a data point/source; cites source + date; accessibility required. Distinct from design-and-templates (brand design), quote-cards-and-text-graphics (a lone quote/number), data-and-original-research (originates the data), and analytics-and-reporting.
Implement the Syncfusion React 3D Chart component from the @syncfusion/ej2-react-charts package. Use this skill when users need 3D column, bar, stacked column, stacked bar, or 100% stacked chart variations. Covers Chart3DComponent, axis configuration (category, numeric, datetime, logarithmic), data binding, multiple panes, data labels, legends, tooltips, selection, print/export, theming, and accessibility.
Create responsive navigation headers with the AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
Build or modify plain HTML/CSS/JavaScript (no framework) using modular ES modules (ESM), SRP, minimal global state, and shippable runnable files with lightweight verification. Use for static pages, small UI widgets, vanilla JS refactors, and quick prototypes without React/Vue/Angular.
Use when building or restyling any web interface—landing pages, dashboards, marketing sites, web apps, React/Vue components, HTML/CSS layouts, artifacts, posters—or when asked to make a UI look better, more polished, more distinctive, less generic, or less “AI-generated.” Also use when a design brief, art direction, visual identity, type scale, or color system is needed before implementation.
Apple HIG guidance for menu and button components including menus, context menus, dock menus, edit menus, the menu bar, toolbars, action buttons, pop-up buttons, pull-down buttons, disclosure controls, and standard buttons. Use this skill when the user says "how should my buttons look," "what goes in the menu bar," "should I use a context menu or action sheet," "how do I design a toolbar," or asks about button design, menu design, context menu, toolbar, menu bar, action button, pop-up button, pull-down button, disclosure control, dock menu, edit menu, or any menu/button component layout and behavior. Cross-references: hig-components-search, hig-components-controls, hig-components-dialogs.
Generates AI images using the nano-banana CLI (Gemini 3.1 Flash default, Pro available). Handles multi-resolution (512-4K), aspect ratios, reference images for style transfer, green screen workflow for transparent assets, cost tracking, and exact dimension control. Use when asked to "generate an image", "create a sprite", "make an asset", "generate artwork", or any image generation task for UI mockups, game assets, videos, or marketing materials.
Comprehensive guide for implementing Syncfusion React Notification components including Badge, Message, Skeleton, Toast, and Spinner. Use this when applying status indicators and badges with color variants and shapes; showing informational, success, warning, or error messages; configuring severity levels and display variants (Text, Outlined, Filled); handling message dismissal; toast positioning, toast templates, toast animations; displaying skeleton loading placeholders with shimmer animations (Wave, Pulse, Fade) and shapes (Circle, Rectangle, Text); or customizing notification appearance and accessibility.
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.