Design & Media
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
-
jeremylongshore Bundle Figma Common Errors'Diagnose and fix common Figma REST API and Plugin API errors. Use when encountering HTTP errors, plugin sandbox crashes, or unexpected API responses from Figma. Trigger with phrases like "figma error", "fix figma", "figma not working", "figma 403", "figma 429". '
-
jeremylongshore Bundle Figma Data Handling'Handle Figma API data correctly: comments, versions, user data, and privacy compliance. Use when working with Figma comments API, version history, or ensuring GDPR compliance for Figma user data. Trigger with phrases like "figma data", "figma comments", "figma versions", "figma GDPR", "figma user data". '
-
thedixitjain Skill Liquid Glass DesigniOS 26 Liquid Glass design system — dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit.
2 -
hashgraph-online Skill Muapi Logo BrandingDesign a professional logo with full branding package — primary logo, variations (dark/light/icon-only), color palette, and real-world application mockups.
-
thedixitjain Skill Premium Frontend UIA comprehensive guide for GitHub Copilot to craft immersive, high-performance web experiences with advanced motion, typography, and architectural craftsmanship.
2 -
thedixitjain Bundle Stitch Design TasteSemantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
2 -
davepoon Bundle Typography SelectorBrowse and select fonts from Google Fonts or curated pairings. Use to find the perfect typography for a design project.
-
thedixitjain Skill UI Visual ValidatorRigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.
2 -
hashgraph-online Skill Muapi Logo GeneratorQuickly generate a single polished logo for any brand — fast, focused, single output with clean vector aesthetic and accurate brand name text.
-
thedixitjain Skill Ppopp Review ProcessUse when reasoning about how a PPoPP submission is evaluated, covering double-blind review, the Program Committee plus External/Extended Review Committee model, TPMS reviewer matching, the author-response rebuttal, the accept/reject decision with automatic poster consideration, and how PPoPP's process differs from PLDI's and CGO's.
2 -
thedixitjain Skill Cvpr Camera ReadyUse when preparing the final version of an accepted CVPR paper, covering de-anonymization, the dataset-release-by-camera-ready obligation, CVF open access versus the IEEE Xplore version of record, oral/highlight/poster preparation at conference scale, and arXiv/preprint synchronization after acceptance.
2 -
asgeirtj Bundle Data Visualization> Produce a chart, graph, dashboard, or any data visualization that reads as one system — elegant, accessible, and consistent in light and dark — BRAND-NEUTRAL, shipping a placeholder palette to swap for your own. Read this BEFORE generating ANY chart (bar, line, area, heatmap, scatter, sparkline, donut), choosing chart colors, building a stat tile / meter / KPI row, or laying out a dashboard. Teaches a design-system-AGNOSTIC method: a form heuristic, a color formula with a runnable validator, mark specs, and interaction rules. The method is invariant; a design system plugs in its own ramps and surfaces. A validated default palette is documented in `references/palette.md` — swap that file's values for your brand's. Triggers on: "chart", "graph", "plot", "data viz", "dashboard", "analytics", "visualize data", "categorical colors", "sequential / diverging palette", "stat tile",...
-
thedixitjain Skill Anima Upgrade Migration'Upgrade @animaapp/anima-sdk versions and handle API changes. Use when upgrading SDK versions, migrating from the Figma plugin workflow to SDK-based automation, or adapting to new Anima API features. Trigger: "anima upgrade", "anima migration", "anima SDK update". '
2 -
jeremylongshore Bundle Figma Upgrade Migration'Handle Figma REST API scope changes, deprecations, and migration tasks. Use when migrating from deprecated scopes, updating webhook versions, or adapting to Figma API changelog changes. Trigger with phrases like "upgrade figma", "figma deprecation", "figma scope migration", "figma API changes", "figma v2 webhooks". '
-
thedixitjain Skill Anima Local Dev Loop'Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger: "anima local dev", "anima dev loop", "anima preview", "anima iteration". '
2 -
thedixitjain Skill Brutalist TypographyWeb and App implementation guide for Brutalist Typography. Trigger when user wants huge fonts, raw presentation, and aggressive layout decisions.
2 -
jeremylongshore Bundle Figma CI Integration'Automate Figma design token sync and asset export in CI/CD pipelines. Use when setting up GitHub Actions for Figma, automating icon exports, or validating design token changes in pull requests. Trigger with phrases like "figma CI", "figma GitHub Actions", "automate figma export", "figma CI pipeline". '
-
jeremylongshore Bundle Figma Known Pitfalls'Avoid the most common Figma API integration mistakes and anti-patterns. Use when reviewing Figma code, onboarding new developers, or auditing an existing Figma integration. Trigger with phrases like "figma mistakes", "figma anti-patterns", "figma pitfalls", "figma code review", "figma what not to do". '
-
jeremylongshore Bundle Figma Local Dev Loop'Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API with hot reload. Trigger with phrases like "figma dev setup", "figma plugin development", "figma local development", "develop figma plugin". '
-
jeremylongshore Bundle Figma Prod Checklist'Production readiness checklist for Figma REST API integrations. Use when deploying Figma integrations to production, preparing for launch, or auditing an existing integration for production fitness. Trigger with phrases like "figma production", "deploy figma", "figma go-live", "figma launch checklist". '
-
davepoon Bundle Inspiration AnalyzerAnalyze websites for design inspiration, extracting colors, typography, layouts, and patterns. Use when you have specific URLs to analyze for a design project.
-
hashgraph-online Bundle Octopus UI UX DesignDesign UI/UX systems with style guides, palettes, typography, and component specs for new interfaces
-
data-goblin Bundle Modifying Theme JSONDesign, enforce, audit, and validate Power BI report themes through the pbir CLI. Invoke when a report uses a default or minimal theme, visuals have inconsistent formatting or many local overrides, or the user asks to create, copy, apply, standardize, rebrand, audit, or validate a theme; change theme colors or typography; promote visual formatting into the theme; clear overrides; or improve theme compliance.
-
thedixitjain Skill Uai Review ProcessUse when reasoning about UAI peer review on OpenReview, including bidding, double-blind evaluation against the correctness, novelty, backing, and clarity criteria, the author-response window, the reviewer-and-area-chair discussion that follows it, decision timing, spotlight versus poster outcomes, and PMLR publication of accepted papers.
2 -
jeremylongshore Bundle Figma Performance Tuning'Optimize Figma REST API performance with caching, partial fetches, and connection reuse. Use when experiencing slow API responses, reducing bandwidth for large files, or optimizing request throughput for Figma integrations. Trigger with phrases like "figma performance", "figma slow", "figma caching", "figma optimize", "figma large file". '
-
thedixitjain Skill Anima Core Workflow A'Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator from Figma components. Trigger: "anima design pipeline", "figma to react pipeline", "automated design handoff", "anima component generator". '
2 -
thedixitjain Skill Anima Webhooks Events'Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma files change, or integrating design updates into CI. Trigger: "anima webhook", "figma webhook", "anima auto-generate on change". '
2 -
jeremylongshore Bundle Figma Core Workflow A'Extract design tokens, colors, typography, and spacing from Figma files via REST API. Use when building a design-to-code pipeline, syncing design tokens, or extracting styles from a Figma design system file. Trigger with phrases like "figma design tokens", "extract figma styles", "figma to CSS", "sync figma colors", "figma typography". '
-
jeremylongshore Bundle Figma Core Workflow B'Export images, icons, and assets from Figma files via the REST API. Use when building an asset pipeline, exporting icons as SVG/PNG, or rendering frames to images for documentation or previews. Trigger with phrases like "figma export", "figma images", "export figma icons", "figma assets", "figma render". '
-
thedixitjain Bundle Figma Create New FileCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)
2 -
jeremylongshore Bundle Figma Enterprise Rbac'Configure Figma Enterprise features: OAuth 2.0, team management, and access control. Use when implementing OAuth flows, managing team/project access via API, or building Enterprise-level Figma integrations. Trigger with phrases like "figma enterprise", "figma OAuth", "figma team management", "figma access control", "figma SCIM". '
-
thedixitjain Bundle Figma Generate DesignUse this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.
2 -
jeremylongshore Bundle Figma Multi Env Setup'Configure Figma API access across dev, staging, and production environments. Use when setting up per-environment tokens, managing multiple Figma files, or isolating development from production Figma resources. Trigger with phrases like "figma environments", "figma staging", "figma dev prod", "figma environment config". '
-
jeremylongshore Bundle Figma Webhooks Events'Implement Figma Webhooks V2 for real-time file, comment, and library events. Use when setting up webhook endpoints, handling FILE_UPDATE events, or building event-driven Figma automation. Trigger with phrases like "figma webhook", "figma events", "figma FILE_UPDATE", "figma notifications", "figma real-time". '
-
hashgraph-online Bundle Hierarchy TypographicUse this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system''s typographic tokens, fixing a "no clear focal point in the headline area" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspect of the broader `hierarchy` principle; read that first if you haven''t already.
-
hashgraph-online Bundle Proximity Form FieldsUse this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system. Forms are where proximity failures are most visible: ambiguous label-input pairing, sections that bleed into each other, help text that orphans from its field. Trigger when designing sign-up, sign-in, settings, profile, billing, checkout, multi-step, or any structured-input surface. Sub-aspect of `proximity`; read that first if you haven''t already.
Frequently asked questions
What are Design & Media agent skills?
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
Which Design & Media skills are most installed?
Popular Design & Media skills on SkillMD right now include figma-ci-integration, figma-known-pitfalls, figma-prod-checklist. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Design & Media skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.