Design skills

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

worst-case-design

Design the worst possible solution. Deliberate failure engineering to reveal hidden constraints and inversion opportunities.

386 repo starsObserved in 1 repos
Design

ux-prototyping

Create interactive single-file HTML prototypes for UX validation. Use when the user asks to create a prototype, mockup, or interactive wireframe based on specs/architecture/ux.md or any UX specification. Triggers include requests like "create a prototype", "build a prototype from the UX spec", "make an interactive mockup", "prototype the user flow", or "validate the UX".

385 repo starsObserved in 3 repos
Design

animate-roblox-characters

Create, revise, polish, inspect, export, and preview complete stylized Roblox R6 and R15 character animations on authentic Studio-derived Blender rigs through MCP. Use when Codex must make Roblox walks, runs, idles, attacks, emotes, jumps, or other full-body actions; import or validate a real Roblox Motor6D/control or skinned rig; repair foot sliding or robotic motion; polish Graph Editor curves; export through the correct .rbxanim or FBX pipeline; produce a verified animated GIF; or optionally validate playback in Roblox Studio.

385 repo starsObserved in 2 repos
Design

ckm-design

Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.

385 repo starsObserved in 2 repos
Design

ecommerce-livestream-overlay-generator

Fully automated e-commerce livestream overlay generation. Given a brand, product, and promotional info (or a product photo directly), automatically generates a complete livestream visual package: background, title banner, host persona, pricing card, product shelf, and benefits bar. Supports green screen removal, auto-composite preview, and packaged delivery.

385 repo starsObserved in 2 repos
Design

payoff-action-modeling

Model product UI actions from user intent questions after a meaningful outcome, completion, created resource, imported data, uploaded file, synced integration, report, deployment, automation, review state, handoff, or workflow milestone. Use when deciding which actions to show, hide, group, name, prioritize, defer, or place across outcome, item, selection, continuation, navigation, recovery, and assistance scopes.

385 repo starsObserved in 2 repos
Design

theme-handler

Manage and update application themes using shadcn and tweakcn.

385 repo starsObserved in 2 repos
Design

ui-final-polish

Final visual polish for an existing UI without redesigning it. Use after structure is clear, when asked to improve spacing, alignment, text hierarchy, readability, shadows, highlights, effects, action placement, or overall production feel. For screen structure, layer naming, code handoff, preview scenes, or animation planning, use pencil-ui-structure first.

385 repo starsObserved in 2 repos
Design

uml-modeling

Design, critique, and revise UML diagrams from a modeling and communication perspective. Use when Codex is asked to create or improve UML; when the user asks for a graphical representation, diagram, schema, visual model, process map, state view, architecture view, or system representation of software/system behavior or structure; when the user does not explicitly choose UML but needs a model-like visual explanation; when Codex must autonomously choose the right UML diagram type or split across multiple UML diagrams. Use for reasoning about diagram form, abstraction level, boundaries, grouping, lifecycle/state design, behavior vs structure, interaction design, or diagnosing why a diagram feels wrong at the modeling level. This skill treats notation as the final representation, not as the core task.

385 repo starsObserved in 2 repos
Design

video-generation-skill

Design video concepts, scripts, shotlists, transitions, and editing notes for VEO, Gemini, and Nano Banana-based pipelines. Use when turning a marketing idea into concrete video assets.

385 repo starsObserved in 2 repos
Design