Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Manages Starwind UI v3 in Astro and React projects—initializing, migrating, adding, updating, searching, debugging, styling, theming, and composing styled components, Primitive adapters, or Runtime integrations. Use for Starwind components, starwind.config.json, Tailwind CSS v4 themes, V2-to-V3 migration, or Starwind CLI/MCP work.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Comprehensive guide for implementing Syncfusion Blazor MultiColumn ComboBox component. Use this when displaying structured data in a dropdown with multiple columns, filtering, selection, paging, virtualization, grouping, and customization options. Perfect for complex data structures and advanced filtering scenarios in Blazor applications. Covers all MultiColumn ComboBox features from Syncfusion.Blazor.MultiColumnComboBox package.
Conduct accessibility audits against WCAG 2.2 guidelines. Evaluate pages, components, and flows for conformance at A, AA, and AAA levels. Identify issues, assess severity, provide code fixes, and generate audit reports. Covers automated testing, manual testing, keyboard navigation, screen reader compatibility, color contrast, and semantic HTML.
Summon shadow clones: genjutsu's full-scale pipeline for a whole website or web app, from scratch or as a full redesign. Harvests the client's real material, researches in parallel, lets Impeccable lead the direction and genjutsu the motion, builds the pages with parallel agents, then loops fixes, verdicts and a cold-eyes art director until only minor issues remain, the round cap of the chosen tier is reached, or a round fixes nothing. Announces its cost first and asks twice. Web. Needs a host that can spawn subagents.
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.
Integrate, fix, review, migrate, test, or debug Duit / flutter_duit backend-driven UI in Flutter applications. Use when a task mentions DUIT, flutter_duit, backend-driven UI, BDUI, server-driven UI, XDriver, DuitViewHost, DuitRegistry, HTTP or WebSocket transports, custom Duit widgets, components, capability delegates, compile-time DUIT flags, or rendering JSON layouts from a backend.
Expert patterns for porting desktop games to mobile, including touch control schemes (virtual joystick, gesture detection), UI scaling for small screens, performance optimization for mobile GPUs, battery life management, and platform-specific features. Use when creating mobile ports or cross-platform mobile builds. Trigger keywords: TouchScreenButton, virtual_joystick, gesture_detector, InputEventScreenTouch, InputEventScreenDrag, mobile_optimization, battery_saving, adaptive_performance, MOBILE_ENABLED
Use when asked to "build habit-forming products", "Hooked model", "trigger action reward investment", "create sticky behavior loops", or "design habit loops". Helps design products that form unprompted user habits. The Hooked Model (created by Nir Eyal) explains how products create habits through Trigger, Action, Variable Reward, and Investment.
Write well-considered semantic HTML that serves all users. Use when creating components, page structures, or reviewing markup. Emphasizes native HTML elements over ARIA. Treats proper document structure and accessibility as foundations rather than afterthoughts.
Implement Syncfusion Blazor Toolbar (SfToolbar) component for creating interactive command bars and toolbars. Use this when working with toolbars, command bars, or action bars with buttons and icons. This skill covers responsive toolbars with overflow handling, item configuration and alignment, keyboard navigation, accessibility features, and dynamic item management.
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components—not for simple single-file HTML/JSX artifacts.
Expert blueprint for digital card games (CCG/Deckbuilders) including card data structures (Resource-based), deck management (draw/discard/reshuffle), turn logic, hand layout (arcing), drag-and-drop UI, effect resolution (Command pattern), and visual polish (godot-tweening, shaders). Use for CCG, deckbuilders, or tactical card games. Trigger keywords: card_game, deck_manager, card_data, hand_layout, drag_drop_cards, effect_resolution, command_pattern, draw_pile, discard_pile.
When you want to draft, update, convert, or export a slide deck for a React/Next.js slide system (${SLIDE_DECK_REPO:-$HOME/code/your-slide-deck-site}/src/app/slides/). Writes TypeScript Slide[] arrays using your primitives (Eyebrow, Heading, Accent, Body, BulletList, Divider, TwoCol, GradientText), 12 cycling brand gradients, optional sections for "where am I" context, and speaker notes. Inspired by zarazhangrui/frontend-slides — "show, don't tell" for narrative (presents 3 angles, you pick) plus density modes (speaker-led vs reading-first). Four modes — new (draft from brief), update (modify existing, with overflow guards), ppt (convert legacy PPTX → React deck), export (Playwright snapshot existing React deck to standalone HTML, PDF, or Vercel URL — keeps brand). Triggers on "/slide-deck," "/slides new," "/slides export," "/slides update," "/slides ppt," "draft a deck," "deck for [topic]," "talk on [topic]," "keynote on [topic]," "internal deck for [audience]," "convert this pptx," "export this deck."
Guide for implementing Syncfusion Blazor Dashboard Layout component. Use this when building dashboard interfaces with draggable/resizable panels, state persistence, or responsive grid arrangements. Covers panel positioning, sizing constraints, drag-drop rearrangement, and adaptive layouts
Implement navigation menus using Syncfusion Blazor Menu Bar component. Use this skill to create horizontal or vertical menus with submenus, icons, events, animations, and data binding. Essential for building professional menu bars in Blazor applications
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.
Captures before/after screenshots of web pages or elements for visual comparison. Use when user says "take before and after", "screenshot comparison", "visual diff", "PR screenshots", "compare old and new", or needs to document UI changes. Accepts two URLs (file://, http://, https://) or two image paths.
Conversion rate optimization for marketing pages and lead-capture forms. Use when the user wants to improve conversions on a homepage, landing page, pricing page, feature page, blog CTA, contact form, demo form, or campaign page. For product onboarding use user-onboarding; for lifecycle email use marketing-automation; for pricing and paywalls use pricing-strategy; for A/B testing use ab-test-setup.
Implements responsive design systems with mobile-first breakpoints, container queries, fluid typography, and adaptive layouts using Tailwind CSS. Use when users request "responsive design", "mobile-first", "breakpoints", "fluid typography", or "adaptive layout".
Implement the Syncfusion Blazor Stepper component for multi-step workflows. Use when creating step-by-step navigation UI, wizards, form workflows, or progress tracking. Covers step-based navigation, wizard interfaces, step validation, animations, templates, and stepper customization in Blazor applications.
Uniwind best practices for React Native styling with Tailwind CSS. This skill should be used when writing, reviewing, or refactoring React Native code using Uniwind. Triggers on tasks involving Uniwind, className styling, Tailwind in React Native, NativeWind migration, or theming.
Covers publication-ready matplotlib figures for academic papers, slides, and reports—bars, trends, scatter, heatmaps, and multi-panel layouts—with this repository’s house style, print/vector export conventions, and parity with figures4papers demos. Use when the user is finalizing or creating such figures in matplotlib. Do not use for interactive dashboards or web viz (Plotly, Altair, Bokeh), exploratory-only plots without a publication target, dominant 3D or geographic mapping, or Illustrator/Figma-first infographic workflows.
Implement the Syncfusion Blazor ContextMenu component to build right-click menus, context-sensitive navigation, or popup menu systems. Use when you need hierarchical menu structures with nesting support, data binding, or custom templates. Covers setup, customization, events, and dynamic menu management.
Create responsive Blazor applications using Media Query component. Trigger when user needs responsive layouts, breakpoint-based rendering, screen size adaptation, multi-device support, or needs to conditionally render components based on device type. Essential for building adaptive UIs that work across mobile, tablet, and desktop devices.
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
Use when integrating, generating, modifying, testing, or reviewing typical and atypical HiUI pages in React projects. Suitable for data summary tables, standard tables, tree tables, left-tree-right-table layouts, data visualization, error feedback pages, drawer forms/details, full-page editing/details, converting nonstandard prototype screenshots into standard pages, modernizing legacy system screenshots/URLs/source code, and scenarios such as host-integration, rules-only, and legacy-host-compatible.
Implement Syncfusion Blazor Breadcrumb (SfBreadcrumb) control for hierarchical navigation. Use this when building breadcrumb trails, auto-generating items from URLs, or managing dynamic navigation sequences. This skill covers overflow modes, item templates, icon customization, and responsive layout configurations.
Unified Aura design guidance — components and tokens, page layouts, UX copy, forms and async feedback, and accessibility. Use when building or styling customer-facing UI, structuring pages, writing interface text, or implementing validation, loading, errors, and a11y.
Compatibility alias for `design-system`. Use when an existing workflow, setup script, or user explicitly asks for `frontend-design-system`; route ordinary UI system, design-token, landing-page, dashboard, and component-library work to `design-system` instead. Triggers on: legacy skill name, frontend-design-system alias, exact-folder compatibility, migration-safe UI system routing.
Use when asked to "define our core action", "North Star metric", "accruing benefits", "improve retention mechanics", "hierarchy of engagement", or "Sarah Tavel framework". Helps consumer products identify the actions and benefits that drive long-term retention. The Hierarchy of Engagement framework (created by Sarah Tavel at Benchmark) maps progression from core action to mounting loss.
Create professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business). Use when users request slide creation, presentations, or Marp documents. Supports custom themes, image layouts, and "make it look good" requests with automatic quality improvements.
Makes every report a Mobbin skill writes read like a person wrote it, in plain interface terms. Use only when a Mobbin skill writes prose for the user or asks for this skill by name; not for writing outside Mobbin skills. Removes the tells of AI-generated writing (em dashes, puffery, design buzzwords, rule-of-three, sign-offs) without changing a fact or adding one
Guide for implementing Syncfusion Blazor ListView component. Use this when building list-based interfaces with data binding, filtering, grouping, virtual scrolling, selection modes, and custom templates. Covers installation, templating, event handling, and advanced patterns.
Build interactive timeline components that display events and milestones sequentially. Use SfTimeline with alignment controls, custom items, and event handlers. This skill covers timeline configuration and customization for creating visual timelines in Blazor applications.
Add volumetric underwater god rays to a Three.js scene, marching one drifting swell field along every view ray at half resolution so the light shafts converge on the sun, parallax with the camera and carry rippling caustic streaks, with a shimmering surface underside, a sun that wobbles through the ripples, and the same light dappling fish as they swim through the beams. Use for underwater scenes, oceans seen from below, aquariums, reefs, kelp forests, diving and shipwreck scenes, schools of fish, sunbeams or light shafts through water, caustics, "rays of light shining through the ocean", or watery ripples on a background. Includes a reusable module and the Blue Hour sardine-school demo.
Generate validated AWS architecture diagrams as draw.io XML using official AWS4 icon libraries. Use this skill whenever the user wants to create, generate, or design AWS architecture diagrams, cloud infrastructure diagrams, or system design visuals. Also triggers for requests to visualize existing infrastructure from CloudFormation, CDK, or Terraform code. Supports two modes: analyze an existing codebase to auto-generate diagrams, or brainstorm interactively from scratch. Exports .drawio files with optional PNG/SVG/PDF export via draw.io desktop CLI.
Quick, professional single-slide PowerPoint creator for concept visualization, comparisons, feature showcases, and decision frameworks. Use when users need to create “one-page PPT”, “single slide presentation”, “快速做个PPT”, “做一页PPT”, or want to visualize concepts like “before/after”, “problem/solution”, “feature grid”, or “process flow” in presentation format. Ideal for visual summaries, product pitches, architecture diagrams, or comparison slides.
Escolher, compor e adaptar uma biblioteca de componentes React com Tailwind CSS para landing pages, marketing, navegação, formulários, dados, feedback e tipografia. Use quando uma interface React precisar de referências TSX reutilizáveis, exemplos visuais ou uma composição de página; use sempre em conjunto com a skill specsfy-specialist-ui-design, que governa hierarquia, layout, estados e coerência visual.
Guide to implementing Syncfusion Blazor ProgressBar components in Blazor applications. Use when displaying progress indicators, loading states, task completion status, or file upload progress. Covers linear and circular progress bars, indeterminate loaders, buffer states, and progress tracking. Ideal for visual feedback during operations, showing completion percentages, and any scenario requiring visual progress indicators
Implement Syncfusion Blazor Circular Gauge (SfCircularGauge) for radial data visualization. Use when creating speedometers, tachometers, KPI dashboards, or circular progress indicators. Covers needle pointers, gauge ranges, annotations, and circular metric visualization in Blazor applications
Guide to implementing the Syncfusion Blazor Carousel component for image galleries, product showcases, and content sliders. Use when the user mentions carousels, image sliders, slideshows, content rotation, product galleries, rotating banners, slide transitions, or displaying multiple items in a cycling presentation
Render a local web page / built site and capture full-page screenshots (desktop + mobile) using the pre-installed Chromium. Use when asked to screenshot, render, or "see how it looks" for the vigiles landing site (site/), the audit report (report/), or any local HTML/dev server. Handles the scroll-reveal gotcha (below-the-fold cards captured blank) automatically.
Premium utilitarian minimalism & editorial UI. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
Implement Syncfusion Blazor Linear Gauge (SfLinearGauge) for data visualization with linear scales. Use this when creating thermometer displays, progress indicators, or measurement visualizations. This skill covers axis configuration, pointers, ranges, and gauge appearance customization in Blazor applications.
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.