NeVibeCode · 54 items
Design: skills, plugins, subagents and slash commands
Design for Claude Code, Codex and Cursor: skills, plugins, subagents and slash commands, from popular to niche.
grill-me skill grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts.
Claude Code
1,424,476installs
prototype skill Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase.
Claude Code
986,201installs
grilling skill Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting.
Claude Code
979,543installs
codebase-design skill This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write.
Claude Code
850,344installs
pptx
official skill Handles .pptx and .potx files for creating, reading, editing, and validating presentations. Use it whenever an agent needs to touch slide files or templates.
Claude Code Claude.ai
241,433installs
canvas-design
official skill Builds posters and visual art in .png and .pdf by first writing a design philosophy, then expressing it on the canvas.
Claude Code Claude.ai
121,543installs
brainstorming skill This skill clarifies a task before implementation by asking questions, checking context, and comparing approaches. Use it for new features and other creative work.
Claude Code CX Codex
404,045installs
web-artifacts-builder
official skill This skill builds complex claude.ai HTML artifacts with React, Tailwind CSS, and shadcn/ui. Use it for interfaces with state or routing.
Claude Code Claude.ai
112,122installs
brand-guidelines
official skill Applies Anthropic's official brand colors and fonts to documents, slides and other artifacts. Useful whenever something needs to match the company look.
Claude Code Claude.ai
109,043installs
theme-factory
official skill Applies preset color palettes and font pairs to slides, documents, and HTML pages. Use it when an artifact needs one consistent visual style.
Claude Code Claude.ai
94,921installs
algorithmic-art
official skill Creates p5.js generative art with seeded randomness and adjustable parameters. Use it for flow fields, particle systems, and code-based visual experiments.
Claude Code Claude.ai
89,081installs
slack-gif-creator
official skill This skill helps create animated GIFs for Slack and check their parameters. Use it for custom emoji or GIFs shared in messages.
Claude Code Claude.ai
75,256installs
excalidraw-diagram-generator
official skill Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities.
GitHub Copilot
31,639installs
web-design-reviewer
official skill This skill inspects a running website, spots layout, responsive, and accessibility issues, and can fix them in the source code. Use it when a UI review should lead to verified code changes.
GitHub Copilot
13,957installs
tailwind-design-system skill Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns.
Claude Code CX Codex Cursor
70,180installs
penpot-uiux-design
official skill A skill for building interfaces in Penpot via MCP tools: web, mobile, dashboards, design systems. Works with Penpot API directly from your code editor.
GitHub Copilot
12,782installs
nano-banana-pro-openrouter
official skill Generates and edits images through OpenRouter with Gemini 3 Pro Image. Use it for text-to-image work, file edits, and multi-image compositions.
GitHub Copilot
9,910installs
plantuml-ascii
official skill Creates text-based PlantUML diagrams for terminals, README files, and docs without images. Use it when a diagram should live alongside source code.
GitHub Copilot
9,740installs
image-manipulation-image-magick
official skill Use ImageMagick to resize images, convert formats and inspect metadata. The skill is suited to thumbnails and batch image processing.
GitHub Copilot
9,723installs
power-bi-report-design-consultation
official skill This skill guides Power BI report planning, from chart choices to page layout and accessibility. Use it when a report needs to support specific decisions for a defined audience.
GitHub Copilot
9,390installs
fluentui-blazor
official skill This skill guides Blazor work with Microsoft Fluent UI components, service providers, forms, dialogs, and themes. Use it while building or debugging a Fluent UI app.
GitHub Copilot
9,000installs
legacy-circuit-mockups
official skill Creates breadboard circuit mockups with HTML5 Canvas. Use it to show component placement and wiring for electronics projects.
GitHub Copilot
8,900installs
brand-landingpage skill This skill interviews you about the product and its visual direction, then builds a landing page through Stitch. Use it when there’s no established design yet.
Claude Code CX Codex Cursor
39,476installs
frontend-developer subagent This subagent builds frontend applications with React, Vue, and Angular while following the project’s existing patterns. Use it for larger UI tasks.
Claude Code
40,905installs
ui-ux-designer subagent A subagent for interface design, wireframes, and design systems with user research and accessibility in mind. Use it for UX work in Claude Code, Codex, or Cursor.
Claude Code CX Codex Cursor
27,069installs
premium-frontend-ui
official skill Guides GitHub Copilot when building animated web interfaces. Use it for a visually distinctive landing page or interactive portfolio.
GitHub Copilot
4,900installs
mobile-android-design skill This skill guides native Android UI work with Material Design 3 and Jetpack Compose. Use it for screens, navigation, adaptive layouts, and accessibility checks.
Claude Code CX Codex Cursor
24,847installs
mobile-ios-design skill Guides native iOS interface work with Apple HIG and SwiftUI patterns. Use it when building views, navigation, or adaptive layouts.
Claude Code CX Codex Cursor
23,659installs
responsive-design skill Guides responsive UI work with mobile-first styles, container queries, and fluid values. Use it when pages or components need to adapt to available space.
Claude Code CX Codex Cursor
20,956installs
gsap-framer-scroll-animation
official skill This skill helps GitHub Copilot build scroll-driven motion with GSAP ScrollTrigger and Framer Motion. Use it for vanilla JS, React, or Next.js work.
GitHub Copilot
3,900installs
interaction-design skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns.
Claude Code CX Codex Cursor
16,146installs
kpi-dashboard-design skill This skill helps design KPI dashboards, choose useful metrics, and trace conflicting calculations. Use it for SaaS, operations, and cohort analysis views.
Claude Code CX Codex Cursor
16,141installs
design-system-patterns skill This skill covers design tokens, theme infrastructure, and component architecture. Use it when building UI libraries or a multi-brand design system.
Claude Code CX Codex Cursor
15,953installs
react-native-design skill This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens.
Claude Code CX Codex Cursor
15,522installs
draw-io-diagram-generator
official skill Creates and edits draw.io diagrams in .drawio, .drawio.svg, and .drawio.png files. Use it when an agent needs to produce a diagram from a project request.
GitHub Copilot
2,800installs
visual-design-foundations skill This skill helps define typography, color, spacing, and icon rules for a project. Use it when setting up design tokens or bringing an interface into visual consistency.
Claude Code CX Codex Cursor
13,566installs
web-component-design skill This skill helps design reusable components for React, Vue, and Svelte. Use it for UI libraries, design systems, or legacy component refactors.
Claude Code CX Codex Cursor
13,167installs
wcag-audit-patterns skill Audits web interfaces against WCAG 2.2 with automated checks and manual verification. Use it to find violations and build accessible patterns.
Claude Code CX Codex Cursor
12,486installs
napkin
official skill Opens a browser whiteboard for sketches and sticky notes, then lets Copilot respond to what you drew. Use it when a visual outline is easier than explaining an idea in chat.
GitHub Copilot
2,200installs
playground
official skill Builds interactive HTML playgrounds with controls, a live preview, and a generated prompt. Use it when a topic is easier to explore visually than through plain text.
Claude Code
7,967installs
1–40 of 54
Design skills teach the agent the visual side of the job: typography, spacing, motion, brand rules, SVG and Figma layouts. The official anthropics/skills repository includes frontend-design and brand-guidelines, for example. A good skill in this topic contains actual numbers (a type scale, animation durations, a palette) instead of vague requests to make things look nice. If a skill works from mockups, check whether it also needs an MCP server to reach Figma.
