Skills
96,981 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
Use this skill when a vanilla static SPA scaffold exists and needs to feel like a polished product — progress persistence, sidebar + scrollspy navigation, dark/light theme, content zoom, responsive (mobile sidebar overlay), keyboard nav, fade-in entrances, toast notifications, iframe modal viewers, quiz scoring with section back-links. Triggers on phrases like "加進度勾選", "響應式", "暗色模式", "縮放", "scrollspy", "sidebar 收合", "手機版", "RWD", "dark mode", "progress tracking", "quiz UX", "interactive polish". Always invoke AFTER `static-spa-conversion` (renders working), as a standalone enhancement layer.
Write or revise user-facing product and marketing copy with a specific voice, verifiable claims, natural rhythm, and useful actions. Use for interface labels, onboarding, landing pages, help text, and product messaging. Do not use for code comments or neutral technical documentation unless tone editing is requested.
Design, implement, or repair responsive web and app layouts across narrow, wide, zoomed, and touch-oriented viewports. Use for mobile and desktop composition variants, reflow, overflow, adaptive navigation, content-driven breakpoints, and mobile interaction layout. Do not use for purely visual styling with no responsive impact.
Implement Syncfusion TypeScript Kanban board for visual task management and workflow tracking. Use this when working with task boards, workflow visualization, or agile project management. This skill covers Kanban board setup, column configuration, card management, swimlanes, drag-and-drop interactions, and WIP limits for TypeScript applications.
Build interactive diagrams using Syncfusion Vue Diagram, including flowcharts, BPMN workflows, UML diagrams, Entity Relationship (ER) diagrams, swimlanes, and organizational charts. Trigger when working with Vue diagram components such as nodes, connectors, shapes, ports, labels, layouts, symbol palettes, serialization/deserialization with unsaved changes detection, Mermaid syntax support, data binding, interactive editing, and exporting diagrams for visualization and process flows.
Implements Syncfusion Vue TreeGrid for hierarchical data with sorting, filtering, editing, exporting, paging, virtual scrolling, and advanced features. Supports configuration, CRUD, aggregates, templates, state persistence, and performance optimization in Vue applications.
TailwindCSS implementation patterns for Refactoring UI principles. COMPANION skill for web-design-mastery. ALWAYS activate for: TailwindCSS, Tailwind classes, utility classes, Tailwind config, Tailwind components, Tailwind dark mode, Tailwind responsive, Tailwind spacing, Tailwind typography, Tailwind colors, Tailwind shadows. Provides class recipes, component patterns, dark mode implementation, responsive patterns. Turkish: Tailwind kullanımı, Tailwind class, utility CSS, Tailwind config. English: Tailwind patterns, utility-first CSS, Tailwind best practices.
Type-safe keyboard shortcut guidance for registration, sequences, scopes, recording, key state, display, and adapters. Use when a project uses TanStack Hotkeys or when the task needs its setup, implementation, debugging, testing, migration, or integration guidance.
Professional trading analysis dashboard template (single-file HTML) with light/dark theme switch, dense market panels, chart interactions, demo/live playback, and command palette behavior. Use when users ask for a Wall-Street-style analytics terminal, trading cockpit, or high-tech financial dashboard template with realistic data layout.
Django Unfold admin theme - build, configure, and enhance modern Django admin interfaces with Unfold. Use when working with: (1) Django admin UI customisation or theming, (2) Unfold ModelAdmin, inlines, actions, filters, widgets, or decorators, (3) Admin dashboard components and KPI cards, (4) Sidebar navigation, tabs, or conditional fields, (5) Any mention of 'unfold', 'django-unfold', or 'unfold admin'. Covers the full Unfold feature set: site configuration, actions system, display decorators, filter types, widget overrides, inline variants, dashboard components, datasets, sections, theming, and third-party integrations.
Audit existing UI screens, URLs, screenshots, Figma frames, HTML/CSS/React code, dashboards, mobile flows, and landing pages for UX, accessibility, responsive behavior, visual hierarchy, conversion blockers, state coverage, and regression risk. Use this skill whenever the user asks for a UI/UX review, severity matrix, evidence-backed findings, before/after check, or actionable refactor brief. Never claim DOM, Lighthouse, axe, or screenshot evidence unless it exists.
Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix. Use for typography, spacing, color, materials, components, app shells, dashboards, forms, tables, dialogs, states, responsive layout, and UI polish. Community-authored, not official Vercel. Trigger for Geist, Vercel-style UI, or generic clean/modern/premium/polished SaaS/developer-product visuals when no other final visual system is requested. Skip non-visual work unless it materially changes rendered UI.
Verify that every interactive control on a page can take keyboard focus and that its primary action fires from the keyboard rather than only the mouse, and say plainly that Tab order cannot be verified today. Use when a component was hand-tested with a mouse, a custom dropdown/modal/combobox was added, or an accessibility report flags an unreachable control.
Web design and deployment. Generates polished single-page HTML pages (reports, landing pages, data visualizations, etc.) with one-click deployment to Cloudflare Pages. Uses the Tailwind CSS + Chart.js + Font Awesome stack. Use when the user asks to build a web page, generate a report page, create a landing page, present data visualizations, or deploy a page online.
Use when you need to create images or image prompts with AI — personal brand images, logos, campaign key visuals, daily post images, editorial, infographics, web mockups, quote graphics. Reads brand identity from context, then writes prompts, generates images, or exports prompts for MidJourney, DALL-E, Imagen, Leonardo. Has a mode that takes reference images and returns a copy-pasteable master prompt. Activates when the user mentions "thiet ke anh", "lam logo", "ve banner", "prompt MidJourney", "tao key visual", "lam anh giong anh nay", "gen anh AI", "doi mau thuong hieu tren anh". Not for — writing briefs for designers, use skill 42-brief-hinh-anh; asset workflows for a whole campaign, use skill 41-campaign-asset-list; AI avatar videos, use skill 24-ai-avatar-production; interactive UI wireframes, use web-prototype; animation, use motion-frames.
Website architecture planning: page hierarchy, navigation, URL structure, internal linking strategy. Use when user says "site structure", "page hierarchy", "URL structure", "navigation design", or "information architecture". NOT for XML sitemaps (use seo-sitemap).
Use when choosing colors, typography, or layout/spacing for an Apple-style interface — semantic & dynamic system colors, Display P3 wide gamut, dark mode, the San Francisco type family, Dynamic Type, the 8-point grid, safe areas, and bento layouts. Part of the apple-design family. Keywords: apple color, semantic colors, system colors, label color, systemBlue, P3 wide gamut, dark mode, SF Pro, San Francisco font, New York serif, dynamic type, type scale, tracking, 8pt grid, 4pt, spacing, safe area, layout margins, bento grid, readable content width.
Configure FeatureTable for tabular data display and FormTemplate with input elements for feature editing forms. Use when adding spreadsheet-style data grids, building attribute edit forms, configuring form input types and validation, or surfacing related records in forms.
Build high-quality, animated, professional web pages that VISUALIZE software architecture, system design, data models, or a product idea — using Three.js (3D) + GSAP (scroll/animation) + SVG diagrams. Produces two things, usually together: (1) a cinematic scroll-story landing page where a 3D low-poly world narrates how a system works, and (2) an interactive architecture map with switchable overlay "lenses", clickable drill-down component diagrams, and crow's-foot ERDs. Every output ships with a built-in EDIT MODE so the human can click components / snip areas / pick 3D objects and batch visual feedback straight to you. Use this skill WHENEVER the user wants to visualize, present, "show", animate, or build an interactive page for an architecture, system design, technical concept, data model, pipeline, or product story — including phrases like "intro page", "architecture visualization", "interactive diagram", "scrollytelling", "3D system map", "ERD page", "design walkthrough", "make our architecture look impressive", or "present this design to stakeholders". Prefer this skill over hand-rolling Three.js/GSAP from scratch — it bundles battle-tested templates, a styling/anti-slop guide, a diagram-layout catalog, and an AI-tweakable code convention learned from a long real build.
Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants measurable accessibility, performance, responsive, theming, or anti-pattern findings—not when they mainly want an overall UX critique or final visual/detail polish.
Guide for building foundational Prototyper UI components from scratch when no Base UI primitive exists. Use when creating components that need custom ARIA contracts, keyboard navigation, focus management, controlled/uncontrolled state, form integration, or animation lifecycle — all without an existing Base UI wrapper.
Takes existing content markdown files and builds production-final resource center pages on client websites using their existing tech stack and design system. Output is live-ready — no review pass, no placeholder content, no prototype styling. Implements hub pages, section listings, article pages, and cross-linking for Blog, Guides, Learn, and Comparisons sections.
Retrieve Coinbase Design System (CDS) documentation: setup, installation, theming, tokens, and per-component APIs/examples. Use this skill whenever the task involves CDS components, design-system rules, theming, or choosing between web and mobile CDS packages, even if the user only says "use CDS" or names a component. Always start from the docs route index, then fetch only the pages you need to reason and implement correctly. Prefer the CDS MCP server (`list-cds-routes`, `get-cds-doc`); if MCP is unavailable, use curl against https://cds.coinbase.com/llms/....
[Hyper] Convert colors between hex, rgb, and oklch using @kood/color-cli. Use when the user asks to convert colors, transform CSS file colors, or needs accurate oklch values. Trigger phrases — "color convert", "hex to oklch", "oklch to hex", "rgb to oklch", "CSS color conversion", "color conversion", "tell me the oklch value".
Manage color workflows with ICC profiles, working spaces, gamut mapping, and color science. Use when inspecting ICC profiles, converting between color spaces, checking gamut clipping, validating well-behaved working spaces, or troubleshooting color workflow issues with ImageMagick, ArgyllCMS, Exiftool, or LittleCMS. Do not use this skill for unrelated requests; route to the nearest named specialist.
Comprehensive React component library with 30+ production-ready components using shadcn/ui architecture, CVA variants, Radix UI primitives, and Tailwind CSS. Use when users need to (1) Create React UI components with modern patterns, (2) Build complete component systems with consistent design, (3) Implement accessible, responsive, dark-mode-ready components, (4) Generate form components with React Hook Form integration, (5) Create data display components like tables, cards, charts, or (6) Build navigation, layout, or feedback components. Provides instant generation of customizable components that would otherwise take 20-45 minutes each to hand-code.
Evaluate an interface from a UX perspective, assessing hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with evidence-linked judgments and actionable feedback. Use when the user wants an overall design or UX review—not when the main need is measurable accessibility/performance diagnosis, or final micro-detail polish.
Add moments of joy, personality, and surprise through success states, empty states, loading moments, hover details, and celebratory polish once the fundamentals already work. Use when the user wants delight, charm, personality, or memorable micro-interactions—not when the main need is baseline cleanup or stronger visual impact.
Add or refine depth through elevation systems, raised and inset surfaces, layered overlap, and meaningful shadow behavior so interfaces feel structured instead of flat. Use when the user mentions depth, elevation, shadows, layering, flat cards, pressed states, drag feedback, or inset controls.
Critique UI visual quality with observable design criteria. Use this skill whenever the user asks for visual critique, design review, polish, hierarchy, spacing, typography, contrast risk, consistency, brand fit, anti-slop review, screenshot critique, Figma frame critique, or a fix brief for a weak interface. Keep findings actionable and evidence-labeled. Do not require Attention Insight, Khroma, or external screenshot upload for normal local critique.
Use when building ANY website, web app, landing page, or web-based UI - searches real template marketplaces for professionally designed layouts in the user's industry or niche, then extracts layout structure, color palettes, typography choices, and section sequences as the design blueprint instead of generating from assumptions
Design focused empty states for zero-data, no-results, permission, and error situations with clear value framing, strong CTAs, and less dead chrome. Use when the user mentions blank pages, zero-data screens, no results, permission states, or dead controls—not broader onboarding strategy.
Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.
Generate landing pages/webpages with the Felo Landing Page Task API in Claude Code. Use when users ask to create/make/generate a landing page, marketing page, single-page website, AI webpage, HTML page result, or when explicit commands like /felo-landingpage are used. Handles API key check, task creation, polling shared task history, and final ai_page_html output.
Add, fix, refactor, debug, test, or explain Flutter animations and motion effects. Use for implicit animations such as AnimatedContainer, AnimatedOpacity, AnimatedSwitcher, and TweenAnimationBuilder; explicit animations using AnimationController, Tween, CurvedAnimation, AnimatedWidget, AnimatedBuilder, and built-in transitions; Hero/shared-element route transitions; staggered or sequenced animations; physics-based motion, gestures, springs, flings, scroll physics, curves, performance, accessibility, reduced motion, and animation lifecycle bugs.
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
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.