Best agent skills for designers, page 22

Where CSS should live. An agent skill from TheDecipherist/claude-code-mastery-project-starter-kit.

TheDecipherist/claude-code-mastery-project-starter-kit

Make or edit audio and video with Glif, from a text brief or from a reference image, video or audio file.

glifxyz/glif-mcp-server

Theme and style Ignite UI Web Components (and igniteui-react) apps using CSS custom properties, optional Sass, and the igniteui-theming MCP server.

IgniteUI/igniteui-webcomponents

Create AI image-generation prompts and image-generation workflows for torn-paper editorial collage style posters with layered ripped paper, rough typography, stamps, tape, stickers, cutout subjects…

agentara/skills

Generate professional presentation slides and high-quality illustrations using Gemini image generation API (Nano Banana 2), with interactive browser-based review and iterative editing.

EvoScientist/EvoSkills

Assist writers with story planning, character development, plot structuring, chapter writing, timeline tracking, and consistency checking.

ailabs-393/ai-labs-claude-skills

Creates or revises Figma designs from a written description using the Figma MCP authoring tools, in a new blank file or an existing one.

warpdotdev/warp

Run a multi-agent design review on a UI surface — capture reproducible baseline screenshots, then rate them with a panel of design experts (one agent per craft dimension) and, optionally, a panel of…

matthiasn/lotti

Applies GitArena's official design system, colors, and typography to frontend components and pages.

mellowagain/gitarena

Guides designing and building Svelte 5 UI components in the bootc extension.

podman-desktop/extension-bootc

UI/UX design intelligence with searchable style, palette, typography, and chart databases.

c0x12c/ai-toolkit

Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity…

nexu-io/open-design

This skill enables image generation and editing using Google's Gemini Nano Banana models.

mikeOnBreeze/cc-crossbeam

Create distinctive, production-grade frontend interfaces with high design quality.

jwynia/agent-skills

Hero-section pipeline for building Awwwards/FWA-tier hero sections.

Yu-369/VibeCurb

Step 1 of the AI Video Editor pipeline — turn raw talking-head footage into a clean master cut.

hassancs91/claude-youtube-editor

Sets up a virtual try-on agent on Google Cloud that generates image and catwalk-video try-ons with Gemini, from first setup through local testing.

google/adk-recipes

Find, install, and configure OpenCode plugins from the catalog or community.

IgorWarzocha/Opencode-Workflows

Guide for developing the MonsterMQ web dashboard. An agent skill from vogler75/monster-mq.

vogler75/monster-mq

Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

syhily/kobato

Fix accessibility issues documented in a component's A11y.mdx audit file by editing the component source, then refresh the audit artifacts.

scaleway/ultraviolet

React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage.

redis/RedisInsight

Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors

gnurio/refactoring-ui-plugin

Create distinctive, production-grade frontend interfaces with high design quality and accessible markup.

spinspire/pocketbase-sveltekit-starter

将 Markdown 长文重写、分页并排版成 1080×1440 社媒图卡，可批量导出 PNG，适用于小红书和抖音图文。用户要求“长文转图片”“文章转图卡”“生成小红书图文”“做小红书长图”“抖音图文”“做图文”“发小红书”“发抖音”或“图集”时使用。

JayceHuang/xiaomu_x_creator

Draws cozy animal scenes as hand-authored 480x360 SVG cards in a grainy, risograph-like gouache style on hot pink, for empty states, headers and marketing cards.

MengTo/Skills

Build production-grade components for React, Vue 3, and Svelte 5 with all states (loading, empty, error, success, idle), TypeScript strict, WCAG 2.2 accessibility, server components (RSC), and…

EliasOulkadi/shokunin

Generates infographics from your content by pairing one of 21 layout types with one of 22 visual styles, after analyzing the material and recommending combinations.

JimLiu/baoyu-skills

Creates a new design-product project from the kit's product-design template, then installs the engine folders and the Playwright dependency that the quality gates need.

plugin87/ux-ui-agent-skills

Generate and edit images using the Gemini API (Nano Banana).

kylesnowschwartz/SimpleClaude

Generate/edit images with Nano Banana Pro (Gemini 3 Pro Image).

CraftOS-dev/CraftBot

Write the AGENTS.md that tells coding agents how to use this design system: where things live, sourced rules, how to check work, what not to do; Claude, Cursor or Copilot pointers on request.

murphytrueman/design-system-ops

Generate Shopify Liquid theme code (sections, blocks, snippets) with correct schema JSON, LiquidDoc headers, translation keys, and CSS/JS patterns.

benjaminsehl/liquid-skills

Generate brand storytelling and narrative video prompts for Seedance 2.0 on Higgsfield.

beshuaxian/higgsfield-seedance2-jineng

Work with shadcn/ui in Ordinus. An agent skill from muratgur/ordinus.

muratgur/ordinus

Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards.

zebbern/claude-code-guide

How Limoni exposes applications to AI agents and tests — the semantic tree, the automation socket, cmd/limoni-mcp, and the uitest package.

thebanri/limoni

Styles applications using Tailwind CSS v3 utilities. An agent skill from OpenLitterMap/openlittermap-web.

OpenLitterMap/openlittermap-web

Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…

sdr-enthusiasts/docker-acarshub

Tạo video ngắn 50-60s dạng video dọc (9:16, 1080x1920 @ 30fps) giải thích bất kỳ chủ đề lập trình/công nghệ nào bằng Remotion.

Cuongyd196/remotion-cuongit-template

Generates a 13-slide LinkedIn carousel (a "document post" — PPTX/PDF) that showcases an intelligent textbook's key features, with real screenshots, mascot art, and metrics pulled from the project.

dmccreary/ibook-skills

Removes an image background and exports a transparent PNG by driving the real Adobe Photoshop app on a macOS host, after asking your permission to take over the screen.

THU-SAGE/syll

Generates and edits images with Google's Nano Banana 2 (Gemini 3.1 Flash Image) through a uv script, with a draft-then-final workflow and sizes from 512 to 4K.

steipete/agent-scripts

Extract a design system from a screenshot (PNG/JPG/WEBP) or a live URL and produce a schema-compliant design.v1.json file plus a ready-to-use agent prompt for applying the design to any website/app.

luongnv89/sleek-ui

Styling and structure conventions for stream-chat-react. An agent skill from GetStream/stream-chat-react.

GetStream/stream-chat-react

Design Flutter UI screens and widgets for The Holy Qur'an app.

mhmzdev/the-holy-quran-app

One page, automated tier — run the web accessibility (a11y) rule engine against a live page and locate every violation it can detect mechanically.

AccessLint/skills

Build NEW pages, features, or standalone project UIs (翻译项目/企业项目/新页面/新项目 UI, translation tools, enterprise apps, dashboards) on the Tofu design system — every control from frontend/src/ui factories…

NiuTrans/ToFu