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 Migration Deep Dive'Migrate design systems between Figma files, or from other tools to Figma via API. Use when migrating design tokens between files, syncing variables across libraries, or building automated migration pipelines for Figma. Trigger with phrases like "migrate figma", "figma migration", "move figma library", "figma file migration", "sync figma files". '
-
wshobson Bundle Design System PatternsBuild scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
-
thedixitjain Bundle Figma Generate LibraryBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
2 -
thedixitjain Bundle Figma Implement DesignTranslates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
2 -
jeremylongshore Bundle Figma Incident Runbook'Respond to Figma API outages, auth failures, and rate limit incidents. Use when Figma integration is down, experiencing errors, or running post-incident reviews for Figma-related failures. Trigger with phrases like "figma incident", "figma outage", "figma down", "figma broken", "figma emergency". '
-
thedixitjain Bundle Frontend Design Review> Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.
2 -
hashgraph-online Skill Memoire Design ToolingUse when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.
-
hashgraph-online Skill Muapi 3d Logo AnimationTransform a 2D logo into a premium 3D version and animate it with professional cinematic effects.
-
thedixitjain Skill Colt ReproducibilityUse when strengthening the reproducibility of a COLT (Conference on Learning Theory) paper, where reproducing means re-deriving — complete proofs, explicit assumptions, tracked constants, correctly invoked external results, self-contained notation — plus seeds and scripts for any numerical illustration the paper carries.
2 -
thedixitjain Skill Mgsci Tables FiguresUse when building exhibits for a Management Science (INFORMS) manuscript — propositions and numerical-illustration figures for analytical papers, or result/identification tables and effect plots for empirical papers — keeping notation clean, exhibits self-contained, and the page budget tight for the invited-revision limit. It builds exhibits; it does not run the analysis (mgsci-data-analysis).
2 -
thedixitjain Skill Anima Install Auth'Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the @animaapp/anima-sdk for server-side code generation. Trigger: "install anima", "setup anima", "anima auth", "anima figma token". '
2 -
jeremylongshore Bundle Figma Policy Guardrails'Enforce security policies and coding standards for Figma API integrations. Use when setting up linting rules for Figma tokens, preventing accidental credential leaks, or enforcing API usage best practices. Trigger with phrases like "figma policy", "figma lint", "figma guardrails", "figma security rules", "figma best practices check". '
-
thedixitjain Skill Industrial Brutalist UIRaw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
2 -
thedixitjain Skill Interspeech Camera ReadyUse when an INTERSPEECH paper is accepted and the camera-ready, registration, and presentation chain begins — de-anonymizing for the ISCA Archive, restoring acknowledgments on the references page, meeting the author-registration requirement for proceedings inclusion, DOI metadata, and oral/poster preparation for the conference week.
2 -
thedixitjain Skill Icassp Review ProcessUse when reasoning about ICASSP peer review — the IEEE Signal Processing Society technical-committee pipeline, EDICS-based assignment, single-blind reviewing, the recently added short rebuttal, oral-versus-poster allocation, the roughly-even acceptance rate, and how a signal-processing decision is actually made and should be decoded.
2 -
jeremylongshore Bundle Figma Architecture Variants'Choose between Figma integration architectures: CLI script, webhook service, or plugin. Use when deciding how to integrate with Figma, comparing REST API vs Plugin API, or planning a Figma-connected application. Trigger with phrases like "figma architecture", "figma blueprint", "how to integrate figma", "figma plugin vs api", "figma project type". '
-
jeremylongshore Bundle Figma Deploy Integration'Deploy Figma-powered applications to Vercel, Cloud Run, and Fly.io. Use when deploying webhook receivers, design token APIs, or Figma-connected web apps to production platforms. Trigger with phrases like "deploy figma", "figma Vercel", "figma production deploy", "figma Cloud Run". '
-
thedixitjain Bundle Threejs Game UI DesignerDesign premium Three.js game UI. Use for HUDs, menus, overlays, pause/win/lose screens, settings, icon controls, touch UI, typography, responsive layout, safe areas, text fit, and UI/world cohesion.
2 -
thedixitjain Skill Smr Simulation StudiesUse when designing the Monte Carlo simulation study for a Sociological Methods & Research (SMR) paper — data-generating processes, competing methods, performance metrics, and the regimes where the method wins or breaks. Designs the simulation; does not derive properties or run the real-data illustration.
2 -
thedixitjain Skill Anima Reference Architecture'Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture". '
2 -
wshobson Bundle Visual Design FoundationsApply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
-
thedixitjain Skill Anima Security Basics'Secure Anima and Figma tokens for design-to-code pipelines. Use when protecting API credentials, restricting Figma access scope, or hardening CI/CD design automation pipelines. Trigger: "anima security", "anima token safety", "figma token security". '
2 -
jeremylongshore Bundle Figma Security Basics'Secure Figma API tokens, configure scopes, and validate webhook signatures. Use when securing API keys, implementing least-privilege scopes, or auditing Figma security configuration. Trigger with phrases like "figma security", "figma secrets", "secure figma token", "figma scopes", "figma webhook verify". '
-
jeremylongshore Bundle Figma Reliability Patterns'Build resilient Figma integrations with circuit breakers, fallbacks, and graceful degradation. Use when implementing fault tolerance, handling Figma outages gracefully, or building production-grade reliability into Figma API consumers. Trigger with phrases like "figma reliability", "figma circuit breaker", "figma fallback", "figma resilience", "figma graceful degradation". '
-
thedixitjain Skill Anima Prod Checklist'Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating output quality before production. Trigger: "anima production", "anima go-live", "anima prod checklist". '
2 -
affaan-m Skill Make Interfaces Feel BetterApply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.
226k -
wshobson Bundle PPTX Reference Deck AnalysisUse when analyzing a reference PPTX for read-only structure, theme, typography, layout rhythm, diagnostics, derived template catalogs, or safe OOXML package inspection.
-
jeremylongshore Bundle Figma Reference Architecture'Reference architecture for production Figma API integrations. Use when designing a new Figma integration, planning project structure, or establishing patterns for design-to-code pipelines. Trigger with phrases like "figma architecture", "figma project structure", "figma integration design", "figma best practices layout". '
-
hashgraph-online Bundle Iteration Prototype FidelityUse this skill when picking the appropriate prototype fidelity for an iteration cycle — sketches vs. wireframes vs. clickable Figma vs. code prototypes vs. production beta. Trigger when planning a research session, when a project is over- or under-investing in prototypes, or when the prototype fidelity is mismatched to the question being asked. Sub-aspect of `iteration`; read that first.
-
thedixitjain Skill Interspeech Review ProcessUse when reasoning about how INTERSPEECH review actually works — area-based assignment inside ISCA's scientific program, multi-reviewer scoring and meta-review on CMT, what the rebuttal can and cannot move, oral/poster allocation, ISCA best student paper selection, and reading a decision letter for next-cycle strategy.
2 -
thedixitjain Skill Smr Empirical IllustrationUse when building the real-data empirical illustration for a Sociological Methods & Research (SMR) paper — a demonstration that the method changes a substantive conclusion, not a decorative example. Designs the illustration; does not derive properties or design the Monte Carlo.
2 -
om-scogo Bundle UI Design SystemReact UI component systems with TailwindCSS + Radix + shadcn/ui. Stack: TailwindCSS (styling), Radix UI (primitives), shadcn/ui (components), React/Next.js. Capabilities: design system architecture, accessible components, responsive layouts, theming, dark mode, component composition. Actions: review, design, build, improve, refactor UI components. Keywords: TailwindCSS, Radix UI, shadcn/ui, design system, component library, accessibility, ARIA, responsive, dark mode, theming, CSS variables, component architecture, atomic design, design tokens, variant, slot, composition. Use when: building component libraries, implementing shadcn/ui, creating accessible UIs, setting up design systems, adding dark mode/theming, reviewing UI component architecture.
0 -
om-scogo Bundle Frontend DesignStrict frontend design guardrails for building modern, minimal-visual-noise, airy, non-generic app UIs. Use whenever creating or changing frontend UI, React components, shadcn/ui themes, Tailwind styles, app layouts, or first-version product screens. This skill complements vertical/domain skills like CPQ, CRM, and similar app builders: follow the selected domain skill's workflow and layout requirements, then enforce this skill's shared visual rules for brand-aware theming, generous spacing, typography, contrast, roundedness, shadows, surface hierarchy, cardless defaults, no-sidebar defaults, and anti-pattern avoidance.
0 -
om-scogo Bundle App Preview VideoWhen the user wants to plan, script, produce, or optimize App Store Preview videos or Google Play promo videos — the autoplay videos that show in App Store/Play Store search and product pages. Use when the user mentions "App Preview", "preview video", "app store video", "promo video", "Play Store video", "video poster frame", "YouTube promo for Play Store", "30 second app video", "video script", "video specs", or "should I add a preview video". For static screenshots, see screenshot-optimization. For A/B testing the video, see ab-test-store-listing. For broader creative briefs, see screenshot-optimization (covers stills).
0 -
om-scogo Bundle Better TypographyWeb typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, checking heading hierarchy, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, heading hierarchy, heading levels, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
0 -
om-scogo Bundle Logo CreatorCreate logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.
0
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 smr-simulation-studies, make-interfaces-feel-better, figma-migration-deep-dive. 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.