Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
AI skill for building ApexCharts.js charts and data visualizations (targets v8). Use when the user asks to create, configure, or troubleshoot any chart using ApexCharts (line, area, bar, pie, donut, radialBar, scatter, bubble, heatmap, candlestick, boxPlot, violin, histogram, radar, polarArea, rangeBar, rangeArea, treemap, funnel, pyramid, gauge, sunburst, icicle, unit, waffle, waterfall, dumbbell, streamgraph, raincloud). Covers correct data formats, lifecycle, formatters, tree-shaking, SSR, and the feature platform (plugins, canvas renderer, custom series, small multiples, undo/redo, shareable views, themes, crossfilter, annotation authoring, storyboard, streaming, drilldown, highlight filter). Knows which chart types and features ship in the default v8 bundle and which need an explicit import or the full bundle. In React / Vue / Angular projects, prefer the framework wrapper packages (`react-apexcharts`, `vue3-apexcharts`, `ng-apexcharts`) over the core API
Generates Atuntun-style Xiaohongshu cover prompts. For viral vertical cover design for content about AI tools, productivity methods, product reviews, tutorials and deployment, personal experience, podcast recommendations, and workplace insights. Features a real person on camera, oversized soft pale yellow (#FDFFA7) / white Chinese titles, thick black outlines, cutout outlines of people, green checklists, emoji stickers, arrow annotations, and high-contrast, high-density composition. Keywords: Xiaohongshu cover, viral cover, Atuntun style, AI tutorial cover, product review cover, cover prompt.
CLI tool for creating, managing, and exporting AI-generated presentations via the Banana Slides API. Use when the user asks to: (1) generate a PPT/presentation/slides from an idea, outline, or description, (2) export a project to PPTX, PDF, or images, (3) batch-generate multiple presentations, (4) manage projects, pages, materials, or templates programmatically, (5) renovate/redesign an existing PPT or PDF, (6) edit slide images with natural language.
Use when designing or auditing high-standard video-game accessibility in Bevy 0.19, integrating screen readers and focus navigation, supporting adaptive controllers and complete remapping, implementing captions or audio description, checking contrast and motion safety, or building disabled-player test evidence.
This skill should be used when the user asks about Bootstrap Icons, Bootstrap icon library, how to install Bootstrap Icons, how to use Bootstrap Icons, Bootstrap icon fonts, Bootstrap icon SVGs, Bootstrap icon sprites, Bootstrap Icons CDN, Bootstrap Icons npm, Bootstrap Icons Composer, PHP Bootstrap Icons, Laravel icons, external image icons, img tag icons, CSS background icons, CSS mask icons, how to style Bootstrap icons, Bootstrap icon sizing, Bootstrap icon colors, Bootstrap icon accessibility, or needs help using icons in Bootstrap projects.
Builder user experience systems for Three.js building games. Use when implementing prefab/blueprint save/load, undo/redo command patterns, ghost preview placement, multi-select, or copy/paste building mechanics. Covers the UX layer that makes building feel responsive and intuitive.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Preview React components with real Mantine + Tailwind styling using Ladle. Use when modifying UI components, fixing visual bugs, or when the user asks to see what a component looks like. Creates Ladle stories, captures screenshots in dark/light mode, and presents them for review. Use proactively after UI changes.
Compare Figma designs against implementation screenshots, identifying layout, typography, color, and sizing discrepancies. Generates a structured visual review table and an interactive HTML comparison page with swipe and side-by-side modes. Use when the user asks to compare design with preview, compare Figma with screenshot, check design implementation, or provides a Figma URL alongside a screenshot.
Opinionated product-design skill for building, reviewing, polishing, and iterating on landing pages, apps, dashboards, AI products, design systems, and brand touchpoints. UX and comprehension first, then restraint (three type sizes, delete decoration), then foundations, then tactical craft — hierarchy, spacing systems, type scales, HSL palettes, shadows, finishing touches. Distilled from 20 YC Design Review videos (Linear, Stripe, Cursor, Framer) plus the Refactoring UI book. Use whenever the user asks to design, redesign, critique, or polish anything user-facing: "make it look better/more professional/trustworthy", de-slop the AI/vibe-coded look, fix a landing or pricing page, improve conversion, design an AI feature or agent UI, set up tokens or a design system, review a URL/screenshot/mockup. Also trigger for tactical UI questions — spacing feels off, visual hierarchy, choosing colors, typography, empty states, Tailwind/CSS styling — even without the word "design". Not for pure backend/DevOps work.
Expert direct mail marketing strategist for writing compelling copy, designing high-converting mail pieces, and developing measurement strategies. Use when planning direct mail campaigns, writing mailer copy, designing postcards/letters, or measuring campaign effectiveness with incremental lift analysis.
Make Flutter UIs work with TalkBack, VoiceOver, JAWS/NVDA, large text, high contrast, and reduced motion. Covers Semantics, MergeSemantics, ExcludeSemantics, BlockSemantics, 48×48 tap targets, icon-only tooltips, TextScaler, MediaQuery a11y *Of getters, sort keys vs keyboard focus, contrast, and guideline tests. Use when the user mentions accessibility, a11y, semantics, TalkBack, VoiceOver, screen reader, tap target, tooltip, text scale, high contrast, reduce motion, or runs /flutter-improving-accessibility.
Diagnose a codebase's frontend design maturity and route the work through the right sequence of frontend-design skills. Use when the user makes a broad or vague design request — 'make this look better', 'polish the UI', 'this feels like an MVP', 'our frontend is a mess', 'where do I start with design', 'make it feel professional', 'plan a design system' — or when a request spans multiple design concerns and it's unclear which single skill applies. Assesses maturity by inspecting the actual code (Tailwind config, CSS variables, component structure, hex-code drift), picks one of five implementation paths, and produces a design roadmap: an evidence-backed maturity diagnosis plus an ordered skill sequence with the artifact each step passes to the next. If the request clearly maps to one concern (only spacing, only color, only type), skip this and invoke that skill directly.
Daisy Days — Cheerful pastel deck with hand-drawn daisies, stars, and rainbows. Friendly, soft, and warm. Anything that should feel friendly, soft, and joyful: educational content, kids and family, wellness programs, community workshops, creator portfolios for craft / illustration.
People's Platform (Block & Bold) — Activist poster energy: blue, orange, red on cream, with Alfa Slab + Caveat Brush. Anything that should feel honest, loud, and graphic: cultural commentary, manifestos, civic and community decks, design talks, campaign pitches.
Pink Script — After Hours — Black canvas, hot pink accent, pearl-cream paper, Instrument Serif headlines: late-night editorial luxury. Anything that should feel nocturnal, intentional, and a little luxe: fashion brand decks, creator personal brands, after-hours / nightlife / spirits launches, luxury product reveals, editorial features.
Sakura Chroma — Vintage Japanese cassette-package aesthetic: cream paper, diagonal rainbow ribbons, condensed bold type, JIS-style spec checkboxes. Anything that should feel like a vintage Japanese cassette package or a TDK / Sony / Sakura Color product catalogue: indie hardware brand decks, music-label release schedules, analog studio retrospectives, zine and magazine pitches, kawaii-tech product launches, creative-studio annual reports.
Ink.js (React for CLI) design and implementation guide. Use when: (1) Creating or modifying Ink.js components (2) Implementing Ink-specific hooks (useInput, useApp, useFocus) (3) Handling emoji/icon width issues (string-width workarounds) (4) Building terminal-responsive layouts (5) Managing multi-screen navigation (6) Implementing animations (spinners, progress bars) (7) Optimizing performance (React.memo, useMemo) (8) Handling keyboard input and shortcuts (9) Testing CLI UI (ink-testing-library)
This skill should be used when the user asks about TUI input handling, raw mode, cbreak mode, terminal keyboard parsing, Esc vs Alt ambiguity, Ctrl-C, shortcuts, focus management, mouse events, scroll wheel, bracketed paste, paste safety, command palettes, forms, text editing, resize events, or keybinding design. PROACTIVELY activate for: raw mode, keyboard input, keybindings, mouse support, paste handling, focus model, terminal forms, text input, vim/emacs-style shortcuts, input conflicts, and cross-platform Windows/macOS/Linux input behavior. Provides: input architecture, shortcut rules, focus patterns, paste/mouse safety, and failure-mode triage.
Reviews iOS animation code for correctness, performance, accessibility, and Apple API best practices. Use when reviewing .swift files containing animation code — withAnimation, .animation(), PhaseAnimator, KeyframeAnimator, matchedGeometryEffect, navigationTransition, CABasicAnimation, CASpringAnimation, UIViewPropertyAnimator, UIDynamicAnimator, symbolEffect, scrollTransition, contentTransition, or custom Transition conformances.
Add memorable color systems, adaptive layouts, scenario boards, and colorway prompts to existing logos, generated brand-system boards, mascot logos, base logos, app icons, wordmark lockups, seals, and identity sheets without changing the underlying symbol. Use when the user asks to add colors, recolor, create palettes, generate colorways, make color applications, increase first-glance impact, improve broad audience appeal, change the colorway board background/layout, or enhance a previously generated logo with brand colors.
Generate photorealistic interior and exterior redesigns from a photo using MeltFlex AI. Use when the user wants to restyle, redesign, declutter, virtually stage, or re-theme a room, facade, or garden; swap a floor, wall finish, staircase, doors or windows; redesign a kitchen or bathroom; turn a 3D draft into a photo; or preview a space in a different style, material, or season. Can also produce a cinematic video walkthrough; for 3D models and 3D worlds see the companion skill meltflex-3d. Works directly against the MeltFlex REST API — no extra install required.
Generate images and content consistent with the Nous Research brand identity. Use when creating visuals in the Nous / Theia / Hermes ecosystem: a "cyber-classical" style blending neo-classical statuary, cyberpunk/industrial grunge, and retro anime illustration. Covers official brand color palette, typography (Inter/IBM Plex Sans, JetBrains Mono, heavy distressed display faces), the Nous Girl mascot, texture system, and image prompt construction. Ships reference images for palette, mascot, and brand collage that can be used as img2img inputs. Do not use this skill for unrelated requests; route to the nearest named specialist.
Use external Windows Python and the originpro package to automate Origin/OriginPro plotting, control figure hierarchy from runtime to export, map arbitrary data to Worksheet/Matrix/Layer/Plot objects, apply publication-quality templates and Nature-style rules, batch export figures, and save editable OPJU projects. For publication-style figures, follow the embedded palette/style and hierarchy-control rules.
Model target players, motivations, emotions, pleasures, needs, flow, novelty, judgment, and interest curves. Use when defining who a game is for, shaping retention, diagnosing boredom or confusion, designing progression, or aligning gameplay with a desired emotional arc.
Create professional PowerPoint presentations from outlines, data sources, or AI-generated content. Supports custom templates, style presets, charts/tables from data, and AI-generated images. Use when asked to create slides, pitch decks, reports, or presentations.
Run the complete Gathered Scenes workflow from a supplied photograph to a static poster, a scene-authored adaptive v0.2 flat paper-tear Apple Live Photo ZIP, and optional handoff of that ZIP to the local Live Photo Importer. Use when the user wants the full source-to-Live-Photo flow with a custom narrative tear path and broad rounded low-frequency contours; do not use for static-only posters, 3D paper curls, or motion inside the photographed scene.
Use when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed. Prevents the double-border artifact caused by pairing a border/ring with a shadow, by routing elevation through the smooth-shadow-ring-* utilities.
Implements Syncfusion Flutter Calendar (SfCalendar) and Date Range Picker (SfDateRangePicker) widgets for date and scheduling UIs in Flutter apps. Use when building appointment calendars, booking systems, date range selectors, or event scheduling interfaces. This skill covers calendar views, recurring events, date navigation, localization, callbacks, and customization.
A comprehensive guide for implementing Syncfusion TypeScript ContextMenu component. Use this skill when building context menus that appear on right-click or touch-hold, including features like nested menus, dynamic items, animations, events, styling, and data binding. This skill covers everything from basic setup to advanced features like scrolling, accessibility, and custom templates.
How to implement Syncfusion JavaScript QueryBuilder component with comprehensive guidance on columns, data binding, rules management, filtering, templates, drag-drop interactions, import/export, and accessibility. Use this skill when users need help with QueryBuilder setup, rule creation, complex query building, advanced customization, or dynamic filter UI requirements in TypeScript applications.
Structured visual and usability audit of existing interfaces — landing pages, SaaS apps, portfolios. Screenshot-first review against taste rules, Nielsen heuristics, and accessibility floor; severity-ranked findings with specific fixes; before/after verification. Use when asked to critique, review, or improve an existing UI.
Use to compare and select interaction patterns for filters, permission editing, tables, bulk operations, and editing workflows; not for purely visual inspiration, direct implementation of a settled design, or code review. Deliver a design choice, state behavior, and acceptance criteria based on product constraints.
Translate natural language UI descriptions into IDS (Iress Design System) component implementations using @iress-oss/ids-components and @iress-oss/ids-tokens. Use when the user describes a UI in plain language and wants IDS component code, or asks to build a form, page, layout, or component using IDS.
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.