Design
1,149 skills.
Browse
tesseract-motionmirage-hq1.4KCreate editable motion graphics locally in Tesseract, including full-frame animated scenes, typography, diagrams, lower thirds, and overlays on supplied footage. Use for focused motion-design work; use tesseract-video for assembling or revising a complete footage edit.law-of-proximityowl-listener1.4KApply the Law of Proximity — spatial closeness groups elements more strongly than any other cue. Use when spacing alone must carry grouping. For grouping via containers use `law-of-common-region`; via shared appearance use `law-of-similarity`.onboarding-designowl-listener1.4KDesign the first-run experience — activation path, progressive disclosure, and time to first value. Use for a user's very first session. For the mechanics of the signup form itself, use `form-design`.frontend-designam-will1.4KCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.search-uxowl-listener1.4KDesign search — query input, zero results, refinement, and result presentation. Use when users retrieve rather than browse. For browse structure, use `navigation-patterns`.law-of-common-regionowl-listener1.4KApply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use `law-of-proximity`.wireframe-prototypingaj-geddes1.4KCreate wireframes and interactive prototypes to visualize user interfaces and gather feedback early. Use tools and techniques to communicate design ideas before development.readable-measureowl-listener1.4KSet line length and measure for comfortable reading across type sizes and breakpoints. Use when tuning body text. Covers measure only — for the full size and weight scale, use `typography-scale`.immersivebergside1.4KAn immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)fitts-lawowl-listener1.4KApply Fitts's Law — target acquisition time depends on size and distance. Use when sizing and positioning controls, especially for touch. For how many controls to show at once, use `hicks-law`.localization-designowl-listener1.4KDesign for multiple languages, writing directions, and cultural contexts — text expansion, RTL mirroring, and locale formats. Use when shipping beyond one locale. For the words themselves, use `ux-writing` (designer-toolkit).claudebergside1.4KA research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.scandinavian-designericzakariasson1.4KApply a refined Scandinavian visual system with a neutral black-and-white foundation, restrained sans-serif typography, purposeful product imagery, generous spacing, clear page chapters, and minimal decoration. Use when the user invokes /scandinavian-design or requests a Nordic, monochrome, calm, spacious, restrained, or minimalist interface.hicks-lawowl-listener1.4KApply Hick's Law — decision time grows with the number of simultaneous choices. Use when a screen offers too many options at once. For how many items survive in memory afterwards, use `millers-law`.design-system-governanceowl-listener1.4KDefine how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use `design-system-adoption` (designer-toolkit); for design file history use `version-control-strategy` (design-ops).von-restorff-effectowl-listener1.4KApply the Von Restorff Effect — the element that differs from its neighbours is the one remembered. Use when a single action must dominate. For overall ordering rather than single-element emphasis, use `visual-hierarchy`.millers-lawowl-listener1.4KApply Miller's Law — chunk information into groups of about four to fit working memory. Use when grouping fields, menu items, or steps. For reducing the number of choices offered, use `hicks-law`.design-debt-auditowl-listener1.4KInventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit` (designer-toolkit); for WCAG gaps use `accessibility-audit` (design-systems).sketchbergside1.4KA friendly, hand-drawn sketch interface inspired by pencil illustrations on warm cream paper. Soft teal brand accents, hand-written display headings, rounded pill controls.21st-ai21st-dev1.4KGenerate and iterate on UI with 21st AI from the terminal via the `21st` CLI (`@21st-dev/cli`): sketch a UI from a prompt, preview the variants in the browser, edit any variant in place with a natural-language change, and pull the final code into the project. Use whenever the user wants to BUILD / SKETCH new UI ("sketch a pricing page", "generate a hero with 21st", "make me a <X> section"), ITERATE on a generated draft ("edit the third variant", "add a toggle to that take"), or GRAB the code of impeccablebergside1.4KA modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.codex-theme-switchercodexthemes1.4KApply, switch, and restore Codex desktop themes from the local ~/.codexthemes library with one command, and report which theme is currently active. Use when a user asks to apply or activate a theme they created or installed, switch between installed themes, restore the native Codex look, or check or debug which theme is currently applied.codexbergside1.4KA radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.content-strategyowl-listener1.4KDefine what content a product needs, how it is structured, and who owns it. Use when content itself is the problem. For the words in the interface use `ux-writing` (designer-toolkit); for structural hierarchy use `information-architecture`.posterskill-academic-postersreason-machines1.4KAI-assisted academic conference poster generation from Overleaf source using Claude Codedoherty-thresholdowl-listener1.4KApply the Doherty Threshold — keep system response under 400ms to preserve user flow. Use when diagnosing perceived slowness or setting a performance budget. For what to show during unavoidable waits, use `loading-states`.html-prototypeplannotator1.4KDirect-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate independently from a general request. Treat a mockup as a noninteractive fidelity mode within this skill, not as a separate skill.web-design-guidelinesehmo1.4KWeb platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI code. Triggers on tasks involving HTML, CSS, web components, WCAG compliance, responsive design, or web performance.design-reviewjezweb1.4KReview a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.terracottabergside1.4KA sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.fictionbergside1.4KA playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapesmatrixbergside1.4KA cyber-slick, dark-only Matrix-inspired interface defined by minimalist fashion, high-tech digital elementsdesign-negotiationowl-listener1.4KAdvocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals. Use in the conversation itself. For the commercial vocabulary behind it, use `business-design` (ux-strategy).risobergside1.4KA playful, joyful, two-color risograph print aesthetic built on a single warm off-white paper surface running through every sectionsegabergside1.4KA playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blockspremium-frontend-designkv09061.4KCreate award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or any interface where "generic AI slop" is unacceptable.html-wireframeplannotator1.4KDirect-invocation specialist for low-fidelity, self-contained HTML wireframes that test information hierarchy, content, navigation, task flow, and responsive structure before visual design. Use when the user explicitly invokes html-wireframe or the broad html skill routes a wireframe request here. Do not activate independently from a general request. Do not use for polished mockups or production-like interaction; use html-prototype for those.micro-interactionsdylantarre1.3KUse when designing small UI feedback moments like button states, toggles, form validation, loading indicators, or notification badges.design-first-ui-promptingmengto1.3KUse when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.brand-guidelinesarnabbagxd1.3KCreate a comprehensive brand standards document — covering logo usage, color, typography, voice, messaging, and application rules. Use when the user says "brand guidelines", "brand standards", "brand book", "style guide", "brand guide", "brand manual", "brand rules", "brand documentation", "brand toolkit", "onboarding designers or copywriters", "need a document for the team", "brand consistency across teams", or wants to codify all brand decisions into a reusable reference document.site-specificationcline1.3KExtract comprehensive site specifications from simple descriptions. Use when analyzing a user's theme request to determine site type, audience, tone, layout requirements, and typography.ux-researcher-designerdavila71.3KUX research and design toolkit for Senior UX Designer/Researcher including data-driven persona generation, journey mapping, usability testing frameworks, and research synthesis. Use for user research, persona creation, journey mapping, and design validation.radix-ui-design-systemsickn331.3KBuild accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.ui-ux-pro-maxlikaia1.3KUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). 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: glassmorphisgsap-scrolltrigger-storytellingmengto1.3KBuild cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.critique-information-densityowl-listener1.3KCritique a rendered screen's density — cognitive load, content prioritisation, scanning patterns, and progressive disclosure. Use when a screen feels overwhelming. For the underlying choice-count principle, use `hicks-law` (interaction-design).design-artifactplannotator1.3KDesign principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look generically AI-generated.landing-page-guide-v2bear2u1.3KCreate distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.awwwards-landing-pagerebyteai-template1.3KDesigner portfolio with Locomotive Scroll, GSAP, and Framer Motion animations.brand-packagingarnabbagxd1.3KCreate a packaging design brief — structure, visual direction, hierarchy, materials, and unboxing experience. Use when the user says "packaging design", "packaging brief", "product packaging", "packaging direction", "label design", "packaging identity", "unboxing experience", "packaging look and feel", "brief my packaging designer", "packaging for my product", "packaging strategy", "retail packaging", "e-commerce packaging", "what should my packaging look like", or is briefing a designer, agency