Design & Media Agent Skills

Use this skill when designing UI to survive content extremes — long names, big numbers, multi-line addresses, missing images…

Use as a one-time design setup for UI, product, landing-page, or brand-heavy work.

Gate 4 of frontend development cycle - ensures all components have snapshot tests covering all states, viewports, and edge cases.

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.

Export Webflow Designer components to React/Next.js code for external projects.

UX Audit workflow skill. Use this skill when the user needs Audit screens against Nielsen's heuristics and mobile UX best practices using…

A two-spread digital e-guide preview — page 1 is a cover (display title, author, "What's inside" stats, table of contents teaser); page 2…

Plan customer discovery interviews with the right goal, segment, constraints, and method.

Run a full discovery cycle from problem hypothesis to validated solution.

Validates architectural consistency between design guidelines, technical specs, and React implementation documentation.

Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files).

Emotional design and delight patterns for product owners.

Build a Says, Thinks, Does, Feels map for one user or segment.

Visual language rules for Engram surfaces.

Review UI code for Web Interface Guidelines compliance.

Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export.

Run or participate in a Bitwarden design critique session — the weekly team critique and one-off product design reviews — grounded in the…

Generate structured developer handoff annotations for a Figma screen or component.

Choose between Figma integration architectures: CLI script, webhook

Generate project-specific design system rules for Figma-to-code workflows.

Create a new blank Figma Design or FigJam file.