OpenAgentSkill
GitHub200+

Installable pack

Design agent skill pack

A curated pack for agents that turn product direction into motion assets, design-system notes, UI components, interactive maps, and polished creative workflows.

Designers, design engineers, and frontend teams using agents for visual production work.

10
Selected skills
4
Install order
9.7K
Top adoption

Execution order

How an agent should use this pack

  1. 01

    Extract

    Turn public references, UI surfaces, or SVG assets into agent-readable design context.

  2. 02

    Animate

    Generate Lottie, GSAP, SVG, or scroll-motion directions with editable output paths.

  3. 03

    Compose

    Pick UI blocks, shadcn components, and layout primitives that match the product system.

  4. 04

    Verify

    Review license, install command, browser output, responsive states, and production risks.

Good fit

  • Motion design
  • Design-system extraction
  • Shadcn/ui page generation
  • Interactive data visuals

Review first when

  • The source assets are private and unavailable
  • The output will ship without human visual review
  • The license blocks the intended commercial use

Agent install plan

A machine-readable plan agents can execute.

The pack API returns install order, audit URLs, review checks, and an outcome feedback contract. Use this page for context, then call the API for the exact JSON plan.

Open text plan

Install order

  1. 01
    gsap skills

    Trust 83/100 · Audit 88/100 · Safe to try

  2. 02
    three scope map skill

    Trust 74/100 · Audit 79/100 · Needs review

  3. 03
    lottie

    Trust 81/100 · Audit 88/100 · Safe to try

  4. 04
    shadcnblocks skill

    Trust 69/100 · Audit 74/100 · Needs review

Review checklist

  • Open the audit URL for every selected skill before installation.
  • Install only inside a sandbox, local branch, or disposable workspace first.
  • Review license, recent repository activity, README/SKILL.md completeness, and dependency surface.
  • Run one narrow task before using the pack in production workflows.
  • Report success, setup friction, risk blocks, or low-quality output to the outcome endpoint.

Outcome endpoint

POST https://www.openagentskill.com/api/agent/outcome

Recommended skills

Installable shortlist for this pack

Open pack API
#1

gsap skills

Quality 100Trust 83Audit 88

Repository description

Official AI skills for GSAP. These skills teach AI coding agents how to correctly use GSAP (GreenSock Animation Platform), including best practices, common animation patterns, and plugin usage.

9.7K starsSafe to tryMIT

Install

Skill pageAudit report
#3

lottie

Quality 100Trust 81Audit 88

Repository description

Generate production-ready Lottie animations with Claude Code or Codex

3.6K starsSafe to tryMIT

Install

Skill pageAudit report
#4

shadcnblocks skill

Quality 62Trust 69Audit 74

Repository description

Give Claude Code expert knowledge of 2,500+ shadcn/ui blocks and components. This skill lets Claude intelligently select, install, and compose pre-built UI sections — from landing pages to dashboards to ecommerce flows — so you describe what you want and it picks the right pieces.

17 starsNeeds reviewMIT

Install

Skill pageAudit report
#6

Figma Implement Design

Quality 100Trust 88Audit 92

Repository description

Translate Figma designs into production-ready UI code with close visual fidelity and component-level detail.

29K starsSafe to trySource terms (see source)

Install

npx skills add openai/skills --skill figma-implement-design
Skill pageAudit report
#7

Onlook

Quality 100Trust 89Audit 90

Repository description

The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI

26K starsSafe to tryApache-2.0

Install

Skill pageAudit report
#8

Lucide

Quality 100Trust 85Audit 88

Repository description

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

23K starsSafe to tryUnknown license

Install

Skill pageAudit report
#9

Animation Vocabulary

Quality 100Trust 88Audit 90

Repository description

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 building one.

17K starsSafe to tryMIT

Install

Skill pageAudit report
#10

Material Ui

Quality 100Trust 89Audit 90

Repository description

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

98K starsSafe to tryMIT

Install

Skill pageAudit report