Design & Media Agent Skills for Microsoft Copilot

Apply when facing a novel UI interaction or architectural decision with no precedent in the codebase.

Apply when product, UX, or feature-scope tradeoffs come up.

Create high-quality animated explainer visuals for essays and blog posts.

Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.

How extensions render as widgets inside other apps via named UI slots — the framework's optional extension system.

Use when the user says "setup", "setup bridge", "extract", "extract DS", "onboard", "build knowledge base", "initialize bridge", or is…

This skill should be used when the user asks about "UI design", "UX design", "user interface", "user experience", "wireframes", "mockups"…

A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom…

Preflight a Figma file for design-to-code fidelity BEFORE generating React.

Every Figma endpoint, plus codegen-ready frame extracts, comments audit, orphans finder, tokens diff Trigger phrases: `extract a figma…

Translate a Figma design into React code that matches the target project's own styling approach, design tokens, and components.

Track drift between Figma designs and generated code with the figma-sync CLI — map components to Figma nodes, baseline design + code…

Use this skill when designing, building, structuring, or reviewing any UI for a complex B2B financial-services web app — the FP&A…

Reconstruct a user-supplied food photo as a professionally reshot fine-dining editorial photograph with a new viewpoint, crop, hierarchy…

Turns a concept into the cheapest concrete artefact a human can react to, via the no-code make-sequence: Crazy 8s → paper/Miro flow →…

Normalizes all Tailwind classes in a PR's touched .tsx/.jsx files to use ONLY values defined in the project's tailwind.config (colors…

Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.

Curated typeface catalog with weights, licensing, and CSS snippets for sans-serif fonts (Inter, Roboto, Open Sans, Proxima Nova, Graphik…

Use when the user wants a repository-specific UI or design skill synthesized from current agent skills; not for ordinary UI implementation…

Use when asked to create a logo, design a brand mark, generate a logo concept, or produce any logo asset.

Define and audit form UX rules for submission validity, inline validation timing, live character limits, trusted pre-fill, dynamic…