Creative, Design & Styling Skills Hub

Curated design skills from Composio.

Design guidelines from well-known company websites packaged as individual skills.

UI/UX skill focused on improving AI-generated interface quality and avoiding generic blue-purple styling.

Official Claude Code frontend design plugin for better web UI design.

Lets AI coding tools read design semantics such as components, variables, and spacing from Figma.

Audits UI code against 100+ accessibility and UX rules.

Replaces boolean prop hell with compound component patterns.

Gives Claude deep knowledge of programmatic video with React.

Video-understanding skill that accepts URLs or local files, extracts scene-aware frames, collects captions or Whisper transcripts, and combines the evidence for agent analysis.

Production-grade frontend design skill for auditing, redesigning, polishing, and implementing interfaces across visual hierarchy, accessibility, responsive behavior, motion, UX copy, and design systems.

Generate architecture, workflow, sequence, data-flow, and lifecycle diagrams as self-contained HTML with SVG graphics, theme switching, and PNG, JPEG, WebP, or SVG export.

Generate visually unified, image-based PPT and PPTX decks from articles, reports, papers, notes, or outlines with Codex and other skill-compatible agents.

Create editable Draw.io diagrams for architecture, UML, SysML, BPMN, networks, infrastructure, machine-learning models, and mind maps, with local PNG, SVG, PDF, and JPG export.

Harness-agnostic design skill for producing self-contained HTML UI mockups, prototypes, wireframes, landing pages, dashboards, mobile screens, slide decks, and reusable design systems.

Build academic conference posters as precisely measured HTML and CSS, then render print-ready PDFs through headless Chromium for venues such as ICML, NeurIPS, ICLR, and CVPR.

Generate clean 2D game sprites and animation atlases through a component-row pipeline with chroma-key cleanup, frame extraction, deterministic atlas composition, QA reports, and curation tools.

Design visual art in PNG and PDF formats

Frontend design and UI/UX development tools

Building apps with the Gemini Interactions API for text, chat, streaming, and image generation

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

Guidelines for designing scalable content models in Sanity

Design ClickHouse architectures and translate best practices into workload-specific decisions

Programmatic video creation with React

Discover, compare, and run AI models using Replicate's API

API basics, auth modes, pricing, and versioning

API keys and wallet-based Venice authentication

Chat completions, multimodal inputs, tools, and streaming

OpenAI-compatible Responses API for Venice

Embeddings models, dimensions, and encoding formats

Image generation endpoints and available styles

Image edits, upscaling, and background removal

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

Music generation queueing, retrieval, and completion endpoints

Audio transcription models and speech-to-text options

Video generation and transcription workflows

Model catalog, traits, and compatibility mappings

Character endpoints and `character_slug` usage

API key CRUD, rate limits, and Web3 keys

Balance, usage, and billing analytics endpoints

Wallet credits and x402 payments on Base

JSON-RPC proxying for supported crypto networks

Search, scraping, and text parsing endpoints

Error handling, retries, and API status codes

Optimize and transform images via CDN

Create and manage DESIGN.md files

Improve prompts with design specs and UI/UX vocabulary

Stitch to React components conversion

Generate walkthrough videos from Stitch app designs

Build UI components with shadcn/ui

Iterative design-to-code feedback loop

Design well-architected Azure cloud systems

Review and create distinctive frontend interfaces

AI podcast audio with Azure OpenAI Realtime API

Image captioning, OCR, and object detection

Foundry Agents SDK — container-based agents with custom images

Image captions, tags, OCR, objects

Container image and registry management

REST speech-to-text for short audio

Content safety for text and images

Generate 3D models from text or images

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

Generate images and videos using fal.ai AI models

AI-powered image editing with style transfer and object removal

Generate images and videos with Kling O3 — Kling's most powerful model family

Create talking head videos and lip sync audio to video

Platform APIs for model management, pricing, and usage tracking

Real-time and streaming AI image generation

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

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

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

Upscale and enhance image and video resolution using AI

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

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

Generate workflow JSON files for chaining AI models

WordPress Design System

Generate and edit images using OpenAI's Image API for projects

Generate, remix, and manage short video clips via OpenAI's Sora API

Generate spoken audio from text using OpenAI's API with built-in voices

Transcribe audio files to text with optional speaker diarization

Use the Figma MCP server to fetch design context and translate nodes into production code

Connect Figma design components to code components using Code Connect

Rules for implementing Figma designs using the Figma MCP server

Create a new blank Figma file or FigJam file

Translate app pages and layouts into Figma using design system tokens

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

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

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

Connect Figma design components to code components using Code Connect

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

Create a new blank Figma Design or FigJam file

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

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

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

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

Generate and iterate ad creative including headlines, descriptions, and primary text

Apply psychological principles and behavioral science to copy and design

Design and optimize upgrade screens, paywalls, and upsell modals

Design and optimize referral, affiliate, and word-of-mouth programs

Expand a core idea into multiple distinct ad angles for creative testing

Create ad concepts that stop attention in the first 3 seconds

Design the optimal funnel from click to conversion and booked calls

Reference guide for designing clean, evolvable GraphQL schemas

Search for images using the Brave Search API

Search for videos across the web via the Brave Search API

Assess automation vs. redesign opportunities across five competencies

Document AI-powered product recommendations

Diagnose context stuffing vs. engineering and guide memory and retrieval design

Set up hypothesis-driven planning using Jeff Gothelf's Lean UX Canvas v2

Lead through MITRE Problem Framing: Look Inward, Outward, and Reframe

Generate 5 creative, cost-effective marketing ideas with rationale

Design experiments to test assumptions for existing products

Design lean pretotypes for new product validation

Brainstorm product ideas from PM, Designer, Engineer perspectives

Generate Business Model Canvas with all 9 building blocks

Generate Lean Canvas with problem, solution, UVP, and metrics

Design pricing strategies with competitive analysis and WTP estimation

Create product strategy using 9-section Product Strategy Canvas

Generate Startup Canvas combining Product Strategy and Business Model

Design value propositions using 6-part JTBD template

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

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

Backend architecture with REST API design, auth flows, real-time features, and database integration

Android native development with Kotlin/Jetpack Compose, Material Design 3, and accessibility

iOS development with UIKit, SnapKit, and SwiftUI covering navigation, Dark Mode, and HIG compliance

GLSL shader techniques for ray marching, fluid simulation, particle systems, and procedural generation

Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via MiniMax API

Generate, fill, and reformat PDFs with a token-based design system and 15 cover styles

Create and edit PowerPoint presentations from scratch with PptxGenJS

Create, read, analyze, and validate Excel/spreadsheet files with zero format loss

Professional DOCX document creation and editing using OpenXML SDK

Core API with gsap.to(), from(), fromTo(), easing, duration, stagger, and defaults

Timelines with sequencing, position parameter, labels, nesting, and playback control

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

Plugins including ScrollToPlugin, Flip, Draggable, SplitText, SVG, and physics

Utility functions like clamp, mapRange, interpolate, snap, selector, and wrap

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

Performance tips for transforms, will-change, batching, and ScrollTrigger optimization

Vue, Svelte, and other frameworks with lifecycle, scoping, and cleanup patterns

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

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

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

Chief Security Officer: OWASP Top 10 + STRIDE threat model with zero false-positive exclusions

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

Email deliverability and design best practices

Design efficient document schemas with validation and indexing patterns

Operational guide for enabling hierarchical context parallelism in Megatron-Bridge, including config knobs, code anchors, pitfalls, and verification.

Operational guide for enabling Megatron FSDP in Megatron-Bridge, including config knobs, code anchors, pitfalls, and verification.

Operational guide for enabling TP, DP, and PP communication overlap in Megatron-Bridge, including config knobs, code anchors, pitfalls, and verification.

Bump the NVIDIA PyTorch base image (`nvcr.io/nvidia/pytorch:-py3`) used by Megatron-LM CI.

>- Review, design, and refactor TensorRT-LLM PyTorch MoE code for architecture fit, clean code, maintainability, and testability.

Manage and monitor VSS alerts after the alerts profile is deployed.

Deploy, debug, or tear down any VSS profile using a compose-centric workflow — config (dry-run) with env overrides, review resolved compose, then compose up.

Produce video analysis reports by discovering the deployed VSS agent, querying POST /generate for a timestamped captioned summary of the clip, then formatting the agent reply as th...

> Use this skill when working with the RTVI VLM or RT-VLM microservice API on VSS 3.1.

Query video analytics data and metrics from Elastic search via the VA-MCP server (port 9901).

Search video archives using natural language — find events, objects, actions, and people across recorded video using fusion search (Cosmos Embed1 semantic search + CV attribute sea...

Summarize a video by calling the VLM NIM or the Long Video Summarization (LVS) microservice directly.

Call the vss agent to run video understanding on video to answer a text question.

Query VIOS REST APIs: sensor list, recording timelines, video clip extraction, snapshot capture, add/delete sensors and streams

Generate video summary reports using the VSS video_search_frag extension with Long Video Summarization (LVS), Enterprise RAG knowledge retrieval, and human-in-the-loop parameter co...

Generates operations-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Operational Excellence pillar of the Google Cloud Well-Ar...

Generates performance-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Performance Optimization pillar of the Google Cloud Well...

Generates reliability-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Google Cloud Well-Architected Framework.

Generates security-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Google Cloud Well-Architected Framework (WAF).

Generates sustainability-focused guidance for Google Cloud workloads based on the design principles and recommendations in the Google Cloud Well-Architected Framework (WAF).

AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation

30+ App Store Optimization skills for keyword research, metadata optimization, competitor analysis, creative optimization, and mobile growth strategies via Appeeky API

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

Document processing with Nutrient DWS API: convert (PDF/DOCX/XLSX/PPTX/HTML/images), extract text/tables, OCR (20+ languages), redact PII (pattern + AI), watermark, digital signatures, form filling. [MCP server](https://www.npmjs.com/package/@nutrient-sdk/dws-mcp-server) also available.

AI-powered PPT generation with document analysis and styled images

UI/UX design patterns and best practices

300+ design rules from Apple HIG, Material Design 3, and WCAG 2.2 for cross-platform apps

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

Spec-driven development workflow that transforms prompts into production-ready implementations through structured planning, architecture design, and LLM-as-a-Judge based quality gates.

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

Design LLM-as-Judge evaluators for subjective criteria

UX and design system skills: hierarchy, typography, accessibility, interactions

Design and evaluate compression strategies for long-running sessions

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

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

Generate images using Google Gemini's API

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

AI-powered KiCad electronics design review and analysis