Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Best practices for building a Flutter UI package on Material: custom components, ThemeExtension theming, consistent APIs, widget tests, app_ui_package scaffolding. Use when creating a UI package, working inside one, or in an app that consumes one: adding or reviewing a widget, wiring design tokens, exporting through the barrel file, or writing tests for a widget under lib/src/widgets, which pump through the package's pumpApp helper, so prefer this over general test guidance even when the ask is only "write its tests". Also use it when asked to approve what this skill forbids: importing package:<name>/src/... per file, skipping the barrel to "only pull in what I use", or a parallel theme system. Triggers on any request naming a package of shared widgets and design tokens, such as "create a ui package", "add a design token", or "is it fine to import from src".
Convert Markdown articles into polished HTML for publishing on WeChat Official Accounts. Apply professional CSS styling, syntax highlighting, and improved formatting. Use when the user asks to polish an article, convert it to HTML, optimize the WeChat Official Account format, or generate WeChat Official Account HTML.
Design, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.
DTC brand positioning and identity — positioning canvas, brand voice, brand story, visual identity. Triggers: 品牌定位, brand positioning, 品牌声音, 品牌故事, 视觉识别, 品牌规范, 品牌升级, brand voice, brand story, visual identity, rebrand. Route complex questions through afa first.
DTC conversion rate optimization — checkout optimization, abandoned cart recovery, landing pages, A/B testing, trust and accessibility. Triggers: 转化率, CRO, 加购, 结账, 弃单, 落地页, A/B测试, 转化漏斗, conversion rate, abandoned cart, checkout optimization, landing page, a/b test, add to cart. Route complex questions through afa first.
Builds slide decks for research talks as AI-generated slide images (Nano Banana Pro via OpenRouter), PowerPoint, or LaTeX Beamer, providing slide structure, design templates, timing guidance, and visual validation. Use when making conference presentations, seminar talks, research presentations, thesis-defense slides, or any scientific talk deck. For a research poster use alterlab-latex-posters or alterlab-pptx-posters; to auto-generate a narrated video from a paper use alterlab-paper-2-web. Part of the AlterLab Academic Skills suite.
Angular + BEM CSS methodology guide for creating reusable components and shareable front-end code. Enforces component-scoped BEM blocks, max 2-level nesting, proper component decomposition, semantic element naming, correct modifier patterns, and flat selectors. Use when writing, reviewing, or refactoring Angular component styles. Triggers on tasks involving CSS, SCSS, SASS, component styling, BEM naming, or CSS architecture.
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
Creates performant CSS-first web animations and chooses the right feedback for an interaction: transitions, View Transitions, scroll-driven motion, Motion for React, reduced motion, and perceived performance. Triggers on “animate this,” “hover effect,” “feel faster,” “skeleton loader,” and “/animations.”
Use when building or restyling devtools-style Vue 3 UIs with @antfu/design — wiring the composable UnoCSS preset, using the semantic token vocabulary (bg-base, color-base, badge-color-*, color-scale-*), choosing prefixed primitives (DisplayBadge, ActionButton, DisplayFilePath, OverlayModal, …), and keeping light/dark contrast and the "anti-slop" rules. Reach for it whenever generating or reviewing UI in a project that depends on @antfu/design.
Provides a workflow for building and reviewing high-quality React and React Native UI with the Coinbase Design System (CDS). Use this skill to create UI or make visual changes to existing UI with CDS components, tokens, style props, icons, and illustrations. Use it for explicit CDS-adherence audits and reviews, not non-visual logic, data, analytics, navigation, tests, generated code, or refactoring. Examples: "build this screen", "fix spacing on this component", "replace this UI with CDS components", "perform a CDS audit on our changes", "check our codebase for CDS adherence", "does this feature use CDS well?"
Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).
Create LinkedIn carousel posts as high-quality PNG images. Design informational multi-slide posts like "5 AI GTM workflows" with consistent styling, then automatically screenshot each slide at LinkedIn's optimal 1080x1080px format.
Deneb visual creation, Vega/Vega-Lite spec authoring, and Deneb best practices for PBIR reports. Automatically invoke whenever the user mentions "Deneb" in any context, or asks about Vega/Vega-Lite specs in Power BI, Deneb cross-filtering, Deneb interactivity, pbiColor theme integration, Deneb field name escaping, or Deneb rendering issues.
Translate a design (Figma mockup, spec, screenshot, or verbal description) into code with pixel- and motion-level fidelity, using the browser's rendering pipeline as a constraint: exact spacing/timing via tokens, GPU-safe animations, no layout thrashing, 60fps interactions. Use when the user says 'implement this design', 'make it match the mockup', 'it doesn't look like the Figma', 'the animation stutters/drops frames', 'set up design tokens', or when a diff between design and implementation needs to be closed. Produces the faithful implementation plus a fidelity report (design value → implemented value → any deviation and why) and performance notes.
Anti-slop design skill for landing pages, portfolios, and marketing sites. The agent reads the brief, infers a deliberate design direction, and ships interfaces that do not look AI-generated. Ban the LLM defaults, set typography and color deliberately, run the pre-flight checklist before finishing
Generate a DESIGN.md design-system spec (color tokens, typography, spacing, shadows, components) and optional HTML preview from any website URL using the designmdme CLI. Use when the user wants to extract, capture, replicate, or reference a website's design system or visual style — e.g. "build a UI like stripe.com", "match this brand's look", "get the design tokens for linear.app", "make my app look like notion.so", or any time you need an accurate color palette, font stack, or component styling from a real site before writing UI code.
Use this skill for any user-facing frontend UI task involving React, TypeScript, Tailwind CSS, shadcn/ui, product pages, dashboards, settings pages, admin tools, app shells, tables, forms, detail views, landing pages, or UI redesigns. This skill is especially important when the user asks for production-quality UI, "not AI demo style", "not template-looking", "Linear/Vercel/Stripe style", "design first then code", "frontend-skill", "shadcn constraints", or asks to polish/rebuild a bad-looking frontend. Do not use it for backend-only work, algorithm-only work, CLI-only work, or throwaway prototypes.
Visual and front-end development assistant powered by Google Gemini's multimodal models. Use for UI analysis, design comparison, accessibility audits, color palette extraction, screenshot-to-code conversion, generating UI assets, and text-based design assistance from briefs.
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
Use when user asks to create/design a big screen (大屏), full-screen data visualization, or says "创建大屏", "生成大屏", "新建大屏", "设计大屏", "做一个大屏", "BI大屏", "数据大屏", "可视化大屏", "监控大屏", "create big screen", "design big screen", "BI visualization big screen". Also triggers when user describes big screen requirements like "做一个销售数据大屏" or mentions full-screen display like "展厅展示", "监控室大屏". Make sure to use this skill for big screens (大屏) — NOT dashboards (仪表盘/看板), which use a completely different layout and styling system.
Implementation guide for building and modifying UIs and pages with Lism CSS. Depending on the size of the change, it covers Primitive selection, token matching, use of Property Class/Lism Props, responsive design, and anti-pattern checks. Also useful for reverse lookups of classes and tokens in the b--*, c--*, l--*, a--*, is--*, has--*, set--*, u--*, and -prop:value formats.
Implements media and file management components including file upload (drag-drop, multi-file, resumable), image galleries (lightbox, carousel, masonry), video players (custom controls, captions, adaptive streaming), audio players (waveform, playlists), document viewers (PDF, Office), and optimization strategies (compression, responsive images, lazy loading, CDN). Use when handling files, displaying media, or building rich content experiences.
Guidelines for creating responsive email templates using MJML framework with .NET Razor syntax integration. Use when building responsive email templates in .NET applications, integrating MJML with Razor views, or creating email layouts that work across email clients.
Whole-app redesign of an existing React Native / Expo app - full audit (tokens, navigation vs the Nav Read rules, screen archetypes, dial reading), preserve-vs-overhaul decision, then a phased modernization plan executed lever by lever across screens with checkpoints and a risk governor. The only skill in this suite allowed to propose navigation restructuring (approval-gated). Use when asked to redesign, overhaul, rebrand, or modernize an entire app. For one screen use mobile-redesign-screen; for an audit without changes use mobile-design-review.
Use oil-ppt to create, modify, continue, check, and build 16:9 HTML presentations, and export hybrid editable PPTX as needed. Pairs with oil-tone by default to handle audience-facing copy, with each page as standalone HTML. Use when the user asks to create a presentation, refine page by page, batch-review, or deliver an offline presentation. Not for scrolling web pages, ordinary articles, or a single poster, and it does not treat any existing PPTX as a losslessly importable source project.
Step 2 of the PaperOrchestra pipeline (arXiv:2604.05018). Execute the visualization plan from outline.json — render plots and conceptual diagrams from experimental_log.md and idea.md, optionally refine via VLM critique loop, and produce context-aware captions. Runs in parallel with the literature-review-agent. TRIGGER when the orchestrator delegates Step 2 or when the user asks to "generate the figures for my paper" or "render the plots from this experiment log".
Write production-ready print stylesheets. Covers @page rules, page breaks, visibility, color management, typography, images, links, tables, and framework-specific gotchas for Next.js/React/Tailwind. Use when the user asks to add print styles, make a page printable, or create a print-friendly layout.
Responsive web design sub-skill. Provides mobile-first layout patterns, CSS Grid/Flexbox strategies, responsive images, fluid typography, container queries, and breakpoint systems. Pull this in whenever building or reviewing UI that must work across mobile, tablet, desktop, and large screens. Triggers on: "make it responsive", "responsive design", "mobile-first", "breakpoints", "fluid layout", or any request involving cross-device layout.
Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera flies from outside each scene into its interior, then flows on to the next scene with NO cuts — one continuous connected flight (Emons-style isometric diorama world, or any art direction you pick). The skill interviews the user for the topic, the story beats/sections, and brand kit, then generates cohesive scenes + seamless camera clips with Higgsfield and wires a portable, framework-agnostic scroll-scrub engine. Use when the user wants a "3D world" / "browse-through-the-industry" hero, a scroll cinematic, a diorama landing, or to turn a business into a scrollable world.
Convert PDF presentations to HTML slide templates using a visual reproduction approach. Pipeline: PDF → slide screenshots → Claude writes HTML matching each screenshot. Use when the user wants to convert a PDF to HTML slide templates, reproduce a presentation as HTML, or create reusable templates from existing decks. Triggers: 'pdf to html', 'convert pdf to template', 'reproduce this deck as html', 'create template from pdf'.
Social Media Matrix Tracker dashboard template. Use when users ask for a cinematic, data-dense social media analytics dashboard with multi-platform metrics, interactive charts, hover insights, range compare, and dark/light theme switching in a single HTML artifact.
Build, redesign, or visually refine product interfaces using project evidence, real content, functional states, and deliberate composition. Use for implementation work on websites, apps, dashboards, landing pages, or component systems. Do not use for read-only audits or logic-only changes.
Design or review product experiences through user goals, journeys, information architecture, task flows, interaction models, feedback, recovery, and cross-screen continuity. Use when the primary question is how users understand and complete a goal across steps or surfaces. Do not use for visual styling, implementation-only logic, or unsupported user-research claims
Comprehensive guide for implementing Syncfusion EJ2 JavaScript input components including CheckBox, ColorPicker, MaskedTextBox, NumericTextBox, OTP Input, RangeSlider, Rating, Signature, TextArea, TextBox, and Uploader. Use this when adding checkboxes, color selection, masked formatting, numeric inputs, OTP entry, range sliders, star ratings, signature capture, text inputs, or file upload to TypeScript/JavaScript applications.
Mandatory audit workflow for UI/UX changes that reads current state FIRST, checks for redundancy, respects clean design philosophy, and identifies genuine gaps before implementation. Auto-invoked when user mentions UI, UX, design, layout, homepage, page improvements, visual changes, or interface modifications.
Analyze and synthesize user research findings into structured, actionable insights. Use when given user research data, interview transcripts, survey results, or user feedback that needs to be analyzed and summarised. Produces a themed synthesis with prevalence data, supporting quotes, pain points analysis, feature request prioritisation, and recommended next steps. For interview transcripts specifically use user-interview-synthesis instead.
Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.
Converts academic papers into promotional and presentation formats with the third-party Paper2All pipeline (LLM calls routed through OpenRouter/OpenAI) — interactive websites (Paper2Web), presentation videos (Paper2Video), and conference posters (Paper2Poster) from a paper PDF and its LaTeX sources. Use when disseminating a paper, preparing for a conference, building an explorable academic homepage, generating a video abstract, or auto-generating a print-ready poster from a finished paper. For a hand-built LaTeX poster use alterlab-latex-posters; for a talk deck use alterlab-scientific-slides. Part of the AlterLab Academic Skills suite.
Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.
Generate optimized Gemini prompts for `asc app-shots generate` by analyzing app screenshots. Reads the screenshot image, identifies the app's purpose, key features, color scheme, and most compelling UI elements, then outputs a ready-to-run `asc app-shots generate --prompt "..."` command that produces professional App Store marketing screenshots. Use this skill when: (1) User asks to "generate a prompt for my screenshot", "optimize my app-shots prompt" (2) User wants help making their `asc app-shots generate` output look better (3) User says "analyze this screenshot" or "create marketing screenshot" for an app (4) User mentions "app-shots prompt", "enhance screenshot prompt", or "ASO screenshot" (5) User has a composed screenshot and wants to improve it with AI
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.