Design
1,149 skills.
Browse
frame-flowchart-stickynexu-io2.4KSVG curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel.frame-data-chart-nytnexu-io2.4KNYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).frame-light-leak-cinemanexu-io2.4KFilm light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.figma-code-connect-componentsopenai2.4KConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.frame-glitch-titlenexu-io2.4KDigital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.spline-interactivefreshtechbro2.4KBrowser-based 3D design tool with visual editor, animation, and web export. Use this skill when creating 3D scenes without code, designing interactive web experiences, prototyping 3D UI, exporting to React/web, or building designer-friendly 3D content. Triggers on tasks involving Spline, no-code 3D, visual 3D editor, 3D animation, state-based interactions, React Spline integration, or scene export. Alternative to Three.js for designers who prefer visual tools over code.card-twitternexu-io2.4KTwitter quote or data card designed to pair with a post.figma-generate-libraryopenai2.4KBuild or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.frame-macos-notificationnexu-io2.4KRealistic macOS notification banner with app icon, title, and body, suited to video overlays or product teasers.social-reddit-cardnexu-io2.4KRealistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.frontend-design-ui-uxulpi-io2.4KProduce a distinctive, LOCKED design language plus an implementation-ready UX/UI spec, written to `.ulpi/design/`: a per-brief visual identity (palette, type, signature), the design system to build on, user flows and states, component briefs, and accessibility constraints. Commits to a bold aesthetic direction, bans AI-slop by name, and locks the identity so every screen and future session stays consistent. Can visit inspiration links with the browse skill to extract real design DNA. Ends with asocial-spotify-cardnexu-io2.4KSpotify Now Playing-style card with album art, progress bar, and playback controls, suited to video overlays or personal homepages.storytellingghaida2.4KDiscipline for giving design work narrative structure that makes people care. Provides four canonical patterns — protagonist-arc, choreography, situation/complication/resolution, what-is/what-could-be — each with a goal, shape, and named pathology. Use when design work needs narrative structure, when stakeholders need to see the user's experience as a story, when presenting design rationale to non-design audiences, or when a journey, blueprint, brief, or deck feels lifeless. Trigger phrases: "whpresentation-designjwynia2.4KDesign and evaluate presentations that communicate effectively. Use when designing a presentation, creating slides, getting presentation feedback, structuring a talk, or reviewing slides. Keywords: presentation, slides, talk, PowerPoint, Keynote, reveal.js.figma-create-new-fileopenai2.3KCreate a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)frontend-designjwynia2.3KCreate distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.impeccable-design-polishnexu-io2.3KFollow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.napkingithub2.3KVisual whiteboard collaboration for Copilot CLI. Creates an interactive whiteboard that opens in your browser — draw, sketch, add sticky notes, then share everything back with Copilot. Copilot sees your drawings and text, and responds with analysis, suggestions, and ideas.color-expertmeodai2.3KUse when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory.lightweight-3d-effectsfreshtechbro2.2KLightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds, parallax tilt effects, decorative 3D elements, or subtle depth effects without heavy frameworks. Triggers on tasks involving Zdog pseudo-3D, Vanta.js backgrounds, Vanilla-Tilt parallax, card tilt effects, hero section animations, or lightweight landing page visuals. Ideal for performance-focused designs.svg-animationssupermemoryai2.2KCreate beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.emilkowal-animationspproenca2.2KEmil Kowalski's animation best practices for web interfaces. Use when writing, reviewing, or implementing animations in React, CSS, or Framer Motion. Triggers on tasks involving transitions, easing, gestures, toasts, drawers, or motion.typography-scaleowl-listener2.2KCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).visual-hierarchyowl-listener2.2KEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).antfu-designantfu2.1Kantfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.illustration-styleowl-listener2.1KDefine an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).rendercvrendercv2.1KCreate professional CVs and resumes with perfect typography using RenderCV (v2.8). Users write content in YAML, and RenderCV produces publication-quality PDFs via Typst typesetting. Full control over every visual detail: colors, fonts, margins, spacing, section title styles, entry layouts, and more. 6 built-in themes with unlimited customization. Any language supported (22 built-in, or define your own). Outputs PDF, PNG, HTML, and Markdown. Use when the user wants to create, edit, customize, or open-pencilopen-pencil2.1KWork with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.interface-kitjuliusbrussee2.1KAuthoritative guide for implementing stunning, accessible, performant UI. Synthesizes design engineering philosophy, accessibility standards, animation principles, spatial design, typography, color systems, and component craft into a single actionable reference. Complements the design-system skill (which covers DESIGN.md spec writing) by covering the HOW of implementation. Trigger phrases: "build UI", "create component", "landing page", "make it look good", "frontend", "design", "polish UI", "imintentghaida2.1KThe entry point for Intent, a UX and design strategy system. Sets project context, routes to specialized skills, and loads foundational UX knowledge. Activate when starting any UX or product design work, setting project context, routing to other skills, evaluating an existing product's UX, or when the user asks about design intent, user experience strategy, ethical design, dark patterns, or design systems thinking.journeyghaida2.1KDesign any user-facing experience end-to-end: task flows, multi-step workflows, navigation structures, onboarding, settings, search, content creation, collaboration, signup, checkout, dashboards, notifications, error recovery, and more. Handles cross-platform adaptation (mobile/web/TV/embedded), device-aware design, accessibility, interaction specifications, and multi-channel journey mapping. Trigger when designing user flows of any kind, mapping screen sequences, optimizing task completion, speorganizeghaida2.1KStructure information so people can find what they need, understand where they are, and navigate confidently. Covers navigation pattern design, taxonomy, labeling systems, search and browse strategy, wayfinding, and IA research methods. Trigger when designing navigation structures, categorization schemes, site maps, taxonomies, labeling systems, search experiences, or asking "how should we organize this?" Also trigger for card sorting, tree testing, information findability problems, or when usermapbox-style-patternsmapbox2.1KCommon style patterns, layer configurations, and recipes for typical mapping scenarios including restaurant finders, real estate, data visualization, navigation, delivery/logistics, and more. Use when implementing specific map use cases or looking for proven style patterns.color-systemowl-listener2.1KBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).evaluateghaida2.1KStructured UX evaluation that produces quantitative assessments, identifies specific issues, and routes to the right Intent skill for resolution. Part of the Intent design strategy system. Runs heuristic evaluations, cognitive walkthroughs, anti-pattern detection, and task success analysis. Scores, categorizes, and prioritizes findings — then maps every issue to the skill that fixes it. Trigger on: UX review, design audit, heuristic evaluation, usability assessment, "review this design", "what'sscroll-reveal-librariesfreshtechbro2.1KSimple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.gzh-designisjiamu2.1K微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入（非 Markdown 先自动归一化），也支持"一键自动排版"（自动推断结构+选主题），还支持根据用户描述/参考图生成自定义主题组件库并保存本地复用。触发场景：(1) 用户提到"公众号排版""公众号文章""微信排版""gzh"，(2) 用户想把文章（md/docx/pdf/纯文本）转成公众号 HTML，(3) 用户说"自动排版""一键排版"公众号内容，(4) 用户想为公众号排版"生成新主题/自定义风格/按这张图做一套组件库"。不用于生成普通网页/落地页/PPT（用前端或 PPT 类 skill）。fortifyghaida2.1KHarden designs for real-world use by systematically identifying and designing for every condition outside the happy path. Part of the Intent design strategy system. Covers state inventories, error recovery, empty states, loading patterns, first-run experiences, stress testing, internationalization readiness, and latency handling. Trigger on: edge cases, error states, empty states, loading states, first-run experience, onboarding, offline mode, "what happens when", "what if the user", "stress tesdark-mode-designowl-listener2.1KAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.specifyghaida2.1KBridges design and engineering by producing detailed specs, organized handoff packages, asset inventories, and cross-functional documentation. Part of the Intent design strategy system. Trigger when: writing design specs, preparing engineering handoffs, documenting for development, creating design reviews, writing test plans, building copy matrices, addressing edge cases, aligning stakeholders, packaging designs "for engineering," or saying "write the spec," "prepare the handoff," "document thisincludeghaida2.1KDesign for everyone by treating accessibility as a first-class design discipline, not a compliance checklist. Part of the Intent design strategy system. Covers WCAG 2.2 for designers, screen reader experience design, keyboard navigation, cognitive accessibility, motor accessibility, inclusive design beyond compliance, and accessibility testing methodology. Trigger on: accessibility, a11y, WCAG, screen reader, keyboard navigation, color contrast, alt text, focus management, touch targets, inclusiblueprintghaida2.1KMap, analyze, and redesign the systems behind product experiences. Part of the Intent design strategy system. Creates service blueprints, ecosystem maps, process architecture, and dependency diagrams. Understands how services, teams, tools, and data flows connect to produce (or fail to produce) user outcomes. Proposes structural changes to how products and services are organized. Trigger on: service blueprints, system maps, process architecture, actor/role mapping, dependency analysis, cross-funlocalizeghaida2.1KAdapts experiences across cultures and languages — not just translation, but cultural reconception. Part of the Intent design strategy system. When a product enters a new market, everything is in play: information density, navigation patterns, color meaning, icon comprehension, date formats, trust signals, payment flows, and the fundamental assumptions about how people make decisions. Trigger when: planning international expansion, auditing i18n readiness, adapting designs for RTL languages, revphilosopherghaida2KA cross-cutting cognitive mode for sitting with design problems before rushing to solve them. Part of the Intent design strategy system. Activates expansive brainstorming: hyperassociativity, beginner's mind, cross-domain pattern recognition, and suppression of premature idea-dismissal. Works alongside every Intent skill — strategize uses it to reframe briefs, blueprint to question structural assumptions, journey to rethink interaction models, and specify to stress-test specs. Trigger when the utransposeghaida2KRethinks experiences for different platforms and contexts — not just resizing, but reconceiving. Part of the Intent design strategy system. When an experience moves from desktop to mobile, web to TV, consumer app to kiosk, or visual interface to voice, the interaction model, information priority, and user context all change. Trigger when: adapting a design for a new platform, planning multi-device experiences, auditing cross-platform consistency, designing for TV/kiosk/voice/embedded, or when souser-flow-diagramowl-listener2KDiagram screen-level paths, decision points, and branch logic. Use when specifying how a feature is traversed. For the emotional end-to-end arc, use `journey-map` (design-research).data-visualizationowl-listener2KSelect chart types and design data encodings — marks, axes, labels, and accessible chart styling. Use when presenting data graphically. Owns chart selection and encoding only; the categorical colour ramp itself belongs to `color-system`.emilkowalski-motionnexu-io2KMotion-design follow-up skill inspired by Emil Kowalski's animation guidance. Use after an interface exists to add tasteful micro-interactions, state transitions, and page motion with product-grade restraint.layout-gridowl-listener2KDefine a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`.claude-designjiji2622KProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces f