Star200+

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
152
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
    three scope map skill

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

    npx skills add songsummer920-dazzle/three-scope-map-skill
  2. 02
    gsap skills

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

    npx skills add greensock/gsap-skills
  3. 03
    lottie

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

    npx skills add diffusionstudio/lottie
  4. 04
    shadcnblocks skill

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

    npx skills add masonjames/shadcnblocks-skill

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
#2

gsap skills

Quality 79Trust 83Audit 82

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

npx skills add greensock/gsap-skills
Skill pageAudit report
#3

lottie

Quality 77Trust 81Audit 82

Repository description

Generate production-ready Lottie animations with Claude Code or Codex

3.6K starsSafe to tryMIT

Install

npx skills add diffusionstudio/lottie
Skill pageAudit report
#4

shadcnblocks skill

Quality 64Trust 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

npx skills add masonjames/shadcnblocks-skill
Skill pageAudit report
#5

web to design md

Quality 63Trust 70Audit 73

Repository description

Convert any official website to design.md document

236 starsNeeds reviewUnknown license

Install

npx skills add Paidax01/web-to-design-md
Skill pageAudit report
#6

Onlook

Quality 100Trust 90Audit 92

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

npx skills add onlook-dev/onlook
Skill pageAudit report
#7

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.

25K starsSafe to trySource terms (see source)

Install

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

Lucide

Quality 100Trust 87Audit 90

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

npx skills add lucide-icons/lucide
Skill pageAudit report
#9

Animation Vocabulary

Quality 100Trust 91Audit 94

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

npx skills@latest add emilkowalski/skills
Skill pageAudit report
#10

Material Ui

Quality 100Trust 90Audit 92

Repository description

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

98K starsSafe to tryMIT

Install

npx skills add mui/material-ui
Skill pageAudit report