Design skills

Browse reusable Agent Skills, each with a clear purpose and practical guidance.

pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (split-fill, exact easing subdivision, tip glint), closed variable-width ribbon fitting, and quantitative motion QA (easing probe, ink-delta continuity sweep).

1.72k repo starsObserved in 1 repos
Design
GitHub

red-layout-skill

Must be read before creating, relaying out, or repairing Xiaohongshu/red-note canvas pages. Defines social-note layout, hook/value/takeaway reading flow, saveable note patterns, vertical budgeting, compact chart/list composition, plus catalog and checklist references for 1242x1660 canvases.

1.72k repo starsObserved in 1 repos
Design
GitHub

square-1-1-layout-skill

Must be read before creating, relaying out, or repairing 1:1 square Oh My PPT pages. Defines square-card layout, centered focal hierarchy, quadrant and orbit structures, balanced margins, data-card budgeting, plus catalog and checklist references for 1200x1200 canvases.

1.72k repo starsObserved in 1 repos
Design
GitHub

standard-4-3-layout-skill

Must be read before creating, relaying out, or repairing standard 4:3 Oh My PPT pages. Defines square-ish presentation layout, two-zone and 2x2 structures, chart/table budgeting, column discipline, plus catalog and checklist references for 1600x1200 canvases.

1.72k repo starsObserved in 1 repos
Design
GitHub

vertical-3-4-layout-skill

Must be read before creating, relaying out, or repairing 3:4 vertical Oh My PPT pages. Defines poster-card layout, focal hierarchy, vertical section planning, evidence grouping, compact two-column pockets, chart/list budgeting, plus catalog and checklist references for 1200x1600 canvases.

1.72k repo starsObserved in 1 repos
Design
GitHub

vertical-9-16-layout-skill

Must be read before creating, relaying out, or repairing 9:16 vertical Oh My PPT pages. Defines mobile-story layout, top/middle/bottom zone planning, vertical flow patterns, height budgeting, readable chart/list composition, plus catalog and checklist references for 900x1600 canvases.

1.72k repo starsObserved in 1 repos
Design
GitHub

audit-design-system

Audit & fix design system usage — migrate @trycompai/ui and lucide-react to @trycompai/design-system

1.69k repo starsObserved in 2 repos
Design
GitHub

nipaplay-theme-ui

Use when creating, refactoring, or reviewing UI for the Nipaplay Flutter theme. Always inspect the developer-options Nipaplay UI preview and reuse controls from lib/themes/nipaplay/widgets before writing new UI.

1.63k repo starsObserved in 1 repos
Design
GitHub

architecture-diagram

Create a professional, dark-themed software/system architecture diagram as a single self-contained HTML file with inline SVG. Use when asked to visualize system components, layers, services, or how parts of a codebase fit together.

1.62k repo starsObserved in 1 repos
Design
GitHub

add-landing-template

Add a new org landing-page template to the ClassroomIO monorepo. Use when the user asks to "create/add a new landing template", "add a new template like X to the org landing pages", "build a new theme for the org landing page", or hands over a design reference (image, URL, prototype) for a new landing visual style.

1.61k repo starsObserved in 1 repos
Design
GitHub