Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Multi-agent comprehensive slide review (visual + pedagogy + proofreading, plus TikZ / parity / substance conditionally). Use when user says "full review", "excellence pass", "comprehensive check", "review everything", "pre-release review", "slide excellence", or before teaching / shipping a deck. Fanout wrapper — for a single lens, use `/visual-audit`, `/pedagogy-review`, or `/proofread` directly.
Comprehensive guidance for building web apps with opinionated defaults for tech stack, design system, and code standards. Use when user wants to create a new web application, dashboard, or interactive interface. Provides tech choices, styling guidance, project structure, and design philosophy to get users up and running quickly with a fully functional, beautiful web app.
Comprehensive guide for implementing Syncfusion ASP.NET Core Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this skill ALWAYS and immediately when the user asks about any Syncfusion ASP.NET Core calendar, date picker, date range picker, time picker, datetime picker, calendar views, multi-selection, Islamic calendar, date range restriction, week numbers, day cell customization, renderDayCell, date selection, range selection, date formatting, date masking, globalization, localization, strict mode, accessibility, or any related calendar/date/time UI in ASP.NET Core tag helper applications.
Implements Syncfusion Flutter Chat (SfChat) and AI AssistView (SfAIAssistView) widgets for conversational interfaces in Flutter apps. Use when building chat UIs, AI chatbot interfaces, or messaging screens with support for message bubbles, composers, and action buttons. This skill covers conversation area customization, placeholder screens, theming, RTL support, and AI assistant integration.
Implements Syncfusion Flutter DataGrid (SfDataGrid) for displaying and manipulating tabular data in Flutter applications. Use when working with data grids, data tables, or column-based data presentation using the syncfusion_flutter_datagrid package. This skill covers DataGridSource, GridColumn configuration, sorting, filtering, paging, editing, and selection.
Learn how to implement and configure the Syncfusion TypeScript AppBar control for navigation bars, app headers, and UI toolbars. This skill covers responsive positioning, color modes, sizing, styling, and component integration. Use when building navigation solutions that require flexible layout and styling options.
Implement Syncfusion TypeScript Avatar components for user representations. Use when user needs to display user profiles, avatars with different shapes (circular or rectangular), custom sizing, media formats (images, SVG, icons, letters), color customization, or integrate avatars with other controls like Badge or ListView.
Learn to implement and configure the Syncfusion TypeScript Breadcrumb component for navigation. Use this skill when implementing breadcrumb navigation for web applications. Covers component initialization, item configuration, overflow handling, event management, and advanced customization.
Create and implement the Syncfusion TypeScript Stepper navigation component. Use this skill whenever a user wants to display a progress indicator with steps, implement a wizard workflow, show a multi-step process, display navigation between form pages, add step validation, or configure step-by-step guided experiences. Always reference this skill when working with Stepper controls, step configuration, orientations, events, or animations.
Build and debug the Three.js scene foundation: renderer setup, cameras, scene graph, transforms, resize handling, color management, render loops, and resource disposal. Use when creating a Three.js scene, choosing a camera or renderer, fixing coordinate space or hierarchy bugs, or establishing a reliable WebGL canvas baseline. Triggers on: three.js scene, WebGLRenderer, PerspectiveCamera, OrthographicCamera, Object3D, scene graph, camera setup, resize canvas, render loop, coordinate system, transform.
Analyze the photograph uploaded by the user, deconstruct its visual evidence, abstract and distill the essential relationships, then reconstruct them as a new nonliteral lower-panel composition guided by 19 bundled references. Use for CLEAN upper-photo/lower-abstraction editorial artworks with a number, date, and short phrase in the lower panel. This is abstraction and reconstruction, never style conversion or a miniature redraw. Preserve the exact user-uploaded photograph unchanged above.
Configures TYPO3 v14 Records module list types and custom backend views, including grid, compact, teaser, kanban-style, timeline-style, TSconfig, Fluid templates, icons, and accessibility. Use when the user mentions records list types, backend record cards, custom Records module views, grid view, compact view, teaser view, or TSconfig-driven record presentation.
Cross-cutting UI quality and dashboard-design skill. Covers the three tells of an amateur dashboard (data shapes the UI, progressive disclosure, hidden UI), plus the Refactoring UI principles (hierarchy, spacing, typography, color, depth, finishing touches) and how to apply each in Angular projects using Spartan/ng, PrimeNG, NG-ZORRO, or Angular Material. Use when the user asks to polish, refine, redesign, or "make this look better"; when building a dashboard, table, KPI surface, or data-heavy view; when the project has visual quality issues (low hierarchy, ambiguous spacing, grey-on-color text, color used as the only signal); or when the user mentions hierarchy, density, spacing, typography, palette, shadows, or empty states. Pairs with one of the library-specific skills (spartan-ng-developer, primeng-developer, ng-zorro-developer, angular-material-developer) for the implementation surface, and with angular-developer for the Angular fundamentals.
Use this skill whenever building, editing, or reviewing user-facing software with v0 — web apps, dashboards, marketing sites, component libraries, or any code change that produces visual output. Triggers on requests to "build a UI", "design a page", "make a component", "improve the look", "polish this", "make it production-ready", or whenever scaffolding a new app/screen/feature with visible surface area. Encodes v0's opinionated defaults for Tailwind CSS patterns, shadcn/ui components, design tokens, typography, spacing, color, motion, accessibility, and the component patterns that hold up under real users.
Turn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user provides a video file and asks for "a landing page from this video", "scroll-frame website", "Apple-style scroll site", "hero that scrubs the video", "like the GitHub Copilot landing", or any equivalent. Extracts N evenly-spaced frames via ffmpeg, builds a self-contained HTML page with a sticky hero + JS scroll listener that swaps the visible frame as you scroll, plus headline, sections and CTA below. For YUV.AI projects, applies the yuv-design-system skill in Neon mode (pink/cyan/white, default for YUV.AI web) — Decks (purple/yellow) is reserved for slides only. For generic / non-YUV.AI projects, picks an appropriate palette per the source video. Output is one folder with `index.html` and a `frames/` directory — drop on any static host.
Build or revise Webflow pages from supplied designs by reusing the site's existing classes, components, assets, responsive patterns, and interactions. Use for design-to-Webflow implementation, section rebuilds, responsive parity work, or Webflow cleanup where the existing site is the implementation system and the design is the visual source of truth.
Convert Markdown articles into inline-styled HTML usable in WeChat Official Accounts, using the kami paper-feel theme by default, with support for switching among multiple themes (kami, magazine-ink, magazine-indigo, magazine-forest, magazine-kraft, magazine-dune, elegant, modern, minimal) and configuration of parameters such as font, font size, accent color, background color, and output path. Used for Official Account layout, article HTML generation, replacing unstable external layout services, and especially suited to converting articles in this vault into a format that can be pasted into the WeChat Official Account editor.
Reference-only catalog of UI workaround recipes. Do NOT auto-load — invoke ONLY when the user explicitly asks for "1k-ui-recipes" or a specific recipe by name (iOS tab bar scroll offset, startViewTransition, collapsible tab horizontal scroll, Android bottom tab touch intercept, keyboard avoidance, iOS overlay navigation freeze, web keyboardDismissMode, iOS modal Fabric frame animation, Android background thread timers/microtasks).
Audit, implement, and fix web accessibility with a screen-reader-first lens. Use when building or reviewing UI components, forms, dialogs, navigation, dynamic content, or any interactive element. Covers WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, focus management, and assistive technology compatibility (NVDA, JAWS, VoiceOver). Trigger on: "accessible", "a11y", "screen reader", "WCAG", "ARIA", or when adding any interactive UI.
Operational rubric that turns "don't make AI slop" into observable properties, severity levels, evidence requirements, and repair actions for interface design. Use as the reference rubric when building or reviewing marketing sites, product interfaces, dashboards, portfolios, or e-commerce pages, especially alongside frontend-design.
Design and orchestrate multi-artifact Avonni solutions. MUST activate when a request spans more than one Avonni artifact type (Dynamic Component, Flow Screen Components, Experience site components) or describes a business use case rather than a single named artifact — e.g. a component plus the flow it launches. Do NOT use for a single artifact of a known type — use its skill directly.
Create or update Avonni Dynamic Components. Use when the user asks to build, generate, or modify a dynamic component, or when working with Dynamic Component JSON, queries, resources, or metadata files. Do NOT use when the request spans multiple Avonni artifact types or describes an end-to-end use case (a component plus the flow it launches, a portal page, etc.) — use the avonni-architect skill instead.
Turn a lesson plan into a teaching slide deck in Canva. Use when the user asks to build classroom slides from a lesson plan, convert a lesson plan into a presentation, make a teaching deck, create school slides from an outline, or generate a lesson deck for students. Input can be a lesson plan pasted in the message, a Canva design ID, a Canva doc or design by name, or a Canva design link (e.g., https://www.canva.com/design/...).
Use when analyzing competitor brands to find visual or positioning white space before making identity decisions, such as auditing competitor colors, typography, logos, imagery, and voice, or building a perceptual map. Keywords - competitive audit, competitor analysis, visual landscape, differentiation, white space, perceptual mapping, zig when others zag.
Enterprise Android/Kotlin skill for 2026 — Kotlin 2.x K2 compiler, AGP 9, Navigation 3, edge-to-edge Compose, strict MVI with atomic _state.update, banned AI antipatterns. Jetpack Compose, Hilt, Room, KMP, CameraX/ML Kit, performance, testing. Use when writing Kotlin for Android, building Compose UI, MVVM/MVI architecture, debugging recomposition, Room DAOs, Navigation 3, coroutines, or asking "structure Android app", "ViewModel UiState", "collectAsStateWithLifecycle", "edge to edge", "AGP 9", "K2 compiler", "Play Store release".
Turn a topic or existing document into an interactive Concept Atlas explainer — AI-editable MDX compiled to standalone HTML with concept nodes, relation graphs, math, charts, figures, citations, and reading aids. Use for technical explanations, concept maps, layered knowledge pages, dense explainers, or interactive teaching pages; also 概念图 / 知识地图 / 分层讲解
Genre pack: dark, precise, developer-adjacent minimalism — the Linear/Vercel/Stripe-dark school. Near-black surfaces, one restrained accent, fine hairline borders, compact type, subtle glow only on the accent, dashboard-ready density. Use for developer tools, infra products, AI platforms, and technical audiences. Stack on the design-taste core skill
Generates high-fidelity visual assets, logos, and UI mockups using the media-management MCP server. Trigger this skill whenever the user asks to generate an image, create a logo, produce a hero banner, design a UI icon, or build a visual asset. It is explicitly designed to handle technical specifications including file formats (PNG, JPEG, WEBP), specific dimensions (e.g. 1024x1024), and transparency requirements. Use this skill when the user needs to integrate generated imagery into application code or web pages. It ensures consistent output quality and provides a standardized SVG fallback if the generation tool is unavailable
Read and summarize Figma design context for UI/UX implementation, audit, and design-system work. Use this skill when the user provides a Figma URL, selected Figma node, frame, component, Dev Mode context, variables, library, or screenshot and wants structured facts about hierarchy, layout, tokens, components, assets, variants, interaction notes, or implementation constraints without mutating the Figma file.
Translate Figma frames and design context into implementation-ready frontend plans, component mappings, and code handoffs. Use this skill when a user wants to build from a Figma frame, compare Figma components to code components, use Code Connect, avoid pixel-copying, map variables to tokens, or decide whether work belongs in webapp-ui-skill, marketing-site-skill, or a local code implementation.
Implement or extend a user-facing workflow in a web application, integrating with existing backend APIs. Use when the feature is primarily a UI/UX change backed by existing APIs, affects only the web frontend, and requires following design system, routing, and testing conventions.
Creates professionally designed B2B SaaS e-books in HTML + CSS, exported as print-ready PDF. 3–10 pages, 9 style presets, 11 page layout types. Trigger when user says "create an ebook", "design a lead magnet", "make a PDF guide", "build a gated content piece", "write a B2B ebook", "design a white paper", "create a nurture asset", or "make a PDF report".
Beautiful, copy-paste-ready Home Assistant dashboard designs with complete CSS themes, card-mod styles, and button-card templates. Nine distinct visual styles: Glassmorphism, Dark Minimal, Material You, Nordic, Neon/Cyberpunk, Warm Home, Soft Pastel, Luxury Gold, and Retro Terminal. Use this skill whenever the user wants to make their dashboard look good, asks about card styling, CSS for Home Assistant, card-mod, button-card templates, Lovelace themes, dashboard aesthetics, or wants a specific visual style - even if they don't use the words "design" or "CSS".
Design and audit help center, documentation, support knowledge base, FAQ, troubleshooting, refund/cancellation guides, onboarding docs, developer docs, game support articles, and self-service support architecture. Use when reducing support load, improving customer success, structuring support content, or creating help content tied to product flows.
Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. WHEN TO USE: users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. WHEN NOT TO USE: component behavior, APIs, or data binding (use igniteui-angular-components or igniteui-angular-grids); building whole views from a design image or Figma file (use igniteui-angular-generate-from-image-design or igniteui-angular-figma-to-app).
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.