skills-core/animation-layout-artist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
animation-layout-artist/references/ai-skills.md
skillfactor-pipeline 6e847c3198 feat: animation-layout-artist skill package v0.1.0
2026-08-15 13:49:38 +02:00

38 KiB
Raw Permalink Blame History

External AI agent skills — animation-layout-artist

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
brand-guidelines core 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
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
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
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
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

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: a5c-ai/babysitter

Skill Tier What it adds Upstream
animation-spec core Generate animation specifications, easing curves, and motion design documentation source
mechanism-design core Skill for mechanism kinematics, dynamics, and motion analysis source
shot-composition core Plan camera angles, movements, shot sizes, and visual design for cinematic storytelling 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

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

Skill Tier What it adds Upstream
cs-skills core 10 computer science skills. Trigger: algorithms, systems research, software engineering, security papers. Design: theory, complexity analysis, code-centric research, and security methods. source

Source: davila7/claude-code-templates

Skill Tier What it adds Upstream
figma-implement-design core Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or … source
design-to-code core Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper … source
game-art core Game art principles. Visual style selection, asset pipeline, animation workflow. source
motion-canvas core Complete production-ready guide for Motion Canvas with ESM/CommonJS workarounds, full setup templates, and troubleshooting for programmatic video creation using TypeScript 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
operational-expert-tool-ui core Operational expert tools — used by domain specialists for hours every day — require a different design approach than consumer or occasional-use software. Information density, workflow linearity, and at-a-glance status take priority over … 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

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
audit core Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work. source
brief core Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work. 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: foryourhealth111-pixel/Vibe-Skills

Skill Tier What it adds Upstream
figma-implement-design core Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or … 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: infrasity-labs/dev-gtm-claude-skills

Skill Tier What it adds Upstream
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
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
interface-design core Craft-first interface design for dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, and interactive products. Use when designing, building, reviewing, auditing, or refining product UI where visual craft, layout … 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
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
adobe-reference-architecture core Implement Adobe reference architecture for production integrations covering Firefly Services, PDF Services, I/O Events, and App Builder with layered project layout, error boundaries, and health monitoring. Trigger with phrases like "adobe … source
canva-core-workflow-a core Execute the Canva design creation and export pipeline via the Connect API. Use when building design creation workflows, exporting designs programmatically, or integrating Canva''s design tools into your application. Trigger with phrases … source
form core Visual designer — brand identity, color systems, typography, design tokens, and UI design. 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-core-workflow-a core Execute Adobe Firefly Services workflow: AI image generation, generative fill, and expand image using the Firefly v3 API. Use when generating images from prompts, filling or expanding images with AI, or building creative automation … source
adobe-local-dev-loop core Configure Adobe local development with App Builder CLI, Runtime actions, hot reload, and mock testing for Firefly/PDF/Photoshop APIs. Use when setting up a development environment, configuring test workflows, or establishing a fast … source
figma-local-dev-loop core Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API with hot reload. Trigger with phrases like "figma dev … source
figma-migration-deep-dive core Migrate design systems between Figma files, or from other tools to Figma via API. Use when migrating design tokens between files, syncing variables across libraries, or building automated migration pipelines for Figma. Trigger with phrases … source
klingai-reference-architecture core Production reference architecture for Kling AI video generation platforms. Use when designing scalable systems. Trigger with phrases like ''klingai architecture'', ''kling ai system design'', ''video platform architecture'', ''klingai … source

Source: jezweb/claude-skills

Skill Tier What it adds Upstream
design-review core Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks … 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
figma-spacing-system core Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a … source

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

Skill Tier What it adds Upstream
banner-design core Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, … 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
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
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
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
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
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
web-design-guidelines core Review UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI. 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
flutter-animating-apps core Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design. 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
frontend-design core Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, … 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
design-system-importer core Reference-media and design-system input layer for OrkasVideoStudio. Treat reference images, videos, screenshots, brand guides, and design notes uniformly, compiling reproduce/edit/guide intent into executable spatial and temporal … 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
design-qa core Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design … 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
brand-archetype-system core Apply pre-composed aesthetic archetype defaults to jumpstart brand design work covering color, typography, layout, voice, and imagery direction. Use this skill whenever the user wants a starting point for brand visual and verbal direction, … 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-design-guide core Create a comprehensive brand design guide — color palette, typography pairings, UI component previews, and visual identity rules with example mockups. 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
design-system-creation core | Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency. 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: syahiidkamil/Software-Engineer-AI-Agent-Atlas

Skill Tier What it adds Upstream
super-ui-ux-design core Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems, aesthetics-vs-conversion) fused with a hands-on execution … 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: wholiver/swiftui-design-skill

Skill Tier What it adds Upstream
swiftui-design-skill core SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout systems, typography, color, spacing, brand integration, and design review. Use … 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: 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