Skills
97,222 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Compare screenshots against the intended design, distinguishing approved references from historical baselines. Use for iterative implementation matching, before/after visual review, objective image telemetry, or checking a lone capture for flat, empty, or badly framed content.
Create image-based PowerPoint decks by (1) turning raw article content or notes into a detailed per-slide message plan when needed, (2) turning that message plan into a slide display plan and then a visual-production plan, (3) generating one 16:9 slide image per slide with all displayed text baked into the image (English by default; multilingual slide text supported), and (4) assembling an images-only .pptx that simply concatenates those images full-screen. Use when the user wants polished, consistent visuals with extensible style packs (cinematic dark, cinematic light, cinematic editorial, illustrative cinematic, animated feature, editorial, warm pastoral, tech, youth social, academic, corporate, whiteboard sketch), prefers not to hand-layout PPT objects, or wants a repeatable prompt workflow to iterate over time.
Miaoda (Spark/Miaoda) app development and hosting: app creation, local full-stack development, cloud generation and iteration, creative design (UI mockups / interactive prototypes / wireframes / landing pages / dashboards / slide decks / visual exploration), integration of AI capabilities, Feishu platform capabilities, or other external capabilities, log/Trace/monitoring metrics/PV/UV queries, environment variable management, app collaborators and collaboration permissions, app roles and members, and automation triggers (scheduled / record changes / Webhook / Feishu approval). Use when users want to develop or create a system, tool, platform, or app; develop locally or in the cloud; modify, deploy, publish, launch, or get a shareable link; build pages or websites with HTML and deploy them to Miaoda; design, create mockups, prototypes, wireframes, PPT/decks, or explore visuals; or mention Miaoda/Spark/Miaoda (app runtime domains such as *.aiforce.cloud), app databases, app file storage, open API Keys, visibility, app collaborators/development permissions, app roles/role members, production logs, API request volume, error counts, latency, traffic, environment variables, or setting up automation for Miaoda apps, including scheduled triggers or triggers after approval. Not responsible for ordinary cloud drive file uploads (lark-drive), Feishu document editing (lark-doc), or native slide creation (lark-slides).
Use when verifying the codebase against the UX scenario base (batched, evidence-backed, report in docs/ux/audits/). Triggers: “ux audit” / “UX-аудит,” “run the scenarios” / “прогони по сценариям.” Not for a whole-project audit (project-audit) or editing scenarios (ux-scenarios)
Use when designing, generating, modifying, or reviewing Make App frontend UI in `apps/ui`: shell, dynamic object routes, desktop/mobile layout, lists, Drawer, task pages, 新建/编辑/详情 forms, selectors, component-library choice, field metadata, 字段类型图标/field-type icons, and UI states. New Apps use `@qfei-design/make-app-mobile` and default Lucide icons unless the user chooses another icon library; the React UI library remains user-selected. Route record tables to `canvas-table-integration`, actions to `make-app-actions`, filter/group/sort to their Skills, and permissions to `make-app-permission`. For AI助手, MakeAiTheme, maxDrawerWidth, or assistant SSE, use `make-ai-assistant` for package behavior; this Skill owns surrounding placement. Does not own auth, Service, runtime, DSL, persistence, CanvasTable internals, or AI assistant package behavior.
Investigate, structure, and validate experiences through research, information architecture, journeys, flows, forms, onboarding, and error recovery. Use for usability, flow, discovery, content, or user validation problems; do not reduce UX to visual polish.
Creates or edits a Power Apps Canvas App through the Canvas Authoring MCP coauthoring session. Handles staged experience design, direct and partitioned targeted edits, planned multi-screen changes, responsive layout, and compile-error convergence. Trigger on requests to create, build, generate, modify, update, change, fix, or edit a Canvas App or .pa.yaml files.
Create and manage interactive Kanban boards with Syncfusion Angular component. Use this skill when you need to build workflow visualization tools with drag-and-drop cards, swimlanes, columns, and real-time data binding. Covers setup, configuration, events, properties, methods, and best practices for implementing task management and project tracking interfaces
Use when starting a new feature, changing user-facing behavior, or moving a codebase to scenario-driven development (docs/ux/scenarios.md). Triggers: “ux scenarios” / “сценарии использования,” “новая фича.” Not for an empty project (vision first). Refusal phrase “no scenarios” / «без сценариев»
Fetch official brand, product, and tool logos (Stripe, GitHub, Notion, AWS, Figma, etc.) as clean SVGs from SVGL (svgl.app), as saved .svg files, inline markup, or installed React components. Check this whenever logos or SVGs come up, such as adding brand marks to integration/partner rows, footers, pricing tables, or slides; replacing a blurry logo with a vector; getting light/dark variants; or finding an official logo. Prefer it over hand-writing SVG markup or grabbing random files. Skip for generic UI icons, illustrations, charts, favicons from an existing logo, or designing a brand-new custom logo.
Principal-level SwiftUI UI review and refactoring patterns for iOS 26 / Swift 6.2 clinic-architecture apps, grounded in Rams, Segall, and Edson principles. Use when auditing or improving existing SwiftUI screens, transitions, animations, and visual systems while preserving brand identity and respecting clinic Domain/Data/App boundaries.
Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".
When the user wants to optimize signup, registration, account creation, or trial activation flows. Also use when the user mentions "signup conversions," "registration friction," "signup form optimization," "free trial signup," "reduce signup dropoff," or "account creation flow." For post-signup onboarding, see onboarding-cro. For lead capture forms (not account creation), see form-cro.
Use when defining who the users are and why they come (docs/ux/foundation.md): personas, JTBD, journeys, user stories, retention, churn. Triggers: “jtbd” / “джобы,” “customer journey” / “карта пути,” “персоны,” “ретеншн,” “отток.” Not for flows or screens (ux-flows)
Use when adding popup forms, confirmations, or detail views to Wix dashboards; creating reusable dialog components across dashboard pages; showing context-specific information in overlays; opening modals from dashboard pages; or passing data between dashboard pages and modals. Do NOT use for static content (use dashboard pages instead) or site-facing UI (use site widgets/embedded scripts).
Use when building React site components with editor manifests for Wix CLI applications. Triggers include site component, editor manifest, custom component, visual customization, editor element, CSS properties, data API, site builder component, Wix Editor component. Use this skill whenever the user wants to create a component that site owners can customize through the Wix Editor's visual interface.
Build 2D screen-space UI for Decentraland scenes with React-ECS (JSX) — HUDs, menus, health bars, dialogs, toasts, notifications, buttons, inputs, dropdowns, sliders. By default writes UI that the Creator Hub's 2D UI editor (UI Designer) can read and edit (one component per file under src/ui/, state/props bindings, useInteraction layers, @ui-action handlers, a driver for animation), and falls back to free-form coded React-ECS only for UI too data-driven or dynamic for the editor. Use when the user wants on-screen UI, menus, form inputs, UI editable in the Creator Hub, or an existing coded UI adapted for the editor. Do NOT use for 3D in-world text (see advanced-rendering) or clickable 3D objects (see add-interactivity).
Prevents generic AI-generated UI patterns when building web apps, mobile apps, and websites. Enforces clean, professional design with proper typography, layout structure, and platform-aware patterns. Use this skill whenever generating React, React Native, SwiftUI, Jetpack Compose, HTML/CSS, or any frontend UI code.
Build a premium, scroll-driven interactive landing page for any business: a service company, a physical product, a food brand, a drink brand. Scroll becomes the timeline. Video scrubs frame by frame under the wheel, sections pin and advance, rails pan sideways, headlines assemble line by line, the page ground shifts colour as you travel, and the pointer moves things that are not scrolling. Interviews the human first (their vibe, their journey, one unbroken world or distinct scenes, and what assets they already own), then picks a page grammar and a signature move so no two builds share a skeleton, generates photoreal assets through kie.ai or builds from the user's own footage and photos, writes real semantic HTML on a design-system floor, and verifies the result by screenshotting its own scroll. Use for "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "make it feel different", "this looks like a template", "a unique scroll site", or any request for a site that should feel like an experience rather than a document
Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements. Generates self-contained HTML files with zero-gap grids, stat cards, pill tags, bar charts, and dark quote cards — optimized for screenshot export. Supports both light (Apple signature #f5f5f7) and dark (#000) themes. Use when the user asks to build stat cards, bento grids, project summary cards, dashboard cards, Apple-style presentation layouts, project overviews, achievement showcases, or any visual summary of numbers and milestones. Also use when the user wants to create slides, infographics, or visual reports with a clean Apple aesthetic.
Bulk-create Canva designs from tabular data using a brand template with autofill fields, producing one design per row. Use when users say "bulk create designs from this CSV", "generate one design per row", "create a design for each product", "batch generate from a template", or "autofill a template from a spreadsheet". Accepts any tabular data source — uploaded files, pasted tables, JSON, or URLs.
Mantine UI library for React: 100+ components, hooks, forms, theming, dark mode, CSS modules, and Vite/TypeScript setup. Use when building React applications with Mantine components, configuring theming/dark mode, or working with Mantine hooks and forms. Keywords: Mantine, React, UI components, CSS modules, theming.
When the user wants to create or optimize in-app paywalls, upgrade screens, upsell modals, or feature gates. Also use when the user mentions "paywall," "upgrade screen," "upgrade modal," "upsell," "feature gate," "convert free to paid," "freemium conversion," "trial expiration screen," "limit reached screen," "plan upgrade prompt," or "in-app pricing." Distinct from public pricing pages (see page-cro) — this skill focuses on in-product upgrade moments where the user has already experienced value.
End-to-end user research assistant — qualitative and quantitative. Use this skill whenever the user mentions user research, user interviews, discussion guides, interview guides, research plans, qualitative research, quantitative research, user surveys, survey design, usability studies, participant recruitment, research synthesis, interview transcripts, research reports, running studies with AI, or explicitly mentions Cookiy AI. Also trigger when users want to talk to customers, conduct discovery research, create a study or survey, analyze interview data, run AI-moderated interviews, or collect survey responses. Covers the full lifecycle: planning studies, creating discussion guides, running AI-moderated interviews (real or synthetic) via Cookiy, designing and distributing surveys, and synthesizing results into reports.
Use when customizing the look of Auth0 Universal Login to match a brand — changing colors, logo, fonts, page layout, or login text. Also use when resetting branding to defaults or checking if branding is wired up end-to-end. Does not cover full custom UI screens — use acul-screen-generator for that.
High-fidelity HTML design and prototype creation. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when the user mentions Figma, design systems, UI kits, wireframes, presentations, or wants to explore visual design directions. Even if they just say "make it look good" or "design a screen for X", this skill applies.
Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style and composition options. Use when the user asks to “generate cover image,” “create article cover,” or “make a cover for article”
Designing forms with multiple steps, progress indicators, conditional logic, and save-and-resume mechanics. The discipline of breaking complex data collection into stages that respect cognitive load while maintaining completion intent. Honest about kitchen-sink-single-page (overwhelms before the user starts), progress-theater (steps without genuine staging), and genuinely-staged (each step earns its own page) patterns. Triggers on multi-step form, multi-page form, form wizard, signup wizard, lead form, application form, intake form, configurator, onboarding form. Also triggers when a long form is converting poorly, when an audience is dropping off mid-form, or when a multi-step form is being scoped for the first time.
Build with Puck, the visual editor for React. Use when needing to (1) add Puck, a page builder, or a visual/drag-and-drop editor to an application, new or existing, (2) author or extend a Puck config so the app's own components become editable, (3) debug a Puck integration — unstyled previews, RSC errors, iframe or persistence problems, or (4) look up how any Puck API, field, or plugin works.
The house rules for ANY design or UI work — the verification protocol (run the gate, never claim a number), the absolute no-emoji rule, token by intent, one shared theme, the eight states, one thing leads, and output completeness. Load this FIRST whenever building, reviewing, or theming a screen, component, or token set. Installed as a plugin, this skill carries what CLAUDE.md carries in the repo.
Turn product information, packaging and qualifications, target platform, audience, and visual references into actionable e-commerce visual plans, including conversion strategy, Campaign Style Lock, main images/detail pages/Listing/A+ Storyboard, in-image copy, design notes, image-generation Prompt, and evidence and compliance review. Suitable for Taobao, Tmall, JD.com, Pinduoduo, Douyin Shop, Xiaohongshu, Channels/WeChat Shop, as well as Amazon, Shopify, TikTok Shop, Temu, Shopee, and Lazada. Use when users need product images, detail pages, in-image copy, design briefs for designers, or localization for cross-border products. Not for short-video/livestream scripts only, ad placement or store operation optimization, or final legal conclusions requiring a lawyer (risk screening is possible); it does not automatically list or publish products. Do not fabricate qualifications, data, sales, reviews, certifications, or efficacy claims; verify official sources for current platform rules or high-risk compliance conclusions.
Core GSAP animation concepts, including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations or transitions, or learning GSAP foundations. An essential starting point for any GSAP-based animation work.
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.
Comprehensive guide to implementing Syncfusion Angular button components, including Button, ButtonGroup, DropDownButton, Floating Action Button (FAB), ProgressButton, RadioButton, Switch, Speed Dial, SplitButtons, and Chips. Use when implementing and styling these components, covering visual styles (primary, outline, toggle, icon, round, block), grouping, dropdowns with popup items and animations, FAB positioning and scoping, Speed Dial linear/radial action items, progress-enabled buttons, and toggle/radio controls.
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.