Design
UI/UX direction, visual design, and design systems
business-naming
by theepan
Generate and evaluate names for companies, products, brands, and features using a structured three-phase process (Identify, Invent, Implement) based on David Placek's Lexicon Branding methodology. Use when a user asks to name a company, name a product, brainstorm brand names, evaluate a shortlist of names, rename something, build a creative brief for naming, or find a name for a startup, app, or service. Accepts a description of the business, product, or brand to be named.
design-system-starter
by cachemoney
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.
impeccable-harden
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /harden. Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use for frontend and UI design tasks."
fluent2-design-system
by fefogarcia
Build interfaces using Microsoft's Fluent 2 design system via @fluentui/react-components (v9). Use when the user requests UI built with Fluent UI, Fluent 2, Microsoft design language, Teams-style UI, or Office-style interfaces. Covers: React component usage, theming with FluentProvider, styling with makeStyles/tokens/Griffel, design token application, layout patterns, typography, color system, accessibility, dark/light/high-contrast themes, and custom branding. Also triggers for: "make it look like Teams/Outlook/Office", "use Fluent", "Microsoft design system", "@fluentui", or any request to build UI that follows Microsoft's design language. Do NOT use for Fluent UI v8 (@fluentui/react) unless migrating to v9.
Skill: IDEA Changelist Management
by teslasoft-de
Professional skills and tools for Claude Code, including UX design, authentication patterns, collaboration workflows, and developer tools.
Google Stitch — AI UI Design Generator
by mmcmedia
â Real-time interactive prototypes
tailwind-design-system
by baotoq
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
design-lead
by elliottrjacobs
Bridge strategy and design — set design direction, review design quality, and establish design tenets. Use when the user says "design review", "design direction", "design strategy", "creative direction", "design quality", "design tenets", or needs to translate strategy into design decisions.
crypto-frontend-design
by btc-vision
CSS-first directive for crypto, web3, DeFi, airdrop, dashboard, and token project frontends. Produces stylesheets, layout, animation, theming, and responsive HTML. Triggers on landing pages, dashboards, airdrop claims, staking UIs, DEX frontends, bridge UIs, NFT galleries, token launches, or any crypto web interface. Also triggers on matrix-style, cyberpunk, neon-glow, hacker terminal, or dark fintech dashboard aesthetics. Multi-theme CSS, mobile/tablet/desktop support, zero emojis. For OPNet frontends, use alongside opnet-development skill (which owns TypeScript, React logic, wallet, providers). This skill owns visuals; opnet-development owns logic. Always gathers user context (images, theme, brand colors, audience) before generating code.
impeccable-bolder
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /bolder. Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use for frontend and UI design tasks."
brand-wave-artisans
by bluewaves-creations
Brand kit for Wave Artisans. Provides design tokens (colors, typography, spacing), Nunito Sans font files, logo variants, and PDF page templates. Use whenever generating documents, presentations, or web pages for the Wave Artisans brand.
nextjs-seo-optimizer
by jasonroy19357
Comprehensive Next.js SEO optimization skill for metadata, sitemaps, robots.txt, structured data, and Core Web Vitals. Use when building or auditing Next.js applications for SEO, implementing metadata API, generating sitemaps, adding Open Graph tags, creating JSON-LD structured data, optimizing for search engines, or improving search rankings. Works with Next.js 13+ App Router and Pages Router.
design-ui-ux-pro-max
by baotoq
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."
carbon-design-system
by fefogarcia
Build UIs using IBM's Carbon Design System. Use when the user requests Carbon-styled interfaces, IBM-style dashboards, enterprise UIs following Carbon conventions, or explicitly mentions Carbon, IBM design, or @carbon/react. Covers component usage, design tokens (color, typography, spacing, motion), theming (White, Gray 10, Gray 90, Gray 100), grid layout, and accessibility. Supports both artifact/HTML output (CDN-based) and full React project output (@carbon/react). Triggers include "Carbon", "IBM design system", "enterprise dashboard", "@carbon/react", "carbon components", or requests for IBM-style professional interfaces.
frontend-design
by SebastiaanWouters
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications. Generates creative, polished code that avoids generic AI aesthetics.
知行合一
by d-wwei
"知行合一——实践-认识螺旋，做正确的事而非容易的事。"
chart-designer
by bluewaves-creations
Brand-consistent chart design system for matplotlib. Provides load_theme(), theme.apply(), and named figure sizes — brand guardrails that get out of the way. Use when the user asks to create charts, graphs, plots, data visualizations, or any visual representation of data. Standard matplotlib code works as-is; the theme handles colors, typography, and sizing. Pairs with brand-* kits for branded output and pdf-factory for PDF embedding.
impeccable-simplify
by SebastiaanWouters
"Skills-only equivalent of impeccable.style /simplify. Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use for frontend and UI design tasks."
design-consistency-auditor
by fefogarcia
Audit and maintain design system consistency, UX/UI patterns, color palettes, and design best practices across frontend applications
forge-ux
by fwehrling
FORGE UX Agent — Generates UX design, wireframes, design system, and accessibility guidelines. Usage: /forge-ux
brand-analyzer
by nguyendinhquocx
This skill should be used when the user requests brand analysis, brand guidelines creation, brand audits, or establishing brand identity and consistency standards. It provides comprehensive frameworks for analyzing brand elements and creating actionable brand guidelines based on requirements.
drawio
by hb12devtn
Generate draw.io diagrams from user requests using Python code execution to produce clickable URLs that open in the draw.io web editor. Use this skill whenever the user asks to create any kind of diagram, flowchart, architecture diagram, org chart, sequence diagram, ERD, mind map, network topology, wireframe, UML diagram, BPMN, state machine, Gantt chart, or any other visual diagram. Also trigger when the user says "draw", "diagram", "chart", "visualize", "flowchart", "architecture", "draw.io", "mermaid diagram", or requests any visual representation of a process, system, or hierarchy. This skill generates privacy-friendly draw.io URLs where all data stays client-side via hash fragments.
tech-illustration
by Nayuta403
Generate multi-style technical illustrations (blueprint, clean, dynamic, bold) for articles, slides, and docs using Google's Gemini 3.1 Flash Image model. Use when the user asks to create a tech diagram, infographic, architecture illustration, or article cover image.
figma-to-jira
by digitalspeed
Orchestrates Jira ticket creation from Figma designs using Atomic Design principles. Use this when initializing a project or syncing design specs to Jira for development.