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.
-
hubeiqiao Skill Nextjs Font CSS Variable CollisionFix CSS custom property name collision between next/font and design system variables in globals.css. Use when: (1) fonts look wrong despite correct next/font configuration — falling back to Georgia, system-ui, or other fallback fonts, (2) DevTools shows --font-display or --font-body resolving to literal font names like 'Instrument Serif' instead of hashed names like '__Instrument_Serif_315a98', (3) fonts break after adding/removing next/font imports (bundle reordering), (4) @font-face uses hashed names but CSS variables hold unhashed literal names. Covers next/font variable naming, CSS cascade specificity with :root, and webpack CSS chunk ordering.
-
gopherguides Bundle Gemini ImageGenerate images via the Google Gemini API. Supports GA model selection, aspect ratios, resolutions (512/1K/2K/4K), batch generation, image editing. Trigger when user wants AI-generated visual output: image, picture, photo, graphic, illustration, banner, logo, icon, thumbnail, header, hero image. SKIP screenshot inspection or image analysis with no generation/edit request.
-
ibrahim-3d Skill Eval UI UXSpecialized UI/UX evaluator for the Evaluate-Loop. Use this for evaluating UI shell tracks, design system tracks, screen implementation tracks, or any track where the primary deliverable is visual/interactive UI. Checks design system adherence, visual consistency, layout structure, responsive behavior, component states, animations, accessibility baseline, and usability check (copy quality). Dispatched by loop-execution-evaluator when track type is 'ui', 'design-system', or 'screens'. Triggered by: 'evaluate UI', 'UI review', 'design review', 'visual audit'.
-
cosmicstack-labs Skill Responsive DesignResponsive web design patterns, mobile-first CSS, container queries, fluid typography, and accessibility-first layouts
Audited -
cosmicstack-labs Skill Presentation DesignPresentation Design & Storyboarding: Slide design principles, visual hierarchy, layout, typography, and storyboarding for compelling presentations
-
jartan-llc Skill Frontend PatternsCSS design system principles -- token usage, semantic layering, mobile-first, component isolation.
-
hoangvantuan Bundle AI ArtistTạo ảnh AI từ bộ 129 prompt chuyên nghiệp có sẵn (avatar, banner, poster, infographic, product shot) với 3 chế độ search, creative, wild.
-
hoangvantuan Bundle PPTX CreatorTạo file PowerPoint (.pptx) đẹp, chuyên nghiệp bằng PptxGenJS với hỗ trợ font tiếng Việt và design system.
-
shaishavmaisuria Bundle Make PosterCreates and checks conference research posters and short poster-session pitches. Use when the user asks to make a poster, prepare a research poster, adapt a paper into a poster, fit a poster to A0/A1/36x48in, check a beamerposter or tikzposter file, reuse paper figures, or write a 2-minute or 5-minute poster pitch. Bundled scripts resolve poster dimensions, inventory reusable figures, lint print-day problems, and time spoken pitches.
-
shaishavmaisuria Bundle Rehearse QASimulated-audience Q&A rehearsal for conference talks, thesis defenses, job talks, and poster sessions. Use when a researcher says "rehearse Q&A", "practice questions", "mock Q&A", "grill me on my paper", "what will the audience ask", "hostile questions", "defense practice", "viva prep", "anticipate questions for my talk", or "questions I hope nobody asks". Sizes a drill to the real Q&A slot, fires hostile and curious questions one at a time in audience personas (hostile skeptic, methods stickler, statistician, adjacent-field expert, big-picture senior, confused newcomer, industry practitioner, self-promoter, rambler) calibrated to the venue family, mines the paper for dreaded weak-point questions, coaches concise answer-first responses, and grades transcripts deterministically for timing, hedging, filler, and buried answers. Coaches honest answers only — never spin — and never invents prior-work citations in drill questions.
-
melumuccu Skill Kf G CSS Tak TypographyUse this skill when designing, reviewing, or generating CSS for typography in Japanese or multilingual interfaces. Apply it for font family, text wrapping, kerning, line height, fluid type, truncation, manual line breaks, and related text layout decisions.
-
melumuccu Skill Kf G CSS Tak Font Size Text ZoomUse this skill when deciding whether font-size should use rem or px, reviewing Chrome text zoom support, or choosing whether text-dependent spacing and sizing should scale with typography. Apply it when CSS uses blanket rem conversion, root font-size hacks, or relative units such as em and ch without a clear semantic basis.
-
melumuccu Skill Kf G CSS Tak Design System TerminologyUse this skill when defining, reviewing, or correcting design system terminology for CSS, layout, components, and UI concepts. Apply it when names may conflict with Web standards, HTML semantics, or responsibility boundaries.
-
lidessen Bundle Visual DesignDesign, redesign, refine, or review real interfaces, documents, illustrations, and visual systems from their content, audience, intended action, and project direction. Use when creating UI, improving visual hierarchy or coherence, reviewing a rendered artifact, establishing a continuing project's direction from references, translating an ambiguous style cue into provisional guidance, or applying an accepted direction to code without reopening taste. Triggers include "design/redesign/review the UI", "the page works but feels generic/inconsistent", "the direction is right but components feel generic", "polish/refine interface details", "align logo or illustration with product", "apply the selected style", "art direction", and "审美/视觉设计/组件细节/插画或品牌视觉统一/确立风格/按现有风格落实". Do not use for purely functional fixes, naming, or automatic aesthetic acceptance. Never impose a portable fixed style.
-
agentsorg Bundle ImageryUse when handling photos and illustration: aspect ratios, cropping, placeholders and blur-up, avatars, device frames, and dark-mode treatment.
-
agentsorg Bundle TypographyUse when setting type: scale, weight, line-height, measure, tracking, numerals, font loading, and hierarchy carried by weight and grey instead of size.
-
kiku-jw Bundle Illustration PromptTurn a vague image request into a generator-ready illustration prompt for Midjourney, DALL-E, Flux, Stable Diffusion, or similar tools. Use when the user needs visual direction, prompt structure, or reference-aware image prompting rather than image generation code.
-
murphytrueman Skill TriageRecommend which design system skills to run first based on a quick assessment of the system's state. Trigger when someone says: where should I start, what should I run first, triage my design system, which audit first, help me prioritise, I'm new to this system, first time using this plugin, or anything about deciding which skills or commands to use.
-
murphytrueman Skill Theme AuditAudit theme coverage and consistency across a design system's semantic and component token tiers. Triggers: audit my themes, check theme coverage, are all tokens defined across themes, dark mode audit, brand variant check, do themes have parity, theme consistency check, light/dark token coverage, or anything about whether themes are complete and internally consistent. Use this when launching a new theme, after a rebrand, adopting dark mode, or when token-audit reveals tier leakage that defeats theming.
-
murphytrueman Skill Token AuditAudit a design system's token definitions for naming violations, missing semantic tiers, and structural debt. This audits how tokens are defined and organised, NOT how they are consumed in code. Trigger when someone says: audit my tokens, token naming review, are my tokens consistent, token health check, review my token architecture, or anything involving token quality or structure. Do NOT trigger for checking whether code uses tokens correctly — use token-compliance for that.
-
murphytrueman Skill Naming AuditAudit a design system's naming conventions across components, tokens, and patterns. Trigger when someone says: naming conventions, audit component names, are my names consistent, naming problems, naming review, inconsistent names, fix our naming, review naming, or anything about the quality or consistency of names in a design system.
-
murphytrueman Skill System PitchWrite a design system investment pitch with a business case and ROI framing. Trigger when someone says: pitch the design system, make the case for the system, sell this to leadership, justify the investment, business case for design systems, why should we invest in a design system, or anything about building an argument for design system investment or continuation.
-
murphytrueman Skill Docs CoverageAudit whether a design system's documentation surface keeps pace with its component library — coverage gaps (components with no docs), staleness (docs that predate the component's last code change), and orphaned docs. Works with zero integration from the codebase and a Storybook build; Zeroheight, Supernova, and custom docs sites are optional layers. Trigger when someone says: docs coverage, documentation audit, are our docs up to date, which components are undocumented, is our documentation keeping pace, stale docs check, documentation health, Storybook coverage, or anything about whether the documentation surface matches the components. Do NOT trigger for WRITING documentation — use usage-guidelines, pattern-documentation, token-documentation, or ai-component-description for that. Do NOT trigger for general system health (use system-health) or for documentation usage/analytics (use adoption-report).
-
murphytrueman Skill System HealthRun an overall health assessment across a design system, producing a findings-based summary across seven dimensions. This produces a holistic, cross-cutting health assessment, NOT a deep dive into a single dimension like components or tokens. Trigger when someone says: how healthy is my design system, overall system assessment, system health check, rate my system, design system audit, give me the big picture on my system, or anything asking for a holistic view of system quality rather than a focused audit of one area. Do NOT trigger for a deep component library audit — use component-audit for that.
-
murphytrueman Skill Codebase IndexGenerate a pre-computed component index from a design system codebase — YAML infrastructure files containing a component inventory, relationship graph, and summary statistics that AI agents and MCP servers consume. This produces machine-readable index files in .ai/index/, NOT a health report or quality assessment. Trigger when someone says: index my codebase, build a relationship graph, create a component map, codebase index, what depends on what, dependency graph, map component relationships, or anything about producing queryable infrastructure files for AI agents or developer tooling. Do NOT trigger for component health assessments, quality scores, or audit reports — use component-audit for those.
-
murphytrueman Skill Session MemoryPersist and recall findings across skill runs within and between sessions, building a cumulative knowledge base of what has been discovered about a design system. This is the cross-skill memory layer — it saves what was found, when, and by which skill, so future runs can compare, correlate, and avoid repeating work. Trigger when someone says: save these findings, remember this for later, compare with last run, what did we find before, load previous findings, recall the last audit, session history, show me what changed, cross-reference with previous runs, or anything about persisting, recalling, or comparing findings over time. Do NOT trigger for generating a single standalone report — use the specific skill for that. Do NOT trigger for running a full diagnostic — use full-system-diagnostic for that.
-
murphytrueman Skill Adoption ReportProduce a design system adoption report separating coverage from actual adoption, with trend direction and risk flags. Trigger when someone says: adoption report, how much is the system being used, usage metrics, adoption status, coverage report, which teams are using the system, who's not using the system, or anything about measuring or reporting on how widely the design system is being used. Here 'coverage' means adoption coverage (how much of the system teams actually use). Do NOT trigger for documentation coverage or doc staleness — use docs-coverage for whether the documentation surface keeps pace with the components.
-
murphytrueman Skill Component AuditAudit a design system's component library for health, producing a findings-based assessment of usage, complexity, duplication, and coverage gaps with actionable recommendations. This produces a deep, single-dimension audit of the component library, NOT a cross-cutting system health assessment. Trigger when someone says: audit my components, component health, what components do I have, unused components, component coverage, component review, assess my library, or anything about evaluating the quality and health of a component library. Do NOT trigger for building machine-readable index files or dependency graphs for AI agents — use codebase-index for those. Do NOT trigger for a holistic health summary — use system-health for that.
-
murphytrueman Skill Decision RecordCreate a structured narrative record documenting why a design system decision was made — the context, options considered, trade-offs, and rationale. This produces a human-readable decision document, NOT machine-executable rules or constraint files. Trigger when someone says: document this decision, record why we chose, ADR, architecture decision record, capture this decision, why did we pick, what was the reasoning, or anything about preserving the narrative behind a specific design system choice. Do NOT trigger for encoding governance policies as machine-checkable rules — use governance-encoder for that.
-
murphytrueman Skill Drift DetectionIdentify where a design system has diverged from its original intent across the whole system — components implemented differently to spec, tokens overridden locally, patterns forked across teams. This is a system-wide sweep for divergence patterns, NOT a single-component spec comparison. Trigger when someone says: find drift, where has the system diverged, design code inconsistency, what's out of sync, where are teams going off-system, component drift, or anything about identifying gaps between design system intent and actual implementation. Do NOT trigger for checking one specific component against its design spec — use design-to-code-check for that.
-
murphytrueman Skill Cicd IntegrationGenerate CI/CD pipeline configurations that automate design system quality checks — token validation, component linting, visual regression, accessibility scanning, and release gating. Produces ready-to-use pipeline files for GitHub Actions, GitLab CI, CircleCI, or Bitbucket Pipelines, configured to enforce the standards that audit skills check manually. Trigger when someone says: set up CI for the design system, automate these checks, add pipeline for tokens, create GitHub Action for design system, CI/CD for components, automate the release process, continuous integration for design system, how do I automate what the audit found, quality gates in CI, or anything about automating design system quality checks in a pipeline. Do NOT trigger for running a manual audit — use the specific audit skill for that. Do NOT trigger for generating a release checklist — use change-communication for that.
-
murphytrueman Skill System BenchmarkBenchmark a design system against industry standards and comparable public systems, producing a qualitative comparison across dimensions with specific, named reference points. Goes beyond an internal health assessment to answer 'how does our system compare to what good looks like out there?' Trigger when someone says: benchmark our system, how do we compare, industry comparison, rate our system against others, where do we stand, compare us to Material Design, how mature is our system, are we behind or ahead, competitive assessment of our design system, or anything about comparing a design system's maturity or quality against external benchmarks. Do NOT trigger for an internal health check without external comparison — use system-health for that. Do NOT trigger for auditing a specific dimension — use the specific audit skill for that.
-
murphytrueman Skill Codemod GeneratorGenerate codemods (automated code transformation scripts) for design system migrations — token renames, component API changes, prop deprecations, and import path updates. Produces ready-to-run jscodeshift or custom AST transform scripts that safely apply changes across consuming codebases. Trigger when someone says: generate a codemod, automate this migration, write a transform script, bulk rename tokens, auto-migrate components, jscodeshift for this change, create a migration script, update all imports, rename this prop everywhere, or anything about automating code changes across consumers of a design system. Do NOT trigger for planning the deprecation process — use deprecation-process for that. Do NOT trigger for writing release notes about a change — use change-communication for that.
-
murphytrueman Skill Deprecation ProcessPlan and execute the full deprecation lifecycle for a design system component, token, or pattern — including timeline, migration paths, communication plan, and multi-phase removal. Trigger when someone says: deprecate a component, remove a component, sunset this pattern, phase out these tokens, retire this variant, replace this with, or anything involving removing or replacing something from the design system. Do NOT trigger for communicating non-deprecation changes like new releases or feature updates — use change-communication for those.
-
murphytrueman Skill Designer OnboardingCreate an onboarding guide for a designer joining a team that uses a design system. Trigger when someone says: onboard new designer, getting started guide, new team member guide, onboarding documentation, first day with the system, new designer guide, or anything about helping a designer new to the team or the design system get up to speed.
-
murphytrueman Skill Change CommunicationProduce a communication package for a design system change — release notes, migration guide, and team announcement. This produces communication artefacts for changes that have already been decided, NOT the deprecation lifecycle itself. Trigger when someone says: communicate this change, breaking change announcement, how do I tell teams about this, release notes, change log, write the announcement, or anything about communicating an update, release, or breaking change to consuming teams. Do NOT trigger for planning or executing a deprecation — use deprecation-process for that, which includes its own communication plan as part of the full lifecycle.
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 nextjs-font-css-variable-collision, gemini-image, eval-ui-ux. 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.