Design & Media

costa-marcello Bundle

Creates and improves distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Includes style/color/typography guides by industry, 30+ UX rules, 25+ chart types, and 10 tech stacks. Use when designing components, building pages, choosing palettes, implementing UI patterns, or improving existing interfaces.

jeff-stapleton Skill

Create production-grade frontend interfaces for Breeze Airways using the Moxy Design System 2.0. Enforces brand colors, typography (Poppins/Open Sans), token system, and operational aviation UI patterns. Use when building web components, pages, or applications for Breeze Airways operations.

jeff-stapleton Bundle

Build comprehensive Storybook stories for all pages and states defined in a product requirement brief. Uses the Moxy Design System (breeze-design skill), scaffolds Storybook config, and delegates page builds to subagents to manage context. Use when generating full Storybook coverage from a PRB.

feixeyes Bundle

Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".

sssemil Bundle

Create fixed-layout institutional brief PDFs with cream page fields, black/blue typography, Roman-numeral side rails, alternating footers, and dense linework diagrams calibrated to the supplied reference.

getsentry Bundle

Fix violations of an eslintPluginScraps rule across the codebase. Use when asked to "fix lint violations", "apply a lint rule", "fix scraps rule errors", "roll out a lint rule", "enforce a rule codebase-wide", or "fix design system lint". Covers manual fixes, autofix, batching, and codemod strategies for large-scale rollouts.

getsentry Bundle

Create a new ESLint rule with tests for eslintPluginScraps. Use when asked to "create a lint rule", "add an eslint rule", "scaffold a rule", "write a new scraps rule", or "new design system lint rule". Covers rule creation, test authoring, registration, and autofix implementation.

getsentry Skill

Guide for using Sentry's layout and text primitives. Use when implementing UI components, layouts, or typography. Enforces use of core components over styled components.

getsentry Skill

Create or update component documentation in Sentry's MDX stories format. Use when asked to "document a component", "add stories", "write component docs", "create an mdx file", "add a stories.mdx", or document a design system component. Generates structured MDX with live demos, accessibility guidance, and auto-generated API docs from TypeScript types.

navikt Bundle

Redigér og kvalitetssikre norsk tekst: klarspråk, fjerning av AI-markører, anglisismer, fagtermer og nynorsk/svensk-innblanding. Bruk denne skillen hver gang du skriver, redigerer eller språkvasker norsk tekst — README-er, ADR-er, UI-tekst, blogginnlegg, dokumentasjon, e-poster, commit-meldinger og PR-beskrivelser — også når brukeren ikke sier «klarspråk» eksplisitt, men bare ber om hjelp med norsk tekst.

navikt Bundle

Expert builder for Aksel, the Nav / @navikt design system — React components, design tokens, layout primitives, theming (light/dark), icons, CSS, the Tailwind preset, version migrations, Figma-to-code. Triggers — Aksel, "using/with aksel", Nav/Navikt, "designsystemet", "design system", @navikt/ds-* (e.g. @navikt/ds-react) or @navikt/aksel-* packages; add/create/build/refactor a component (button, input, modal, table, alert, card, form) or layout; implement a design from Figma (pasted figma.com/design/...?node-id link, "implement this design", "build this from Figma", design-to-code). Invoke for frontend UI work with any Aksel signal unless the user opts out.

navikt Bundle

Lag responsive layouts med Aksel Design System (v8+) - spacing tokens, layout primitives (Box, HStack, VStack, HGrid, Page, Bleed) og ResponsiveProp

pandazki Bundle

Pneuma Draw Mode workspace guidelines. Use for ANY task in this workspace: creating or editing diagrams, flowcharts, wireframes, mind maps, architecture diagrams, org charts, sketches, or any visual content on the Excalidraw canvas. This skill defines the Excalidraw JSON format, element types, binding rules, and color palette. Consult before your first edit in a new conversation.

pandazki Bundle

Pneuma Diagram Mode workspace guidelines. Use for ANY task in this workspace: creating or editing architecture diagrams, flowcharts, UML, ER diagrams, network topology, org charts, mind maps, or any draw.io diagram. This skill defines the .drawio XML format, style strings, edge rules, and color palette. Consult before your first edit in a new conversation.

pandazki Bundle

Pneuma WebCraft Mode workspace guidelines with Impeccable.style design intelligence. Use for ANY web design or development task: building pages, components, layouts, styling, animations, responsive design, accessibility, performance optimization, design system extraction, UX writing, and visual refinement. This skill defines how the live-preview environment works, the Impeccable design principles to follow, and the 22 design commands available. Consult before your first edit in a new conversation.

pandazki Bundle

Pneuma Illustrate Mode workspace guidelines. Use for ANY task in this workspace: generating images, creating illustrations, editing visuals, managing content sets, organizing rows, crafting prompts, adjusting styles, or any image generation task. This skill defines the generation workflow, manifest format, prompt engineering, and content set organization for the AI illustration studio. Consult before your first edit in a new conversation.

likweitan Bundle

Generate SAP BTP (Business Technology Platform) solution architecture diagrams as native draw.io (.drawio) files following the official SAP BTP Solution Diagram guidelines (Fiori Horizon design system) and open them via a configured draw.io MCP server. USE WHEN: user asks to create/draw/design/sketch a BTP diagram, BTP architecture, BTP landscape, BTP solution diagram, BTP reference architecture, SAP Business Technology Platform diagram, or wants to visualize SAP BTP services (CAP, Build, Integration Suite, SAC, AI Core, HANA Cloud, Cloud Foundry, Kyma, Workzone, etc.) and their interdependencies in draw.io / drawio / diagrams.net. DO NOT USE FOR: non-BTP architecture diagrams, generic flowcharts, sequence/UML diagrams, or diagrams that should remain in Mermaid/PlantUML.

powr-data Bundle

Generate a consistent application icon asset set from an approved high-resolution logo, including large app assets, small UI icons, favicons, transparent PNGs, and SVG micro icons

agenticsorg Bundle

Expert UI/UX design guidance for building unique, accessible, and user-centered interfaces. Use when designing interfaces, making visual design decisions, choosing colors/typography, implementing responsive layouts, or when user mentions design, UI, UX, styling, or visual appearance. Always ask before making design decisions.

jochenyang Bundle

UI/UX design-system reasoning and UX quality audit skill. Use when user needs style direction, palette/typography selection, UX review, or design optimization before implementation. Do NOT use for backend logic or database design.

marcioaltoe Skill

Expert UI/UX designer for React applications with shadcn/ui and Tailwind CSS. **ALWAYS use when creating UI components, implementing responsive layouts, or designing interfaces.** Use when user needs component creation, design implementation, responsive layouts, accessibility improvements, dark mode support, or design system architecture. Examples - "create a custom card component", "build a responsive navigation", "setup shadcn/ui button", "implement dark mode", "make this accessible", "design a form layout".

antoniolg Bundle

Converts a Markdown file to a styled PDF with DevExpert branding (logo in bottom-right corner). Use when asked to generate a PDF from a Markdown document, or when any DevExpert proposal/document needs to be exported as PDF.

menkesu Skill

Decides when quality matters vs move fast, based on Dylan Field (Figma) craft philosophy and Brian Chesky (Airbnb) details obsession. Use when balancing shipping speed with excellence, deciding if refactoring is needed, or determining which details create moats vs which to skip.

menkesu Skill

Follows Airbnb's design-led development and Figma's craft quality standards. Use when building user-facing features, making UI/UX decisions, determining when details matter, or applying design system thinking. Guides when to move fast vs when quality creates moats. Based on Brian Chesky staying in every design detail and Dylan Field's craft philosophy.

farming-labs Skill

Explains design system patterns including design tokens, component layers, API design, accessibility defaults, theming, documentation, and governance. Use when structuring a reusable component system, defining tokens and variants, or deciding how teams should build and evolve shared UI.

no-problem-dev Skill

SwiftUI ViewのDesign System準拠性を監査する。既存UIのレビュー、デザインチェック時に使用。「デザインレビュー」「UIチェック」「design audit」「デザイン監査」「UI監査」「デザインチェック」「トークン確認」などのキーワードで自動適用。

no-problem-dev Bundle

Swift Design Systemを使用したiOS UI実装スキル。デザイントークン、UIコンポーネント（Button、Card、Chip、FAB、Snackbar、Picker等15種）、レイアウトパターンのベストプラクティスを提供。「デザイン」「UI」「テーマ」「カラー」「タイポグラフィ」「スペーシング」「ボタン」「カード」「FAB」「Snackbar」「Picker」「SwiftUI」「DesignSystem」などで自動適用。

ihj04982 Skill

Design audit and review — typography audit, structural analysis, Web Interface Guidelines compliance, accessibility, UX anti-patterns, and brand resonance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or evaluate design quality.

ihj04982 Bundle

Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

ihj04982 Skill

Fixed 1536×864 touch viewport — grid, margins, 8px rhythm, touch targets, typography, components, vertical rhythm, and QA checklist for panel/kiosk/HMI. Use when designing or implementing UIs for this resolution with touch-first input.

openai Bundle

Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, then reporting UX, design, and accessibility findings inline from that evidence. Use Figma only when the user explicitly asks for a board. Use when the user asks to audit, review, critique, inspect, assess, analyze, evaluate, or give feedback on a product experience.

mhylle Bundle

Design and manufacture someone's OWN reusable visual design language and save it as durable files — design tokens (css/tokens.css + a W3C design-tokens.json), a DESIGN_LANGUAGE.md contract, and a living multi-page styleguide — that future sessions and other projects read to build UI in one consistent, ownable style. Use this whenever the goal is to create, define, set up, or establish a design language, design system, house style, visual identity, or brand look captured once as files and reused across many UIs or projects; to make apps stop looking templated, generic, or like every other Claude/Anthropic app (the default warm-beige + terracotta + pillowy-card look); or to get tokens plus a contract that tells Claude how to build in that style every time. It is reaction-first — it researches real references, renders live options the user reacts to, and dials each dimension (color, typography, spacing, shape, elevation, motion, imagery, components, patterns, voice) from conventional to experimental. This produc

openai Bundle

Load or manage Product Design's saved user context. Use when the user asks to set up Product Design, get started, onboard, save product or design sources, see what Product Design remembers, update saved context, or remember Product Design preferences. Examples include product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, and general product/design notes.

yeachan-heo-oh-my-codex Skill

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

moosegoose0701 Skill

Generate and edit images using Google Gemini's native image generation models (Nano Banana / Nano Banana Pro). Supports text-to-image, image editing with reference images, multi-image composition, and character consistency. Use when the user asks to generate images via Gemini, create AI illustrations, edit photos with Gemini, or needs high-quality image generation with the Google API. Requires GEMINI_API_KEY. Triggers: "generate image with gemini", "nano banana", "gemini image", "create illustration", "AI generate picture", "text to image".

adonis0123 Bundle

Use this skill whenever the user invokes /figma-mcp or asks to install, authenticate, switch accounts, recover, or verify the official Figma MCP server across Codex, Claude Code, or Cursor. Keep registration account-neutral and each supported host's OAuth flow authoritative. Use whoami for readiness, named-account, recovery, write, and multi-host checks; for a current-account single-host read-only task, let the first requested official read prove tool and auth readiness without a redundant identity call. Never copy OAuth tokens between hosts.