Agent Academy

Agent Academy is a free, source-linked library of skills, prompts, MCP servers and bot templates, organised into courses by profession, for people who hand real work to AI agents: 1,467 live resources, each with its original link, license and safety tags.

Course · Design

Motion and interaction

Learn to design an interface that does not look templated: pick one style from UI Hub, follow design skills, build, and verify with four screenshots.

Permissions

Mostly read-only. Figma/Canva MCP servers need tokens; skills are text you can read. Installing a skill writes files into the project; ask first.

course.md for agentsSkill pack (.zip)JSON
59resources
5steps
8checks

  1. Enrol

    Read course.md: the job, the permissions it needs, and what good output looks like.

    TutorialDesign

    「先出设计方案再写代码」Prompt（@Voxyz_ai）

    受众/目标 → 4–6 个色 token → 字体 → ASCII 线框 → 1 个标志元素；完成后桌面 + 手机截图对照 DESIGN.md

    Sourcex.com/i/status/2087178102505926740

    No credentialsDoes not sendsee source
    TutorialDesign

    2026 产品设计师工作流（@dianne_alter）

    产品上下文 → Mobbin + Paper / Claude Code 原型 → Figma 组件进 Storybook → Agent 审查

    Sourcex.com/i/status/2088261777758851497

    No credentialsDoes not sendsee source
    TutorialDesign

    8pt Grid（spec.fm）

    8 点栅格间距体系的经典讲解

    Sourcespec.fm/specifics/8-pt-grid

    No credentialsDoes not sendsee source

  2. Pick a direction

    Choose one style, platform or channel from the reference library. Only one.

    Pick one visual direction (UI Hub)

    minimal 316motion 60enterprise 37dark-tech 27editorial 253d 21gradient 18playful 17soft 15swiss 13apple 12material 11skeuomorphic 8utilitarian 7brutalist 6glass 5fluent 3retro 2industrial 1neumorphism 1

    Bot templateDesign

    figma bro

    Turns a Figma frame into a build spec, and audits your components, tokens, and motion

    Sourcebotsdots.site/templates/figma-bro-pxnv

    Needs credentialsDoes not sendtemplate belongs to its creator
    Style libraryDesign

    60fps

    移动端界面动效（@neropursue）

    Source60fps.design

    No credentialsDoes not sendsee source
    Style libraryDesign

    Aceternity UI

    Sourceui.aceternity.com

    No credentialsDoes not sendsee source
    Style libraryDesign

    Aceternity UI 全部组件

    Full list of free Aceternity components: spotlight, 3D cards, background beams, text effects, floating nav.

    Sourceui.aceternity.com/components

    No credentialsDoes not sendsee source
    Style libraryDesign

    Animata

    数百个免费动效组件

    Sourceanimata.design

    No credentialsDoes not sendsee source
    Style libraryDesign

    Animate UI

    Sourceanimate-ui.com

    No credentialsDoes not sendsee source

  3. Learn the rules

    Read the required skills, prompts and standards in order.

    SkillDesign

    emil-design-eng

    This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/emil-design-eng/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    slack-gif-creator

    Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack.

    Sourcegithub.com/anthropics/skills/blob/main/skills/slack-gif-creator/SKILL.md

    No credentialsDoes not sendApache-2.0
    SkillDesign

    animate

    Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations;…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/animate/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    animation-performance

    Keep web animations inside the frame budget — animate composite-only properties, keep motion off the main thread when the page is busy, and find the cause when an animation drops frames. Covers the layout/paint/composite pipeline, cheaper property swaps, CSS vs WAAPI vs requestAnimationFrame, Framer Motion's hardware-accelerated path, React re-rendering per frame, inherited CSS variable recalculation, blur cost,…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/animation-performance/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    animation-vocabulary

    Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/animation-vocabulary/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    apple-design

    Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/apple-design/SKILL.md

    No credentialsDoes not sendMIT

  4. Do it

    Follow a workflow or case. Install a skill or MCP server only if you have permission.

    How this site was designed by an agent
    MCP serverDesign

    io.github.AJSMonty/adobe-mcp

    Drive Adobe CC (AE, Photoshop, Illustrator, Premiere, Character Animator) from any MCP client

    Sourcegithub.com/AJSMonty/adobe-mcp

    Needs credentialsDoes not sendMIT
    MCP serverDesign

    Icons8

    Search and fetch genuine Icons8 icons and Ouch illustrations as SVG, PNG or animation.

    Sourceicons8.com/mcp

    Needs credentialsDoes not sendnot stated
    ToolDesign

    Unicorn Studio

    无代码做 WebGL 特效

    Sourceunicorn.studio

    No credentialsDoes not sendsee source
    WorkflowDesign

    UI Hub skills.json (recommended design workflow)

    Workflow: pick ONE direction skill (frontend-design or taste-skill) → search resources by style/kind → build with emil-design-eng → audit with impeccable + web-design-guidelines + accessibility → verify in browser light+dark, mobile.

    Sourcesiinxu.github.io/ui-resource-hub/api/skills.json

    No credentialsDoes not sendaggregator

  5. Self-check

    Go through the checklist and report the result to your owner.

    SkillDesign

    impeccable

    Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding,

    Sourcegithub.com/pbakaus/impeccable/blob/main/.claude/skills/impeccable/SKILL.md

    No credentialsDoes not sendApache-2.0
    SkillDesign

    web-design-guidelines

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

    Sourcegithub.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md

    No credentialsDoes not sendnot stated
    StandardDesign

    WCAG 2.2 (W3C Recommendation)

    Web Content Accessibility Guidelines 2.2: testable success criteria for accessible web content.

    Sourcew3.org/TR/WCAG22

    No credentialsDoes not sendW3C Document License; link + quote with attribution
    SkillDesign

    ui-styling

    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, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and…

    Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-styling/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    ui-ux-pro-max

    UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings,…

    Sourcegithub.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/.claude/skills/ui-ux-pro-max/SKILL.md

    No credentialsDoes not sendMIT
    SkillDesign

    break-ui

    Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each. Use when the user asks to stress-test, break, or find edge cases in a component or screen, or to "try…

    Sourcegithub.com/emilkowalski/skills/blob/main/skills/break-ui/SKILL.md

    No credentialsDoes not sendMIT

    Checklist