Design skills

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

meshing-guidelines

Mesh gradient library for SwiftUI. Use for creating, animating, and exporting mesh gradients. Supports 2x2, 3x3, and 4x4 grid templates, animated gradients, Metal shaders, and platform-specific export to photo library or disk.

220 repo starsObserved in 1 repos
Design

use-artifacts

Create Claude-style local HTML artifacts under global ~/.agents/artifacts. Use for artifact requests, variations/options croquis, feature plans, thinking docs, prototypes, visualizations, dashboards, diagrams, or substantial reusable content. Pair with use-style.

220 repo starsObserved in 1 repos
Design

use-style

Apply named visual style guides to landing pages, app shells, and UI. Use for $use-style, /useskill, list styles, or styles like ios-app, grid, vercel, black-grid, stripe, linear, raycast, gumroad, dusk, or luma.

220 repo starsObserved in 1 repos
Design

data-dashboard-design

Design effective data dashboards with proper KPI hierarchy, chart type selection, and interactive features. Use this skill when the user needs to create a dashboard, choose the right visualizations, organize metrics for different audiences, or evaluate dashboard tools — even if they say 'build a dashboard', 'our reports are confusing', 'which chart should I use', or 'executives can't find the metrics they need'.

218 repo starsObserved in 2 repos
Design

grad-affordance

Apply Affordance Theory (Gibson, 1979; Norman, 1988) to analyze the action possibilities that an artifact provides to an actor. Use this skill when the user needs to evaluate technology design from an affordance perspective, identify why users struggle with an interface, analyze IT-enabled organizational change through affordance actualization, or when they ask 'what does this technology afford', 'why can't users figure out this feature', or 'how does technology enable new practices'.

218 repo starsObserved in 2 repos
Design

grad-cognitive-load

Apply Cognitive Load Theory to optimize instructional design by managing intrinsic, extraneous, and germane load within working memory limits. Use this skill when the user needs to diagnose why learners are overwhelmed, redesign training or documentation for better comprehension, evaluate UI/UX information architecture for cognitive burden, or when they ask 'why is this tutorial confusing', 'how to simplify complex instructions', or 'what causes information overload'.

218 repo starsObserved in 2 repos
Design

grad-flow

Apply flow theory to diagnose optimal experience conditions and design environments that balance challenge and skill for sustained engagement. Use this skill when the user needs to explain why users disengage from tasks, optimize task difficulty for peak performance, design learning progressions or gamification systems, or when they ask 'why do people lose focus', 'how to design for engagement', or 'what conditions produce peak performance'.

218 repo starsObserved in 2 repos
Design

ux-design-thinking

Apply Design Thinking's five stages — Empathize, Define, Ideate, Prototype, Test — to solve user-centered problems. Use this skill when the user needs to solve an ambiguous problem, redesign a user experience, facilitate an innovation workshop, or develop a new product concept from scratch — even if they say 'we don't know what to build', 'how do we innovate', or 'the users aren't happy but we're not sure why'.

218 repo starsObserved in 2 repos
Design

ux-heuristic

Conduct heuristic evaluation of user interfaces using Nielsen's 10 usability principles. Use this skill when the user needs to audit a website, app, or interface for usability issues, prioritize UX improvements, or conduct a quick expert review without user testing — even if they say 'review this UI', 'find usability problems', or 'why do users struggle with our app'.

218 repo starsObserved in 2 repos
Design

ecom-image2

Use when generating e-commerce product images, advertising materials, or commercial photography using GPT-Image-2 via Codex CLI. Triggers on requests for product photography, promotional banners, social media assets, UGC-style images, packaging design, flat lay, model shots, livestream scenes, exploded views, ghost mannequin, magazine editorial, seasonal campaigns, luxury atmospherics, device mockups, storefront photography, sports campaigns, and other e-commerce visual content.

217 repo starsObserved in 1 repos
Design