Best agent skills for designers, page 7

A skill your agent uses whenever creating or editing UI in this repo — React components, modals, dialogs, forms, buttons, inputs, typography, styling, icons, or any .tsx/.jsx work.

tetherto/pearpass-app-desktop

Guide to Sonner, the React toast library — install and wire up the Toaster, pick the right toast() call, promise and loading toasts, updating, dismissing and persisting toasts, styling, theming and…

leepokai/Codync

Generate character art and image variations using AI image generation (Google Gemini) with reference images for style and character consistency.

peterkrueck/Claude-Code-Development-Kit

Convert visible UI references such as screenshots, exported mockups, Figma frame images, SaaS empty states, dashboards, and landing page screenshots into high-quality HTML/CSS by decomposing layout…

KyrieCheungYep/ky-design-to-html-skill

A skill your agent uses when turning any content into clear, professional visualizations - board slides, reports, proposals, research summaries, training materials, technical diagrams, infographics…

kgraph57/mckinsey-style-visualization-skill

Creates and edits Xiaohongshu (RedNote) cover images from a portrait photo and text, using GPT Image 2 first and a Gemini CLI script as fallback.

Vivixiao980/xhs-cover-skill

Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.

intentui/laravel

CLI tools for Svelte 5 documentation lookup and code analysis.

kampsy/ui

Web typography. An agent skill from Lily-404/blog.

Lily-404/blog

Kubeez's own skill for building an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand, generated end-to-end on the Kubeez platform.

KubeezMedia/kubeez-scroll-world-video

Use TypeUI with Hermes Agent to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.

bergside/typeui

把一条视频重建成「只有画面和声音」的干净文件——源片的元数据一概不搬： GPS、设备型号、账号 ID、创建时间、章节、GoPro 的遥测轨，全部留在原地。

eternityspring/reelbench-skills

Optimize, rewrite, and craft image generation and editing prompts tailored specifically for Alibaba's Qwen-Image-2.1 diffusion model.

iamyoki/qwen-image-2.1-skill

A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.

evalstate/fast-agent

Audit a design system's color palette against measurable color-science disciplines — WCAG/APCA contrast of declared token pairs, perceptual (OKLCH) ramp uniformity, color-blindness safety of…

rome-os/rome

End-to-end trip planning: gather user constraints, build a reference itinerary, research locations and dining signals via 大众点评 + 小红书, then generate an interactive mobile-first map page (Leaflet +…

hiyeshu/trip-map-builder

Create complete Xiaohongshu image-and-text posts from a topic, article, document, or rough idea, including research, fact checking, post copy, pagination, storyboards, a 3:4 cover, 9:16 content…

NimaChu/xhs-imagen

Design production-ready prompts, shot plans, storyboards, extensions, and video edits for Jimeng Seedance 2.5.

woodfantasy/Seedance-ShotDesign-Skills

Turns a personal photo into a typography-driven, film-poster-style image in muted Morandi tones, keeping the photograph itself unaltered.

Zeejay0/gathered-scenes-zine-skill

Create Apple-inspired bento grid presentation cards for showcasing project stats, timelines, and achievements.

hubeiqiao/apple-bento-grid

Reference guide for writing and running Langflow frontend accessibility tests with axe (Jest) and IBM Equal Access (Playwright page.runA11yScan).

langflow-ai/langflow

Transform a user-uploaded photograph into one horizontal collectible memory card with a large quiet editorial illustration, six integrated journaling-sticker motifs, three small English keywords…

carolinaaafy/travel-memory-sticker-card

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots.

yamcodes/arkenv

Generate cinematic AI shortfilm prompts (works with Seedance 2.0, Xiaoyunque, Sora, Kling, Jimeng, Veo) using the 5-stage structure from Mx-Shell's Zombie Scavenger.

jnMetaCode/ai-shortfilm-prompts

Generate, derive, optimize, and diagnose structured AI image prompts for luminous cinematic Eastern xianxia environments under one inherited master canon with measurable divine scale, fixed…

liyue-aigc/xianxia-visual-director

Guides an agent in building and polishing CapCut Desktop video projects through the CapCut MCP server and direct timeline file edits, including vertical canvas, subtitles and audio.

sun-guannan/VectCutAPI

Review a change to the ffmpeg-skill repository for the failures its own contract makes possible — a claim in a result document that is true at one layer and false at the layer a caller reads, a new…

kajisho5/ffmpeg-skill

Turns a short brief into a researched, distinctive website: lock the intent with at most one question, research live reference sites, source materials, then build and verify.

liucongg/liucong-skills

Grounds AI-built interfaces in real reference images and a saved personal taste profile, so UI work avoids the generic defaults of typical generated apps.

codeswithroh/tastemaker

Looks up Microsoft Fluent UI System Icons and their exact @fluentui/react-icons component names through the Fluent Icons MCP server or HTTP API, instead of guessing.

coltongriffith/fluenticons

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based…

growupanand/ConvoForm

A skill your agent uses when creating or modifying OpenChamber UI text, labels, buttons, placeholders, aria labels, empty states, toasts, dialogs, settings copy, navigation labels, or any…

openchamber/openchamber

Design and build native-feeling macOS application UIs. An agent skill from ceorkm/macos-design-skill.

ceorkm/macos-design-skill

Improve typography by fixing font choices, hierarchy, sizing, weight consistency, and readability.

sudomakes/backroad

Write high-converting landing page copy using proven frameworks like PAS (Problem-Agitate-Solution), AIDA, and StoryBrand.

julianromli/ai-skills

Create or edit commercial key visuals, product advertising, social graphics, and 5:2 covers in a contemporary Dunhuang mineral-pigment style.

govin-ai/dunhuang-aura-skill

Audit and update the existing Fulldev Astro UI registry against current data-slot and shadcn/ui Base UI Vega.

fulldotdev/ui

NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages//demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。

jdf2e/nutui-react

Build and maintain an explorable, progressively-disclosed isometric "atlas" of a system's architecture — an interactive page (hover to read, click to pin, go inside for steps, moving data packets…

inkboard/system-atlas

Agent 1 of the video editing pipeline. An agent skill from nateherkai/hyperframes-student-kit.

nateherkai/hyperframes-student-kit

Beginner-friendly end-to-end video creator for HyperFrames. An agent skill from nateherkai/hyperframes-student-kit.

nateherkai/hyperframes-student-kit

将 weapp-tailwindcss 集成到自研构建器或高级流水线，覆盖 weapp-tailwindcss/core、generator、Vite/Webpack/Rspack/Rollup/Rolldown/Gulp 生命周期、ModuleGraph、Tailwind Scanner/source candidates、watch/HMR、source…

weapp-tailwindcss/weapp-tailwindcss

Use Swimlane swim-ui (swim- custom elements) when building custom solutions, record widgets, or report widgets for Turbine.

swimlane/ngx-ui

Create Remotion videos using the Geist design system aesthetic.

Marve10s/Better-Fullstack

Orchestrate a configurable, debuggable local pipeline from approved narration packages to timed audio, captions, visual assets, semantic motion, rendered video, optional avatar compositing…

JayceHuang/agent-video-pipeline

Generate and edit 2D image assets for Three.js games with Google's Gemini image API: concept sheets, image-to-3D inputs, texture and material references, sky and background plates, decals, logos…

valkor-ai/loom

A skill your agent uses whenever the user wants to build or modify a chat, agent, or tool-calling UI in a React 19 + Tailwind v4 project — especially if the code imports from…

21st-dev/agent-elements

Builds a showreel-grade product film in Remotion using the product's own design tokens, components and voice, from a guided interview through a verified final render.

Rieranthony/product-film-skill