Design AI agent skills

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

• Hyva Child Theme

  by @hyva-themes

  Create a Hyvä child theme in a Magento 2 project. This skill should be used when the user wants to create a new Hyvä child theme, set up a custom theme based on Hyvä, or initialize a new frontend theme directory structure.…

• Spatial Thinking

  by @dylantarre

  Use when animation involves depth, perspective, volume, or three-dimensional awareness—camera moves, character positioning, environmental interaction, or maintaining consistent spatial relationships.

• Universal Mindset

  by @dylantarre

  Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation.

• Attention Direction

  by @dylantarre

  Use when controlling where the audience looks—composing shots, choreographing action, revealing information, or any situation requiring clear visual hierarchy and focus management.

• Naturalistic Motion

  by @dylantarre

  Use when animation should feel organic and lifelike—creature animation, realistic characters, nature elements, or any motion that needs to breathe with authentic living quality.

• Physics Intuition

  by @dylantarre

  Use when motion needs to feel physically grounded—objects falling, characters jumping, things colliding, or any element that should obey believable weight and momentum.

• Timing Mastery

  by @dylantarre

  Use when determining how fast or slow motion should be—pacing action sequences, dramatic pauses, comedic beats, or any situation where the duration of movement matters.

• Emotional Narrative

  by @dylantarre

  Use when animation needs to convey feeling, tell a story, or connect emotionally—character moments, dramatic beats, or any motion that should make the audience care.

• 前端设计师

  by @laborany

  创建独特、高品质的前端界面，避免千篇一律的 AI 风格。 触发场景: (1) 用户需要创建网页、HTML 页面 (2) 用户需要设计 UI 界面、组件 (3) 用户询问"帮我做个网页"、"设计界面"、"前端开发" (4) 其他 skill 生成 HTML 输出时自动应用 设计原则: 避免 AI 味、追求独特性、注重细节、强调品味

• State Changes

  by @dylantarre

  Use when elements transform in place - toggle switches, expanding accordions, checkbox animations, button states, or any transformation without entering/exiting.

• Anticipation Payoff

  by @dylantarre

  Use when designing action sequences, gags, reveals, or any motion that needs setup before delivery—preparing audiences for what's coming and maximizing impact.

• Animator Traditional

  by @dylantarre

  Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.

• Exit Animations

  by @dylantarre

  Use when elements need to leave the screen - closing modals, dismissing notifications, removing items, page transitions out, or any "leaving view" animation.

• Attention Grabbers

  by @dylantarre

  Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.

• Continuous Loops

  by @dylantarre

  Use when creating ongoing animations - loading spinners, pulsing indicators, ambient motion, background effects, or any animation that repeats indefinitely.

• Feedback Indicators

  by @dylantarre

  Use when confirming user actions - success checkmarks, error alerts, form validation, save confirmations, or any animation acknowledging what the user did.

• Animation Principles Expert

  by @dylantarre

  Use when someone has mastery of animation principles and wants to explore intentional rule-breaking, stylistic innovation, and pushing creative boundaries

• Motion Designer

  by @dylantarre

  Use when designing visual motion systems, creating animation specifications, or when a designer needs guidance on crafting beautiful, meaningful movement.

• Transition Sequences

  by @dylantarre

  Use when orchestrating multi-step animations - page transitions, onboarding flows, wizard steps, complex reveals, or any choreographed animation sequence.

• Animation Principles Advanced

  by @dylantarre

  Use when someone has strong command of animation principles and seeks deeper understanding of subtle applications, edge cases, and stylistic variations

• Gesture Responses

  by @dylantarre

  Use when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.

• Animation Principles Universal Reference

  by @dylantarre

  Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level

• Frontend Developer

  by @dylantarre

  Use when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.

• Loading States

  by @dylantarre

  Use when indicating progress or waiting - spinners, progress bars, skeleton screens, shimmer effects, or any animation showing the system is working.

• Ux Researcher

  by @dylantarre

  Use when evaluating animation usability, conducting motion studies, or when researching how animation affects user perception and task completion.

• Entrance Animations

  by @dylantarre

  Use when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.

• Game Development

  by @dylantarre

  Use when implementing game animations, player feedback, character movement, or interactive entertainment in Unity, Unreal, or other game engines.

• Accessibility Advocate

  by @dylantarre

  Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.

• Product Manager

  by @dylantarre

  Use when prioritizing animation features, building motion roadmaps, or when a PM needs to understand the business value of animation principles.

• Universal Patterns

  by @dylantarre

  Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.

• Accessible Motion

  by @dylantarre

  Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.

• Filmmaker

  by @dylantarre

  Use when creating cinematic sequences, narrative animations, or when applying animation principles to video storytelling and visual narrative.

• Animation Principles Intermediate

  by @dylantarre

  Use when someone has working knowledge of animation principles and needs guidance on combining them effectively in more complex animations

• Brand Strategist

  by @dylantarre

  Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.

• Animation Principles Absolute Beginner

  by @dylantarre

  Use when someone has never heard of animation principles, needs the simplest explanation possible, or is a complete newcomer to animation

• Universal Practitioner

  by @dylantarre

  Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.

• Hover Interactions

  by @dylantarre

  Use when creating mouse hover effects - button highlights, card lifts, link underlines, image zooms, or any pointer-triggered animation.

• Micro Interactions

  by @dylantarre

  Use when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.

• Scroll Animations

  by @dylantarre

  Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.

• Creative Director

  by @dylantarre

  Use when overseeing animation vision, setting creative direction for motion, or guiding teams on animation quality and consistency.

• Page Transitions

  by @dylantarre

  Use when implementing route changes, view transitions, modal opens/closes, or navigation animation in web and mobile applications.

• Game Designer

  by @dylantarre

  Use when designing game feel, player feedback systems, or when creating animations that enhance gameplay and player satisfaction.

• Universal Fallback

  by @dylantarre

  Use when the animation domain is unclear or spans multiple contexts—provides general-purpose Disney animation principle guidance.

• Brand Marketing

  by @dylantarre

  Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.

• Educator Teacher

  by @dylantarre

  Use when creating educational content, explaining concepts through animation, or when teaching animation principles to students.

• Video Motion Graphics

  by @dylantarre

  Use when creating After Effects compositions, Premiere Pro motion, video titles, explainer videos, or broadcast motion graphics.

• 3d Spatial

  by @dylantarre

  Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.

• Animation Principles Deep Dive

  by @dylantarre

  Use when someone needs comprehensive reference material on animation principles with technical depth and extensive context

• Animation Principles Novice

  by @dylantarre

  Use when someone has basic awareness of animation principles and wants to start applying them in simple projects

• Web Motion Design

  by @dylantarre

  Use when building CSS animations, JavaScript transitions, React/Vue motion, or any browser-based animation work.

• Mobile Touch

  by @dylantarre

  Use when designing iOS/Android gestures, haptic feedback, touch interactions, or native mobile animations.

• Presentations

  by @dylantarre

  Use when creating Keynote, PowerPoint, Google Slides animations, or any presentation motion design work.

• Animation Principles Refresher

  by @dylantarre

  Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations

• Animation Principles Troubleshooting

  by @dylantarre

  Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied

• Animation Principles Quick Start

  by @dylantarre

  Use when someone needs a rapid overview of all 12 animation principles in under 5 minutes

• Clerk Custom Ui

  by @clerk

  Custom authentication flows and component appearance - hooks (useSignIn, useSignUp), themes, colors, fonts, CSS. Use for custom sign-in/sign-up flows, appearance styling, visual customization, branding.

• Agent Coordination

  by @ilyasibrahim

  Coordination protocol for main Claude Code agent. Explicit user invocation required ("mobilize agents", "coordinate", "check registry"). Provides agent orchestration, registry management, and handoff protocols. Subagents never…

• Funnel Hacking

  by @ominou5

  Reverse-engineer any live public sales funnel and rebuild it — adapted for the user's brand, copy, and offer — without copyright infringement. Handles single pages or entire multi-page funnels. Uses Russell Brunson's…

• Design

  by @ilyasibrahim

  Unified design system for data/ML dashboards. Quick reference for brand vs data color decisions, component patterns, typography, spacing. Auto-invokes on styling, CSS, design, colors, UI, visualization keywords. Tiered loading -…

• Group Funnel

  by @ominou5

  Builds a 2-page community group growth funnel. Drives free opt-ins to a group (Skool, Whop, Facebook Group, Discord, or any community platform) using a lead magnet. Use when the goal is to grow a free or paid community.

• Funnel Strategy

  by @ominou5

  High-level funnel strategy skill. Helps define the funnel's goal, target audience, price point, traffic source, and overall conversion path before any code is written. Use this FIRST before selecting a funnel type.

• Accessibility Checklist

  by @ilyasibrahim

  WCAG AA accessibility checklist and verification protocols for Somali dialect classifier dashboard. Covers keyboard navigation, screen readers, color contrast, ARIA labels, and accessibility testing procedures.

• Conversion Audit

  by @ominou5

  Comprehensive funnel audit framework. Systematically reviews every page for conversion killers, missed opportunities, and quick wins. Produces a scored report with prioritized recommendations.

• Mobile Responsive

  by @ominou5

  Mobile-first responsive design patterns for sales funnels. Ensures every page works flawlessly on all screen sizes with proper touch targets, readable typography, and fast load times.

• Design System

  by @ominou5

  Design system and visual language for sales funnels. Provides color palettes, typography, spacing, component styles, and theming guidelines for a polished, premium look.

• Page Speed

  by @ominou5

  Page speed optimization guidelines and implementation patterns. Ensures all funnel pages meet Core Web Vitals targets for LCP < 2.5s, FID < 100ms, and CLS < 0.1.

• Skill Manager

  by @TestAny-io

  打开 SkillDock 本地 GUI，浏览和管理 Codex skills、plugins 与 marketplace 来源；适用于技能库、安装更新、启禁、移除恢复的可视化管理。普通任务只需使用某个 skill 时不触发。

• Hld Writer

  by @TestAny-io

  Write HLD, High-Level Design, 写技术设计文档。Use when: PRD 和 API Contract 完成后需要做系统架构设计、技术选型、制定技术方案。 也用于既有相关文档的有限增量更新。

• Prd Writer

  by @TestAny-io

  Write PRD, 写产品需求文档。Use when: 需要写新功能 PRD（有UI/无UI）、第三方集成、功能重构、性能/安全优化需求。

• Prototype Designer

  by @TestAny-io

  Prototype, 交互原型, 原型设计, UI prototype。Use when: PRD 和 User Journey 完成后，需要在前端仓库中生成可交互的 UI 原型，验证交互模式和流转逻辑，在进入 HLD/API Contract 之前暴露设计问题。

• Runbook Writer

  by @TestAny-io

  Write Runbook, 撰写运维手册。Use when: LLD 完成后需要编写部署、回滚、监控、故障处理等运维文档。 也用于既有相关文档的有限增量更新。

• Guardrails Reviewer

  by @TestAny-io

  Review Project Guardrails, 工程规范评审。Use when: Guardrails 创建或更新后需要作为项目级治理基线做准出，检查触发判定、生成模式、事实标准、下游工作流钩子与规则可执行性。

• App Store Listing

  by @Innei

  Use when preparing an iOS app for a first App Store listing or a listing refresh — App Store Connect questionnaires (age rating, App Privacy, encryption, content rights, review notes), zh/ja/en store copy, or framed screenshot…

• Product Visuals

  by @Innei

  Use when the user wants a product marketing image from real macOS or iOS screenshots — dual-device hero, device-framed mockup, 宣传图, 产品图, 机型边框, privacy-safe Safari or web presentation, App Store screenshots, OG card, changelog…

• Gemini Seo Image Assets

  by @Innei

  Use when a web project needs Google AI Studio or Gemini-generated favicon and Open Graph images, exported icon variants, and matching SEO metadata wiring.

• Acg Character Settei

  by @Innei

  Use when generating an ACG (anime/manga) character settei sheet (キャラ設定資料) — multi-view full-body lineup, expression list, detail callouts, color palette — from a template settei image plus a single character reference image.…

• Generate Design Md

  by @Innei

  Generate a DESIGN.md file for any brand or website by analyzing its visual design system. Use when the user asks to "generate a DESIGN.md for [brand/URL]", "create a design system doc for [site]", "extract the design tokens from…

• Gemini Image Generation

  by @Innei

  Use when a task requires Gemini text-to-image or image-to-image generation, including style transfer, character consistency, reference-image workflows, and watermark removal from Gemini-sourced images.

• Iced Rs

  by @vanillagreencom

  Load whenever building or debugging an Iced UI.

• Compete

  by @simota

  Triggers when researching competitive or professional positioning: market intelligence, engineer brands, profiles, and content strategy. Research and strategy only — not code.

• Launch

  by @simota

  Planning releases and reporting delivery work from GitHub PR history. Use when versioning, CHANGELOGs, rollout or rollback plans, engineering metrics, retrospectives, or stakeholder reports are needed.

• Builder

  by @simota

  Implementing robust business logic, API integrations, data models, and reproducible AI image-generation code with type safety. Use for production implementation, Gemini image API pipelines, or interactive pair programming.

• Forge

  by @simota

  Building rapid prototypes for frontend (UI components/pages) and backend (API mocks, simple servers). Use to validate new features or turn ideas into working demos. Working software over perfection.

• Muse

  by @simota

  Defining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.

• Palette

  by @simota

  Improving usability, interaction quality, cognitive load reduction, feedback design, and a11y compliance. Use when improving UX usability or interaction feel.

• Funnel

  by @simota

  Constructing landing pages from a focused section to a premium multi-stage studio pipeline: structure, copy, conversion, responsive build, craft gates, and launch handoffs. Use when building or optimizing an LP, CTA, conversion…

• Port

  by @simota

  Designing web-to-iOS/Android porting strategy: feature parity matrices, native architecture maps, phased Strangler-Fig roadmaps. Not for same-language migration (Shift) or native impl (Native).

• Field

  by @simota

  Conducting user research: interview guides, usability test plans, qualitative analysis, persona creation, journey mapping. Use when research design or analysis is needed; complements Echo.

• Architect

  by @simota

  Designing new skill agents via gap analysis, overlap detection, SKILL.md + reference generation, and Nexus integration. Not for task orchestration (Nexus) or format-only audits (Gauge).

• Flow

  by @simota

  Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use for meaningful motion, interaction feedback, or performance-safe animation.

• Pixel

  by @simota

  Generating pixel-accurate HTML/CSS code from image mockups (PNG/JPG/screenshots) and performing visual verification for faithful reproduction. Use when mockup-to-code generation is needed.

• Quill

  by @simota

  Adding JSDoc/TSDoc, updating READMEs, replacing any types with proper definitions, and adding high-value comments to complex logic. Use for documentation gaps or type safety.

• Atlas

  by @simota

  Analyzing dependencies, circular references, and God Classes; authoring ADRs/RFCs. Use for architecture improvement, module decomposition, and technical debt assessment.

• Frame

  by @simota

  Extracting and structuring design context from Figma via MCP Server for downstream implementation agents. Use for Figma-to-code bridging or Code Connect management.

• Artisan

  by @simota

  Implementing production frontend code for React/Vue/Svelte: hooks design, state management, Server Components, form handling, data fetching. Converts Forge prototypes to production quality.

• Polyglot

  by @simota

  Implementing i18n and l10n: extracts hardcoded strings to t() functions, integrates Intl API for date/currency/number formatting, manages translation keys, and adds RTL layout support.

• Compass

  by @simota

  Navigating the skill ecosystem and guiding onboarding. Lists agents, recommends best fit for tasks. Don't use for task execution (Nexus), agent design (Architect).

• Ink

  by @simota

  Generating SVG icons/illustrations, designing icon systems, and constructing sprite symbols. Use when vector assets are needed.

• Prose

  by @simota

  Writing user-facing UX text including microcopy, error messages, voice and tone design, onboarding copy, and accessibility text. Use when UX writing or content strategy is needed.

• Sealos Canvas

  by @labring

  Run a local read-only HTML topology UI for a project already deployed by Sealos Skills and return a localhost URL. Use when the user asks to view, inspect, visualize, render, open, or run a local canvas for deployed Sealos…