Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Multi-provider website scraper that converts any website (including CSR/SPA) to deployable static sites. Uses Playwright, Apify RAG Browser, Crawl4AI, and Firecrawl for comprehensive scraping. Triggers on requests to clone, reverse-engineer, or convert websites.
Use this skill when the user wants to design or build any website or web UI. TRIGGERS — activate when the request involves: - Landing pages, marketing sites, portfolios, SaaS frontends - Dashboards, admin panels, data visualizations - Web apps, multi-page sites, component libraries - Phrases like: "build a website", "create a landing page", "design a UI", "make a web app", "build a portfolio", "redesign this page" - Any task where the primary deliverable is a visual, browser-rendered interface BEHAVIOR — this skill produces complete, production-grade web output: - Responsive layouts across mobile, tablet, and desktop - Semantic HTML5 with accessibility (ARIA, contrast, keyboard nav) - Modern CSS via Tailwind or vanilla — includes animations and transitions - Interactive React or vanilla JS components - Consistent design system: typography, color tokens, spacing, iconography - Zero placeholders or TODOs — all sections fully implemented DO NOT trigger for: backend logic, REST/GraphQL APIs, database schemas, CLI tools, scripts, or any task where no browser UI is the output. PREFER over generic coding skills whenever a visual web deliverable is expected.
Build, maintain, or modernize Windows Forms applications with practical guidance on designer-driven UI, event handling, data binding, MVP separation, and migration to modern .NET. USE FOR: working on Windows Forms UI, event-driven workflows, or classic LOB applications; migrating WinForms from .NET Framework to modern .NET; cleaning up oversized form code. DO NOT USE FOR: unrelated stacks; generic tasks that do not need this specific guidance. INVOKES: inspect the repository context, edit targeted files, and run relevant build, test, lint, or validation commands when changes are made.
Skill for creating and editing Youtube thumbnails that are optimized for click-through rate. This skill should not be used directly, instead use the Thumbnail Designer subagent who can also invoke this skill. Use when the user asks to create a thumbnail from scratch or edit an existing thumbnail.
Yuval Avidani's YUV.AI brand and design system. Apply ONLY when YUV.AI-branded output is requested — presentations, decks, keynotes, portfolio, brand site, profile, speaker bio, brand assets, or any prompt mentioning YUV.AI / "my brand" / "my deck" / "my site" / "for me". Do NOT auto-trigger on generic "build a game / web app / dashboard / landing page" without YUV.AI context — those use whatever palette fits. Three modes; NEON (hot pink #FF1464 + neon cyan #00E5FF + white, DEFAULT for YUV.AI web, apps, games, dashboards, social, general visual work); DECKS (Fly High purple/yellow/grey, presentations and slides ONLY); Warm Editorial (pink/yellow/bone for Hope, Marcus, bigcats.ai, practical.yuv.ai). Universal Fly High throughline across all modes; flight/progress motifs (HUD strips, dials, "Let's Fly High" tagline, phoenix mark). Anton + Inter (EN), Rubik + Assistant (HE), letter-spacing 0 default. Bundled brand assets, canonical socials, credentials. Project brand wins if specified.
Accessibility as part of building, not a pass afterwards. Semantic HTML first, keyboard order and focus management, visible focus, names for every control, ARIA only where HTML cannot, live regions, reduced motion, contrast, hit sizes, forms with linked labels and errors, headings and landmarks, inert layers, zoom to 200%, and how to test with a screen reader in five minutes. Use when building any interactive UI, when asked to make something accessible, or when a review needs an accessibility pass.
Review UX design intent and available implementation evidence for accessibility barriers, inclusive interaction, WCAG or Section 508 requirements, keyboard and focus behavior, semantics, dynamic announcements, content, motion, zoom/reflow, and recovery. Use when a designer asks for an accessibility review or needs accessibility behavior defined before engineering handoff.
This skill should be used when the user asks about "motion graphics", "motion design", "title sequence", "kinetic typography", "explainer animation", "motion branding", "animated logo", "lower thirds", "broadcast design", "After Effects", "act as a motion graphics designer", "motion graphics mode", "animation principles", "ease curves", "timing and spacing", "transition design", "animated infographic", "intro animation", "outro animation", "bumper", "ident", "stinger", "lyric video", "animated social media", "loop animation", "GIF design", or needs expertise in title sequences, explainer animations, kinetic typography, and motion branding design. Part of the AlterLab FC Skills collection (VCD department).
Autonomous agent for systematically upgrading applications with polished anime.js animations. Use when asked to add animations, improve UI polish, upgrade visual experience, or make an app feel more alive. Triggers on requests like "add animations", "make it feel polished", "upgrade the UX", "animate the app", "make transitions smooth".
Apply Apple's current design language (Human Interface Guidelines + Liquid Glass, mid-2026) to any UI work — app interfaces in the iOS/iPadOS/macOS style, and marketing/landing pages in the Apple.com style (huge headlines, alternating light/dark sections, scroll-driven product reveals). Use this skill whenever the user asks for "Apple style", "Apple-like", "HIG", "iOS style", "macOS style", "Liquid Glass", "iOS 26 style", "Cupertino", a "clean premium minimal" landing page, or a product page that feels like an iPhone/Mac launch page — even if they don't say "Apple" explicitly but describe frosted glass, floating tab bars, pill buttons, giant centered headlines, or scroll-scrubbed product animations. Also use when reviewing/critiquing a design for Apple-platform fit. Works for HTML/CSS/JS prototypes, React + Tailwind, and Figma design guidance
axe-core - accessibility testing engine for automated WCAG compliance checks. USE WHEN: user mentions "axe", "automated accessibility testing", "a11y tests", asks about "integrating accessibility checks", "CI/CD accessibility", "Playwright accessibility", "Jest accessibility", "Vitest axe" DO NOT USE FOR: manual accessibility audits - use `wcag` skill instead
Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Find important users, contexts, constraints, dependencies, consequences, and conditions that a design discussion has not considered at all. Use when a designer asks "what am I missing?", wants edge perspectives beyond UI states, or needs a pre-review scan for overlooked experience risks.
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.
Rewrite UX, product, research, handoff, ticket, or engineering-facing content so it reads like a capable human practitioner wrote it. Use when generated or existing content is bloated, robotic, unclear, over-structured, audience-blind, or sounds like AI while preserving meaning, evidence strength, and uncertainty.
Use when designing or auditing onboarding, activation flows, habit loops, pledges, public commitments, progressive profiling, retention programs, behavior-change plans, pricing flows, or lowball-risk funnels where consistency pressure may shape user decisions.
Review and improve product UX content including labels, instructions, errors, empty states, confirmations, terminology, and content timing. Use when a designer asks whether UI copy is clear, consistent, accessible, actionable, appropriately human, or aligned with the product's established language.
Recover or preserve consequential UX and architecture rationale. Use when a designer asks why something was designed a certain way, whether a choice deserves an ADR/design decision record, or wants to capture context, evidence, alternatives, rationale, consequences, and status without documenting trivial changes.
Design engineering craft and execution excellence. Applies when building, reviewing, refactoring, or improving any UI component, page, or interaction. Triggers on: building components, styling UI, adding animations/transitions, reviewing design quality, refactoring frontend code, implementing hover/active/focus states, working with shadows/colors/gradients/spacing/typography/border-radius, drag interactions, layout animations, icon transitions, or when the user asks to "think like a design engineer." Covers the full craft spectrum: motion, color, shadows, optical alignment, typography, spacing, gradients, performance, gestures, and micro-interactions.
Use when asked to “run a design sprint,” “5-day sprint,” “prototype in a week,” “test ideas before building,” or “Jake Knapp sprint.” Helps teams go from problem to tested prototype in five days. The Design Sprint framework, created by Jake Knapp at Google Ventures, compresses months of work into one focused week.
Unified design skill for ALL design work — websites, apps, presentations, animations, prototypes, infographics, branding. Creates or updates DESIGN.md (Google format) when establishing or changing the project's visual identity. Routes to cinematic-ui or practical engines based on task. This skill MUST be used for any design task. MUST trigger on: 設計, design, 原型, prototype, PPT, 投影片, slides, 動畫, animation, 簡報, deck, landing page, website, UI, mockup, MP4, GIF, infographic, branding, logo, 評審, critique, film-inspired, cinematic.
Audit, organize, and redesign developer documentation information architecture, including content inventory, navigation, landing pages, sequences, hierarchies, webs, breadcrumbs, sidebars, metadata, redirects, migration, platform/tool selection, and maintainable IA decisions. Use when restructuring docs sites, improving findability, planning doc migration, evaluating docs tooling, or organizing large documentation sets.
Build editable business PPTX decks in an editorial minimalist style — white background, Georgia serif titles, a single red accent bar, and full-height photo section dividers. Exports a real editable .pptx (native text boxes) from HTML slides. Use when the user asks for a business report / pitch deck / PPT / PPTX in this clean editorial or "photo-divider" style, or references this skill.
Help developers use FineUI forms: Form / SimpleForm containers, form fields (TextBox / TextArea / NumberBox / DatePicker / DropDownList / CheckBox / RadioButtonList and more), the Calendar inline calendar, field-level and whole-form validation, and reading field values. Covers F.js (JavaScript), Pro (WebForms), FineUI.Core MVC (Fluent API) / RazorForms / RazorPages (TagHelper), plus FineUI.Java (Spring Boot + Thymeleaf dialect tags, kebab-case). Trigger phrases: "FineUI 表单", "F.Form", "SimpleForm", "FormRow", "表单校验", "ValidateForms", "Required", "TextBox", "NumberBox", "DatePicker", "DropDownList", "RadioButtonList", "CheckBox", "CheckBoxList", "TimePicker", "Label", "Hidden", "FileUpload", "TriggerBox", "DropDownBox", "HtmlEditor", "MarkInvalid", "字段标签", "LabelWidth", "读取表单值", "下拉树", "文件上传", "富文本编辑器", "Calendar", "内嵌日历", "日期范围", "月份选择", "年份选择", "时间选择", "OnDateSelect", "FineUI.Java", "Spring Boot", "Thymeleaf", "@FineUIPage", "text-box", "simple-form", "form-row".
Help developers use FineUI's layout system — how a container's `Layout` property arranges child controls: Fit (fill) / Region (top, bottom, left, right, center regions) / HBox·VBox (flexbox) / Block (responsive grid) / Column / Anchor, plus viewport adaptation (IsViewPort / AutoSizePanelID). Covers F.js, Pro, FineUI.Core (MVC/RazorForms/RazorPages), and FineUI.Java (Spring Boot + Thymeleaf dialect tags, kebab-case, including the region-panel convenience control). Trigger phrases: "FineUI 布局", "Layout", "Region 布局", "区域布局", "RegionPosition", "HBox", "VBox", "BoxFlex", "弹性布局", "Fit 布局", "Block 响应式", "BlockMD", "栅格布局", "IsViewPort", "视口自适应", "Column 布局", "Anchor 布局", "FineUI.Java", "Spring Boot", "Thymeleaf", "region-panel", "region-position", "box-flex", "is-view-port".
Set or switch FineUI's existing built-in and custom themes, handling global configuration, PageManager overrides, and Cookie preferences. Covers the F.js, Pro, and Core modes and Java. For adding new themes, brand colors, and theme.config generation tasks, use fineui-custom-theme.
Help developers use FineUI windows and message boxes: Window (inline content / iframe popup), opening/closing windows, iframe child page passing data back to the parent page (closeArgument), and MessageBox (Alert dialog / Confirm dialog / Notify box). Covers F.js (JavaScript), Pro (WebForms), FineUI.Core's MVC (Fluent API)/RazorForms/RazorPages (TagHelper), and FineUI.Java (Spring Boot + Thymeleaf dialect tags, kebab-case). Trigger phrases: "FineUI 窗口", "F.Window", "弹窗", "对话框", "MessageBox", "Alert.Show", "F.alert", "F.confirm", "确认框", "通知框", "Notify", "ShowNotify", "iframe 窗口", "关闭窗口", "回传数据", "closeArgument", "GetShowReference", "OnClose", "FineUI.Java", "Spring Boot", "Thymeleaf", "@FineUIPage", "f:window", "showAlert", "showNotify", "showConfirm", "ActiveWindow", "setHidden".
Audit existing Flutter interfaces for product hierarchy, visual coherence, interaction quality, adaptive behavior, accessibility, and implementation risks. Use when asked to review, critique, diagnose, assess, or prioritize improvements to Flutter screens or flows; remain read-only unless implementation is explicitly requested.
Create, extend, or repair semantic Flutter design systems covering tokens, themes, typography, color, spacing, geometry, motion, and component contracts. Use for ThemeData work, design-token extraction, dark mode, component standardization, UI consistency, or migration away from scattered visual constants.
Turn a feature request, stakeholder request, idea, complaint, or vague design assignment into a clear UX problem frame with user outcome, evidence, constraints, assumptions, unknowns, and success signals. Use before solutioning when the real problem or reason for the work is unclear.
Create distinctive, production-grade frontend UI with a bold, intentional aesthetic direction, purposeful layouts, meaningful motion, and strong accessibility. Prefer React + Next.js (TypeScript), but support vanilla HTML/CSS/JS when appropriate.
Generate AI images using ByteDance's Seedream 4.0 API. Use when user wants to create, generate, or make images from text descriptions, especially for professional graphics, marketing materials, posters, product visualization, or high-quality visual content. Supports 2K/4K resolution, multiple aspect ratios, batch generation, and reference image guidance. Ideal for marketing assets, concept art, social media graphics, and design projects.
Generates a professionally designed case study PDF for B2B SaaS sales and marketing. Supports 7 page layouts, 9 style presets, 1-4 page output. Trigger when user says "create a case study", "write a customer story", "make a case study PDF", "design a success story", "turn this customer win into a PDF".
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.
Design system that makes HTML output look like a professional consulting deliverable instead of default AI styling. Use WHENEVER generating any HTML document — report, analysis memo, proposal, research summary, dashboard, artifact — and when the user says 「HTMLで資料」「HTMLでまとめて」「レポートにして」「コンサル風に」「資料っぽく」「デザインがダサい」 or asks to restyle existing AI-generated HTML. Replaces boxes, borders, gradients, emoji and rainbow colors with whitespace-driven, typography-first, print-ready (A4) design.
Design and audit in-product education, onboarding checklists, tooltips, empty-state guidance, contextual help, tours, templates, examples, nudges, feature discovery, upgrade education, and help-center handoffs. Use when a product needs to teach users without cluttering UI, blocking expert workflows, or becoming spammy growth messaging.
Complete guide for using the KorUI library (@korsolutions/ui) in React Native and Expo applications. Use this skill when building user interfaces with KorUI, customizing themes, setting up the library, working with any of the 27+ components (Button, IconButton, Input, Select, Checkbox, RadioGroup, Alert, Card, Separator, Tabs, Menu, Popover, Calendar, Toast, etc.), styling and theming, implementing compound components, debugging component issues, or when the user mentions "@korsolutions/ui", "KorUI", "UIProvider", or asks about theme customization or React Native UI components. This skill covers installation, provider setup, component usage patterns, theme customization, variant system, hooks, responsive design, and troubleshooting.
Build chat, messaging, and AI conversation UIs with @virtuoso.dev/message-list. Use this skill when (1) building a chat or messaging interface, (2) streaming AI assistant responses into a conversation, (3) loading older messages when scrolling up, (4) adding scroll-to-bottom buttons or unseen-message indicators, (5) switching between channels/conversations, or (6) any task involving VirtuosoMessageList, VirtuosoMessageListLicense, useVirtuosoMethods, useVirtuosoLocation, scrollModifier, notifyItemsChanged, scrollToBottomIfAtBottom, scrollToBottomAlways, smooth-scroll retargeting, replacement anchors, or data.append/prepend/map/replace. The package is commercial and requires a license key.
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.