Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Search and retrieve CSS components, SVG icons, design patterns, and visual inspiration from the web. Use when the user asks to find, look up, or search for CSS snippets, SVG icons, UI components, loading spinners, animations, design inspiration, or any visual/frontend design resource. Triggers on requests like "find me a CSS button", "look up an SVG spinner", "search for a card component", "find a wave divider SVG", or "get design inspiration for a dashboard".
Select a consistent visual design system for PPT slides using radius/spacing style recipes. Use when users ask for overall style direction or component styling consistency. Includes Sharp/Soft/Rounded/Pill recipes, component mappings, typography/spacing rules, and mixing guidance. Triggers: 风格, style, radius, spacing, 圆角, 间距, PPT风格, 视觉风格, design style, component style.
Explore UI and visual design with image generation, then iterate the real implementation against the user-selected concept. Use when brainstorming visual directions, offering mockup variants, or implementing an approved generated design; do not stop at the mockups or the first code approximation.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
AI prompts for generating WeChat official account article cover images. Intelligently analyzes the article title and content, extracts the core value and visual theme, and generates professional prompts suitable for AI drawing tools such as Jimeng. Supports reading article content from context to ensure the cover closely matches the article topic. Use this skill when the user needs to generate a cover for a WeChat official account article, create cover image prompts, or illustrate an article.
Write user stories that account for disability and diverse abilities from the start. Use when writing user stories, acceptance criteria, jobs to be done, or requirements. Triggers on: user story, user stories, acceptance criteria, jobs to be done, JTBD, requirements, as a user I want, definition of done, story writing.
Load this skill for any project with interactive UI, such as buttons, links, forms, modals, dropdowns, menus, tabs, sliders, toolbars, carousels, or custom widgets, in React or vanilla JavaScript. Never ship an interactive element that cannot be fully operated by keyboard alone. Always ensure a visible focus indicator, logical tab order, correct widget key behavior, and no keyboard traps. Targets WCAG 2.2 Level AA.
Use when Codex must rebuild an existing slide image, screenshot, or image-only PPTX page into an editable .pptx replica, especially Chinese business report slides with editable text, cards, arrows, complex visuals, and independently movable generated image assets.
Integration patterns between Kuroco and frontend frameworks such as Vite / React / Nuxt.js / Next.js (implementing SPA, SSG, SSR). Covers screen design and design improvements for Kuroco sites (suppressing formulaic AI phrasing, splitting management responsibilities between Kuroco and the frontend), content display in SPA / SSG (including switching the hosting destination when SSR or ISR is required), login, member registration and auth state management (Cookie auth, dynamic access tokens), avoiding third-party cookie issues, XSS protection, deciding the hosting destination (KurocoFront by default, confirmation items when Vercel or Codex Sites is specified), and deployment to KurocoFront (kuroco_front.json, GitHub integration, direct deployment via Admin MCP). Use for requests involving Kuroco site screen design or visual fixes, frontend-to-Kuroco integration, auth state management, static generation and dynamic routes, deployment, or choosing the hosting destination.
Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter. Support for conference presentations, academic posters, and scientific communication. Includes layout design, color schemes, multi-column formats, figure integration, and poster-specific best practices for visual communication.
For real publishing scenarios such as WeChat official accounts, websites, apps, proposals, and posters, establish audience, brand role, component conventions, and information-visibility gates for reader-facing text. Use when generating, editing, rendering, publishing, or reviewing audience-facing copy for brand and context fit.
Third-party perspective analysis and improvement skill for marketing pages. Target: landing pages, homepages, pricing pages, feature pages, blogs. Integrates CRO frameworks with direct response principles (Schwartz/Hopkins/Ogilvy). When to use: (1) page audit or analysis requests, (2) conversion improvement consultations, (3) copywriting improvements, (4) A/B test design, (5) implementation prioritization. Trigger examples: "analyze my LP," "I want to raise conversion rate," "review my pricing page," "improve my hero section," "optimize my CTA," "homepage improvement ideas."
Audit an existing React Native / Expo app's design - run the AI-tells grep checklist, inspect screens against a ten-category rubric, Trunk Test each screen, and produce impact-rated findings with a Design Score and an AI Slop Score plus a regression baseline. Report-only by default; opt-in fix mode. Use when asked to review, audit, critique, or QA an app's design or UI quality. For building new screens use mobile-taste; for actually redesigning use mobile-redesign-screen or mobile-redesign-app.
Propose and generate a React Native app's design system - semantic color tokens (light + dark), type scale with Dynamic Type bounds, radius/elevation/spacing scales, haptics and motion posture - as a SAFE/RISK proposal, then write the actual theme files (NativeWind config or StyleSheet tokens) and MOBILE-DESIGN.md. Use when starting an app's visual identity, when asked for a theme/palette/design tokens, or when an app has inline styles and needs a token system. For building screens with the system use mobile-taste; for auditing an existing app use mobile-design-review.
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," or "new user experience." For signup/registration optimization, see signup-flow-cro. For ongoing email sequences, see email-sequence.
A UI design guide for personal frontend aesthetics, function-driven information organization, and continuous evolution. Use when designing, building, polishing or reviewing this user's frontend UI, dashboards, charts, forms or admin panels; choosing task-fit interactions such as joint rankings, rollups and drill-down; following 我的品味/个人审美; or recording approved feedback. Applies scoped preferences and interaction patterns across projects. Not for backend-only work.
Clone live web pages into a local Next.js + Tailwind CSS project for rapid prototyping. Use this skill whenever a user shares a URL or screenshot and wants to replicate, redesign, or iterate on that page locally — whether they say "clone this site", "make a prototype based on this page", "recreate this UI", "build something that looks like this", or simply paste a link and ask you to turn it into code. Also trigger when the user wants to add new pages, modify existing pages, or extend a prototype project that was previously created by this skill. Even if the user just says "I want to build a page like X" with a reference link or image, this skill applies.
Use this skill any time a .pptx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx file (even if the extracted content will be used elsewhere, like in an email or summary); editing, modifying, or updating existing presentations; combining or splitting slide files; working with templates, layouts, speaker notes, or comments. Trigger whenever the user mentions \"deck,\" \"slides,\" \"presentation,\" or references a .pptx filename, regardless of what they plan to do with the content afterward. If a .pptx file needs to be opened, created, or touched, use this skill.
Audit an existing interface for respect of user preferences including motion, contrast, colour scheme, and text scaling. Chains: user-preference-respect, responsive-accessibility, colour-independence. Use when reviewing an existing product for adaptive behaviour.
Create publication-quality scientific diagrams using Nano Banana 2 AI with smart iterative refinement. Uses Gemini 3.1 Pro Preview for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.
Build slide decks and presentations for research talks. Use this for making PowerPoint slides, conference presentations, seminar talks, research presentations, thesis defense slides, or any scientific talk. Provides slide structure, design templates, timing guidance, and visual validation. Works with PowerPoint and LaTeX Beamer.
Audit how well a page can be operated by AI agents and agentic browsers — semantic interactive controls (<button>/<a href> instead of div/span click handlers), named buttons and links, labeled form controls, no javascript: hrefs, primary content outside iframes, and WebMCP detection — following Google's generative-AI guidance and the web.dev agent-friendly websites guide. Module M22 "Agent-readiness". Feeds the AI Visibility score (weight 4, all directional).
Spatial planning for buildings: floor plan layout and archetypes, circulation design (corridors, stairs, elevators, escalators), core design and vertical service distribution, vertical stacking strategy, net-to-gross optimization, space efficiency metrics, wayfinding, and spatial legibility.
Specify adaptive behaviour for an interface. Chains: user-preference-respect, responsive-accessibility, flexible-typography, colour-independence, simplified-views, information-density. Use when designing a new interface and you want to build adaptability in from the start.
Comprehensive guide for implementing Syncfusion TypeScript dropdown components including AutoComplete, ComboBox, Mention, Dropdownlist, Multiselect, ListBox, and MultiColumn ComboBox. Use this when building selection interfaces, data binding, filtering, cascading dropdowns, dual list transfer, custom templates, and accessible dropdown experiences.
Comprehensive guide for implementing Syncfusion EJ2 JavaScript Popup components including Dialog, Predefined Dialog (DialogUtility), and Tooltip. Use this when building modal/modeless dialogs, alert/confirm windows, draggable dialogs, resizable windows, popovers, tooltips, and overlaid content with custom positioning, animations, WCAG 2.2 accessibility, forms integration, and event handling in TypeScript/JavaScript applications.
Analyse accessibility tradeoffs when a design decision improves accessibility for one group but may affect another, or when accessibility competes with other requirements. Use when facing conflicting accessibility needs, business pressure to reduce accessibility scope, or technical constraints that limit accessibility options. Triggers on: tradeoff, trade-off, compromise, accessibility vs performance, accessibility vs deadline, conflicting needs, which users, who do we prioritise, can't do both, accessibility scope.
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
Use when the user wants a marketing image GENERATED or an image prompt written — personal brand portraits, logos and monograms, campaign key visuals, day-to-day social graphics, editorial art, infographics, web hero mockups, and quote graphics. Reads brand identity from project context, composes an on-brand prompt, generates via gpt-image-2 when an API key exists, otherwise outputs paste-ready prompts for DALL-E 3, MidJourney, Leonardo, or Ideogram. Trigger on 'design an image', 'make me a logo', 'MidJourney prompt', 'key visual for the campaign', 'generate a graphic for this post', 'I need a visual and have no designer'. Not for — briefing a human designer on a static, see `42-image-brief-global`; a slide sequence, see `43-carousel-brief-global`; the brand rules themselves, see `46-brand-guideline-global`; scoring a finished design, see `47-design-review-global`.
Creates professional infographics with Nano Banana Pro AI and smart iterative refinement, using Gemini 3.1 Pro for automated quality review and an optional Perplexity Sonar research phase for sourced data — supports 10 infographic types, 8 industry styles, and colorblind-safe palettes. Use when the request is for an infographic, data-story graphic, statistical poster, comparison chart, timeline, process/how-to visual, or list/social graphic that pairs a designed layout with figures. Use alterlab-scientific-schematics instead for technical flowcharts, CONSORT/PRISMA, pathways, or architecture diagrams; alterlab-generate-image for non-infographic illustrations; alterlab-matplotlib for exact plots of a dataset. Part of the AlterLab Academic Skills suite.
Generates Xiaohongshu (Little Red Book) infographic series with 9 visual styles and 6 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
Beamer LaTeX slide workflow: create, compile, review, and polish academic presentations. Use this skill whenever the user works on Beamer .tex slide decks, or asks to create slides, make a presentation, prepare a lecture, build a talk, or generate Beamer slides from a paper PDF or Markdown. Covers: creation, editing, compilation, proofreading, visual audit, pedagogical review, TikZ diagrams, figure extraction, and comprehensive quality checks. Trigger on: beamer, slides, lecture, presentation, seminar talk, conference talk, defense slides, tikz, compile latex, proofread slides, slide review, 讨论班, 论文讲解. Do NOT trigger on: powerpoint, pptx, PPT, 做PPT — use the powerpoint-slides skill instead.
Create new UI elements for the tryelements.dev registry. Use when: (1) Adding new UI components (buttons, inputs, cards), (2) Building integration components (Clerk, Stripe, Uploadthing), (3) Creating theme-related elements, (4) Any shadcn-style registry component. IMPORTANT: For logo components with variants (icon/wordmark/logo + dark/light), use the logo-with-variants skill instead. This skill includes scaffolding, registry schema, and component patterns. ALWAYS use Context7 MCP to fetch latest dependency docs before implementing.
Build a complete, AI-consumable design system from any design reference — a style description ("dark mode fintech with glassmorphism"), a screenshot/image of an existing app, or a Figma link. Outputs structured design tokens (JSON), CSS variables, a Markdown specification, and an HTML preview page — all designed to be fed directly into AI coding agents (like frontend-design) so they produce visually consistent interfaces without guessing. Use this skill whenever someone asks to: create a design system, extract design tokens, build a component library, generate a style guide, define a color palette or typography scale, standardize their UI, or prepare design context for AI-assisted development. Also trigger when someone says things like "make my app look consistent", "I need a theme", "set up design variables", "create a style foundation", or "extract the style from this design".
Apply senior designer judgment to any frontend UI — React, HTML/CSS, Framer, or any web component. This skill is the result of hands-on research into what actually works and what doesn't when giving AI agents design judgment: not theoretical guidelines, but principles battle-tested through real projects and iteration on AI-generated output. Use it whenever the user is building, reviewing, or iterating on UI code and design quality matters. Triggers include: creating components or pages, reviewing existing UI, asking for design feedback, building dashboards or data displays, refining visual hierarchy, working on Framer components, or any task where the output includes rendered interface elements. Even if the user only asks to 'make it look better' or 'clean this up', use this skill — it contains the principles that separate intentional design from generated slop.
Audit and implement an app's error UX end-to-end: rewrite error messages, place them correctly, add recovery actions, and build error states for validation, network, permission, system, and 404 failures. Use when the user says 'improve my error handling', 'my error messages suck', 'users get stuck when something fails', 'add form validation errors', 'handle offline/network errors', 'design a 404 page', or when a review finds bare 'Something went wrong' strings, silent failures, or errors with no way forward. Produces an error-state matrix (every failure mode × message × recovery action) plus the implemented error components and copy.
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the Bricks design system, and writes to a draft, so nothing live is touched.
Build or audit Flutter accessibility for semantics, screen readers, focus, keyboard access, text scaling, contrast, target size, and motion preferences. Pair with flutter-responsive-layout when large text causes reflow, clipping, or overflow across constraints.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics
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.