Design AI agent skills

3,804 skills in the archive. Read a skill’s instructions or open its original repository.

• Auth

  by @vercel

  Authentication integration guidance — Clerk (native Vercel Marketplace), Descope, and Auth0 setup for Next.js applications, plus Sign in with Vercel, Vercel Passport, and Vercel KMS. Covers proxy.ts auth patterns,…

• Shadcn

  by @vercel

  shadcn/ui expert guidance — CLI, component installation, composition patterns, custom registries, theming, Tailwind CSS integration, and high-quality interface design. Use when initializing shadcn, adding components, composing…

• Create Visual Card

  by @hylarucoder

  Creates one decorative, single-frame visual card from supplied content as self-contained HTML and a shareable PNG. Use for information, quote, knowledge, social, summary, or cover cards, including “把要点做成一张图” and “做张卡片”. Use…

• React Component Diagnosis

  by @hylarucoder

  Diagnoses one React component or component directory across consumer API, data flow, testability, extensibility, performance, mental model, and boundaries/contracts, with code evidence and prioritized recommendations. Use when…

• Ui Analyse

  by @MadAppGang

  UI visual analysis patterns using Gemini 3 Pro Preview multimodal capabilities. Analysis-only - no code changes. Use dev:ui-implement for applying improvements. Includes provider detection, prompting patterns, and severity…

• Design References

  by @MadAppGang

  Predefined design system references for UI reviews. Includes Material Design 3, Apple Human Interface Guidelines, Tailwind UI, Ant Design, and Shadcn/ui. Use when conducting design reviews against established design systems.

• Ui Style Format

  by @MadAppGang

  UI design style file format specification with reference image support. Defines the schema for .claude/design-style.md and .claude/design-references/. Use when creating, validating, or parsing project design styles.

• Ui Implement

  by @MadAppGang

  Patterns for implementing UI improvements based on design analysis. Works with review documents from dev:ui-analyse or /dev:ui command. Includes Anti-AI design rules and visual verification.

• Ui Design Review

  by @MadAppGang

  Prompting patterns and review templates for UI design analysis with Gemini multimodal capabilities. Use when conducting design reviews, accessibility audits, or design system validation.

• Yuv Video Director

  by @hoodini

  Yuval's all-in-one AI video pipeline. Turns an idea/script into a finished, on-brand MP4 by orchestrating HyperFrames (HTML→deterministic video render), Lottie (branded motion graphics), ManimCE (math / neural-network / concept…

• Yuv Design System

  by @hoodini

  Yuval Avidani's YUV.AI brand and design system. Apply ONLY when YUV.AI-branded output is requested — presentations, decks, keynotes, portfolio, brand site, profile, speaker bio, brand assets, or any prompt mentioning YUV.AI /…

• Illustrated Gallery

  by @majiayu000

  Build an illustrated portfolio, creative-studio landing page, or brand showcase with a static art gallery and full-frame ASCII dissolve transitions. Use when the user requests Illustrated Gallery, this visual template, or…

• Parallax Landing Page

  by @hoodini

  Build a scroll-driven cinematic landing page from a short video. The user provides a 5–15 second video (often AI-generated); this skill extracts every frame at HD JPEG quality, then produces a single-hero HTML page where the…

• Cinematic Scrub Landing

  by @hoodini

  Build a premium cinematic landing page with mouse-scrub video hero and brand-driven narrative-arc sections. Use whenever the user provides a hero video plus a product / subject / brand and wants a landing page, promo site,…

• App Ui Design

  by @majiayu000

  Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color…

• Video To Landing Page

  by @hoodini

  Turn any video into a cinematic scroll-driven landing page — Apple-style hero where scrolling progresses the visible frame through the video. Use when the user provides a video file and asks for "a landing page from this video",…

• Database Patterns

  by @majiayu000

  Use when designing PostgreSQL + Redis data models, indexes, caching strategies, JSONB usage, tiered storage, or cache consistency contracts.

• Frontend Design

  by @majiayu000

  Create distinctive, production-grade web frontend interfaces with high design quality. Use when the user explicitly asks to build or substantially redesign a web component, page, or application. Only applies when repository…

• Figma To Code

  by @majiayu000

  Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy. Use when a user provides a Figma URL or asks to convert Figma designs to code.

• Ui Design System

  by @majiayu000

  Use when creating or maintaining UI design systems, design tokens, component documentation, responsive calculations, quality checks, or design-dev handoff materials.

• Figma To React

  by @majiayu000

  Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

• Yuv Decks

  by @hoodini

  Build cinematic, narrative-driven presentation decks in Yuval Avidani's signature style using @open-slide/core. The user describes a topic and audience; this skill scaffolds an open-slide project, drafts the 4-act narrative arc…

• Figma

  by @hoodini

  Integrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code…

• Ux Design Systems

  by @hoodini

  Build consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design…

• Mobile Responsiveness

  by @hoodini

  Build responsive, mobile-first web applications. Use when implementing responsive layouts, touch interactions, mobile navigation, or optimizing for various screen sizes. Triggers on responsive design, mobile-first, breakpoints,…

• Children Privacy Notice

  by @mukul975

  Designs and implements privacy notices for children that comply with GDPR Articles 12-14, UK AADC Standard 4, and COPPA Section 312.4. Covers plain language, visual explanations, layered information, age-appropriate vocabulary,…

• Bcr Establishment

  by @mukul975

  Guides development and approval of Binding Corporate Rules under GDPR Article 47 for intra-group international data transfers. Covers Art. 47(2)(a)-(n) content requirements, BCR approval process with lead supervisory authority,…

• Cookie Consent Ab Audit

  by @mukul975

  Methodology for auditing A/B testing of consent banners to ensure compliance with equal ease of acceptance and rejection. Covers CNIL enforcement patterns including the EUR 150M Google fine, dark pattern detection methodology,…

• Frontend Design Pro

  by @claudekit

  Creates jaw-dropping, production-ready frontend interfaces AND delivers perfectly matched real photos (Unsplash/Pexels direct links) OR flawless custom image-generation prompts for hero images, backgrounds, and illustrations.…

• Accredible

  by @membranedev

  Accredible integration. Manage data, records, and automate workflows. Use when the user wants to interact with Accredible data.

• Abstract

  by @membranedev

  Abstract integration. Manage data, records, and automate workflows. Use when the user wants to interact with Abstract data.

• 1msg

  by @membranedev

  1msg integration. Manage data, records, and automate workflows. Use when the user wants to interact with 1msg data.

• 7shifts

  by @membranedev

  7shifts integration. Manage Companies. Use when the user wants to interact with 7shifts data.

• Design Systems

  by @Mindrally

  Comprehensive design system guidelines for building consistent, accessible, and scalable component libraries. Use when creating design tokens, building component libraries, implementing design systems, setting up theming…

• Cheerio Parsing

  by @Mindrally

  Expert guidance for HTML/XML parsing using Cheerio in Node.js with best practices for DOM traversal, data extraction, and efficient scraping pipelines.

• Css

  by @Mindrally

  Best practices for CSS development including modern layout techniques, naming conventions, theming, and maintainable stylesheet architecture

• Convex

  by @Mindrally

  Guidelines for developing with Convex backend-as-a-service platform, covering queries, mutations, actions, and real-time data patterns

• Accessibility A11y

  by @Mindrally

  Implement web accessibility (a11y) best practices following WCAG guidelines to create inclusive, accessible user interfaces.

• Clerk Authentication

  by @Mindrally

  Guidelines for implementing Clerk authentication in Next.js applications with middleware, hooks, and security best practices

• Bootstrap

  by @Mindrally

  Bootstrap development guidelines for responsive layouts, components, and utility-first styling.

• Elasticsearch Best Practices

  by @Mindrally

  Elasticsearch development best practices for indexing, querying, and search optimization

• Anime Js

  by @Mindrally

  Expert guidelines for building performant animations with Anime.js animation library

• Elixir

  by @Mindrally

  Expert in Elixir and Phoenix development with functional programming patterns

• Streaming Ssr

  by @PatternsDev

  Teaches streaming server-side rendering for chunked HTML delivery. Use when you need faster Time to First Byte and First Contentful Paint by streaming HTML as it's generated on the server.

• Js Performance Patterns

  by @PatternsDev

  Provides framework-agnostic JavaScript runtime performance patterns. Use when optimizing hot paths, loops, DOM operations, caching, or data structure choices in performance-critical code.

• Mixin Pattern

  by @PatternsDev

  Teaches the mixin pattern for sharing functionality without inheritance. Use when you need to add reusable behavior to multiple objects or classes that don't share a common ancestor.

• Hooks Pattern

  by @PatternsDev

  Teaches React Hooks for reusing stateful logic across components. Use when extracting shared behavior like form handling, subscriptions, or side effects into reusable custom hooks.

• Ai Ui Patterns

  by @PatternsDev

  Teaches design patterns for building AI-powered React interfaces. Use when creating chatbots, intelligent assistants, streaming UIs, or any AI-driven user experience in React.

• View Transitions

  by @PatternsDev

  Teaches the View Transitions API for animating DOM changes. Use when you want smooth animated transitions between pages or UI states without manual animation code.

• Remotion

  by @jdrhyne

  Best practices for Remotion video creation in React — compositions, sequences, animation, timing, and rendering. Use when building, reviewing, or debugging Remotion videos.

• Design Audit

  by @jdrhyne

  Premium UI/UX design auditor with Jobs/Ive philosophy. Use when reviewing, evaluating, or elevating existing UI — triggers on "audit my design", "review UI", "make it feel premium", "design review", "UX audit", "elevate the…

• Frontend Design

  by @jdrhyne

  Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.

• Frontend Performance Optimization

  by @ProgrammerAnthony

  Use when 用户需要优化前端性能、提升页面加载速度、减少白屏时间、优化交互流畅度、进行性能排查时。触发场景：前端性能优化、页面加载慢、白屏时间长、卡顿、LCP/FID/CLS指标优化、前端性能分析、打包体积优化。

• Algo Price Conjoint

  by @asgard-ai-platform

  Run conjoint analysis to measure how product attributes drive consumer preferences and willingness to pay. Use this skill when the user needs to quantify feature value trade-offs, estimate willingness to pay for specific…

• Algo Mfg Doe

  by @asgard-ai-platform

  Design and analyze factorial experiments to identify significant process factors and optimize settings. Use this skill when the user needs to systematically test factor effects, optimize a manufacturing process, or determine…

• Algo Ecom Search

  by @asgard-ai-platform

  Optimize e-commerce search relevance across the full pipeline from query understanding to result presentation. Use this skill when the user needs to improve search quality, implement query processing features, or diagnose search…

• Algo Mfg Fmea

  by @asgard-ai-platform

  Conduct FMEA to systematically identify, prioritize, and mitigate potential failure modes. Use this skill when the user needs to assess product or process risks, prioritize corrective actions, or build a risk register — even if…

• Algo Hr Matching

  by @asgard-ai-platform

  Implement Gale-Shapley stable matching algorithm for two-sided matching problems. Use this skill when the user needs to match candidates to positions, assign students to schools, or solve any two-sided preference matching — even…

• Api Design

  by @ProgrammerAnthony

  REST API design patterns including resource naming, status codes, pagination, filtering, error responses, versioning, and rate limiting for production APIs.

• Frontend Component

  by @qf-studio

  Create React/Vue component with TypeScript, tests, and styles. Auto-invoke when user says "create component", "add component", "new component", or "build component".

• Product Design

  by @qf-studio

  Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma…

• Maestro

  by @xenitV1

  Use when you need to act as an Elite Software Architect (Maestro) to manage complex repositories. It enforces a "Why over How" philosophy, maintains a persistent project memory (Brain), and orchestrates specialized sub-skills…

• Frontend Design

  by @xenitV1

  Elite Tier Web UI standards, including pixel-perfect retro aesthetics, immersive layouts, and UX psychology protocols.

• Browser Extension

  by @xenitV1

  Master specialized skill for building 2025/2026-grade browser extensions. Deep expertise in Manifest v3, Service Worker persistence (Alarms, Offscreen API), Side Panel API, and Cross-Browser compatibility.

• Optimization Mastery

  by @xenitV1

  2026-grade Cross-Domain Optimization. Expertise in Interaction to Next Paint (INP), Partial Hydration, UUIDv7 indexing, and AI Token Stewardship. Performance is a feature, not an afterthought.

• Planning Mastery

  by @xenitV1

  Create concise, architectural implementation plans using the RFC-Lite format. STRICTLY LIMITED VERBOSITY.

• Auto Animate

  by @secondsky

  AutoAnimate (@formkit/auto-animate) zero-config animations for React. Use for list transitions, accordions, toasts, or encountering SSR errors, animation libraries complexity.

• Aceternity Ui

  by @secondsky

  100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.

• Bun Bundler

  by @secondsky

  This skill should be used when the user asks about "bun build", "Bun.build", "bundling with Bun", "code splitting", "tree shaking", "minification", "sourcemaps", "bundle optimization", "esbuild alternative", "building for…

• Storefront Best Practices

  by @medusajs

  ALWAYS use this skill when working on ecommerce storefronts, online stores, shopping sites. Use for ANY storefront component including checkout pages, cart, payment flows, product pages, product listings, navigation, homepage,…

• Building Admin Dashboard Customizations

  by @medusajs

  Load automatically when planning, researching, or implementing Medusa Admin dashboard UI (widgets, custom pages, forms, tables, data loading, navigation). REQUIRED for all admin UI work in ALL modes (planning, implementation,…

• Db Generate

  by @medusajs

  Generate database migrations for a Medusa module

• Ring:Visualizing

  by @LerianStudio

  Generating self-contained, Lerian-branded HTML artifacts — D2 diagrams, comparison tables/matrices, code diffs, dashboards, slide decks, and plan/diff/recap reviews — from mandatory templates, then opening them in the browser.…

• Ring:Running Dev Cycle Frontend

  by @LerianStudio

  Running the frontend (React/Next.js/TS) dev cycle from a plan.md (ring:writing-plans format; legacy tasks.md only for in-flight cycles) or backend handoff: drives frontend agents through Gate 0 TDD plus…

• Ring:Using Dev Team

  by @LerianStudio

  Selecting and dispatching the right Ring developer specialist agent (backend Go/TS, frontend, UI designer/engineer, Helm, frontend QA, prompt reviewer) for a technology task. Use when you need deep stack expertise and must…

• Api Platform Versioning

  by @dev-toolings

  Evolve API Platform APIs via deprecation (deprecationReason/sunset, RFC 8594/9745), the recommended alternative to versioning; plus path/header strategies

• Doctrine Relations

  by @dev-toolings

  Define Doctrine entity relationships (OneToMany, ManyToMany, ManyToOne); configure cascade, orphan removal, multiple entity managers; prevent N+1 queries

• Api Platform State Providers

  by @dev-toolings

  Master API Platform v4 State Providers and Processors (ProviderInterface/ProcessorInterface) to decouple data retrieval and persistence from entities

• Api Platform Filters

  by @dev-toolings

  Implement API Platform filters - v4 Parameters API (QueryParameter) and legacy #[ApiFilter] - for search, date, range, boolean, and custom filtering

• Doctrine Fixtures Foundry

  by @dev-toolings

  Create test data with Zenstruck Foundry v2 factories (PersistentObjectFactory, real objects); define states, sequences, and relationships

• Api Platform Dto Resources

  by @dev-toolings

  Map entities to API DTOs in API Platform v4 with the Symfony Object Mapper (#[Map], stateOptions) for decoupled input/output contracts

• Doctrine Transactions

  by @dev-toolings

  Handle Doctrine transactions (ORM 3 wrapInTransaction), optimistic/pessimistic locking, flush strategies, and transaction boundaries

• Api Platform Resources

  by @dev-toolings

  Configure API Platform v4 resources with explicit operations, pagination, and typed OpenAPI for clean, versioned REST/GraphQL APIs

• Doctrine Fetch Modes

  by @dev-toolings

  Optimize Doctrine fetching with DTO hydration (SELECT NEW; partial removed in ORM 3), lazy loading, query hints, and DBAL 4 access

• Api Platform Serialization

  by @dev-toolings

  Control API Platform serialization with groups, #[Context], IRI links (readableLink/writableLink), and custom context builders

• Api Platform Security

  by @dev-toolings

  Secure API Platform resources with security expressions, voters, securityPostValidation, and operation-level access control

• Frontend Ui Prototype

  by @NeverSight

  Build a question-driven, browser-testable frontend prototype with a single index.html and locally downloaded raster assets. Use when turning a product idea, existing app, repository, screenshot, or live URL into a landing page…

• Slidev

  by @NeverSight

  Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.

• Appfactory Builder

  by @NeverSight

  Build and deploy production apps using AppFactory's 7 pipelines (websites, mobile, dApps, AI agents, plugins, mini apps, bots). One prompt → live URL.

• Apple Hig Designer

  by @jamesrochabrun

  Design iOS apps following Apple's Human Interface Guidelines. Generate native components, validate designs, and ensure accessibility compliance for iPhone, iPad, and Apple Watch.

• Query Expert

  by @jamesrochabrun

  Master SQL and database queries across multiple systems. Generate optimized queries, analyze performance, design indexes, and troubleshoot slow queries for PostgreSQL, MySQL, MongoDB, and more.

• Frontend Designer

  by @jamesrochabrun

  Build accessible, responsive, and performant frontend components with design system best practices, modern CSS, and framework-agnostic patterns.

• Math Teacher

  by @jamesrochabrun

  Interactive math teacher that instantly generates playful, gamified learning experiences. Creates visual playgrounds, interactive artifacts, and engaging games for kids and adults to learn math concepts from basic arithmetic to…

• Design Brief Generator

  by @jamesrochabrun

  Generate comprehensive design briefs for design projects. Use this skill when designers ask to "create a design brief", "structure a design project", "define design requirements", or need help planning design work.

• Reading Teacher

  by @jamesrochabrun

  Interactive reading teacher that instantly generates playful, engaging learning experiences for children ages 1-10. Creates visual playgrounds, phonics games, and interactive stories to build reading skills from letter…

• Prd Generator

  by @jamesrochabrun

  Generate comprehensive Product Requirements Documents (PRDs) for product managers. Use this skill when users ask to "create a PRD", "write product requirements", "document a feature", or need help structuring product…

• Swiftui Animation

  by @jamesrochabrun

  This skill provides comprehensive guidance for implementing advanced SwiftUI animations, transitions, matched geometry effects, and Metal shader integration. Use when building animations, view transitions, hero animations, or…

• Book Illustrator

  by @jamesrochabrun

  Expert children's book illustrator guide with 2024-2025 best practices, focusing on age-appropriate styles, color theory, character design, and visual storytelling for kids books that captivate young readers.

• Extract Design

  by @danielvm-git

  Extract a Google DESIGN.md file from an HTML prototype (claude.ai/design or any styled page) using Puppeteer, producing machine-readable tokens and AI-generated prose. Use when the user has an HTML prototype and wants a…

• Align Grid

  by @danielvm-git

  Build editorial/magazine/report webpages on a GENUINE Müller-Brockmann modular grid (International Typographic Style) — not a decorative one. Encodes the discipline (columns + modules + baseline, grotesque type, flush-left,…