Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Implement Syncfusion React HeatMap Chart component for data visualization. Use this skill when user needs to create heatmaps, visualize 2D data patterns, display matrix data with color gradients, configure axes (numerical/categorical/datetime), implement legends, handle cell selection, apply custom styling, or work with large datasets. Covers installation, data binding, axis configuration, appearance customization, interaction patterns, tooltips, events, and accessibility.
Collect structured visual feedback from humans using AnyCap's annotation tool, or create and iterate on diagrams using the interactive whiteboard (Excalidraw). Covers image annotation, URL/web page review with screen recording, video review, audio feedback, and collaborative diagramming with Mermaid input. Use when you need a human to point at things, mark regions, draw on screenshots, review a web page or UI, narrate feedback over a recording, provide any spatially-grounded visual input, create or iterate on architecture diagrams, flowcharts, or wireframes. Also use when you need to present work-in-progress to a human for approval or revision. Trigger on: get feedback, show to user, review UI, annotate, mark up, visual feedback, screen recording, user review, human-in-the-loop, approval flow, interactive review, whiteboard, diagram, draw, flowchart, wireframe, architecture chart.
The Canva craft skill — produce on-brand social graphics, carousels, quote cards, infographics, and thumbnails at scale without a designer, and escape the "Canva look." Use when someone wants to design in Canva, make social graphics, set up a Brand Kit, batch-produce graphics (Bulk Create), resize one design for every platform (Magic Resize), use Canva's AI (Magic Studio), or asks why their posts look like a template. Uses the SCALE framework. Reads brand-profile + design-and-templates + voice-builder first. The agent specs, and creates designs directly where the Canva MCP/Connect APIs are connected; the human approves every visual; the export publishes via WoopSocial. Never strips watermarks, impersonates another brand, or uses unpermitted likeness; AI-disclosure + accessibility floor apply. Distinct from design-and-templates (the brand system this executes), image-prompt + the image tools (dedicated generation), ai-image-editing (the edit router), and capcut/descript (video editing).
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about "charts component", "collection view", "image view", "web view", "color well", "image well", "activity view", "lockup", "data visualization", "content display", displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says "how should I display charts", "what's the best way to show images", "should I use a web view", "how do I build a grid of items", "what component shows media", or "how do I present a share sheet". Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
Complete guide to implementing the Syncfusion React Carousel component for rotating image galleries, product carousels, slideshow presentations, testimonials, and sequential content display. Use this skill when working with slide transitions, navigation controls, animations, styling, and accessibility features. Covers installation, item population, and all API properties, methods, and events.
Expert in building immersive scroll-driven experiences — parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like The New York Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
Implement responsive Syncfusion React Sidebar component for navigation layouts. Use when building responsive navigation menus, drawer layouts, or collapsible sidebars with various display modes (Over, Push, Slide). This skill covers sidebar configuration, animations, backdrop overlays, keyboard accessibility, and integration with multi-level navigation systems.
The AI image-editing router — inpainting/object removal, background removal, upscaling, outpainting, old-photo restoration, and retouch, routed task-first to the right engine. Use when someone wants to remove an object/person from a photo, cut out backgrounds, upscale an image, extend an image to new aspect ratios, restore an old photo, fix a generated image, or asks which editing tool to use. Uses the TOUCH framework. Reads brand-profile + design-and-templates first. The agent names the task, routes to the right engine, writes the spec, and can call APIs where connected; the HUMAN judges every result at 100%; WoopSocial publishes. Honesty spine: an edited real photo is an edited claim — creative upscalers hallucinate detail (never on products/documents), no defect concealment, body-retouch disclosure honored, no watermark/provenance stripping. Distinct from image-prompt/flux/nano-banana (generation), canva (the design workflow), and before-after-and-transformation (the claim rules).
Implements the Syncfusion React Bullet Chart component for KPI and performance indicator visualization. Use this when users need feature measure displays, comparative measures, target comparisons, or metric visualizations. Covers data binding, value bars, target bars, ranges, titles, tooltips, data labels, axis customization, orientation, and accessibility.
Implement Syncfusion React Timeline component for displaying chronological sequences of events with customizable layouts, styling, and interactivity. Use this skill when creating timelines, displaying event sequences, showing milestone progression, creating activity feeds, or building chronological data visualizations. This covers career histories, project roadmaps, process flows, shipping tracking, and time-based event displays.
Turn briefs and discovery notes into persuasive business proposals with a decision-ready narrative, phased solution, and clear investment for executives who skim first. Use when the user asks for a business proposal, project proposal, commercial offer, or client-facing pitch (not a full legal SOW). Create business proposals 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.
Build a proper macOS settings/preferences window with liquid glass support for macOS 26 (Tahoe). Use this skill whenever the user asks to create a settings window, preferences UI, settings view, or preferences pane for a macOS app. Also trigger when the user mentions "liquid glass settings", "NavigationSplitView settings", "grouped Form settings", "macOS settings layout", or wants to add/fix/rebuild a settings screen in any native macOS SwiftUI app. This includes phrases like "add settings to my app", "create a preferences window", "my settings look wrong", "fix my settings UI", or even just "I need a settings view". If you are building a macOS app and mentions settings or preferences in any context, use this skill.
Implement Syncfusion React Progress Bar for visual feedback. Use this skill whenever users need to display progress indicators, loading states, file uploads, data processing, or task completion in React applications. Trigger when user mentions progress bars, loading spinners, progress indicators, determinate/indeterminate states, circular/linear progress, or any progress visualization scenario.
Use the iPhone Duo hinge angle for interactions and effects, support Split View multitasking and multiple app scenes, and pair UI across both displays with scene accessories including CameraCaptureAccessory. Use when building fold-driven effects, multi-window support, or dual-display experiences.
Implement Syncfusion React Splitter component for flexible, resizable panel layouts. Guide covers layout configuration, pane sizing, collapse/expand, resize events, content types, accessibility, and RTL support. Use this skill when building multi-panel interfaces with dynamic resizing capabilities.
Apple HIG guidance for status and progress UI components including progress indicators, status bars, and activity rings. Use this skill when asked about: "progress indicator", "progress bar", "loading spinner", "status bar", "activity ring", "progress display", determinate vs indeterminate progress, loading states, or fitness tracking rings. Also use when the user says "how do I show loading state", "should I use a spinner or progress bar", "what goes in the status bar", or asks about activity indicators. Cross-references: hig-components-system for widgets and complications, hig-inputs for gesture-driven progress controls, hig-technologies for HealthKit and activity ring data integration.
Turn papers, study notes, and preliminary data into decision-grade research decks for lab meetings, PI review, grants, and seminars—with faithful numbers, evidence chains, and caveats. Use when the user asks for a research deck, lab meeting slides, study summary deck, academic review deck, or paper-to-slides for a faithful talk (not stylized social image decks). Create research decks 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.
Implements and customizes the Syncfusion React Smith Chart component for transmission line and RF circuit visualization. Use this when users need Smith Charts for impedance matching, RF design, or telecommunications data visualization. Covers series configuration, axis customization, markers, data labels, legend, tooltip, print/export, and accessibility features.
Implements the Syncfusion React 3D Circular Chart component for pie and donut chart visualization. Use this when users need 3D circular charts, data labels, legends, tooltips, or empty point handling. Guides through installation, configuration, customization, and troubleshooting of 3D Circular Charts in React applications.
Implement Syncfusion React Circular Gauge for displaying KPIs, sensor data, speedometers, and real-time monitoring dashboards. Use this skill when users need to visualize quantitative measurements on a circular scale. Covers axes, pointers, ranges, customization, animations, print/export, accessibility, and internationalization.
Implement Syncfusion React Sankey Chart to visualize energy flows, process dependencies, and hierarchical relationships between nodes. Use this skill when creating Sankey diagrams, flow visualizations, or node-link networks. Covers installation, nodes and links configuration, labeling, legends, tooltips, events, appearance customization, RTL support, accessibility, and export features.
Perform a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the work is functionally complete and needs finishing touches—not when the hierarchy, structure, tone, or technical foundation still need major changes.
Implement and configure the Syncfusion React Stepper component for guided workflows. Use this skill when creating step-by-step navigation flows, multi-step forms, wizards, or process guides in React. This skill covers step configuration, orientation (horizontal/vertical), events, validation, animations, templates, accessibility, and globalization support for linear or non-linear workflows.
Implements the Syncfusion React Stock Chart component for visualizing financial and market data. Use this when users need stock price visualization, OHLC charts, candlestick charts, or trading chart interfaces. Supports multiple series types, period selectors, range navigators, technical indicators (e.g., SMA, MACD, Bollinger Bands), and interactive analysis tools for financial data in React applications.
Implements the Syncfusion React Range Navigator component for scrolling and navigating through data with range selection. Use this when users need time-based navigation, financial data visualization, or chart integration with a range selector control. Supports numeric, logarithmic, and DateTime data binding, multiple series types, period selector, lightweight mode, tooltips, RTL, and export/print functionality.
Generate 5 distinct, production-grade UI variations for a requested new or existing section, component, page, flow, or shell, then help the user preview and apply one. Use when the user asks to add or redesign UI like a hero, pricing, navbar, auth flow, dashboard shell, ecommerce surface, or data component.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.
Build React UIs with Fluid Functionalism — a shadcn/ui registry (@fluid) of animated components with a shared motion system: three spring speeds, a hover highlight that glides to the item nearest the cursor, labels that change weight without layout shift. Use whenever the user mentions Fluid Functionalism, @fluid, or fluidfunctionalism.com, asks for UI with satisfying/fluid/polished motion in a React, Next.js, shadcn, Radix, or Base UI project, builds any interface (settings dialogs, sidebars, command menus, chat UIs, forms, lists, tables) in a project with @fluid components installed, asks to review/audit existing UI motion against the system, or asks to update installed @fluid components or what changed in a release. Also use before hand-writing animation code (hover highlights, icon swaps, weight changes, enter/exit transitions, page reveals, skeleton loading) there, so custom code follows the system instead of inventing timings. Bundled scripts read the stack fresh each run and write nothing.
Apple HIG guidance for navigation-related components including search fields, page controls, and path controls. Use this skill when the user says "how should search work in my app," "I need a breadcrumb," "how do I paginate content," or asks about search field, search bar, page control, path control, breadcrumb, navigation component, search UX, search suggestions, search scopes, paginated content navigation, or file path hierarchy display. Cross-references: hig-components-menus, hig-components-controls, hig-components-dialogs, hig-patterns.
Blueprint transaction proofs and period impact receipts from user-supplied payment details or structured summaries — so totals, references and attribution stay honest and scannable for customers, finance or managers. Use when the user asks for a receipt, payment confirmation, sales slip, donation acknowledgment, expense proof, usage impact receipt or "show what was delivered". Create receipts 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.
Implement Syncfusion React Linear Gauge for displaying measurements on a linear scale. Use this skill when users need temperature sensors, KPI indicators, progress gauges, or real-time monitoring dashboards. Covers axes configuration, pointer types, ranges, annotations, customization, animations, print/export, accessibility, and internationalization.
Tailwind CSS advanced design systems with design tokens and @theme configuration. Proactively activate for: (1) building a design system on Tailwind v4, (2) the @theme directive and CSS-first configuration, (3) custom color scales (50-950) and semantic tokens, (4) typography scales and fluid type with clamp(), (5) spacing tokens and 8pt grids, (6) shadow systems, radius tokens, motion tokens, (7) light/dark mode tokens via @theme, (8) Figma to Tailwind token sync, (9) design-token tooling (Style Dictionary, Tokens Studio), (10) per-brand theming. Provides: @theme configuration templates, semantic-token naming conventions, a fluid-type calculator, a design-token sync workflow, and multi-brand theming patterns.
Apple HIG guidance for input methods and interaction patterns: gestures, Apple Pencil, keyboards, game controllers, pointers, Digital Crown, eye tracking, focus system, remotes, spatial interactions, gyroscope, accelerometer, and nearby interactions. Use when asked about: "gesture design", "Apple Pencil", "keyboard shortcuts", "game controller", "pointer support", "mouse support", "trackpad", "Digital Crown", "eye tracking", "visionOS input", "focus system", "remote control", "gyroscope", "spatial interaction". Also use when the user says "what gestures should I support," "how do I add keyboard shortcuts," "how does input work on Apple TV," "should I support Apple Pencil," or asks about input device handling. Cross-references: hig-components-status, hig-components-system, hig-technologies for VoiceOver and Siri.
A comprehensive guide to implementing the Syncfusion React TreeMap component. Use this skill when users need help creating hierarchical data visualizations, configuring drill-down interactions, applying color mapping, working with multiple hierarchy levels, customizing leaf items, or troubleshooting TreeMap data binding and display issues. Covers installation, data binding patterns, layouts, legends, tooltips, selection, accessibility, and advanced customization for interactive hierarchical data exploration.
Compare UX patterns across multiple reference apps using pattern libraries produced by ux-extract. Reads 2+ pattern-library.md files, walks them category by category, identifies where apps converge (strong signal), where they diverge (genuine design choice), what's unique to one app, and what's absent across the set. Produces an opinionated comparison document with recommendations for a new build. No browser needed — pure markdown analysis. Trigger with 'compare UX patterns', 'how do top apps handle X', 'ux comparison', 'pattern comparison across reference apps'.
Maps a customer journey across stages, touchpoints, emotional curve, pain points, and moments of truth into a markdown artifact with an optional mermaid timeline or flowchart. Use when synthesizing existing research into the shape of a customer's experience, end-to-end or for one phase. Without research signal yet, run discover-interview-synthesis or measure-survey-analysis first; refuses to fabricate emotional or behavioral data.
Apple HIG guidance for system experience components: widgets, live activities, notifications, complications, home screen quick actions, top shelf, watch faces, app clips, and app shortcuts. Use when asked about: "widget design", "live activity", "notification design", "complication", "home screen quick action", "top shelf", "watch face", "app clip", "app shortcut", "system experience". Also use when the user says "how do I design a widget," "what should my notification look like," "how do Live Activities work," "should I make an App Clip," or asks about surfaces outside the main app. Cross-references: hig-components-status for progress in widgets, hig-inputs for interaction patterns, hig-technologies for Siri and system integration.
Create or update a shared Apple design context document that other HIG skills use to tailor guidance. Use when the user says "set up my project context," "what platforms am I targeting," "configure HIG settings," or when starting a new Apple platform project. Also activates when other HIG skills need project context but none exists yet. This skill creates .claude/apple-design-context.md so that hig-foundations, hig-platforms, hig-components-*, hig-inputs, and hig-technologies can provide targeted advice without repetitive questions.
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.