Files
animator/references/ai-skills.md
2026-08-14 17:03:23 +02:00

38 KiB

External AI agent skills — animator

Proven, publicly available AI agent skills mapped to this occupation. Nothing is copied from the sources: every entry is a name, a one-line summary and a link to the upstream skill package. Each section names its source repository, commit, license and retrieval date.

Tiers: core = the skill directly exercises a top market hard skill, tool or method (from gated job-ad evidence) or an essential ESCO competence of this occupation; adjacent = plausibly useful, secondary. Entries are capped at 12 per source and 80 in total per occupation (core first, strongest matches survive); everything beyond the caps is excluded and logged in the pipeline audit trail, not in this package.

Matched deterministically (ISCO group + title/competence keywords, tiered against market evidence + ESCO essentials) by pipeline/p5_enrich_ai_skills.py on 2026-07-14.

Source: anthropics/skills

  • Repository: https://github.com/anthropics/skills (commit f6656c1, retrieved 2026-07-14)
  • License: Apache-2.0; the document skills (docx/pdf/pptx/xlsx) are source-available — see the LICENSE.txt in the upstream skill folder
Skill Tier What it adds Upstream
canvas-design adjacent Create beautiful visual art in .png and .pdf documents using design philosophy. You should 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 … source
brand-guidelines adjacent Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply. source
algorithmic-art adjacent Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original … source
docx adjacent Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', '.dotx', or requests to … source
pdf adjacent Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating … source
theme-factory adjacent Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate … source

Source: ConardLi/garden-skills

Skill Tier What it adds Upstream
web-design-engineer adjacent Build polished visual web artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use when the user wants a browser-rendered, interactive, or presentational … source
gpt-image-2 adjacent 面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用:(A) Garden 本地模式,通过 OpenAI 兼容接口直接出图并落盘;(B) Host-Native 模式,把本 Skill 当作提示词工程指引,把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图;(C) Advisor 模式,宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板,覆盖海报 / UI / 产品 / 信息图 / 学术图 … source

Source: 0x0funky/agent-sprite-forge

Skill Tier What it adds Upstream
video2dsprite core Grok Build ONLY. Turn a 2D character still into smooth animation sprites via image_gen/image_edit base → image_to_video (6s/10s run-in-place) → ffmpeg frames → magenta chroma-key → dense sampled sprites (strip/grid/GIF). Use when the user … source

Source: a5c-ai/babysitter

Skill Tier What it adds Upstream
animation-spec core Generate animation specifications, easing curves, and motion design documentation source
multimedia-learning-design core Apply Mayer's multimedia learning principles to design effective audio, video, graphics, and animations that reduce cognitive load source
mechanism-design core Skill for mechanism kinematics, dynamics, and motion analysis source
exhibition-design core Plan and design exhibition layouts including spatial arrangement, object placement, lighting, graphics, and visitor flow optimization for diverse audiences source

Source: affaan-m/everything-claude-code

Skill Tier What it adds Upstream
motion-patterns core Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. source
make-interfaces-feel-better core Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states. source
frontend-slides core Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover … source

Source: avibebuilder/claude-prime

Skill Tier What it adds Upstream
media-processor core Specialized visual and multimedia processing tools. Use this skill whenever a task involves complex visual content — UI mockups, dense screenshots, design images, charts, artwork — where precise details like spacing, hex colors, font … source

Source: brycewang-stanford/Auto-Empirical-Research-Skills

Skill Tier What it adds Upstream
dataviz-skills core 14 data visualization skills. Trigger: charts, plots, figures, publication-quality graphics. Design: one skill per tool with code templates and academic formatting conventions. source

Source: davila7/claude-code-templates

Skill Tier What it adds Upstream
ui-design-system core UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and … source
design-system-starter core Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products. source
game-art core Game art principles. Visual style selection, asset pipeline, animation workflow. source

Source: dembrandt/dembrandt-skills

Skill Tier What it adds Upstream
motion-and-storytelling core Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, … source
modular-scale-typography core Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font … source

Source: Devin-AXIS/iPolloWork

Skill Tier What it adds Upstream
figma-implement-motion core Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", … source
figma-use-motion core Motion / animation context for the use_figma MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting … source
figma-code-connect core Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or … source
figma-generate-library core Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up … source

Source: educlopez/ui-craft

Skill Tier What it adds Upstream
animate core Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user asks to add animation, "make it feel smoother", fix janky transitions, or trim … source
ui-craft core Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, … source

Source: evanca/flutter-ai-rules

Skill Tier What it adds Upstream
accessibility core Use when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions, reduced motion, or target sizes; not language/culture/device (see inclusive-design). source

Source: garrytan/gstack

Skill Tier What it adds Upstream
design-consultation core Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) source

Source: gooseworks-ai/goose-skills

Skill Tier What it adds Upstream
goose-graphics core Portable visual skill pack for the Agent Skills ecosystem (Claude Code, Claude Desktop, Claude Cowork, Claude Design, Goose, Cursor, Codex). Discovers community-published styles + formats via the gooseworks CLI, runs an extract-style … source
frontend-slides core Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover … source
create-html-carousel core Create LinkedIn carousel posts as high-quality PNG images. Design informational multi-slide posts like "5 AI GTM workflows" with consistent styling, then automatically screenshot each slide at LinkedIn's optimal 1080x1080px format. source

Source: infrasity-labs/dev-gtm-claude-skills

Skill Tier What it adds Upstream
animation-principles core Apply animation principles to UI motion for purposeful, polished interactions. source
motion-system core Define a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product. source
interfaces-that-feel core Apply an emotional resonance lens to any UI. Use when a design is technically correct but flat — to identify what's missing and prescribe specific changes at the copy, motion, and interaction layer. source
ui-styling core Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, … source

Source: JasonColapietro/suede-creator-skills

Skill Tier What it adds Upstream
suede-design core Make Suede interfaces feel intentional: tokens, color, components, type, visual hierarchy, motion, dark mode, and visual QA for shipped screens. source

Source: jeremylongshore/claude-code-plugins-plus-skills

Skill Tier What it adds Upstream
form-social core Use when asked to design social media graphics, ad creatives, or marketing assets. Examples: "design a LinkedIn post for our launch", "create ad creatives for our campaign", "make an Instagram story", "design a Twitter card", "create a … source
find-design-agency core Use whenever the user wants to find, shortlist, vet, or enrich US design and creative agencies — graphic design, UX/UI, product design, brand identity, packaging, illustration, motion design, and creative direction. Triggers on "find me a … source
surge-plg core PLG motion design — free tier definition, activation sequence, expansion trigger points, viral mechanic assessment. Given a product, output the PLG architecture and make the calls. Use when asked to "PLG strategy", "freemium model", … source
adobe-hello-world core Create minimal working examples for Adobe APIs: Firefly image generation, PDF extraction, and Photoshop background removal. Use when starting a new Adobe integration, testing your setup, or learning basic Adobe API patterns. Trigger with … source
anima-ci-integration core Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integrating Anima into design handoff workflows. Trigger: "anima … source
form-component core Use when asked to design a UI component, specify a button, input, card, modal, badge, or any interactive element. Examples: "design a button component", "spec out the input field", "define the card component states", "create a component … source

Source: Leonxlnx/taste-skill

Skill Tier What it adds Upstream
stitch-design-taste core Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and … source

Source: mohitagw15856/pm-claude-skills

Skill Tier What it adds Upstream
design-handoff-brief core Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD … source
figma-annotation-guide core Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a … source
figma-design-brief core Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn a PRD into design requirements, or brief a designer on what … source

Source: nextlevelbuilder/ui-ux-pro-max-skill

Skill Tier What it adds Upstream
ui-styling core Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, … source

Source: nexu-io/open-design

Skill Tier What it adds Upstream
emilkowalski-motion core Motion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint. source
review-animations core Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned. source
od-web-effect-extractor core Extract visual effects, animation systems, Canvas/WebGL/Shader behavior, and interaction details from a reference website, then rebuild them as an editable Open Design web artifact. source
motion-frames core A single-frame motion-design composition with looping CSS animations — rotating type ring, animated globe, ticking timer, parallax labels. Renders as a hero video poster you can hand straight to HyperFrames or any keyframe-based exporter. … source
emil-design-eng core This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. source
create-hyperframes-launch core Use this plugin when the user wants a HyperFrames-ready HTML motion composition, launch animation, kinetic typography clip, product reveal, or social video made from code. source
video-template-frame-data-chart-nyt core Use this plugin when the user wants a "NYT-Style Data Chart Frame" HyperFrames motion video — NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). source
flutter-animating-apps core Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design. source
8-bit-orbit-video-template core Hyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style. source
html-ppt-zhangzara-bold-poster core Open Design's Series A growth story: the traction curve, the expansion motion, and why it's venture-scale. Built as a decision-grade fundraising pitch deck for Series A partners. source
open-design-homepage core A pixel-faithful, self-contained mirror of the live open-design.ai homepage — an interactive React Three Fiber / Next.js hero with a real-time 3D wordmark, sticker collage, variable fonts, and scroll-driven motion. First-party showcase of … source
stitch-design-taste core Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and … source

Source: Orkas-AI/Orkas-VideoStudio

Skill Tier What it adds Upstream
frontend-design core Aesthetic direction for OrkasVideoStudio HTML and motion-graphics compositions. Use before stage-compose writes composition-manifest.json art_direction and index.html to choose a subject-specific visual point of view, type, palette, layout … source

Source: plugin87/ux-ui-agent-skills

Skill Tier What it adds Upstream
brandkit core Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user … source
design-tokens core Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or … source

Source: rampstackco/claude-skills

Skill Tier What it adds Upstream
brand-identity core Design or evaluate a brand visual identity system covering logo, color, typography, imagery direction, iconography, and motion principles. Use this skill whenever the user wants to design a logo, build a visual identity, define brand … source

Source: Ryan-yang125/motion-lexicon

Skill Tier What it adds Upstream
motion-lexicon core Design, build, compose, implement, review, and contribute polished product interfaces with Motion Lexicon components and motion primitives. Use this skill when a user asks for a complete React page, landing page, dashboard, settings … source

Source: SamurAIGPT/Generative-Media-Skills

Skill Tier What it adds Upstream
muapi-jewelry-product-video core Create a luxury jewelry advertisement with high-end commercial cinematography and detailed macro animation. source

Source: secondsky/claude-skills

Skill Tier What it adds Upstream
interaction-design core Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions. source
threejs core Three.js 3D graphics library - scene setup, geometry, materials, lighting, textures, animation, loaders, shaders, postprocessing, interaction. Use when building 3D web experiences, creating WebGL visualizations, working with GLTF models, … source
aceternity-ui core 100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors. source
responsive-web-design core Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility. source

Source: SFKislev/Flue

Skill Tier What it adds Upstream
Adobe core Control Adobe desktop apps - Photoshop, Illustrator, Premiere, After Effects, InDesign, Audition - from the shell via Flue, without an MCP server. source

Source: softaworks/agent-toolkit

Skill Tier What it adds Upstream
design-system-starter core Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products. source

Source: vibeeval/vibecosystem

Skill Tier What it adds Upstream
frontend-dev core Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and … source

Source: wondelai/skills

Skill Tier What it adds Upstream
microinteractions core Design the small details -- triggers, rules, feedback, loops and modes -- that separate good products from great ones. Use when the user mentions "microinteraction", "button feedback", "loading state", "toggle design", "animation detail", … source

Source: worldwonderer/novel-to-game

Skill Tier What it adds Upstream
game-art-direction core Direct game art and creative vision. Turn GAME_DESIGN into a production-level ART_DIRECTION defining a recognizable visual style, camera and composition, world and character grammar, functional colour/light/material, HUD feedback, motion … source

Source: zarazhangrui/frontend-slides

Skill Tier What it adds Upstream
frontend-slides core Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover … source

Source: zebbern/claude-code-guide

Skill Tier What it adds Upstream
design-system-builder core Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching … source

Source: veniceai/skills

Skill Tier What it adds Upstream
venice-errors adjacent Handle Venice API errors correctly. Covers the StandardError / DetailedError / ContentViolationError / X402InferencePaymentRequired body shapes, every meaningful status code (400, 401, 402, 403, 415, 422, 429, 500, 503, 504), the 402 … source