Skills
96,770 packaged capabilities and playbooks for agents. Install any of them with one command.
Design & UI
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
Color master skill. Audits every color decision across the product — balance, hierarchy, harmony, temperature, saturation, shadow construction, hover states — and corrects them using HSB color theory. Extracts the actual rendered color palette from every screen, identifies what's wrong and why, then fixes it systematically. Use when colors feel off, the UI looks flat or garish or cold, brand color is everywhere or nowhere, or the user invokes /uicolor.
Use when surveying the PUBLISHED user-research evidence for a product's design questions BEFORE an interface is designed — deriving a research vocabulary map, executing ONE search angle across scholarly indexes, preprint servers, practitioner-research corpora and standards-body findings, deep-reading ONE source into the findings it contains, or synthesising the evidence register and report. One source yields N finding-records, because how many findings a paper holds is only knowable after the read. Certainty uses GRADE's four-level vocabulary assigned BY RULE and re-derived by the validator; transferability stays a separate field, because excellent evidence from another population is strong evidence and weak guidance at once. Keywords: user research prior art, HCI literature, usability evidence, published findings, evidence synthesis.
Comprehensive UI/UX design principles covering affordances, visual hierarchy, grids, typography, color theory, dark mode, shadows, icons, buttons, feedback states, micro-interactions, and overlays. Use when designing UI components, reviewing design quality, building new screens, giving design feedback, writing design specs for AI coding assistants, or teaching product/engineering teams correct design vocabulary.
Reviews UX, accessibility, and microcopy for web and React Native (Expo) applications. Analyzes UI code against established UX principles, WCAG 2.2 accessibility standards, platform guidelines (Apple HIG, Material Design 3), and UX writing best practices. Triggers on: "ux review", "review ux", "check accessibility", "improve the UI", "ux audit", "review this component", "is this accessible", "check usability", "ux feedback", "review the design", "improve usability", "check contrast", "review navigation", "ux writing", "improve copy", "review microcopy", "make this more intuitive", "ux best practices", "/ux".
Deploy 8 radically different visual direction demos for a website or webapp project. Creates self-contained Next.js pages under /demo/ with distinct identities (typography, color palette, layout, animation, accessibility) so the user can compare and choose. After selection, generates production-ready theme tokens, Tailwind config, CSS variables, and base components matching the chosen direction. Use when: starting a new web project, redesigning a site, choosing visual direction, the user says "style selector", "choose styles", "visual alternatives", "pick a design direction", or wants to compare different aesthetic approaches before committing to one. Works with Next.js + Tailwind CSS projects (landing pages, web apps, SaaS, dashboards).
Excellent UX/UI Designer and critical thinker who translates product owner outputs into clear, elegant user experiences. Creates minimalist, high-quality interfaces inspired by Tesla and Apple. Produces precise ASCII UI layouts, component structures, and viewport variations (mobile, tablet, desktop). Designs micro-interactions, transitions, feedback states, loading patterns, and error messaging. Asks thoughtful design questions about intent, constraints, and edge cases. Welcomes feedback and iterates quickly. Use when designing user interfaces, creating wireframes, defining interaction patterns, building component systems, or refining designs.
Vibe Deck — vibe-code professional slide presentations — describe what you want, AI builds it. Scaffolds a React + ECharts project, creates slides with charts, animations, theming, and PDF export. Use PROACTIVELY when the user mentions slides, deck, presentation, PPT, PPTX, slideshow, keynote, pitch deck, quarterly review, board meeting, investor update, sales deck, training deck, onboarding slides, report presentation, add a slide, build a deck, create slides, make a roadmap slide, put this data into a presentation, turn this Excel into slides, visualize this data as a deck. Also trigger when the user wants to modify, reorder, or delete slides in an existing slide-kit project. Also trigger when the user wants to share, export, or package the deck as a single HTML file for email or offline viewing. Chinese triggers: 做PPT, 做个deck, 写pptx, 创建演示, 制作幻灯片, 做幻灯片, 加一页, 新增slide, 做演示文稿, 工作汇报, 述职报告, 季度回顾, 方案展示, 写个汇报, 改一下这页, 调整幻灯片顺序, 删掉这页, 把数据做成图表展示, 帮我做个路线图, 导出单个HTML, 分享给别人看.
Build and debug WidgetKit widgets for Apple Vision Pro (visionOS), including mounting styles (elevated/recessed), textures (glass/paper), proximity-aware layouts via LevelOfDetail, interactive widgets with AppIntents, widget rendering modes (accented/fullColor), and timeline update troubleshooting. (visionOS widgets are pinned spatial objects, not watch complications.)
Turns existing audit or health output, or saved recurring runs, into an HTML dashboard, SVG charts or Mermaid diagrams. Triggers: visualise the findings, dashboard, chart, graph the trends. Does not run audits (run one first); for a written brief use stakeholder-brief.
Build, review, debug, migrate, or plan Airbnb visx React+D3 visualization primitives and XYChart with current docs. Use for @visx/scale, @visx/shape, @visx/curve, @visx/axis, @visx/grid, @visx/legend, @visx/annotation, @visx/threshold, @visx/tooltip, @visx/responsive, @visx/brush, @visx/zoom, @visx/drag, @visx/event, @visx/bounds, @visx/xychart, @visx/react-spring, @visx/glyph, @visx/marker, @visx/text, @visx/clip-path, @visx/pattern, @visx/gradient, @visx/group, @visx/stats, @visx/heatmap, @visx/hierarchy, @visx/network, @visx/sankey, @visx/chord, @visx/geo, @visx/voronoi, @visx/delaunay, @visx/wordcloud, @visx/vendor, @visx/mock-data, @visx/visx, ParentSize, LinePath, AreaClosed, Bar, Pie, ScaleConfig, buildChartTheme, AnimatedLineSeries, and visx v3→v4 migration. Also covers upcoming 4.1 packages (@visx/theme, @visx/a11y, @visx/chart, @visx/kernel, registry) as preview-only until published.
WCAG 2.2 Web Content Accessibility Guidelines. Covers conformance levels A/AA/AAA, success criteria, testing with axe-core, and common accessibility patterns. USE WHEN: user mentions "accessibility", "a11y", "WCAG", "screen reader", "ARIA", asks about "color contrast", "keyboard navigation", "accessible forms", "compliance", "ADA", "Section 508" DO NOT USE FOR: automated testing implementation - use `axe-core` instead
Use when the user needs to review UI code, run accessibility checks, conduct design audits, or check a website against best practices. This Skill checks compliance against the Web Interface Guidelines and WCAG 2.2 and outputs structured review results.
An AI cover design tool built for Xiaohongshu content creation. It draws on 2,000+ viral post data points collected daily from across the web, analyzes visual elements of top-performing covers in the same niche, and uses AI to identify visual patterns that drive conversions. It generates actionable cover design plans tailored to post content and platform aesthetics, saving tedious design work and increasing cover click-through rates.
Generate unified, on-brand Instagram Reel covers for Yuval (YUV.AI Neon Phoenix system) — the signature look is a giant Hebrew headline BEHIND the subject cutout + a punch line IN FRONT (depth effect), on rich black with a dim neural-net field, series-colored chip + phoenix mark. Use whenever Yuval asks for an Instagram/Reel/TikTok/YouTube cover, thumbnail, עטיפה, קאבר, תמבנייל, cover image for a video, or wants his Instagram grid to look consistent. One command per cover; background removal included in the pipeline.
Perform deep WCAG 2.1 AA compliance audits on UI code. Use this skill when the user wants an accessibility review, WCAG audit, a11y check, screen reader compatibility review, or keyboard navigation assessment. Also trigger when the user mentions 'accessibility', 'a11y', 'WCAG', 'screen reader', 'keyboard navigation', 'color contrast', 'ARIA', or asks 'is this accessible'. This goes beyond the design reviewer's basic accessibility checks to provide comprehensive WCAG criterion-by-criterion analysis
Accessibility testing toolkit using Selenium WebDriver 4+ with Java 21+ and axe-core engine. Use when asked to validate WCAG 2.2 AA compliance, scan pages or components for a11y violations, test keyboard navigation, audit color contrast, check ARIA semantics, generate accessibility reports, filter axe rules, debug screen reader issues, or implement POUR principles (perceivable, operable, understandable, robust).
Integrate, build, extend, or review web interfaces with the brand-adaptive ak-ui design language and CSS foundation. Use when a user asks to install ak-ui, create an Arknights-inspired interface without copying game assets, style native or unstyled headless components such as Reka UI, convert an existing page to ak-ui, or audit whether an implementation follows ak-ui tokens, geometry, interaction states, responsiveness, and accessibility.
Enforce a precise, minimal design system inspired by Linear, Notion, and Stripe. Use this skill when building dashboards, admin interfaces, or any UI that needs Jony Ive-level precision - clean, modern, minimalist with taste. Every pixel matters.
Build and review Blazor applications across server, WebAssembly, web app, and hybrid scenarios with correct component design, state flow, rendering, and hosting choices. USE FOR: building interactive web UIs with C# instead of JavaScript; choosing between Server, WebAssembly, or Auto render modes; designing component hierarchies and state. 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.
This skill should be used when the user asks about Bootstrap 5 getting started, Bootstrap installation, Bootstrap CDN setup, Bootstrap npm installation, Bootstrap Bun installation, Bootstrap project setup, Bootstrap starter template, Bootstrap browser support, Bootstrap version compatibility, Bootstrap RTL support, Bootstrap Vite setup, Bootstrap Parcel setup, Bootstrap Webpack setup, Bootstrap Rails setup, Bootstrap Rails 8 integration, Bootstrap importmaps Rails, Bootstrap cssbundling-rails, Bootstrap Propshaft setup, Bootstrap dartsass-rails, Bootstrap Turbo integration, Bootstrap Stimulus controllers, Bootstrap Hotwire, Rails form helpers Bootstrap, Bootstrap Icons Rails, bootstrap gem Ruby, Bootstrap accessibility, Bootstrap WCAG compliance, Bootstrap screen reader support, Bootstrap visually-hidden class, Bootstrap reduced motion, Bootstrap RFS, Bootstrap responsive font sizes, Bootstrap fluid typography, Bootstrap download, Bootstrap file structure, Bootstrap contents, Bootstrap CSS variables, Bootstrap ES modules, Bootstrap best practices, or needs help setting up a new Bootstrap project.
Build a complete brand identity for a solopreneur business from scratch or refresh an existing one. Covers brand personality, voice and tone, visual identity system (colors, typography, logo direction, imagery style), tagline crafting, and a brand guidelines document. Use when creating a new brand, rebranding, or needing to make brand decisions consistent. Trigger on "create my brand", "brand identity", "brand guidelines", "define my brand voice", "brand personality", "what should my brand look like", "brand strategy", "rebrand", "brand tone".
Designing and implementing CNIL-compliant cookie consent banners for French and EU audiences. References the EUR 100M Google LLC fine and EUR 150M Meta Platforms fine for non-compliant cookie practices. Covers equal prominence, reject-all buttons, cookie walls prohibition, and 6-month reconsent cycles.
Design command-line interface parameters and UX: arguments, flags, subcommands, help text, output formats, error messages, exit codes, prompts, config/env precedence, and safe/dry-run behavior. Use when you’re designing a CLI spec (before implementation) or refactoring an existing CLI’s surface area for consistency, composability, and discoverability.
CSS component library for Tailwind CSS 4 providing pre-built UI components with semantic class names. Use when building web interfaces with HTML/Tailwind that need: (1) Rapid UI development with consistent styling, (2) Accessible component patterns (buttons, forms, modals, etc.), (3) Theme-aware color systems that work across light/dark modes, (4) Responsive layouts with Tailwind utilities. Works with daisyUI v5+ which requires Tailwind CSS v4+.
Visual identity development and validation through the official `DESIGN.md` schema and CLI. Use when creating, refreshing, syncing, previewing, exporting, or diffing design tokens. Not for page layout, rendered variants, product copy, feature specs, production code, or code review.
Work with Domscribe — the pixel-to-code bridge. Use when setting up, initializing, or configuring Domscribe for a project, OR when editing or modifying UI components (React, Vue, Next.js, Nuxt), implementing features from captured UI annotations, querying runtime context for source locations, exploring component structure, or when user mentions annotations, queued tasks, UI changes, props, state, DOM, or asks about how elements render at runtime.
Design Thinking method coaching knowledge across all nine methods including per-method techniques, deep expertise, and industry context (energy, financial services, healthcare, manufacturing, nonprofit and social impact, pharmaceuticals and life sciences, professional services, public sector, retail and CPG)
Use when someone wants landing page ideas, concepts, or angles for a store: "give me landing page concepts", "LP ideas", "landing page angles", a campaign or ad landing page, pages for a new audience/segment, a seasonal/event/promo page, or a geo/local page. Also use when a chosen concept gets picked and needs building out into an actual page (section-by-section blueprint), or when auditing an existing landing page against best practice. The core insight: one product becomes dozens of pages by varying the ANGLE, not the product. Not for full-site information architecture, product detail pages, collection pages, or blog/SEO content (a landing page has ONE goal, no site chrome). Use an SEO/content skill. Not for the ad or email creative itself, though message match with the page matters
Extract reusable visual systems from reference technical diagrams, architecture diagrams, scientific schematics, roadmaps, workflows, frameworks, and technical infographics. Create complete modular prompts, generate style-consistent PNG figures from new content, and save, search, name, validate, or reuse Style Packs with their original reference images. Use for 参考图风格抽取、技术图视觉语法、同风格技术图、技术路线图、架构图、科研示意图、方法框架图、风格模板库、保存或复用图片风格.
Plateforme de conception, planification et spécification de nouveaux produits logiciels. Transforme une idée initiale en un plan d'implémentation exhaustif, sans ambiguïté, suffisamment précis pour être exécuté par une IA même peu performante. Couvre PRD, roadmap, benchmarks, design UI/UX, architecture, découpage en slices, plan d'implémentation par slice, plan de tests, analyse d'impact, et validation automatique des plans (mode Fast Track). Utiliser pour tout nouveau projet (greenfield) — de l'idée vague jusqu'au plan prêt à coder. Ne pas utiliser pour migrer un projet existant vers une autre stack, ni pour un travail sur du code legacy. — Design, planning and specification platform for new software products. Turns a rough idea into an exhaustive, unambiguous implementation plan precise enough for a low-capability model to execute: PRD, roadmap, benchmarks, UI/UX design, architecture, slice breakdown, per-slice implementation plans, test plan, impact analysis, and automated plan validation (Fast Track mode). Use this skill for any greenfield project, from a vague idea to a code-ready plan. Do not use it to migrate an existing project to a different stack, or to work on legacy code.
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
Frontend patterns for Rails applications using Slim templates, Stimulus JavaScript framework, CSS with Optics utilities. Use when building views, adding interactivity, styling components, or when the user mentions Slim, Stimulus, JavaScript, CSS, or frontend development.
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.