Design & Media Agent Skills for Claude Code

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.

Write a structured design brief for a Figma design task from a product requirement or feature request.

Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics.

Runs a pre-handoff QA checklist on a Figma design before it goes to engineering.

Migrate design systems between Figma files, or from other tools to Figma

Configure Figma API access across dev, staging, and production environments.

Optimize Figma REST API performance with caching, partial fetches, and

Plan prototype interactions and flows for user testing in Figma.

Design a spacing and layout token system for a Figma design system.

Figma-to-Odoo design workflow and complete page template reference.

Use when the user wants to extract Figma designs into production-ready React or Next.js components with TypeScript, Tailwind CSS, and…

Apply Fitts's Law — target acquisition time depends on size and distance.

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member…

Apply Flowkit CSS naming system in Webflow.

Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates.

Ensures stable and consistent Vue/React frontend modifications by enforcing strict layout, data-binding, and styling constraints.