Design & Frontend | Agent Skills

Design & Frontend

Design and frontend skills guide interface implementation, visual design, interaction, and frontend-framework workflows.

Catalog snapshot: November 2, 2026

Category menu

Skills in this category

AbubakrChan/product-launch-motion

Catalog entry: Marketing
Source documentation: https://github.com/AbubakrChan/product-launch-motion/blob/main/SKILL.md

Function: Website URL to 60 fps launch video with music.

When to use it: Use when asked to make a launch video, product film, motion design piece, UI motion reel, Dribbble-style UI animation or animated brand/logo sting — anything rendered to MP4 from HTML with a cursor, morphing UI, springs, beat-synced music and SFX. Carries Chan’s full creative direction (one shape never cut, blur content swaps, springs, real data, logo slams, no creative limits) and the proven build/render pipeline (pure seek(t), closed-form springs, Playwright subframes, ffmpeg tmix, numpy beat grid).

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Motion design launch videos
  • The stance: you are the director
  • Non-negotiable motion rules
  • Look
  • Content
  • Process
  • Gotchas that cost hours
  • Output

aklofas/kicad-happy

Catalog entry: Specialized Domains
Source documentation: https://github.com/aklofas/kicad-happy/blob/main/README.md

Function: AI-powered KiCad electronics design review and analysis

When to use it: Use when a task needs the capability described in this catalog entry: AI-powered KiCad electronics design review and analysis

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • ⚡ kicad-happy
  • 🔬 What it looks like in practice
  • 🚀 Install
  • Release candidates
  • ⚙️ GitHub Action
  • 📦 Skills
  • 🖐️ Ask about specific circuits
  • What the analysis covers
  • 🔬 SPICE simulation
  • 📡 EMC pre-compliance
  • 📄 Datasheets — sync and extract
  • 📋 BOM management — from schematic to order
  • 🏭 Manufacturing
  • 🗺️ Workflow
  • Optional setup
  • ✅ KiCad version support

This catalog entry points to a collection. The scanned repository lists 11 distinct skill-file paths.

Sample members: bom · datasheets · digikey · element14 · emc · jlcpcb · kicad · lcsc
More members are available in the source repository.


Alisa0808/vibe-creating-skill

Catalog entry: Specialized Domains
Source documentation: https://github.com/Alisa0808/vibe-creating-skill/blob/main/skills/vibe-creating-prompt/SKILL.md

Function: Rewrites a rough idea or shot script into text-to-video prompts

When to use it: Use when a user wants to turn an idea, story, feeling, or rough/over-specified prompt into a strong text-to-video prompt (Seedance, Sora, Kling, Veo, Runway, etc.), or asks to “rewrite”, “improve”, “clean up”, or “vibe-ify” a video prompt. Do NOT use for long narrative films that need precise word-for-word dialogue sync, industrial shot lists meant to be executed verbatim, or functional/UI demos and step-by-step tutorials.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Vibe Creating Prompt Skill
  • Overview
  • Quick Start
  • Decision Framework — Scenario × Expression × Information
  • Scenario fit (S)
  • Expression form (E)
  • Routing matrix (default action per cell)
  • Four hard routing rules
  • Information-density check (I)
  • Interaction Policy
  • Camera Language Policy
  • Sound & Constraint Priority
  • Rewrite Modes
  • Output Rules
  • Length & form
  • User-visible format

allxsmith/bestax

Catalog entry: Development and Testing
Source documentation: https://github.com/allxsmith/bestax/blob/main/skills/README.md

Function: Build Bulma React pages, forms, and themes with Bestax

When to use it: Use when a task needs the capability described in this catalog entry: Build Bulma React pages, forms, and themes with Bestax

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • bestax-bulma Agent Skills
  • Skills
  • Install
  • Layout
  • See also

This catalog entry points to a collection. The scanned repository lists 7 distinct skill-file paths.

Sample members: bestax-custom-component · bestax-form · bestax-icons · bestax-layout-scaffold · bestax-migrate · bestax-optimize · bestax-theming


angular/angular-developer

Catalog entry: Skills by Angular
Source documentation: https://github.com/angular/skills/blob/main/angular-developer/SKILL.md

Function: Generate Angular code and architectural guidance for components, services, reactivity

When to use it: Use when a task needs the capability described in this catalog entry: Generate Angular code and architectural guidance for components, services, reactivity

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Angular Developer Guidelines
  • Creating New Projects
  • Components
  • Reactivity and Data Management
  • HTTP Communication
  • Forms
  • Dependency Injection
  • Pipes
  • Angular Aria
  • Routing
  • Styling and Animations
  • Testing
  • Tooling

anthropics/algorithmic-art

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/algorithmic-art/SKILL.md

Function: Create generative art using p5.js with seeded randomness

When to use it: Turning a vague aesthetic concept into a runnable generative art sketch Exploring flow fields and particle systems through interactive seed navigation Building a series of algorithmic prints from a single parametric algorithm Generating unique visual outputs reproducibly using seed-based randomness Prototyping computational art concepts with tunable sliders and real-time feedback

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • ALGORITHMIC PHILOSOPHY CREATION
  • THE CRITICAL UNDERSTANDING
  • HOW TO GENERATE AN ALGORITHMIC PHILOSOPHY
  • PHILOSOPHY EXAMPLES
  • ESSENTIAL PRINCIPLES
  • DEDUCING THE CONCEPTUAL SEED
  • P5.JS IMPLEMENTATION
  • ⚠️ STEP 0: READ THE TEMPLATE FIRST ⚠️
  • TECHNICAL REQUIREMENTS
  • CRAFTSMANSHIP REQUIREMENTS
  • OUTPUT FORMAT
  • INTERACTIVE ARTIFACT CREATION
  • CRITICAL: WHAT’S FIXED VS VARIABLE
  • REQUIRED FEATURES
  • USING THE ARTIFACT
  • VARIATIONS & EXPLORATION

anthropics/brand-guidelines

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/brand-guidelines/SKILL.md

Function: Apply Anthropic’s brand colors and typography to artifacts

When to use it: Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Anthropic Brand Styling
  • Overview
  • Brand Guidelines
  • Colors
  • Typography
  • Features
  • Smart Font Application
  • Text Styling
  • Shape and Accent Colors
  • Technical Details
  • Font Management
  • Color Application

anthropics/canvas-design

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/canvas-design/SKILL.md

Function: Design visual art in PNG and PDF formats

When to use it: use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists’ work to avoid copyright violations.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • DESIGN PHILOSOPHY CREATION
  • THE CRITICAL UNDERSTANDING
  • HOW TO GENERATE A VISUAL PHILOSOPHY
  • PHILOSOPHY EXAMPLES
  • ESSENTIAL PRINCIPLES
  • DEDUCING THE SUBTLE REFERENCE
  • CANVAS CREATION
  • FINAL STEP
  • MULTI-PAGE OPTION

anthropics/frontend-design

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md

Function: Frontend design and UI/UX development tools

When to use it: Building a landing page that avoids the standard gradient-hero-with-Inter-font template Styling a React dashboard to match a brutalist or editorial aesthetic instead of a Material UI default Generating HTML/CSS layouts with custom typography pairings and motion effects Prototyping a web component with scroll-triggered animations and a deliberate color system Converting a plain UI mockup into a visually distinct, cohesive page with atmospheric backgrounds

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Frontend Design
  • Ground your designs in the subject matter
  • Design principles
  • Process: plan, review against the brief, build, critique
  • Restraint and self-critique
  • More on writing in design

anthropics/slack-gif-creator

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/slack-gif-creator/SKILL.md

Function: Create animated GIFs optimized for Slack size constraints

When to use it: Use when users request animated GIFs for Slack like “make me a GIF of X doing Y for Slack.“

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Slack GIF Creator
  • Slack Requirements
  • Core Workflow
  • Drawing Graphics
  • Working with User-Uploaded Images
  • Drawing from Scratch
  • Making Graphics Look Good
  • Available Utilities
  • GIFBuilder (`core.gif_builder`)
  • Validators (`core.validators`)
  • Easing Functions (`core.easing`)
  • Frame Helpers (`core.frame_composer`)
  • Animation Concepts
  • Shake/Vibrate
  • Pulse/Heartbeat
  • Bounce

anthropics/theme-factory

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/theme-factory/SKILL.md

Function: Style artifacts with professional themes or generate custom themes

When to use it: Applying a consistent color scheme to a client-facing slide deck Restyling a generated HTML landing page to match a brand’s tone Switching a report from a corporate grayscale look to warm earth tones Generating a custom theme from a brief description like ‘dark tech with blue accents’ Browsing 10 named themes visually before picking one for a presentation

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Theme Factory Skill
  • Purpose
  • Usage Instructions
  • Themes Available
  • Theme Details
  • Application Process
  • Create your Own Theme

anthropics/web-artifacts-builder

Catalog entry: Official Claude Skills
Source documentation: https://github.com/anthropics/skills/blob/main/skills/web-artifacts-builder/SKILL.md

Function: Build complex claude.ai HTML artifacts with React and Tailwind

When to use it: Building a multi-step form wizard with shadcn/ui components as a claude.ai artifact Bundling a React dashboard with charts and filters into a single shareable HTML file Scaffolding a new artifact project with Tailwind and 40+ shadcn/ui components already wired up Converting a Vite + TypeScript project into an inline artifact with no external dependencies Iterating on a stateful UI prototype directly inside a Claude conversation

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Web Artifacts Builder
  • Design & Style Guidelines
  • Quick Start
  • Step 1: Initialize Project
  • Step 2: Develop Your Artifact
  • Step 3: Bundle to Single HTML File
  • Step 4: Share Artifact with User
  • Step 5: Testing/Visualizing the Artifact (Optional)
  • Reference

apollographql/apollo-client

Catalog entry: Skills by Apollo GraphQL
Source documentation: https://github.com/apollographql/skills/blob/main/skills/apollo-client/SKILL.md

Function: Build React applications with Apollo Client 4

When to use it: Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Apollo Client 4.x Guide
  • Integration Guides
  • Quick Reference
  • Basic Query
  • Basic Mutation
  • Suspense Query
  • Reference Files
  • Key Rules
  • Query Best Practices
  • Mutation Best Practices
  • Caching Best Practices
  • Performance
  • Ground Rules

assafkip/claudemy

Catalog entry: Specialized Domains
Source documentation: https://github.com/assafkip/claudemy/blob/main/skills/claudemy/SKILL.md

Function: Any topic into 2-minute audio lessons with cited sources

When to use it: Use when a task needs the capability described in this catalog entry: Any topic into 2-minute audio lessons with cited sources

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Claudemy
  • Inputs
  • Workspace
  • Before starting
  • Step 1. Map the topic
  • Step 2. Build the reading list
  • Person mode
  • Step 3. Read
  • Step 4. Agreement map
  • Step 5. The lesson plan
  • Step 6. One sample lesson first
  • Step 7. The rest
  • Reporting
  • Lesson design defaults
  • Honesty rules (they apply at every step)

callstackincubator/react-native-best-practices

Catalog entry: Skills by CallStack
Source documentation: https://github.com/callstackincubator/agent-skills/blob/main/skills/react-native-best-practices/SKILL.md

Function: Performance optimization for React Native apps from Callstack

When to use it: Replacing ScrollView with FlashList to fix list scroll jank Analyzing JS bundle with source-map-explorer to find bloated dependencies Measuring cold-start TTI and cutting it with Hermes mmap and native navigation Migrating a slow native module to async Turbo Module with background threading Tracking down JS or native memory leaks during a performance review

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React Native Best Practices
  • Overview
  • When to Apply
  • Security Notes
  • Priority-Ordered Guidelines
  • Quick Reference
  • Optimization Workflow
  • Review Guardrails
  • Critical: FPS & Re-renders
  • Critical: Bundle Size
  • High: TTI Optimization
  • High: Native Performance
  • References
  • JavaScript/React (`js-*`)
  • Native (`native-*`)
  • Bundling (`bundle-*`)

callstackincubator/upgrading-react-native

Catalog entry: Skills by CallStack
Source documentation: https://github.com/callstackincubator/agent-skills/blob/main/skills/upgrading-react-native/SKILL.md

Function: React Native upgrade workflow: templates, dependencies, and common pitfalls

When to use it: Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Upgrading React Native
  • Overview
  • Typical Upgrade Sequence
  • When to Apply
  • Quick Reference
  • Problem → Skill Mapping

csthink/dashmotion

Catalog entry: Development and Testing
Source documentation: https://github.com/csthink/dashmotion/blob/main/skills/dashmotion/SKILL.md

Function: Animated technical diagrams from plain English or Mermaid, self-contained HTML/SVG

When to use it: Use this skill whenever the user asks for a flowchart, workflow, pipeline, process diagram, state machine, system architecture, infrastructure, cloud, microservices, or network topology diagram — and especially when they mention “animated”, “flowing”, “dynamic”, “alive”, “GIF-like”, or want a diagram for a landing page, README, docs, or product demo. Also use it to convert Mermaid source (a mermaid code block or .mmd file) into an animated diagram — “animate this mermaid”, “make this flowchart move”. Prefer this over static diagram output whenever the diagram represents anything that moves: requests, events, data

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Dashmotion
  • Step 1 — Pick the mode
  • Step 2 — The two animation contracts (both modes)
  • Flowing dashed connectors — `stroke-dashoffset`
  • Traveling dots — ``
  • Step 3 — Shared design tokens
  • Step 4 — Accessibility & motion (non-negotiable)
  • Step 5 — Produce the file
  • GIF/MP4 export (only if asked)
  • Step 6 — Structural self-check (before delivering)
  • Output contract

degausai/wonda

Catalog entry: Marketing
Source documentation: https://github.com/degausai/wonda/blob/main/skills/wonda-cli/SKILL.md

Function: AI content creation: images, video, music, audio, editing, publishing

When to use it: Use when a task needs the capability described in this catalog entry: AI content creation: images, video, music, audio, editing, publishing

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Wonda CLI
  • Install
  • Setup
  • OAuth connector auth
  • Claude Cowork local relay
  • Organizations & spend context
  • Projects (spend tagging)
  • Access tiers
  • Voice cloning
  • Credentials vault
  • Global output flags
  • CLI announcements & deprecation warnings
  • WAB / Wonda Automation Browser (`wonda wab`)
  • Action rate limits
  • Config keys
  • How to think about content creation

dreammis/alipay-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/alipay-upload/SKILL.md

Function: Publish video posts to Alipay Life Services

When to use it: Use when 用户要向支付宝生活号发布视频或检查创作账号状态。

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • 支付宝生活号视频发布

dreammis/douyin-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/douyin-upload/SKILL.md

Function: Publish videos and image-text posts to Douyin

When to use it: Use when a task needs the capability described in this catalog entry: Publish videos and image-text posts to Douyin

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • 抖音上传 Skill
  • 功能概览
  • 默认工作流
  • 支持动作
  • 命令选择建议
  • 执行前检查
  • 参考文档

dreammis/facebook-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/facebook-upload/SKILL.md

Function: Publish video and image posts to Facebook profiles

When to use it: Use when a task needs the capability described in this catalog entry: Publish video and image posts to Facebook profiles

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Facebook 个人主页发布与删除
  • 示例脚本

dreammis/hupu-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/hupu-upload/SKILL.md

Function: Publish video posts to Hupu

When to use it: Use when 用户要向虎扑发布视频或检查虎扑账号状态。

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • 虎扑视频发布

dreammis/kuaishou-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/kuaishou-upload/SKILL.md

Function: Publish videos and image-text posts to Kuaishou

When to use it: Use when a task needs the capability described in this catalog entry: Publish videos and image-text posts to Kuaishou

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • 快手上传 Skill
  • 功能概览
  • 默认工作流
  • 支持动作
  • 命令选择建议
  • 执行前检查
  • 参考文档

dreammis/meta-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/meta-upload/SKILL.md

Function: Schedule videos and image posts to Facebook Pages

When to use it: Use when a task needs the capability described in this catalog entry: Schedule videos and image posts to Facebook Pages

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Facebook Page 发布与删除
  • 示例脚本

dreammis/xiaohongshu-upload

Catalog entry: Marketing
Source documentation: https://github.com/dreammis/social-auto-upload/blob/main/skills/xiaohongshu-upload/SKILL.md

Function: Publish videos and image-text posts to Xiaohongshu

When to use it: Use when a task needs the capability described in this catalog entry: Publish videos and image-text posts to Xiaohongshu

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • 小红书上传 Skill
  • 功能概览
  • 默认工作流
  • 支持动作
  • 命令选择建议
  • 执行前检查
  • 参考文档

drogers0/github-image-upload

Catalog entry: Development and Testing
Source documentation: https://github.com/drogers0/gh-image/blob/main/skills/github-image-upload/SKILL.md

Function: Attach screenshots, PDFs, logs, zips, and videos to GitHub PRs, issues, and comments, returning canonical user-attachments URLs. GitHub has no public attachment-upload API. Works with Claude Code, Codex, Cursor, and Gemini CLI

When to use it: Use when asked to “attach a screenshot to the PR”, “add an image to the PR description”, “put this image in the issue”, “attach this PDF/log/zip to the issue”, “show test results in the PR”, “embed before/after screenshots”, or any request to visually document or attach files to changes on GitHub. Powered by the `gh-image` gh CLI extension.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • gh pr/issue edit and comment are listed for hosts that check each pipeline stage;
  • whole-string matchers resolve them via the leading printf.
  • Upload images and files to GitHub (gh-image)
  • Prerequisites
  • Step 1 — Resolve the path
  • Step 2 — Confirm, then post
  • Step 3 — Embed
  • Step 4 — Verify
  • Sizing (optional)
  • Going the other way
  • Troubleshooting

expo/building-native-ui

Catalog entry: Skills by Expo Team
Source documentation: https://github.com/expo/skills/blob/main/README.md

Function: Build apps with Expo Router, styling, components, navigation, and animations

When to use it: Structuring tab and stack navigation using NativeTabs and Expo Router file conventions Adding context menus and link previews to navigation elements following iOS conventions Building form sheets with dynamic detents and transparent liquid glass backgrounds Integrating SF Symbols via expo-image and platform-native controls like Switch and DateTimePicker Setting up scroll-driven animations and zoom transitions for iOS 18+ navigation flows

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • How It Works
  • Installation
  • Skills CLI
  • Claude Code Plugin
  • Codex Plugin
  • Updating
  • Try It
  • Skills Included
  • Start Here
  • Framework (open source)
  • Services & paid distribution
  • Experimental
  • Expo MCP Server
  • FAQ
  • Which AI coding agents are supported?
  • Should I install the skills or the plugin?

expo/expo-tailwind-setup

Catalog entry: Skills by Expo Team
Source documentation: https://github.com/expo/skills/blob/main/README.md

Function: Set up Tailwind CSS v4 in Expo with NativeWind v5

When to use it: Adding Tailwind utility classes to React Native components without a babel preset Setting up platform-specific font and color variables that resolve to iOS system colors on device Migrating an Expo project from NativeWind v4 and Tailwind v3 to the CSS-first v4 setup Building shared View, Text, and ScrollView wrappers that accept className props Using CSS variables like --sf-blue in JavaScript via the useCSSVariable hook

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • How It Works
  • Installation
  • Skills CLI
  • Claude Code Plugin
  • Codex Plugin
  • Updating
  • Try It
  • Skills Included
  • Start Here
  • Framework (open source)
  • Services & paid distribution
  • Experimental
  • Expo MCP Server
  • FAQ
  • Which AI coding agents are supported?
  • Should I install the skills or the plugin?

expo/expo-ui-jetpack-compose

Catalog entry: Skills by Expo Team
Source documentation: https://github.com/expo/skills/blob/main/README.md

Function: Jetpack Compose UI components for Expo

When to use it: Rendering a scrollable list with LazyColumn instead of FlatList for native Android performance Adding Material Design 3 buttons, text fields, and chips to an Expo Android screen Applying Compose modifiers like padding and fillMaxWidth to layout components from JavaScript Displaying Android XML vector drawable icons from Material Symbols in a React Native view Building a native Android form with Material 3 theming that matches platform conventions

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • How It Works
  • Installation
  • Skills CLI
  • Claude Code Plugin
  • Codex Plugin
  • Updating
  • Try It
  • Skills Included
  • Start Here
  • Framework (open source)
  • Services & paid distribution
  • Experimental
  • Expo MCP Server
  • FAQ
  • Which AI coding agents are supported?
  • Should I install the skills or the plugin?

expo/expo-ui-swift-ui

Catalog entry: Skills by Expo Team
Source documentation: https://github.com/expo/skills/blob/main/README.md

Function: SwiftUI components for Expo

When to use it: Rendering a SwiftUI List inside a React Native screen Wrapping React Native Pressable components inside a SwiftUI VStack with RNHostView Applying SwiftUI modifiers like padding or foregroundColor to native views Mixing SwiftUI layout containers with existing React Native UI Extending the component set with a local Expo module when a required SwiftUI view is missing

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • How It Works
  • Installation
  • Skills CLI
  • Claude Code Plugin
  • Codex Plugin
  • Updating
  • Try It
  • Skills Included
  • Start Here
  • Framework (open source)
  • Services & paid distribution
  • Experimental
  • Expo MCP Server
  • FAQ
  • Which AI coding agents are supported?
  • Should I install the skills or the plugin?

fal-ai-community/fal-3d

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Generate 3D models from text or images

When to use it: Turning product photos into 3D assets for an online store Creating game-ready meshes from concept art sketches Building 3D printable models from a text description Converting reference images of furniture into 3D previews for interior mockups Prototyping 3D props for a scene without opening modeling software

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-audio

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Text-to-speech and speech-to-text using fal.ai audio models

When to use it: Generating voiceovers for short videos or presentations Transcribing recorded meetings with speaker identification Converting blog posts into audio format for listeners Adding multilingual narration to product demos Getting text transcripts from podcast episodes

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-generate

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Generate images and videos using fal.ai AI models

When to use it: Turning a text description into a product mockup image Creating short video clips from a still photo Batch generating multiple image variations for a design concept Searching fal.ai’s model library to find the right generator for a task Converting a landscape photo into a slow-zoom video

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-image-edit

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: AI-powered image editing with style transfer and object removal

When to use it: Removing unwanted objects or people from a photo before posting Swapping a portrait background to something more fitting Applying an artistic style to a product photo Filling in a masked region of an image with new content Turning a regular photo into anime or illustration style

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-kling-o3

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Generate images and videos with Kling O3 — Kling’s most powerful model family

When to use it: Turning a text prompt into a short video clip for a social media post Converting a product photo into a rotating video showcase Restyling an existing video with a watercolor or anime look Creating cinematic landscape images from text descriptions Editing specific elements in a video like swapping the background sky

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-lip-sync

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Create talking head videos and lip sync audio to video

When to use it: Turning a headshot into a speaking video for a product demo Dubbing an existing video with a different language audio track Creating a virtual presenter from a single photo and a script Re-syncing dialogue in a video after re-recording voiceover Making a still portrait deliver a spoken message for social media

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-platform

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Platform APIs for model management, pricing, and usage tracking

When to use it: Checking per-image or per-second pricing for a specific fal.ai model before committing to a batch run Reviewing your monthly fal.ai spending filtered by model or date range Estimating the total cost of generating 500 images with Flux before kicking off the job Setting up and rotating your FAL_KEY across projects from the command line Cleaning up old request payloads to keep your fal.ai dashboard tidy

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-realtime

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Real-time and streaming AI image generation

When to use it: Previewing logo concepts in real time while adjusting prompts Running quick visual explorations before committing to a full-quality render Building a live image preview into a chat or creative app Generating dozens of prompt variations in rapid succession to find a direction Applying LoRA styles to get fast style-locked drafts

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-restore

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Restore and fix image quality — deblur, denoise, fix faces, restore documents

When to use it: Cleaning up old scanned family photos with blur and noise Fixing faces in low-quality group photos before printing Removing haze from landscape shots taken in foggy conditions Making faded or damaged document scans readable again Sharpening product photos taken with a phone camera

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-train

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Train custom AI models (LoRA) on fal.ai for personalized image generation

When to use it: Training a LoRA on your face so AI portraits look like you Creating a custom style model from a set of reference artwork Building a product-specific model for consistent e-commerce visuals Fine-tuning a character model for use across multiple generated scenes Training a LoRA to replicate a specific illustration technique

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-tryon

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Virtual try-on — see how clothes look on a person

When to use it: Previewing how a jacket looks on you before buying it online Swapping outfits on model photos for an e-commerce product listing Testing different dress options on the same person photo for a lookbook Comparing how a shirt fits across different body types Generating outfit mockups for a styling client without a physical fitting

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-upscale

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Upscale and enhance image and video resolution using AI

When to use it: Upscaling low-res product photos before uploading to an online store Doubling the resolution of old screenshots for a presentation Scaling up AI-generated images that came out too small Restoring detail in compressed video clips Preparing small thumbnails for print-quality output

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-video-edit

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Edit existing videos using AI — remix style, upscale, remove background, add audio

When to use it: Restyling a product demo video into an animated or illustrated look Upscaling old low-resolution footage before publishing Removing backgrounds from talking-head clips for compositing Adding ambient sound effects to silent screen recordings Editing out unwanted objects or people from recorded video

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-vision

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Analyze images — segment objects, detect, OCR, describe, visual Q&A

When to use it: Extracting text from a screenshot of a receipt or invoice Segmenting a specific object in a photo for further editing Counting items in a product image by running object detection Getting a plain-text description of a chart or diagram Asking a question about the contents of a medical scan or floor plan

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

fal-ai-community/fal-workflow

Catalog entry: Skills by fal.ai Team
Source documentation: https://github.com/fal-ai-community/skills/blob/main/README.md

Function: Generate workflow JSON files for chaining AI models

When to use it: Building a text-to-image-to-video pipeline with a single workflow file Chaining an LLM prompt expander with an image generator for better results Creating a workflow that upscales and stylizes user-uploaded photos Generating music and matching visuals from a single text description Connecting a vision model to analyze images then produce edited variants

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • fal.ai Skills
  • Current system
  • Skills
  • Core
  • Umbrellas, knowledge organized by modality, family, or use case
  • Production skills
  • Workflow and vertical skills
  • Setup
  • 1. Get an API key
  • 2. Install genmedia
  • 3. Install skills
  • Skill format
  • License

figma/figma-code-connect-components

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/README.md

Function: Connect Figma design components to code components using Code Connect

When to use it: Mapping a Figma Button component to its React counterpart in the codebase Linking a published design system component to its TypeScript implementation Reviewing and confirming component matches before committing Code Connect mappings Resolving unmapped components in a Figma team library Keeping code snippets in Figma’s Dev Mode in sync with actual component files

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Figma MCP Server Guide
  • Features
  • Installation & Setup
  • Connect to the Figma MCP server
  • Prompting your MCP client
  • Tools and skills
  • MCP best practices
  • Structure your Figma file for better code
  • Write effective prompts to guide the AI
  • Trigger specific tools when needed
  • Add custom rules
  • Break down large selections
  • Bringing Make context to your agent
  • How it works
  • Example workflow
  • Icon Guidelines

figma/figma-create-design-system-rules

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/README.md

Function: Generate project-specific design system rules for Figma-to-code workflows

When to use it: Writing CLAUDE.md rules that tell agents which layout components to use instead of raw divs Documenting where component files live so agents place new components in the right directories Specifying which values must never be hardcoded and should reference design tokens instead Setting up Cursor rules for a new project before the first Figma-to-code sprint Encoding naming conventions for a design system that hasn’t been written down anywhere

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Figma MCP Server Guide
  • Features
  • Installation & Setup
  • Connect to the Figma MCP server
  • Prompting your MCP client
  • Tools and skills
  • MCP best practices
  • Structure your Figma file for better code
  • Write effective prompts to guide the AI
  • Trigger specific tools when needed
  • Add custom rules
  • Break down large selections
  • Bringing Make context to your agent
  • How it works
  • Example workflow
  • Icon Guidelines

figma/figma-create-new-file

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-create-new-file/SKILL.md

Function: Create a new blank Figma Design or FigJam file

When to use it: use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this skill BEFORE every `create_new_file` tool call.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Create a new file in Figma
  • Step 1: Resolve the `planKey` and `editorType`
  • Step 2: Call create_new_file
  • Step 3: (Slides only) Handle the empty grid

figma/figma-generate-design

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-generate-design/SKILL.md

Function: Build or update screens in Figma from code or description using design system components

When to use it: use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: ‘write to Figma’, ‘create in Figma from code’, ‘push page to Figma’, ‘take this app/page and build it in Figma’, ‘create a screen’, ‘build a landing page in Figma’, ‘update the Figma screen to match code’, ‘convert this modal/dialog/drawer/panel to Figma’. This is the preferred workflow skill whenever the user wants to build or update a full page, modal, dialog, drawer, sidebar, panel, form, dashboard, list, table, card, header, message preview, or other composed product UI in Figma from code or a descr

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Build / Update Screens and Views from Design System
  • HTML-to-Figma Exceptions
  • Skill Boundaries
  • Prerequisites
  • Parallel Workflow with generate_figma_design (Web Apps Only)
  • Required Workflow
  • Step 1: Understand the Deliverable
  • Step 2: Collect Component Keys, Variables, and Styles
  • Step 3: Create the Wrapper Frame
  • Step 4: Customize Covered Sections and Build Missing Sections
  • Step 5: Validate the Full View and Transfer Images
  • Step 6: Updating an Existing View
  • Reference Docs
  • Error Recovery
  • Best Practices

figma/figma-generate-library

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-generate-library/SKILL.md

Function: Build or update a design system library in Figma from a codebase

When to use it: Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. Also use when the user asks to create or generate any component in Figma — even a single one — since components require proper variable foundations, variant states, and design token bindings to be production-quality. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills shou

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Design System Builder — Figma MCP Skill
  • 1. Scope and Completion Contract
  • Definition of done
  • Scope changes
  • 2. Scoped Workflow
  • Tokens / foundations
  • Single component or family
  • Full library / design system
  • Reconciliation / update
  • 3. Critical Rules
  • 4. State Management (Required for Long Workflows)
  • 5. Library Discovery and search_design_system — Reuse Decision Matrix
  • 6. Decision Forks
  • 7. Naming Conventions
  • 8. Token Architecture
  • 9. Anti-Patterns

figma/figma-implement-design

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/README.md

Function: Translate Figma designs into production-ready application code with 1:1 fidelity

When to use it: Converting a Figma component URL into a typed React component Pulling design tokens from a Figma file to replace hardcoded style values Rebuilding a multi-state button from a Figma spec without guessing spacing or color Generating a full page layout from a Figma frame URL Syncing an existing component to a revised Figma design after a design update

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Figma MCP Server Guide
  • Features
  • Installation & Setup
  • Connect to the Figma MCP server
  • Prompting your MCP client
  • Tools and skills
  • MCP best practices
  • Structure your Figma file for better code
  • Write effective prompts to guide the AI
  • Trigger specific tools when needed
  • Add custom rules
  • Break down large selections
  • Bringing Make context to your agent
  • How it works
  • Example workflow
  • Icon Guidelines

figma/figma-use

Catalog entry: Skills by Figma
Source documentation: https://github.com/figma/mcp-server-guide/blob/main/skills/figma-use/SKILL.md

Function: Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work

When to use it: Creating new frames and components in a Figma file from code Binding design tokens or variables to specific node properties Modifying auto-layout settings across multiple frames at once Reading the file structure to extract node IDs for downstream operations Setting fills, strokes, and typography on nodes without touching the UI

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • use_figma — Figma Plugin API Skill
  • 1. Critical Rules
  • 2. Page Rules (Critical)
  • 3. `return` Is Your Output Channel
  • 4. Editor Mode
  • 5. Efficient APIs — Prefer These Over Verbose Alternatives
  • `node.query(selector)` — CSS-like node search
  • `node.set(props)` — batch property updates
  • `figma.createAutoLayout(direction?, props?)` — auto-layout frames
  • `node.placeholder` — shimmer overlay for AI-in-progress feedback
  • `await node.screenshot(opts?)` — inline screenshots
  • 6. Incremental Workflow (How to Avoid Bugs)
  • Key rules
  • The pattern
  • Suggested step order for complex tasks
  • What to validate at each step

flutter/flutter-animating-apps

Catalog entry: Skills by Flutter
Source documentation: https://github.com/flutter/skills/blob/main/README.md

Function: Implement animated effects, transitions, and motion

When to use it: Adding a fade or slide transition between two screens Building a drag-to-dismiss card that snaps back with spring physics Staggering multiple property changes across a single timeline Flying a product image from a list view to a detail page with Hero Replacing a static container with an AnimatedContainer for smooth resizing

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Flutter Agent Plugins
  • Installation
  • Available Skills
  • Contributing
  • Code of Conduct

garrytan/autoplan

Catalog entry: Skills by Garry Tan (gstack)
Source documentation: https://github.com/garrytan/gstack/blob/main/autoplan/SKILL.md

Function: One command, fully reviewed plan: runs CEO → design → eng review automatically

When to use it: Running the full CEO, design, and engineering review on a plan file in one command Getting structured plan feedback before opening a PR without answering 30 intermediate questions Generating a test plan artifact and architecture diagram from a draft feature spec Surfacing disagreements between Claude and Codex on a plan’s architectural decisions Writing deferred scope items from a multi-phase plan review directly to TODOS.md

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Shared preamble (load first)
  • Preamble (run first)
  • Question Tuning (skip entirely if `QUESTION_TUNING: false`)
  • Repo Ownership — See Something, Say Something
  • Search Before Building
  • Telemetry (run last)
  • Step 0: Detect platform and base branch
  • Design Doc Check
  • Prerequisite Skill Offer
  • /autoplan — Auto-Review Pipeline
  • Section index — Read each section when its situation applies
  • The 6 Decision Principles
  • Decision Classification
  • Sequential Execution — MANDATORY
  • What “Auto-Decide” Means
  • Filesystem Boundary — Codex Prompts

garrytan/design-consultation

Catalog entry: Skills by Garry Tan (gstack)
Source documentation: https://github.com/garrytan/gstack/blob/main/design-consultation/SKILL.md

Function: Build a complete design system from scratch with creative risks and realistic product mockups

When to use it: Starting a new web app with no visual identity yet Getting specific font and color recommendations backed by competitive research Generating an HTML preview page showing proposed fonts and palettes applied to real product layouts Writing DESIGN.md so AI tools stop making inconsistent UI choices across sessions Exploring design risks that differentiate a product from others in its category

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Shared preamble (load first)
  • Preamble (run first)
  • Question Tuning (skip entirely if `QUESTION_TUNING: false`)
  • Repo Ownership — See Something, Say Something
  • Search Before Building
  • Telemetry (run last)
  • /design-consultation: Your Design System, Built Together
  • Phase 0: Pre-checks
  • BROWSER SETUP (Aside — run this check BEFORE any browser step)
  • Rules for driving a real browser
  • Browser fallback: gstack’s own headless browser
  • Find the `$B` binary
  • DESIGN SETUP (run this check BEFORE any design mockup command)
  • Prior Learnings
  • Section index — Read each section when its situation applies
  • Phase 1: Product Context

garrytan/design-review

Catalog entry: Skills by Garry Tan (gstack)
Source documentation: https://github.com/garrytan/gstack/blob/main/design-review/SKILL.md

Function: Designer Who Codes: visual audit then fixes with atomic commits and before/after screenshots

When to use it: Catching the 3-column icon-grid layout before a product launch Auditing a feature branch for design regressions against the main branch Getting a letter grade on typography and spacing after a redesign Finding touch targets under 44px that break mobile usability Removing AI slop patterns like centered-everything and blob decorations from a landing page

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Shared preamble (load first)
  • Preamble (run first)
  • Question Tuning (skip entirely if `QUESTION_TUNING: false`)
  • Repo Ownership — See Something, Say Something
  • Search Before Building
  • Telemetry (run last)
  • /design-review: Design Audit → Fix → Verify
  • Setup
  • BROWSER SETUP (Aside — run this check BEFORE any browser step)
  • Rules for driving a real browser
  • Browser fallback: gstack’s own headless browser
  • Find the `$B` binary
  • Translate the Aside scripts step by step
  • What changes without Aside
  • DESIGN SETUP (run this check BEFORE any design mockup command)
  • Prior Learnings

garrytan/plan-design-review

Catalog entry: Skills by Garry Tan (gstack)
Source documentation: https://github.com/garrytan/gstack/blob/main/plan-design-review/SKILL.md

Function: Senior Designer review: rates each design dimension 0-10, explains what a 10 looks like, AI Slop detection

When to use it: Adding empty state specs before an engineer ships “No items found.“ Rating information hierarchy for a dashboard redesign before any code is written Replacing vague “clean card-based UI” descriptions with specific design decisions in a plan Checking a landing page plan against hard rejection criteria like generic 3-column feature grids Generating visual mockup variants from a plan to compare design directions before implementation

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • /plan-design-review: Designer’s Eye Plan Review
  • Scope gate (FIRST — overrides everything below). This is a hard STOP.
  • Shared preamble (load first)
  • Preamble (after scope gate)
  • Skill Invocation During Plan Mode
  • AskUserQuestion Format
  • Self-check before emitting
  • Question Tuning (skip entirely if `QUESTION_TUNING: false`)
  • Repo Ownership — See Something, Say Something
  • Search Before Building
  • Telemetry (run last)
  • Step 0: Detect platform and base branch
  • Design Philosophy
  • The gstack designer
  • Design Principles
  • Priority hierarchy

getsentry/sentry-react-native-sdk

Catalog entry: Skills by Sentry team for their dev team.
Source documentation: https://github.com/getsentry/sentry-for-ai/blob/main/README.md

Function: Full Sentry SDK setup for React Native and Expo

When to use it: Adding @sentry/react-native to an Expo managed app Enabling session replay on a React Native app Wiring profiling into a bare-workflow Expo project Capturing native crashes alongside JS errors Standardizing Sentry across Expo and vanilla RN apps

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Sentry for AI
  • What You Can Do
  • Distribution
  • Build it yourself
  • Skills
  • Core
  • Feature Setup
  • Reference Library
  • Prerequisites
  • Contributing
  • License

getsentry/sentry-react-sdk

Catalog entry: Skills by Sentry team for their dev team.
Source documentation: https://github.com/getsentry/sentry-for-ai/blob/main/README.md

Function: Full Sentry SDK setup for React (React Router v5-v7, TanStack Router, Redux, Vite, webpack)

When to use it: Adding @sentry/react to a Vite-based app Instrumenting React Router v7 navigation with tracing Wiring TanStack Router into Sentry performance monitoring Enabling session replay on a Redux-powered SPA Standardizing Sentry config across webpack React builds

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Sentry for AI
  • What You Can Do
  • Distribution
  • Build it yourself
  • Skills
  • Core
  • Feature Setup
  • Reference Library
  • Prerequisites
  • Contributing
  • License

google-labs-code/design-md

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/design-md

Function: Create and manage DESIGN.md files

When to use it: Capturing a Stitch project’s color roles and hex codes in a single reference file Translating Tailwind border-radius and spacing classes into design-prompt-ready language Documenting typography hierarchy from existing Stitch screen HTML before adding new screens Building a shared DESIGN.md so multiple Stitch-generated screens stay visually consistent Extracting shadow and elevation patterns from a designed screen for use in future prompts

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


google-labs-code/enhance-prompt

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/enhance-prompt

Function: Improve prompts with design specs and UI/UX vocabulary

When to use it: Fixing a Stitch prompt that generated a layout too generic to use Turning ‘make me a dashboard’ into a structured prompt with sections and color tokens Adding design system context from DESIGN.md before generating a new screen Translating a napkin-sketch description into Stitch-ready component language Preparing a targeted edit prompt that changes one element without breaking the rest

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


google-labs-code/react-components

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/react-components

Function: Stitch to React components conversion

When to use it: Converting a Stitch screen into a typed React component with isolated hooks and a data file Pulling full-resolution screenshots from Google Cloud Storage using the bundled fetch script Syncing Tailwind config values from Stitch HTML exports into a local style-guide.json Splitting a multi-section design into separate component, hook, and mock data files Running AST validation on generated components to catch missing interfaces or hardcoded styles

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


google-labs-code/remotion

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/remotion

Function: Generate walkthrough videos from Stitch app designs

When to use it: Generating a video walkthrough of a mobile app design for a client presentation Recording a sequence of onboarding screens as an animated demo without screen recording software Building a product tour video directly from Stitch screens and syncing it with narration Producing frame-accurate design reviews by converting static screens into timed video sequences Automating walkthrough video updates when Stitch screen designs change

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


google-labs-code/shadcn-ui

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/shadcn-ui

Function: Build UI components with shadcn/ui

When to use it: Adding a shadcn/ui Dialog or Sheet to a Next.js route without hunting for the right Radix imports Customizing a Button component’s variants using cva without touching the upstream source Setting up CSS variable theming for light and dark mode across all shadcn components Scaffolding a login or dashboard block from the shadcn registry into an existing project Debugging import alias errors after adding components to a monorepo or non-standard project structure

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


google-labs-code/stitch-loop

Catalog entry: Skills by Google Labs (Stitch)
Source documentation: https://github.com/google-labs-code/stitch-loop

Function: Iterative design-to-code feedback loop

When to use it: Building out a full site page by page without manual prompting each step Passing context between agent runs using a structured baton file Generating consistent page designs by injecting a shared design system block into every Stitch prompt Wiring navigation links across pages as each new page is added Tracking site progress through a sitemap and roadmap in SITE.md

Usage guidance is taken from the skill’s own trigger description or usage section.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


greensock/gsap-react

Catalog entry: Skills by GSAP (GreenSock)
Source documentation: https://github.com/greensock/gsap-skills/blob/main/skills/gsap-react/SKILL.md

Function: React integration with useGSAP hook, refs, gsap.context(), cleanup, and SSR

When to use it: Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • GSAP with React
  • When to Use This Skill
  • Installation
  • Prefer the useGSAP() Hook
  • Refs for Targets
  • Dependency array, scope, and revertOnUpdate
  • gsap.context() in useEffect (when useGSAP isn’t used)
  • Context-Safe Callbacks
  • Server-Side Rendering (Next.js, etc.)
  • Best practices
  • Do Not
  • Learn More

greensock/gsap-scrolltrigger

Catalog entry: Skills by GSAP (GreenSock)
Source documentation: https://github.com/greensock/gsap-skills/blob/main/skills/gsap-scrolltrigger/SKILL.md

Function: ScrollTrigger for scroll-linked animations, pinning, scrub, and refresh handling

When to use it: Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • GSAP ScrollTrigger
  • When to Use This Skill
  • Registering the Plugin
  • Basic Trigger
  • Key config options
  • ScrollTrigger.batch()
  • ScrollTrigger.scrollerProxy()
  • Scrub
  • Pinning
  • Markers (Development)
  • Timeline + ScrollTrigger
  • Horizontal scroll (containerAnimation)
  • Refresh and Cleanup
  • Official GSAP best practices
  • Do Not
  • Learn More

Catalog entry: Development and Testing
Source documentation: https://github.com/hasuwini77/3d-logo-skill/blob/main/skills/3d-logo/SKILL.md

Function: Turn any logo into a 3D spinning coin React component

When to use it: Use when a task needs the capability described in this catalog entry: Turn any logo into a 3D spinning coin React component

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.


HUANGCHIHHUNGLeo/claude-real-video

Catalog entry: Specialized Domains
Source documentation: https://github.com/HUANGCHIHHUNGLeo/claude-real-video/blob/master/skills/claude-real-video/SKILL.md

Function: Scene-aware keyframes plus transcripts so any LLM watches videos

When to use it: Use when the user shares a video URL (YouTube etc.) or local video file and wants it summarized, analyzed, or discussed — Claude can’t ingest video directly, so this skill extracts scene-aware keyframes + transcript first, then reads those.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • claude-real-video — let Claude actually watch a video
  • When to use
  • Requirements
  • Steps
  • Notes

ibelick/ui-skills

Catalog entry: Development and Testing
Source documentation: https://github.com/ibelick/ui-skills/blob/main/README.md

Function: Opinionated, evolving constraints to guide agents when building interfaces

When to use it: Use when a task needs the capability described in this catalog entry: Opinionated, evolving constraints to guide agents when building interfaces

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • UI Skills
  • CLI
  • MCP
  • Playbook
  • License

This catalog entry points to a collection. The scanned repository lists 9 distinct skill-file paths.

Sample members: baseline-ui · component-canvas · create-canvas · create-design-md · fixing-accessibility · fixing-metadata · fixing-motion-performance · improve-ui
More members are available in the source repository.


kgraph57/strategy-consulting-visualization

Catalog entry: Productivity and Collaboration
Source documentation: https://github.com/kgraph57/mckinsey-style-visualization-skill/blob/main/SKILL.md

Function: McKinsey-style charts and consulting slide decks

When to use it: Use when turning content into clear strategy-consulting visualizations, including board slides, reports, diagrams, quiet animated decks, or explicit dynamic and interactive decks with clickable evidence, scenario controls, what-if sliders, and deterministic presenter demos.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Strategy Consulting Visualization
  • Purpose
  • Fast Path
  • Use When
  • Do Not Use When
  • Workflow
  • Output Contract
  • Reference-led reproduction
  • Default Visual Standards
  • Marketplace Safety
  • Reference Files
  • HTML to PDF

KhazP/vibe-coding-prompt-template

Catalog entry: Development and Testing
Source documentation: https://github.com/KhazP/vibe-coding-prompt-template/blob/main/README.md

Function: Plan MVPs into PRD, tech design, and AGENTS.md

When to use it: Use when a task needs the capability described in this catalog entry: Plan MVPs into PRD, tech design, and AGENTS.md

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Start a project
  • 1. Research your idea
  • 2. Define the MVP
  • 3. Choose the technical approach
  • 4. Set up your coding assistant
  • 5. Build one useful piece
  • Optional skills and CLI
  • When you need more detail
  • Common questions
  • Built with this workflow
  • Contributing
  • License

This catalog entry points to a collection. The scanned repository lists 11 distinct skill-file paths.

Sample members: vibe-agents · vibe-build · vibe-change · vibe-debug · vibe-handoff · vibe-prd · vibe-research · vibe-review
More members are available in the source repository.


Leonxlnx/taste-skill

Catalog entry: Development and Testing
Source documentation: https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

Function: High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop

When to use it: Use when a task needs the capability described in this catalog entry: High-agency frontend skill that gives AI good taste with tunable design variance, motion intensity, and visual density to stop generic UI slop

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • tasteskill v2
  • Page or app screen
  • The run
  • 1. Read the brief and the project
  • 2. Write the argument
  • 3. Draw the direction
  • 4. Find the idea
  • 5. Write the words
  • 6. Build it, still
  • 7. Gate
  • 8. Look
  • 9. Move
  • 10. Report
  • House rules
  • Laws of the craft
  • Special cases

Linked-API/linkedin

Catalog entry: Productivity and Collaboration
Source documentation: https://github.com/Linked-API/linkedin-skills/blob/main/linkedin/SKILL.md

Function: Fetch LinkedIn profiles, search people and companies, send messages, manage connections, create posts, react, comment, and run custom LinkedIn workflows from Claude Code, Codex, Cursor, and Windsurf.

When to use it: Use when the user wants to interact with LinkedIn.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • LinkedIn Skill
  • Authentication
  • Global Flags
  • Output Format
  • Commands
  • Fetch a Person Profile
  • Endorse a Person’s Skills
  • Search People
  • Fetch a Company
  • Search Companies
  • Send a Message
  • Inbox
  • Get Conversation
  • Connection Management
  • Posts
  • Statistics

MartinDelophy/edit-timeline-studio

Catalog entry: Specialized Domains
Source documentation: https://github.com/MartinDelophy/ai-video-editor/blob/main/skills/edit-timeline-studio/SKILL.md

Function: Create editable video timelines with captions, voiceovers, and verified exports.

When to use it: Use when a task needs the capability described in this catalog entry: Create editable video timelines with captions, voiceovers, and verified exports.

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • AI Video Editing with Timeline Studio
  • Choose the execution path
  • Workflow
  • 1. Inspect before editing
  • 2. Plan at the supported fidelity
  • 3. Apply safely
  • 4. Verify the result
  • Interpret underspecified requests conservatively
  • Learn from every real run
  • Capability boundaries

marvkr/better-design

Catalog entry: Development and Testing
Source documentation: https://github.com/marvkr/better-design/blob/main/skills/better-design/SKILL.md

Function: Build and review interfaces with Better Design design systems

When to use it: Use when a task needs the capability described in this catalog entry: Build and review interfaces with Better Design design systems

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Better Design
  • Connect
  • Respect trust boundaries
  • Follow the interface workflow
  • Start new interface builds with a system
  • Load specialist guidance
  • Keep the MCP authoritative

microsoft/azure-keyvault-keys-rust

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/.github/plugins/azure-sdk-rust/skills/azure-keyvault-keys-rust/SKILL.md

Function: Key Vault cryptographic key management

When to use it: Creating RSA or EC keys in Azure Key Vault from a Rust service Signing JWTs or payloads using a Key Vault-managed private key Wrapping symmetric keys with an RSA key before storing them Listing and rotating cryptographic keys across a vault programmatically Backing up and restoring key material for disaster recovery

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Azure Key Vault Keys library for Rust
  • Installation
  • Environment Variables
  • Authentication
  • Core Workflow
  • Create Key
  • Update Key Properties
  • Delete Key
  • List Keys (Pagination)
  • Wrap / Unwrap (Envelope Encryption)
  • Key Types
  • RBAC Roles
  • Best Practices
  • Reference Links

microsoft/azure-keyvault-keys-ts

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/.github/plugins/azure-sdk-typescript/skills/azure-keyvault-keys-ts/SKILL.md

Function: Cryptographic key management

When to use it: Use when creating, encrypting/decrypting, signing, or rotating keys.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Azure Key Vault Keys SDK for TypeScript
  • Installation
  • Environment Variables
  • Authentication
  • Secrets Operations
  • Create/Set Secret
  • Get Secret
  • List Secrets
  • Delete Secret
  • Keys Operations
  • Create Keys
  • Get Key
  • List Keys
  • Rotate Key
  • Delete Key
  • Cryptographic Operations

microsoft/azure-speech-to-text-rest-py

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/.github/plugins/azure-sdk-python/skills/azure-speech-to-text-rest-py/SKILL.md

Function: REST speech-to-text for short audio

When to use it: Transcribing voice memos recorded on a phone before storing them in a database Converting short customer support call clips to text for ticket logging Adding captions to brief video segments under one minute Parsing spoken commands from a voice UI without installing the Speech SDK Extracting text from audio collected in a lightweight Python script or serverless function

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Azure Speech to Text REST API for Short Audio
  • Prerequisites
  • Environment Variables
  • Installation
  • Authentication & Lifecycle
  • Quick Start
  • Audio Requirements
  • Content-Type Headers
  • Response Formats
  • Simple Format (default)
  • Detailed Format
  • Chunked Transfer (Recommended)
  • Authentication Options
  • Option 1: Subscription Key (Simple)
  • Option 2: Bearer Token
  • Query Parameters

microsoft/frontend-design-review

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/README.md

Function: Review and create distinctive frontend interfaces

When to use it: Catching hardcoded color values instead of design tokens during a PR review Auditing a new onboarding flow against WCAG 2.1 AA criteria Checking that a component matches its Figma Dev Mode specs before merging Building a landing page with a deliberate aesthetic direction rather than a generic layout Scoring a feature’s UI against the three quality pillars and prioritizing blocking issues

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Agent Skills
  • Quick Start
  • What’s Inside
  • Skill Catalog
  • Core
  • Foundry (Language-Agnostic)
  • Python
  • .NET
  • TypeScript
  • Java
  • Rust
  • Repository Structure
  • Plugins
  • MCP Servers
  • Additional Resources
  • Agents

microsoft/frontend-ui-dark-ts

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/.github/plugins/azure-sdk-typescript/skills/frontend-ui-dark-ts/SKILL.md

Function: Dark-themed React with Tailwind and animations

When to use it: Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Frontend UI Dark Theme (TypeScript)
  • Stack
  • Quick Start
  • Project Structure
  • Configuration
  • index.html
  • public/site.webmanifest
  • tailwind.config.js
  • postcss.config.js
  • src/styles/globals.css
  • src/main.tsx
  • src/App.tsx
  • Animation Patterns
  • Framer Motion Variants
  • Page Transition Wrapper
  • Glass Effect Patterns

microsoft/podcast-generation

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/README.md

Function: AI podcast audio with Azure OpenAI Realtime API

When to use it: Generating narrated audio summaries from article or blog content Building a podcast episode from a written script without a recording studio Adding text-to-audio playback to a documentation site Producing audio previews of product descriptions or release notes Prototyping voice-driven features backed by Azure OpenAI Realtime API

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Agent Skills
  • Quick Start
  • What’s Inside
  • Skill Catalog
  • Core
  • Foundry (Language-Agnostic)
  • Python
  • .NET
  • TypeScript
  • Java
  • Rust
  • Repository Structure
  • Plugins
  • MCP Servers
  • Additional Resources
  • Agents

microsoft/react-flow-node-ts

Catalog entry: Skills by Microsoft
Source documentation: https://github.com/microsoft/skills/blob/main/.github/plugins/azure-sdk-typescript/skills/react-flow-node-ts/SKILL.md

Function: React Flow node components with Zustand

When to use it: Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing node-based UI components.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React Flow Node
  • Quick Start
  • Templates
  • Node Component Pattern
  • Type Definition Pattern
  • Integration Steps

MiniMax-AI/cli

Catalog entry: Skills by MiniMax Team
Source documentation: https://officialskills.sh/MiniMax-AI/skills/cli

Function: Generate text, image, video, speech, and music via MiniMax AI

When to use it: Use when a task needs the capability described in this catalog entry: Generate text, image, video, speech, and music via MiniMax AI

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

No individual SKILL.md was retrieved; this entry is based on the catalog description and available repository README.


MiniMax-AI/frontend-dev

Catalog entry: Skills by MiniMax Team
Source documentation: https://github.com/MiniMax-AI/skills/blob/main/skills/frontend-dev/SKILL.md

Function: Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art

When to use it: Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Frontend Studio
  • Invocation
  • Skill Structure
  • Project Structure
  • Assets (Universal)
  • By Framework
  • Pure HTML
  • React / Next.js
  • Vue / Nuxt
  • Astro
  • Compliance
  • Workflow
  • Phase 1: Design Architecture
  • Phase 2: Motion Architecture
  • Phase 3: Asset Generation
  • Phase 4: Copywriting & Content

mongodb/mongodb-schema-design

Catalog entry: Skills by MongoDB
Source documentation: https://github.com/mongodb/agent-skills/blob/main/skills/mongodb-schema-design/SKILL.md

Function: Design efficient document schemas with validation and indexing patterns

When to use it: Use when designing data models, reviewing schemas, migrating from SQL, or troubleshooting performance issues caused by schema problems. Triggers on “design schema”, “embed vs reference”, “MongoDB data model”, “schema review”, “unbounded arrays”, “one-to-many”, “tree structure”, “16MB limit”, “schema validation”, “JSON Schema”, “time series”, “schema migration”, “polymorphic”, “TTL”, “data lifecycle”, “archive”, “index explosion”, “unnecessary indexes”, “approximation pattern”, “document versioning”.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • MongoDB Schema Design
  • When to Apply
  • Quick Reference
  • 1. Schema Anti-Patterns - 3 rules
  • 2. Schema Fundamentals - 4 rules
  • 3. Design Patterns - 11 rules
  • Access Pattern Analysis
  • Key Principle
  • Embed/Reference Decision Framework
  • How to Use
  • How These Rules Work
  • MongoDB MCP Integration
  • ⚠️ Action Policy
  • Working Together

muratcankoylan/context-compression

Catalog entry: Context Engineering
Source documentation: https://github.com/muratcankoylan/Agent-Skills-for-Context-Engineering/blob/main/skills/context-compression/SKILL.md

Function: Design and evaluate compression strategies for long-running sessions

When to use it: Use when a task needs the capability described in this catalog entry: Design and evaluate compression strategies for long-running sessions

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Context Compression Strategies
  • When to Activate
  • Core Concepts
  • Detailed Topics
  • Optimize for Tokens-Per-Task, Not Tokens-Per-Request
  • Solve the Artifact Trail Problem First
  • Structure Summaries with Mandatory Sections
  • Choose Compression Triggers Strategically
  • Evaluate Compression with Probes, Not Metrics
  • Score Compression Across Six Dimensions
  • Practical Guidance
  • Apply the Three-Phase Compression Workflow for Large Codebases
  • Use Example Artifacts as Compression Seeds
  • Implement Anchored Iterative Summarization Step by Step
  • Select the Right Approach for the Session Profile
  • Calibrate Compression Ratios by Method

muratcankoylan/memory-systems

Catalog entry: Context Engineering
Source documentation: https://github.com/muratcankoylan/Agent-Skills-for-Context-Engineering/blob/main/skills/memory-systems/SKILL.md

Function: Design short-term, long-term, and graph-based memory architectures

When to use it: Use when a task needs the capability described in this catalog entry: Design short-term, long-term, and graph-based memory architectures

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Memory System Design
  • When to Activate
  • Core Concepts
  • Detailed Topics
  • Production Framework Landscape
  • Memory Layers (Decision Points)
  • Retrieval Strategies
  • Memory Consolidation
  • Practical Guidance
  • Choosing a Memory Architecture
  • Integration with Context
  • Error Recovery
  • Examples
  • Guidelines
  • Gotchas
  • Integration

muratcankoylan/tool-design

Catalog entry: Context Engineering
Source documentation: https://github.com/muratcankoylan/Agent-Skills-for-Context-Engineering/blob/main/skills/tool-design/SKILL.md

Function: Build tools that agents can use effectively, including architectural reduction patterns

When to use it: Use when a task needs the capability described in this catalog entry: Build tools that agents can use effectively, including architectural reduction patterns

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Tool Design for Agents
  • When to Activate
  • Core Concepts
  • Detailed Topics
  • The Tool-Agent Interface
  • The Consolidation Principle
  • Architectural Reduction
  • Tool Description Engineering
  • Response Format Optimization
  • Error Message Design
  • Tool Definition Schema
  • Tool Collection Design
  • MCP Tool Naming Requirements
  • Using Agents to Optimize Tools
  • Testing Tool Design
  • Practical Guidance

NeoLabHQ/ddd

Catalog entry: Development and Testing
Source documentation: https://github.com/NeoLabHQ/context-engineering-kit/blob/master/plugins/ddd/README.md

Function: Domain-driven development skills that also include Clean Architecture, SOLID principles, and design patterns.

When to use it: Use when a task needs the capability described in this catalog entry: Domain-driven development skills that also include Clean Architecture, SOLID principles, and design patterns.

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Domain-Driven Development Plugin
  • Overview
  • Quick Start
  • Rules
  • Foundation
  • Core Literature
  • Key Concepts Applied

nextlevelbuilder/ui-ux-pro-max-skill

Catalog entry: Development and Testing
Source documentation: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md

Function: UI/UX design patterns and best practices

When to use it: Use when a task needs the capability described in this catalog entry: UI/UX design patterns and best practices

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • UI UX Pro Max
  • What’s New in v2.0
  • Intelligent Design System Generation
  • How Design System Generation Works
  • 192 Industry-Specific Reasoning Rules
  • Features
  • Resilient Text and Compact UI
  • Style Taxonomy
  • 💎 Basic vs. Premium Version Comparison
  • 🟢 Basic Version (This Repository)
  • 🟡 Premium Version
  • Installation
  • Using Claude Marketplace (Claude Code)
  • Using CLI (Recommended)
  • Global Install (Available for All Projects)
  • Other CLI Commands

This catalog entry points to a collection. The scanned repository lists 7 distinct skill-file paths.

Sample members: banner-design · brand · design-system · design · slides · ui-styling · ui-ux-pro-max


oil-oil/oil-ui

Catalog entry: Development and Testing
Source documentation: https://github.com/oil-oil/oil-ui/blob/main/SKILL.md

Function: Unlock AI design potential through UI exploration and visual review

When to use it: Use when a task needs the capability described in this catalog entry: Unlock AI design potential through UI exploration and visual review

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • oil-ui
  • 主流程
  • 开始前
  • 选择范围
  • 1. 形成并收敛方向
  • 2. 建立视觉与交互结构
  • 3. 制作并取得实际证据
  • 4. 独立评审与修正
  • 5. 验证与交付
  • 能力边界
  • 完整版提示

openai/chatgpt-apps

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/chatgpt-apps/SKILL.md

Function: Build, scaffold, and troubleshoot ChatGPT Apps SDK apps with MCP server and widget UI

When to use it: Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • ChatGPT Apps
  • Overview
  • Mandatory Docs-First Workflow
  • Prompt Guidance
  • Classify The App Before Choosing Code
  • Default Starting-Point Order
  • Build Workflow
  • 0. Classify The App Archetype
  • 1. Plan Tools Before Code
  • 2. Choose an App Architecture
  • 2a. Start From An Upstream Example When One Fits
  • 2b. Use the Starter Script When a Low-Dependency Fallback Helps
  • 3. Scaffold the MCP Server
  • 4. Scaffold the Widget UI
  • 5. Add Resource Metadata and Security
  • 5a. Enforce A Minimum Working Repo Contract

openai/figma-code-connect-components

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/figma-code-connect-components/SKILL.md

Function: Connect Figma design components to code components using Code Connect

When to use it: Use when user says “code connect”, “connect this component to code”, “map this component”, “link component to code”, “create code connect mapping”, or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Code Connect Components
  • Overview
  • Skill Boundaries
  • Prerequisites
  • Required Workflow
  • Step 1: Get Code Connect Suggestions
  • Step 2: Scan Codebase for Matching Components
  • Step 3: Present Matches to User
  • Step 4: Create Code Connect Mappings
  • Examples
  • Example 1: Connecting a Button Component
  • Example 2: Multiple Components with Partial Selection
  • Example 3: Component Needs Creation
  • Best Practices
  • Proactive Component Discovery
  • Accurate Structure Matching

openai/figma-create-design-system-rules

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/figma-create-design-system-rules/SKILL.md

Function: Rules for implementing Figma designs using the Figma MCP server

When to use it: Use when user says “create design system rules”, “generate rules for my project”, “set up design rules”, “customize design system guidelines”, or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Create Design System Rules
  • Overview
  • Supported Rule Files
  • What Are Design System Rules?
  • Prerequisites
  • When to Use This Skill
  • Required Workflow
  • Step 1: Run the Create Design System Rules Tool
  • Step 2: Analyze the Codebase
  • Step 3: Generate Project-Specific Rules
  • Step 4: Save Rules to the Appropriate Rule File
  • Step 5: Validate and Iterate
  • Rule Categories and Examples
  • Essential Rules (Always Include)
  • Recommended Rules (Highly Valuable)
  • Optional Rules (Project-Specific)

openai/figma-create-new-file

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/figma-create-new-file/SKILL.md

Function: Create a new blank Figma file or FigJam file

When to use it: Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • create_new_file — Create a New Figma File
  • Skill Arguments
  • Workflow
  • Step 1: Resolve the planKey
  • Step 2: Call create_new_file
  • Step 3: Use the result
  • Important Notes

openai/figma-generate-library

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/figma-generate-library/SKILL.md

Function: Build or update a professional-grade design system in Figma from a codebase

When to use it: Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Design System Builder — Figma MCP Skill
  • 1. The One Rule That Matters Most
  • 2. Mandatory Workflow
  • 3. Critical Rules
  • 4. State Management (Required for Long Workflows)
  • 5. search_design_system — Reuse Decision Matrix
  • 6. User Checkpoints
  • 7. Naming Conventions
  • 8. Token Architecture
  • 9. Per-Phase Anti-Patterns
  • 10. Reference Docs
  • 11. Scripts

openai/figma-use

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/figma-use/SKILL.md

Function: Prerequisite skill for every use_figma tool call — write/read actions in Figma context

When to use it: Loading Plugin API rules before creating Figma components from code Running JavaScript to set up design tokens and variable collections in a Figma file Building multi-section layouts programmatically using auto-layout and component instances Binding design system variables to node properties like fills and spacing Inspecting existing Figma file structure before writing any canvas mutations

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • use_figma — Figma Plugin API Skill
  • 1. Critical Rules
  • 2. Page Rules (Critical)
  • Switching pages
  • Across script runs
  • 3. `return` Is Your Output Channel
  • 4. Editor Mode
  • 5. Incremental Workflow (How to Avoid Bugs)
  • The pattern
  • Suggested step order for complex tasks
  • What to validate at each step
  • 6. Error Recovery & Self-Correction
  • When `use_figma` returns an error
  • Common self-correction patterns
  • When the script succeeds but the result looks wrong
  • 7. Pre-Flight Checklist

openai/frontend-skill

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/README.md

Function: Create visually strong landing pages, websites, and app UIs with restrained composition

When to use it: Building a product landing page where one full-bleed image anchors the entire first viewport Replacing a dashboard card mosaic with a layout-first information surface Adding scroll-linked and hover motion that changes how a page feels without adding visual noise Structuring a startup homepage so the brand name reads louder than the feature list Prototyping a game or app UI with deliberate spacing and minimal chrome

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Agent Skills
  • Installing a skill
  • License

openai/imagegen

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/README.md

Function: Generate and edit images using OpenAI’s Image API for projects

When to use it: Generating a hero image for a landing page with usable negative space for copy Replacing a product photo background while keeping the product unchanged Producing multiple icon variants or sprite sheets for a game in one session Creating a UI mockup or wireframe at a specified fidelity level Extracting a clean transparent-background cutout from an existing product photo

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Agent Skills
  • Installing a skill
  • License

openai/sora

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/README.md

Function: Generate, remix, and manage short video clips via OpenAI’s Sora API

When to use it: Generating a 4-second product teaser clip from a text description Creating a reusable non-human character reference for use across multiple shots Extending a completed Sora video with a continuation prompt Editing an existing generated video to change only the color palette or lighting Running a local batch queue of multiple video render jobs in parallel

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Agent Skills
  • Installing a skill
  • License

openai/speech

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/speech/SKILL.md

Function: Generate spoken audio from text using OpenAI’s API with built-in voices

When to use it: Use when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI (`scripts/text_to_speech.py`) with built-in voices and require `OPENAI_API_KEY` for live calls. Custom voice creation is out of scope.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Speech Generation Skill
  • When to use
  • Decision tree (single vs batch)
  • Workflow
  • Temp and output conventions
  • Dependencies (install if missing)
  • Environment
  • Defaults & rules
  • Instruction augmentation
  • Examples
  • Single example (narration)
  • Batch example (IVR prompts)
  • Instructioning best practices (short list)
  • Guidance by use case
  • CLI + environment notes
  • Reference map

openai/transcribe

Catalog entry: Skills by OpenAI
Source documentation: https://github.com/openai/skills/blob/main/skills/.curated/transcribe/SKILL.md

Function: Transcribe audio files to text with optional speaker diarization

When to use it: Use when a user asks to transcribe speech from audio/video, extract text from recordings, or label speakers in interviews or meetings.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Audio Transcribe
  • Workflow
  • Decision rules
  • Output conventions
  • Dependencies (install if missing)
  • Environment
  • Skill path (set once)
  • CLI quick start
  • Reference map

Orkas-AI/video-router

Catalog entry: Specialized Domains
Source documentation: https://github.com/Orkas-AI/Orkas-VideoStudio/blob/main/packages/skills/video-router/SKILL.md

Function: Route video requests through deterministic agent production stages

When to use it: Use when a task needs the capability described in this catalog entry: Route video requests through deterministic agent production stages

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • video-router
  • Unavailable Production Runtime
  • The three capability axes
  • Decision rules
  • End-to-end (AUTO) — when the job spans lines
  • Lock the runtime
  • Boundary / non-goals
  • Runtime handoff

perso-ai/perso-dubbing

Catalog entry: Specialized Domains
Source documentation: https://github.com/perso-ai/perso-dubbing-plugin/blob/main/README.md

Function: Video translator: dubbing, lip-sync, subtitles, and short clips

When to use it: Use when a task needs the capability described in this catalog entry: Video translator: dubbing, lip-sync, subtitles, and short clips

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Perso Dubbing Plugin
  • Install
  • Styled subtitles
  • Translate subtitles
  • Short clips
  • Dubbing and lip-sync
  • Subtitles from speech (STT)
  • Voice separation
  • Free where it can be. Paid where it must be.

This catalog entry points to a collection. The scanned repository lists 3 distinct skill-file paths.

Sample members: clip · dubbing · srt


rainmanjam/poka-yoke

Catalog entry: Development and Testing
Source documentation: https://github.com/rainmanjam/poka-yoke/blob/main/plugins/poka-yoke/skills/poka-yoke/SKILL.md

Function: Make misuse unrepresentable: audit, design, and enforce mistake-proofing devices

When to use it: Use when someone says “poka-yoke this”, “mistake-proof it”, “make this harder to get wrong”, or runs /poka-yoke with no mode named. Applies Shigeo Shingo’s method directly to any subject, and hands off to a specialist mode when one clearly fits. Start here when no other poka-yoke mode obviously applies.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Poka-Yoke: Mistake-Proofing for Software
  • The two axes
  • Axis 1, Regulatory function: what happens when the mistake occurs?
  • Axis 2, Setting function: how does the device notice?
  • The third principle: inspect at the source
  • How to use this skill
  • Choosing a mode
  • The hazard catalog and language specifics
  • How to talk about this
  • Applying changes

realkimbarrett/conversion-path-builder

Catalog entry: Advertising Skills by Kim Barrett
Source documentation: https://github.com/realkimbarrett/advertising-skills/blob/main/skills/operator-os/conversion-path-builder/SKILL.md

Function: Design the optimal funnel from click to conversion and booked calls

When to use it: Trigger on “funnel”, “conversion path”, “booked calls”.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Role
  • Process
  • Output
  • Rules
  • Avoid

remotion-dev/remotion

Catalog entry: Skills by Remotion
Source documentation: https://github.com/remotion-dev/skills/blob/main/README.md

Function: Programmatic video creation with React

When to use it: Generating personalized video messages from a user database Adding synchronized captions to a video using React components Building animated chart videos that update from live data Compositing a green screen recording with a custom background in code Rendering a voiceover-narrated explainer video from a script

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Remotion Agent Skills
  • Available skills
  • `/remotion-best-practices`
  • `/remotion-create`
  • `/remotion-markup`
  • `/remotion-studio`
  • `/remotion-render`
  • `/remotion-maps`
  • `/remotion-captions`
  • `/remotion-saas`
  • `/remotion-interactivity`
  • `/remotion-docs`
  • `/remotion-upgrade`
  • `/remotion-multimedia`

renezander030/capcut-edit

Catalog entry: Specialized Domains
Source documentation: https://github.com/renezander030/capcut-cli/blob/master/skills/capcut-edit/SKILL.md

Function: Edit CapCut and JianYing video projects from any agent

When to use it: Use when the user mentions capcut, jianying, subtitles, video editing, draft_content.json, draft_info.json, or cutting videos — in English or Chinese (剪映, 字幕, 草稿, 剪辑, 切片, 视频编辑).

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • capcut-edit
  • Project locations
  • Core principle — deterministic scripts
  • Progressive disclosure
  • Output modes
  • Batch writes
  • Where to look
  • Invariants
  • v0.11 high-value paths

resend/email-best-practices

Catalog entry: Skills by Resend
Source documentation: https://github.com/resend/resend-skills/blob/main/skills/email-best-practices/SKILL.md

Function: Email deliverability and design best practices

When to use it: Use when building email features, emails going to spam, high bounce rates, setting up SPF/DKIM/DMARC authentication, implementing email capture, ensuring compliance (CAN-SPAM, GDPR, CASL), handling webhooks, retry logic, making emails accessible (alt text, headings, contrast, screen readers), or deciding transactional vs marketing.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Email Best Practices
  • Architecture Overview
  • Quick Reference
  • Start Here

resend/react-email

Catalog entry: Skills by Resend
Source documentation: https://github.com/resend/resend-skills/blob/main/skills/react-email/SKILL.md

Function: Build emails with React Email components

When to use it: Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React Email
  • Installation
  • Adding to an Existing Project
  • Basic Email Template
  • Behavioral Guidelines
  • Essential Components
  • Before Writing Code
  • Static Files and Images
  • Directory Structure
  • Dev vs Production URLs
  • Styling
  • Key Rules
  • Required Classes
  • Structure Notes
  • Rendering
  • Convert to HTML

Ryan-yang125/motion-lexicon

Catalog entry: Development and Testing
Source documentation: https://github.com/Ryan-yang125/motion-lexicon/blob/main/README.md

Function: Build and review product motion with installable React components

When to use it: Use when a task needs the capability described in this catalog entry: Build and review product motion with installable React components

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Motionboard
  • Install
  • Use
  • Recipes
  • Opening (7)
  • Product reveal (7)
  • Features (15)
  • Transitions (5)
  • Ending (4)
  • Website
  • License

Simon-He95/markstream-install

Catalog entry: Development and Testing
Source documentation: https://github.com/Simon-He95/markstream-vue/blob/main/.agents/skills/markstream-install/SKILL.md

Function: Install streaming Markdown renderers across five frontend frameworks

When to use it: Use when Codex needs to choose the right package, install the smallest framework-specific peer-dependency set, fix CSS/reset order, choose Vue 3 renderer mode and built-in, plain, or custom code-block paths, decide between `content`, `nodes`, and Vue 3 virtual-scroll coordination, or add a minimal working renderer example.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Markstream Install
  • Workflow
  • Default Decisions
  • Useful Doc Targets

skymanbp/cc-tree

Catalog entry: Development and Testing
Source documentation: https://github.com/skymanbp/cc-tree/blob/main/skills/tree/SKILL.md

Function: Auditable radial-tree exploration for brainstorming, critique, design and code audit

When to use it: Use when the user wants the engine itself — a custom preset via `--preset <path>`, explicit control of a run, or “tree of thoughts” / 穷尽的树状探索 in general; for the four shipped use-cases prefer `/cc-tree:brainstorm`, `/cc-tree:attack`, `/cc-tree:design`, `/cc-tree:code-audit`, whose descriptions carry the per-use-case triggers.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • tree — universal radial-tree exploration engine
  • 1. Invocation
  • Common flags (apply across presets)
  • 2. Execution flow
  • Step 1 — Preset load
  • Step 2 — §2 baseline
  • Step 3 — §3 framing pass (12 passes per node)
  • Step 4 — §4 per-branch 12-field derivation
  • Step 5 — §5 scoring and verdict
  • Step 6 — §6 convergence check
  • Step 7 — §7 final report
  • 3. Anti-patterns (see `docs/ENGINE.md §9` for the full list)
  • 4. Output contract
  • 5. References

SupercmoHQ/superCMO-skills

Catalog entry: Marketing
Source documentation: https://github.com/SupercmoHQ/superCMO-skills/blob/main/README.md

Function: Open-source skills + local MCP server for marketing video & image production: UGC videos, ad videos, product photography, and image ads from a product photo and a brief; casts AI actors, picks the best image/video models, edits any-length clips with consistent actor and product, and researches competitor ads. BYO or managed keys, Apache-2.0

When to use it: Use when a task needs the capability described in this catalog entry: Open-source skills + local MCP server for marketing video & image production: UGC videos, ad videos, product photography, and image ads from a product photo and a brief; casts AI actors, picks the best image/video models, edits any-length clips with consistent actor and product, and researches competitor ads. BYO or managed keys, Apache-2.0

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • SuperCMO Skills
  • Enable AI agents to create marketing videos and images
  • Contents
  • See how it works
  • Quick start
  • Hosted SuperCMO
  • Start from a product photo
  • Why SuperCMO Skills?
  • How the skills work together
  • The Marketing Production Pipeline
  • Install
  • Set up a key
  • Option A · Managed — one command
  • Option B · Bring your own keys — free
  • Security & trust
  • Telemetry

This catalog entry points to a collection. The scanned repository lists 23 distinct skill-file paths.

Sample members: adapting-formats · analyzing-brand · analyzing-own-ads · analyzing-products · cloning-video-ads · generating-ad-videos · generating-ai-actors · generating-audio
More members are available in the source repository.


superdesigndev/superdesign-skill

Catalog entry: Development and Testing
Source documentation: https://github.com/superdesigndev/superdesign-skill/blob/main/skills/superdesign/SKILL.md

Function: Creates design systems from existing codebases and iterates UI drafts

When to use it: Use when a task needs the capability described in this catalog entry: Creates design systems from existing codebases and iterates UI drafts

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Core scenarios (what this skill handles)
  • Step 0 — Environment preflight (BEFORE any CLI step)
  • Step 1 — Is there a codebase to analyze?
  • Step 1.5 — Resume before rediscovery (real-codebase UI path)
  • Init: Repo Analysis (real-codebase path)
  • Init Files (cold/stale context path)
  • Superdesign CLI (MUST use before any command)
  • When a command fails
  • Command examples
  • Surface the canvas URL
  • Browser Choice
  • Images and local assets
  • After generating: offer to go further
  • How it works

veniceai/venice-audio-music

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-audio-music/SKILL.md

Function: Music generation queueing, retrieval, and completion endpoints

When to use it: Use when a task needs the capability described in this catalog entry: Music generation queueing, retrieval, and completion endpoints

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice Music / Async Audio
  • Use when
  • Models
  • Lifecycle
  • 1. `POST /audio/quote` — price it first
  • 2. `POST /audio/queue` — enqueue
  • 3. `POST /audio/retrieve` — poll / download
  • 4. `POST /audio/complete` — cleanup
  • Full loop (TypeScript)
  • Capability probing
  • Errors
  • Gotchas

veniceai/venice-audio-speech

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-audio-speech/SKILL.md

Function: Text-to-speech models, voices, formats, and streaming

When to use it: Use when a task needs the capability described in this catalog entry: Text-to-speech models, voices, formats, and streaming

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice TTS (`/audio/speech`)
  • Use when
  • Minimal request
  • Request schema
  • Models
  • Voices (from `model_spec.voices`)
  • Voice cloning — `POST /audio/voices`
  • Streaming
  • OpenAI SDK
  • Style / emotion (Qwen 3, Gemini Flash)
  • Errors
  • Gotchas

veniceai/venice-audio-transcription

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-audio-transcription/SKILL.md

Function: Audio transcription models and speech-to-text options

When to use it: Use when a task needs the capability described in this catalog entry: Audio transcription models and speech-to-text options

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice Transcription (`/audio/transcriptions`)
  • Use when
  • Minimal request
  • Request (`multipart/form-data`)
  • Response
  • Models
  • OpenAI SDK
  • Long files
  • Errors
  • Gotchas

veniceai/venice-image-edit

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-image-edit/SKILL.md

Function: Image edits, upscaling, and background removal

When to use it: Use when a task needs the capability described in this catalog entry: Image edits, upscaling, and background removal

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice Image Editing
  • Shared rules
  • Choosing an edit model
  • `/image/edit`
  • `/image/multi-edit`
  • JSON (base64, data URIs, or URLs)
  • Multipart (file upload)
  • Edit / multi-edit response headers
  • `/image/upscale`
  • `/image/background-remove`
  • Error behavior (all four endpoints)
  • Gotchas

veniceai/venice-image-generate

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-image-generate/SKILL.md

Function: Image generation endpoints and available styles

When to use it: Use when a task needs the capability described in this catalog entry: Image generation endpoints and available styles

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice Image Generation
  • Use when
  • `/image/generate` — Venice-native
  • Request
  • Fields
  • Response (JSON, `return_binary: false`)
  • Response headers
  • `/images/generations` — OpenAI-compatible
  • Mapped fields
  • `/image/styles` — list presets
  • Choosing a model
  • Common patterns
  • Fixed-seed reproducibility
  • Aspect-ratio + resolution model (Nano Banana, Seedream V5 Pro)
  • Quality tier (GPT Image 2 / 2.5, Ideogram V4.5)
  • Style preset + negative

veniceai/venice-video

Catalog entry: Skills by Venice.ai
Source documentation: https://github.com/veniceai/skills/blob/main/skills/venice-video/SKILL.md

Function: Video generation and transcription workflows

When to use it: Use when a task needs the capability described in this catalog entry: Video generation and transcription workflows

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Venice Video
  • Use when
  • Pick a model first
  • Lifecycle — generation
  • 1. Price with `/video/quote`
  • 2. Submit with `/video/queue`
  • 3. Poll with `/video/retrieve`
  • 4. Clean up with `/video/complete`
  • `/video/queue` request fields
  • Reference media limits
  • Common recipes
  • Text → video with audio
  • Image → video
  • Video upscale
  • Multi-element consistency (Kling O3 R2V)
  • Seedance 2.5 edit (match the source clip)

vercel-labs/composition-patterns

Catalog entry: Skills by Vercel Engineering Team
Source documentation: https://github.com/vercel-labs/agent-skills/blob/main/skills/composition-patterns/SKILL.md

Function: Scalable React composition patterns for reusable component APIs

When to use it: Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React Composition Patterns
  • When to Apply
  • Rule Categories by Priority
  • Quick Reference
  • 1. Component Architecture (HIGH)
  • 2. State Management (MEDIUM)
  • 3. Implementation Patterns (MEDIUM)
  • 4. React 19 APIs (MEDIUM)
  • How to Use
  • Full Compiled Document

vercel-labs/react-best-practices

Catalog entry: Skills by Vercel Engineering Team
Source documentation: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md

Function: React and Next.js performance optimization guidelines

When to use it: Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Vercel React Best Practices
  • When to Apply
  • Rule Categories by Priority
  • Quick Reference
  • 1. Eliminating Waterfalls (CRITICAL)
  • 2. Bundle Size Optimization (CRITICAL)
  • 3. Server-Side Performance (HIGH)
  • 4. Client-Side Data Fetching (MEDIUM-HIGH)
  • 5. Re-render Optimization (MEDIUM)
  • 6. Rendering Performance (MEDIUM)
  • 7. JavaScript Performance (LOW-MEDIUM)
  • 8. Advanced Patterns (LOW)
  • How to Use
  • Full Compiled Document

vercel-labs/react-native-skills

Catalog entry: Skills by Vercel Engineering Team
Source documentation: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-native-skills/SKILL.md

Function: React Native and Expo best practices for performant apps

When to use it: Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React Native Skills
  • When to Apply
  • Rule Categories by Priority
  • Quick Reference
  • 1. List Performance (CRITICAL)
  • 2. Animation (HIGH)
  • 3. Navigation (HIGH)
  • 4. UI Patterns (HIGH)
  • 5. State Management (MEDIUM)
  • 6. Rendering (MEDIUM)
  • 7. Monorepo (MEDIUM)
  • 8. Configuration (LOW)
  • How to Use
  • Full Compiled Document

vercel-labs/react-view-transitions

Catalog entry: Skills by Vercel Engineering Team
Source documentation: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-view-transitions/SKILL.md

Function: Native-feeling animations with React View Transitions

When to use it: Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • React View Transitions
  • When to Animate
  • Choosing Animation Style
  • Availability
  • Implementation Workflow
  • Core Concepts
  • The `` Component
  • Animation Triggers
  • Critical Placement Rule
  • Styling with View Transition Classes
  • Props
  • CSS Pseudo-Elements
  • Transition Types
  • `router.back()` and Browser Back Button
  • Types and Suspense
  • Shared Element Readiness

vercel-labs/web-design-guidelines

Catalog entry: Skills by Vercel Engineering Team
Source documentation: https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md

Function: Review UI code against Web Interface Guidelines

When to use it: Use when asked to “review my UI”, “check accessibility”, “audit design”, “review UX”, or “check my site against best practices”.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • Web Interface Guidelines
  • How It Works
  • Guidelines Source
  • Usage

video-db/skills

Catalog entry: Specialized Domains
Source documentation: https://github.com/video-db/skills/blob/main/README.md

Function: Realtime and batch video workflows: capture screen/audio, ingest URLs/YouTube/RTSP, transcribe, index, search, generate subtitles, edit timelines, and stream HLS output

When to use it: Use when a task needs the capability described in this catalog entry: Realtime and batch video workflows: capture screen/audio, ingest URLs/YouTube/RTSP, transcribe, index, search, generate subtitles, edit timelines, and stream HLS output

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Three ways to use it
  • Add to Claude
  • Connect the MCP server in any client
  • Install the skills in a coding agent
  • What works where
  • What is inside
  • If you are an agent reading this
  • Community & Support

This catalog entry points to a collection. The scanned repository lists 6 distinct skill-file paths.

Sample members: python · video-clips · video-edit · video-live · video-search · video-subtitles


WordPress/wp-block-themes

Catalog entry: Skills by WordPress Development Team
Source documentation: https://github.com/WordPress/agent-skills/blob/trunk/skills/wp-block-themes/SKILL.md

Function: Block themes: theme.json, templates, patterns, style variations

When to use it: Use when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching).

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • WP Block Themes
  • When to use
  • Inputs required
  • Procedure
  • 0) Triage and locate block theme roots
  • 1) Create a new block theme (if needed)
  • 2) Confirm theme type and override expectations
  • 3) Make `theme.json` changes safely
  • 4) Templates and template parts
  • 5) Patterns
  • 6) Style variations
  • Verification
  • Failure modes / debugging
  • Escalation

WordPress/wp-interactivity-api

Catalog entry: Skills by WordPress Development Team
Source documentation: https://github.com/WordPress/agent-skills/blob/trunk/skills/wp-interactivity-api/SKILL.md

Function: Frontend interactivity with data-wp-* directives and stores

When to use it: Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, hydration, and directive behavior.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • WP Interactivity API
  • When to use
  • Inputs required
  • Procedure
  • 1) Detect existing usage + integration style
  • 2) Identify the store(s)
  • 3) Server-side rendering (best practice)
  • 4) Implement or change directives safely
  • 5) Build/tooling alignment
  • 6) Debug common failure modes
  • Verification
  • Failure modes / debugging
  • Escalation

WordPress/wpds

Catalog entry: Skills by WordPress Development Team
Source documentation: https://github.com/WordPress/agent-skills/blob/trunk/skills/wpds/SKILL.md

Function: WordPress Design System

When to use it: Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.

Usage guidance is taken from the skill’s own trigger description or usage section.

Source skill menu:

  • WordPress Design System (WPDS)
  • Prerequisites
  • When to use
  • Rules
  • Use the WPDS MCP server to access WPDS-related documentation
  • Required documentation
  • Boundaries
  • Tech stack
  • Validation
  • Output

yang0/handraw-style

Catalog entry: Specialized Domains
Source documentation: https://github.com/yang0/handraw-style/blob/master/SKILL.md

Function: Hand-drawn illustration styles, layouts, and prompts for image generation

When to use it: Use when a task needs the capability described in this catalog entry: Hand-drawn illustration styles, layouts, and prompts for image generation

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Hand-drawn Style Prompter
  • Post-generation sharing across all routes
  • Request routing index
  • Default mode
  • Automatic Style and Theme Color Recommendation Policy (默认智能推荐风格与主题色)
  • Style activation policy
  • Session initialization
  • Inputs
  • Layout workflows
  • Prompt modes
  • Output
  • Utilities
  • Personal resources and community collections

ZeroPointRepo/youtube-skills

Catalog entry: Specialized Domains
Source documentation: https://github.com/ZeroPointRepo/youtube-skills/blob/main/README.md

Function: Agent skills for YouTube: pull video transcripts and discover videos (search, channel and playlist listings) via TranscriptAPI.

When to use it: Use when a task needs the capability described in this catalog entry: Agent skills for YouTube: pull video transcripts and discover videos (search, channel and playlist listings) via TranscriptAPI.

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • YouTube Skills for AI Agents 🎬
  • Install
  • What You Can Do
  • Setup — API Key
  • Skills
  • Pricing
  • Supported Agents
  • FAQ
  • How do I get a YouTube transcript?
  • How do I search YouTube from my agent?
  • How do I get all videos from a YouTube channel?
  • Can I bulk download YouTube transcripts?
  • Do I need a Google YouTube Data API key?
  • Do I need an API key?
  • Which skill should I install?
  • What is TranscriptAPI?

This catalog entry points to a collection. The scanned repository lists 12 distinct skill-file paths.

Sample members: captions · subtitles · transcript · transcriptapi · video-transcript · youtube-api · youtube-channels · youtube-data
More members are available in the source repository.


ZhangHanDong/makepad-skills

Catalog entry: Development and Testing
Source documentation: https://github.com/ZhangHanDong/makepad-skills/blob/main/README.md

Function: Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.

When to use it: Use when a task needs the capability described in this catalog entry: Makepad UI development skills for Rust apps: setup, patterns, shaders, packaging, and troubleshooting.

The catalog does not state a separate trigger condition. This usage note is inferred from the published function description.

Source skill menu:

  • Makepad 2.0 Skills
  • Skills (14)
  • Installation
  • Option 1: Add as Working Directory
  • Option 2: Symlink to Skills Directory
  • Option 3: Copy Skills
  • Legacy
  • Source
  • License

This catalog entry points to a collection. The scanned repository lists 14 distinct skill-file paths.

Sample members: makepad-2.0-animation · makepad-2.0-app-structure · makepad-2.0-design-judgment · makepad-2.0-dsl · makepad-2.0-events · makepad-2.0-layout · makepad-2.0-migration · makepad-2.0-performance
More members are available in the source repository.


Back to the category index

本分类中文版