Interface Lab Library
Skills collect reusable local prompt techniques.
Local skills cover layout, motion, borders, shadows, WebGL, icons, and component treatments. Choose the techniques first, then combine them with systems and assets.
Prompt Skills
Local expression layer: layout, motion, borders, shadows, WebGL, and copy-ready prompt techniques.
Border Gradients
Apply subtle gradient-border treatments for premium surfaces.
Apply subtle gradient-border treatments for premium surfaces.ProAnimation · 8.9KProMasked Reveal
Create masked staggered word reveal on scroll with GSAP ScrollTrigger.
Create masked staggered word reveal on scroll with GSAP ScrollTrigger.ProAsset · 8.8KProAura Asset Images
Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.
Search Aura assets like Unsplash, curate 5 strong direct image URLs, and prefer higher-res variants when available.ProLayout · 4.8KProFramed Grid Layout
Minimal layout with thin visible boundary lines outlining each section. Add L-shaped corner brackets on container edges to emphasize the frame. Use subtle diagonal background lines (1px, very low opacity) for light texture. Keep everything consistent across sections. Each section sits inside a precise framed box with thin guide borders, strict vertical and horizontal alignment, clear separation between sections, and consistent spacing between frames. Clean, neutral, grid-based, highly structured.
Minimal layout with thin visible boundary lines outlining each section. Add L-shaped corner brackets on container edges to emphasize the frame. Use subtle diagonal background lines (1px, very low opacity) for light texture. Keep everything consistent across sections. Each section sits inside a precise framed box with thin guide borders, strict vertical and horizontal alignment, clear separation between sections, and consistent spacing between frames. Clean, neutral, grid-based, highly structured.ProLayout · 4.2KProContainer Lines
Add vertical container-size lines with mini corner squares.
Add vertical container-size lines with mini corner squares.ProPPT Generation · 3.2KProHTML Deck Fixed Shell
Constrain presentation output to a single-file HTML deck with fixed 16:9 stage and deterministic CSS/JS shell.
Use when generating or repairing a browser-native HTML PPT deck; inputs must include slideCount, locale, style family, slide matrix, selected PPT skills, artifact metadata, and whether a fixed shell already exists.ProPPT Generation · 3.2KProDeck Navigation & Overview
Define keyboard, wheel, touch, dot nav, ESC overview, and reduced-motion behavior.
Use when generating or repairing the HTML deck navigation layer; inputs must include slideCount, current slide state, overview state, touch/keyboard requirements, motion strategy, and reduced-motion branch.ProPPT Generation · 3.2KPro16:9 Stage Contract
Constrain all presentation slides to stable 16:9 dimensions, type scale, and safe areas.
Use for any HTML PPT deck or slide renderer; inputs must include stage dimensions, safe area, type scale, navigation footprint, image slots, and preview container size.ProPPT Generation · 3.2KProSlide Section Composer
Convert the slide matrix into stable sections instead of letting the model freely author the whole HTML document.
Use when converting deck JSON or a slide matrix into HTML slide sections; inputs must include per-slide index, title, informationGoal, claim, layoutId, visualRole, theme, assetSlots, and speakerIntent.ProPPT Layout · 3.2KProEditorial Magazine Layout Registry
Register the editorial template's 10 layouts, theme rhythm, and class-name constraints.
Use when selecting or rendering an editorial/magazine HTML deck; inputs must include topic, audience, slideCount, narrative rhythm, asset availability, evidence-image needs, and visual density.ProPPT Layout · 3.2KProSwiss Grid Layout Lock
Lock Swiss S01-S22 layouts, single accent, image slots, and data-layout QA.
Use when selecting or validating Swiss grid deck layouts; inputs must include slideCount, accent token, content roles, image count, data-page status, comparison-page status, and the registered S01-S22 list.ProPPT Layout · 3.2KProTemplate Gallery Style Retrieval
Turn visual presets and the template gallery into retrievable styles, with best-fit matching and style exploration before deck generation.
Use before deck generation to choose or adapt a PPT style resource; inputs must include topic, audience, use context, tone, industry, slideCount, asset availability, and user style preference.ProPPT Assets · 3.2KProPPT Asset Slots
Bind uploaded assets to deck slots such as cover, evidence image, screenshot, chart, quote, and appendix.
Use when user-uploaded images, screenshots, PDF captures, charts, logos, quotes, or reference files are used in a PPT; inputs must include asset id, source, license, sensitivity, purpose, and accessible URL.ProPPT Assets · 3.2KProPPT Screenshot Framing
Handle product, webpage, old PPT, and dashboard screenshots with ratio, fidelity, and redesign choices.
Use when product screenshots, webpage long captures, old PPT screenshots, dashboard screenshots, or UI mockups enter a deck; inputs must include screenshot purpose, original dimensions, key area, crop permission, and fidelity requirement.ProPPT Assets · 3.2KProPPT Image Prompt Ratio Rules
Define generation ratios for hero visuals, quote/image slides, infographics, screenshot redesigns, and image grids.
Use when generating or retrieving hero visuals, evidence images, infographics, screenshot redesigns, people/scene images, and grid thumbnails for an HTML deck; inputs must include slide role, slot ratio, language, subject, and text-in-image need.ProPPT QA · 3.2KProDeck Static QA
Run HTML deck checks for slide count, slide classes, navigation scripts, placeholders, and prompt leakage.
Use after HTML deck generation, before saving, before publishing, or after repair; inputs must include expected slideCount, style family, selected skills, HTML string, and runnable preview URL.ProPPT QA · 3.2KProPPT Placeholder Cleanup
Remove [必填], TODO, template comments, Lorem ipsum, and unreplaced titles.
Use before any deck is saved, exported, or shown; inputs must include HTML, metadata, speaker notes, asset slot table, and actual user asset status.ProPPT QA · 3.2KProSwiss data-layout Validator
Validate Swiss data-layout, registered layouts, SVG text, and single accent rules.
Use after generating or repairing a Swiss-style HTML deck; inputs must include HTML, registered S01-S22 layout list, allowed accent token, and whether cover/appendix special pages exist.ProAnimation · 1.7KProGSAP Motion
Use GSAP timelines, stagger, and scroll-triggered motion.
Use GSAP timelines, stagger, and scroll-triggered motion.ProStyle · 1.1KProSkeuomorphic UI
Create a skeuomorphic surface style using layered gradients and shadows. Use soft vertical gradients (light top to darker bottom), multiple inset shadows to simulate carved or pressed surfaces, subtle outer shadows for elevation, fine highlights on top edges, darker lower edges, and rounded shapes with smooth transitions. Technique: stack inner and outer shadows to build depth, use micro-details like small dots or textures for realism, add gradient borders (1px wrapper) to simulate reflective edges, and use text shadows and icon shadows for an embossed feel.
Create a skeuomorphic surface style using layered gradients and shadows. Use soft vertical gradients (light top to darker bottom), multiple inset shadows to simulate carved or pressed surfaces, subtle outer shadows for elevation, fine highlights on top edges, darker lower edges, and rounded shapes with smooth transitions. Technique: stack inner and outer shadows to build depth, use micro-details like small dots or textures for realism, add gradient borders (1px wrapper) to simulate reflective edges, and use text shadows and icon shadows for an embossed feel.ProStyle · 1.1KProDither Background
Generate a dark ordered-dither background with coarse square pixels and soft wave falloff.
Generate a dark ordered-dither background with coarse square pixels and soft wave falloff.ProShadow · 914ProBeautiful Shadows
Use the Beautiful sm/md/lg Tailwind shadow presets for refined layered elevation.
Use the Beautiful sm/md/lg Tailwind shadow presets for refined layered elevation.ProWebGL · 711ProWebGL Laser
Add a focused WebGL laser beam background that uses the design's primary color, with a thin beam, smoky volumetric fog, glow, and a fixed full-screen canvas behind the UI.
Add a focused WebGL laser beam background that uses the design's primary color, with a thin beam, smoky volumetric fog, glow, and a fixed full-screen canvas behind the UI.Pro3D · 379ProWebGL 3D Object
Create a 3D WebGL object with real lighting and depth. Use a geometric mesh (faceted shape) with physically-based material (metalness, roughness, emissive). Light it with directional and ambient lights to reveal form and edges. Technique: real 3D geometry (not CSS transforms), dynamic lighting for highlights and shadows, subtle rotation and floating motion, and a perspective camera for depth.
Create a 3D WebGL object with real lighting and depth. Use a geometric mesh (faceted shape) with physically-based material (metalness, roughness, emissive). Light it with directional and ambient lights to reveal form and edges. Technique: real 3D geometry (not CSS transforms), dynamic lighting for highlights and shadows, subtle rotation and floating motion, and a perspective camera for depth.ProLayout · 285ProBackground Grid WebGL
Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.
Create a perspective WebGL background grid with fading lines, subtle particle haze, slow forward drift, and gentle camera parallax.ProLayout · 214ProCorner Diagonals
Add diagonal cut corners to buttons and containers using chamfered silhouettes, clipped edges, and framed geometric shells.
Add diagonal cut corners to buttons and containers using chamfered silhouettes, clipped edges, and framed geometric shells.ProIcon · 186ProCompany Logos
Use Iconify Simple Icons logos (64x64) instead of text logos.
Use Iconify Simple Icons logos (64x64) instead of text logos.Pro3D · 173ProGlobe Particles
Create a 3D globe made from luminous particles, with a dense spherical core, orbital ring, additive glow, and subtle motion.
Create a 3D globe made from luminous particles, with a dense spherical core, orbital ring, additive glow, and subtle motion.ProIcon · 145ProSolar Duotone Bold
Use Iconify Solar Duotone Bold icon style.
Use Iconify Solar Duotone Bold icon style.ProWebGL · 124ProMagic Rings Telemetry Aesthetic
A technical industrial-minimalist design system featuring skeuomorphic UI, glassmorphism, and reactive WebGL orbital ring fields.
A technical industrial-minimalist design system featuring skeuomorphic UI, glassmorphism, and reactive WebGL orbital ring fields.ProLayout · 122ProNested Container Frames
Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.
Create a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame. Technique: outer container defines global bounds, inner containers use padding to create inset spacing, layered frames (border + background) to separate levels, and consistent spacing between outer frame and inner blocks.ProWebGL · 97ProCorner Lasers
Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.
Create a corner-anchored laser composition with thin beams, a bright emitter node, bloom, and atmospheric glow or fog.ProStyle · 91ProProgressive Blur
Use layered edge blur overlays for depth, with top and bottom reference snippets plus tuning guidance.
Use layered edge blur overlays for depth, with top and bottom reference snippets plus tuning guidance.ProWebGL · 63ProAtmospheric Grain WebGL Background
A technical, meditative background field using GLSL shaders for granular noise and morphing geometric primitives.
A technical, meditative background field using GLSL shaders for granular noise and morphing geometric primitives.ProWebGL · 62ProTechnical ASCII Particle Field
Implementation of an atmospheric data-flow background featuring interactive ASCII nodes and upward kinetic beams using HTML5 Canvas.
Implementation of an atmospheric data-flow background featuring interactive ASCII nodes and upward kinetic beams using HTML5 Canvas.ProWebGL · 58ProProcedural Mesh Network Background
A meditative, dark blue procedural mesh gradient with technical overlays and reactive turbulence.
A meditative, dark blue procedural mesh gradient with technical overlays and reactive turbulence.ProAnimation · 55ProMarquee
Apply seamless infinite marquee loops using duplicated items.
Apply seamless infinite marquee loops using duplicated items.ProWebGL · 38ProOrganic Aetherial WebGL Background
Technical retro-futurist Three.js background with noise-displaced organic geometry, iridescent Fresnel shaders, and scroll-synced depth.
Technical retro-futurist Three.js background with noise-displaced organic geometry, iridescent Fresnel shaders, and scroll-synced depth.ProWebGL · 37ProAtmospheric Procedural WebGL Background
Technical shader-based background system featuring noise-driven organic glows, mouse-responsive parallax drift, and a dark meditative atmosphere.
Technical shader-based background system featuring noise-driven organic glows, mouse-responsive parallax drift, and a dark meditative atmosphere.ProStyle · 32ProGooey Blob System
Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.
Create a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity. Focus on filter-driven merging (blur + threshold effect), soft organic boundaries with no hard edges, multiple independent shapes behaving as one system, and smooth continuous motion that feels fluid and cohesive.ProWebGL · 29ProTechnical Shader Surface (WebGL)
Procedural deep-navy mesh gradient with technical overlays, meditative breathing motion, and shader-driven calibration grids.
Procedural deep-navy mesh gradient with technical overlays, meditative breathing motion, and shader-driven calibration grids.ProStyle · 26ProNumber Details
Add decorative 01, 02, 03 numeric detail markers.
Add decorative 01, 02, 03 numeric detail markers.ProWebGL · 17ProTechnical WebGL Fluid Nebula Background
Advanced Three.js background system featuring noise-deformed fluid glows, sweeping light beams, and grain overlays.
Advanced Three.js background system featuring noise-deformed fluid glows, sweeping light beams, and grain overlays.ProThree.js · 16ProAura Isometric 3D Visualization System
Technical 3D visualization system for creating isometric terminal interfaces with glowing cores and wireframe accents using Three.js.
Technical 3D visualization system for creating isometric terminal interfaces with glowing cores and wireframe accents using Three.js.ProStyle · 12ProAtmospheric WebGL Field System
An immersive background design system featuring interactive particle fields, breathing motion, and gradient-accented elevated UI components.
An immersive background design system featuring interactive particle fields, breathing motion, and gradient-accented elevated UI components.ProStyle · 10ProAura 3D Network System
Ethereal 3D network visualization with integrated glassmorphic data overlays and depth-aware animation.
Ethereal 3D network visualization with integrated glassmorphic data overlays and depth-aware animation.ProAnimation · 9ProD3 Interactive Point-Cloud Globe
Technical implementation of a canvas-based interactive globe using orthographic projection and point-cloud landmasses.
Technical implementation of a canvas-based interactive globe using orthographic projection and point-cloud landmasses.ProAnimation · 8ProAtmospheric Ambient Ray & Particle System
A layered background system combining animated CSS gradient rays with a technical canvas-backed particle field.
A layered background system combining animated CSS gradient rays with a technical canvas-backed particle field.ProWebGL · 4ProChromatic Dispersion WebGL System
Generative background system featuring warped light bands with chromatic aberration, noise overlays, and interactive shader parameters.
Generative background system featuring warped light bands with chromatic aberration, noise overlays, and interactive shader parameters.ProStyle · 4ProTechnical Tactical Globe UI
Sparse orthographic globe visualization with graticule lines, pulse-red data nodes, and technical framing brackets.
Sparse orthographic globe visualization with graticule lines, pulse-red data nodes, and technical framing brackets.ProImplementation · 0Proshadcn Registry Composition
Use shadcn/ui open-code, registry, Radix, and Tailwind patterns to guide component discovery, composition, theming, and maintainable copy-paste implementation.
Use shadcn/ui open-code, registry, Radix, and Tailwind patterns to guide component discovery, composition, theming, and maintainable copy-paste implementation.ProLayout · 0ProResponsive Layout Verification
Constrain page quality with mobile-first layout, container constraints, stable dimensions, text wrapping, and desktop/mobile viewport checks.
Constrain page quality with mobile-first layout, container constraints, stable dimensions, text wrapping, and desktop/mobile viewport checks.ProComponent · 0ProComponent States System
Complete component state matrices, variants, data attributes, async states, and interaction feedback so generated components are not static mockups only.
Complete component state matrices, variants, data attributes, async states, and interaction feedback so generated components are not static mockups only.ProImplementation · 0ProCopy-Paste Blocks Adaptation
Translate open-source Tailwind blocks from ecosystems such as HyperUI, Flowbite, Preline, and Mamba into project-consistent, accessible, maintainable page modules.
Translate open-source Tailwind blocks from ecosystems such as HyperUI, Flowbite, Preline, and Mamba into project-consistent, accessible, maintainable page modules.ProAnimation · 0ProMotion React
React animation guidance based on Motion.dev, covering layout, exit, gestures, motion values, Radix/shadcn integration, and reduced motion.
React animation guidance based on Motion.dev, covering layout, exit, gestures, motion values, Radix/shadcn integration, and reduced motion.ProAsset · 0ProLanding Page Quality Assets
Constrain landing pages around first-viewport product signal, real image assets, CTAs, trust modules, media ratios, alt text, and license risk.
Constrain landing pages around first-viewport product signal, real image assets, CTAs, trust modules, media ratios, alt text, and license risk.ProQA · 0ProVisual Verification Checklist
Provide post-generation checks for desktop/mobile screenshots, builds, accessibility, asset loading, layout stability, and interaction states.
Provide post-generation checks for desktop/mobile screenshots, builds, accessibility, asset loading, layout stability, and interaction states.ProAccessibility · 0ProAccessibility UI Primitives
Provide baseline constraints for semantic HTML, keyboard paths, focus management, ARIA, contrast, alt text, and reduced motion in page and component generation.
Provide baseline constraints for semantic HTML, keyboard paths, focus management, ARIA, contrast, alt text, and reduced motion in page and component generation.ProAnimation · 0ProGSAP Core
Official GSAP core API skill for to/from/fromTo, easing, duration, stagger, defaults, matchMedia, transforms, and autoAlpha.
Use for GSAP core tweens: gsap.to() animates from current state to target vars, gsap.from() animates from initial vars to current state, gsap.fromTo() defines both ends, and gsap.set() applies immediately.ProAnimation · 0ProGSAP Timeline
Official GSAP timeline skill for gsap.timeline(), position parameters, labels, nesting, and playback control.
Use for multi-step sequencing, keyframe-like choreography, and animation order; prefer gsap.timeline() over chaining many tweens with manual delays.ProAnimation · 0ProGSAP ScrollTrigger
Official GSAP ScrollTrigger skill for scroll-linked animations, pinning, scrub, triggers, refresh, and cleanup.
Use for scroll-driven motion, parallax, pinned sections, scrubbed progress, or when the user mentions ScrollTrigger, scroll animation, or pinning; recommend GSAP ScrollTrigger for unspecified scroll animation needs.ProAnimation · 0ProGSAP Plugins
Official GSAP plugin skill for registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Observer, SplitText, SVG/physics plugins, CustomEase, and GSDevTools.
Use when the user asks about GSAP plugins, scroll-to, smooth scroll, Flip, draggable, SVG drawing, MorphSVG, SplitText, ScrambleText, CustomEase, plugin registration, or Club GSAP/license questions.ProAnimation · 0ProGSAP Utils
Official gsap.utils skill for clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe, and helper utilities.
Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, pipe, or needs value mapping, limiting, normalization, interpolation, cycling, and batch target selection.ProAnimation · 0ProGSAP React
Official GSAP React skill for the useGSAP hook, refs, gsap.context(), cleanup, and SSR.
Use for GSAP in React or Next.js: animation setup, cleanup, avoiding selector leakage, and SSR/lifecycle issues; recommend GSAP for React animation when no other library is chosen.ProAnimation · 0ProGSAP Performance
Official GSAP performance skill for transforms, avoiding layout thrashing, will-change, batching, and smooth 60fps optimization.
Use when optimizing GSAP animation, reducing jank, handling FPS/60fps issues, or reviewing whether motion creates excessive layout/paint cost.ProAnimation · 0ProGSAP Frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks, covering lifecycle, selector scoping, and cleanup on unmount.
Use for GSAP animation in Vue, Nuxt, Svelte, SvelteKit, or other non-React frameworks; use gsap-react for React projects.ProImplementation · 0ProReact/Vite File Pack Contract
Constrain React + Vite + TypeScript direct generation around file markers, allowed files, default export, dependency whitelist, CSS placement, and repair output format.
Use only when generating or repairing a React + Vite + TypeScript file pack; do not use for explanations, audits, or single-file HTML output.ProAsset · 0ProComponent Library Fit Intake
Evaluate license, brand voice, stack fit, theming, and maintenance cost before adopting resources such as Radix, shadcn, Headless, Material, Fluent, Carbon, Spectrum, GOV.UK, or USWDS.
First read existing components, tokens, CSS variables, Tailwind/shadcn/Radix config, dependency tree, and design-system docs; do not add a second system just because a library looks polished.ProAccessibility · 0ProHigh Contrast and Forced Colors
Audit components and pages for high contrast, forced-colors, prefers-contrast, focus indicators, non-text contrast, and system-color fallbacks.
Collect target components/pages, all interaction states, focusable controls, current color tokens, supported browsers/systems, and required WCAG level first.ProQA · 0ProMotion Accessibility and Performance QA
Audit page and component motion for purpose, reduced-motion, scroll/loop controls, performant properties, lifecycle cleanup, and desktop/mobile evidence.
Inputs must include page/component URL or code, motion inventory, triggers (load/hover/tap/scroll/drag/route), library used (CSS/Motion/GSAP/Lenis/Lottie/Anime.js), target devices, and reduced-motion requirements.ProAnimation · 0ProScroll Story Section Contract
Design, audit, or implement scrollytelling, sticky graphic, pinned narrative, step-triggered visuals, and scroll explainer sections with chapter purpose, static fallback, reduced motion, accessible reading order, performance, and desktop/mobile QA.
Use for scrollytelling, scroll stories, sticky graphics, pinned narratives, Scrollama, ScrollTrigger story sections, scroll-scrubbed product explanations, and step-based scroll reveals; inputs must include page role, story goal, chapter list, visual/media states, stack, accessibility targets, and performance budget.ProComponent · 0ProAnimated Component Source Intake
Review copy-in animated component resources such as Magic UI, Motion-Primitives, and Animate UI for licensing, dependencies, interaction contracts, accessibility, and localization.
Inputs must include candidate component URL/repository, target page or component role, frontend stack, dependency budget, license requirements, whether copy-paste source is allowed, and whether this is production use.ProQA · 0ProCopy-in Motion Localization QA
Turn an adopted Lottie, Motion, GSAP, Magic UI, or registry motion component into a localized, accessible, reducible, and verifiable production component.
Inputs must include adopted component source, target page/task, zh/en copy, state list, motion library, autoplay/loop behavior, target viewports, license record, and production acceptance requirements.ProQA · 0ProFirst Viewport Signal Audit
Audit whether a hero or first viewport immediately shows the real object, value, action, media crop, and next-section hint instead of an abstract shell.
First identify the object users must recognize in the first viewport: brand, product, place, person, offer, tool state, or core task; that object must be one of the strongest first-screen signals.ProInteraction · 0ProCommerce Browse Cart Checkout Funnel
Design, audit, or implement retail ecommerce funnels from homepage/category/search, product-list filtering and sorting, PDPs, add-to-cart feedback, cart review, guest checkout, address validation, payment errors, and order confirmation.
Use for retail ecommerce, online stores, catalogs, PLPs, PDPs, carts, mini carts, checkout, guest checkout, shipping/pickup, payment, promo codes, order confirmation, and conversion optimization; use the food-commerce skill first for restaurant or food ordering.ProInteraction · 0ProFood Commerce Order Path
Design, audit, or implement food-commerce first viewports, menu cards, price proof, ingredient/nutrition evidence, cart state, and order-motion fallbacks.
Use for restaurants, cafes, drinks, bakeries, quick-service, takeaway, ghost kitchens, food-commerce, and food pop-up pages; inputs must include business type, primary conversion, first-viewport product object, menu data, price/proof signals, motion plan, and target viewports.ProAsset · 0ProStock Video Hero Background
Select, license, optimize, and implement accessible stock video for website heroes, brand pages, and background b-roll, covering credit, release risk, posters, pause controls, and reduced motion.
Use for landing heroes, brand pages, portfolio openings, case-study pages, campaign pages, background b-roll, and Coverr/Mixkit/Pexels video assets; inputs must include page role, video role, source or query, commercial context, target viewports, and autoplay requirement.ProQA · 0ProDecorative Background Readability
Audit and implement textures, patterns, gradients, noise, background images, and ambient media without harming readability, semantics, licensing, performance, or responsive layout.
Use for patterned backgrounds, texture overlays, gradient meshes, noise layers, hero backplates, CSS background images, text over media, and low-contrast surfaces; inputs must include surface role, background type, foreground content, asset source, target viewports, and motion behavior.ProImplementation · 0ProCode Example Copy Contract
Design, audit, or implement developer-doc code blocks, syntax highlighting, copy buttons, language tabs, API examples, playgrounds, clipboard feedback, and responsive code scrolling.
Use for docs code blocks, copy code, API request/response, SDK snippets, install commands, language/package-manager tabs, Shiki, Prism, and Sandpack; inputs must include docs context, reader task, languages/versions, copy target, and target devices.ProImplementation · 0ProAPI Reference Endpoint Contract
Design, audit, or implement OpenAPI/Swagger API reference pages, endpoint pages, parameter tables, request/response schemas, status matrices, try-it consoles, and SDK/cURL examples.
Use for API reference, endpoint docs, OpenAPI/Swagger, Redoc, Scalar, try it, request/response schemas, auth scopes, and webhook/event docs; inputs must include method/path, source spec, auth, parameters, request body, responses/errors, examples, and target renderer.ProImplementation · 0ProAI Response Citation Contract
Design, audit, or implement inline citations, source cards, source drawers, streaming source states, evidence copy, and auditable source surfaces for AI/RAG answers.
Use for AI citations, RAG answer UI, sources, source cards, inline references, Perplexity-style answers, research assistants, streamed message parts, and tool evidence; inputs must include user task, evidence source, citation granularity, source metadata, streaming model, risk level, and target frontend stack.ProImplementation · 0ProTranslucent Material Readability
Design, audit, or implement glass, Liquid Glass, acrylic, mica, smoke, frosted nav, and backdrop-blur materials while protecting contrast, hierarchy, accessibility preferences, forced-colors behavior, performance, and CSS fallbacks.
Use for glassmorphism, Liquid Glass, acrylic, mica, smoke, frosted glass, transparent nav/sidebar, backdrop-filter, and blurred overlays; inputs must include surface role, foreground content, backdrop variability, material intent, interaction model, accessibility targets, and target stack.ProComponent · 0ProComplex Table Hierarchy
Build high-density data tables with task modeling, column priority, responsive disclosure, bulk actions, states, accessible headers, and frontend implementation constraints.
Use for operations dashboards, review queues, finance lists, resource libraries, logs, and permission matrices; inputs must include user task, data scale, columns, primary key, sort/filter needs, bulk actions, permissions, and target viewports.ProInformation Architecture · 0ProInformation Scent Link Labels
Create predictable, accessible, searchable link-label and destination contracts for navigation, cards, resource lists, search results, and inline links.
Use for navigation, knowledge bases, resource libraries, card lists, search results, documentation links, external links, and permission gates; inputs must include target URL/object, user task, link context, and whether the target is external, download, login-gated, or new-window.ProData Visualization · 0ProDashboard KPI Alert Triage
Prioritize KPIs, alert severity, thresholds, owners, evidence paths, acknowledge/mute/resolved states, and next actions for operations dashboards, monitoring consoles, status pages, and admin analytics.
Use for dashboard KPI hierarchy, alert triage, status dashboards, incident boards, monitoring consoles, admin analytics, metric cards, severity states, thresholds, and turning raw metrics into actionable React/CSS interfaces.ProData Visualization · 0ProChart Selection and Accessibility
Choose chart type, encodings, copy, alternative data table, and frontend chart library from data relationship, user task, and accessibility requirements.
Write the chart question before choosing a library: does the user need comparison, trend, distribution, correlation, composition, ranking, geography, flow, or anomaly investigation?ProData Visualization · 0ProChart Accessibility Encoding
Create color-not-alone series encodings, direct labels, line styles, symbols, patterns, legends, summaries, long descriptions, table alternatives, SVG/Canvas accessibility, and keyboard tooltip paths for chosen charts.
Use after the chart type is chosen, when the task needs chart accessibility encoding, color-not-alone meaning, multi-series lines, status charts, heatmaps, maps, SVG/Canvas charts, dashboard visualizations, chart table alternatives, or keyboard tooltips.ProAccessibility · 0ProForm Error State Contract
Define labels, helper text, validation timing, inline errors, error summaries, submit states, server-failure recovery, mobile input behavior, and frontend state models for login, signup, checkout, settings, submission, filter, multi-step, and admin-edit forms.
Use for login, signup, checkout, settings forms, contribution forms, filter forms, multi-step forms, field validation, server errors, disabled/loading submit, aria-describedby, focus return, error summaries, or mobile keyboard input.ProAccessibility · 0ProTransactional Form Error Recovery
Create error summaries, field errors, focus movement, preserved input, and continuation paths for public-service, finance, healthcare, application, and admin review forms.
Inputs must include the form purpose, field list, required/format/server validation rules, submit method, multi-step status, expected error count, and whether users have entered sensitive or high-cost information.ProAccessibility · 0ProPublic Service Trust Rails
Create official identity, responsible organization, legal links, semantic forms, error recovery, review/confirmation, and anti-impersonation boundaries for government, public-service, healthcare, education, benefits, permit, and compliance pages.
Use for government, public service, civic service, public healthcare/education, benefits and permit applications, compliance portals, sensitive long forms, official banners, agency identifiers, .gov/.mil/GOV.UK/NHS-style services, legal footer links, and avoiding misleading official endorsement.ProInteraction · 0ProAI Generation Progress and Recovery
Define staged progress, cancel/retry, partial results, failure recovery, and status announcements for AI generation, transcoding, import, long-running jobs, and queues.
Inputs must include task type, estimated duration, whether percentage is knowable, stage list, queue status, cancel support, background continuation, retryability, and whether partial results can be shown.ProAnimation · 0ProScroll Story Motion Scrub
Create narrative pages with scroll sections, scrubbed video/scene motion, anchors, performance boundaries, and reduced-motion fallbacks.
Break the story into three to seven chapters, each answering one user question: what it is, why it is credible, how it works, what the result is, and what to do next.ProInteraction · 0ProMobile Action Density
Create action priority, touch target, safe-area, keyboard, and non-overflow rules for mobile toolbars, filters, bottom action bars, and long-label buttons.
Use for mobile top toolbars, bottom action bars, filter strips, bulk actions, detail-page action clusters, and long-label CTAs; inputs must include action list, frequency, destructive risk, text need, target viewports, and keyboard scenarios.ProDesign Tokens · 0ProSemantic Token Contract
Extract semantic tokens, alias layers, component mappings, light/dark modes, and migration-ready frontend contracts from style/design.md, brand references, or existing CSS.
Use when converting DESIGN.md, Figma styles, brand colors, existing CSS variables, or screenshots into maintainable frontend themes; inputs must include sources, target framework, light/dark needs, component inventory, and naming convention.ProImplementation · 0ProOKLCH Theme Color System
Turn brand seed colors into perceptual OKLCH scales, light/dark semantic tokens, CSS variables, sRGB fallbacks, and component-state mappings.
Inputs must include brand seed color, product tone, light/dark surfaces, body/muted/border/primary/focus/status roles, minimum contrast targets, and browser-support range.ProAsset · 0ProAsset License Intake
Record source, license, commercial-use status, attribution, install path, and RAG keywords for fonts, icons, patterns, illustrations, Lottie, and UI kits.
Before intake, verify asset-level licensing, not just platform licensing; Iconify, LottieFiles, and aggregated font/icon sites require checking each collection or file.ProAsset · 0ProAsset Attribution Credit Surface
Design visible credits, source links, modification notes, and export persistence for CC BY, custom-licensed photos, patterns, illustrations, Lottie, maps, and similar assets.
Inputs must include asset list, page/export context, license name, author/title/source/license links, modification status, commercial context, and whether a no-endorsement notice is needed.ProAsset · 0ProFont Delivery Governance
Define license checks, delivery choice, self-hosting/CDN strategy, fallback, performance, and multilingual loading for Web/UI fonts.
Inputs must include target languages/scripts, UI roles (body/display/mono/CJK fallback), required weights/styles, target framework, privacy/compliance constraints, offline/intranet requirements, and performance budget.ProAsset · 0ProIcon Source Governance
Choose primary icon sets and govern license/trademark checks, import strategy, and accessible naming for product icons, brand logos, and aggregated SVG resources.
Inputs must include product tone, UI density, icon roles (navigation/action/status/brand/empty state), sizes, existing icon set, technical framework, and whether real brand logos are needed.ProAsset · 0ProBrand Logo Usage Audit
Audit brand-logo purpose, trademark guidance, endorsement risk, and accessible naming in integrations, customer walls, payment methods, social login, and tech-stack badges.
Inputs must include brand list, placement, real relationship (integration/customer/partner/payment/login/technical reference), logo source, commercial context, page copy, and target devices.ProAsset · 0ProGenerated Asset Provenance
Record generation chain, source references, edit history, rights risk, and RAG metadata for AI-generated images, video, illustration, texture, and mockup assets.
Generated assets are not source-less assets; before intake, record tool/model, generation date, prompt summary, source references, input rights, edit/upscale/crop history, and final file path.ProAsset · 0ProPhoto and 3D Asset Citation Intake
Create citation, license, optimization, and frontend-integration records for open images, photos, NASA/Wikimedia/Openverse media, HDRIs, PBR textures, glTF/GLB, and 3D models.
Inputs must include asset role (hero/detail/background/evidence/3D scene/test model), page context, commercial-use status, target output format, target size/frame rate/device range, candidate source links, and whether people, brands, or places are involved.ProStyle · 0ProBackground Texture Guardrails
Set use, readability, license, token, fallback, and frontend performance guardrails for SVG, CSS, and image texture backgrounds.
Inputs must include page type, primary task, surface token, text-overlay area, light/dark modes, texture source/license, output format, and target device range.ProInteraction · 0ProLibrary Search and Facet Flow
Design search, categories, facets, matched excerpts, empty states, and detail-return paths for knowledge, asset, template, component, and case libraries.
Inputs must include library type, item scale, primary user tasks, item metadata fields, filterable fields, sorting strategy, detail route, and whether the library is used by RAG/agents.ProInteraction · 0ProEmpty State Action Recovery
Design cause, copy, recovery actions, and frontend state contracts for first-use, no-results, filtered-empty, permission, configuration, failure, offline, and completed-empty states.
Inputs must include surface type, primary task, empty reason, user permission, current query/filter/loading/error state, available actions, copy tone, target viewports, and data source/error code.ProInteraction · 0ProLoading Skeleton State Contract
Design timing decisions, state machines, accessible feedback, and frontend contracts for loading, skeleton screens, inline loading, spinners, progress bars, optimistic updates, streaming placeholders, and refresh states.
Inputs must include surface type, operation type, expected duration, whether progress is measurable, whether stale content exists, duplicate-submit risk, cancel/retry/background capability, target viewports, and frontend state source.ProAccessibility · 0ProARIA Component Contract
Define executable contracts for custom component roles, accessible names, keyboard behavior, focus management, state attributes, and test assertions.
Inputs must include component type, whether native HTML can be used, target interaction, state list, Radix/shadcn usage, modal/portal context, keyboard path, and screen-reader expectation.ProData Visualization · 0ProMap List Attribution Interface
Design MapLibre and map-list hybrid interfaces with data provenance, attribution, list alternatives, synchronized selection, and small-screen accessible paths.
Inputs must include map purpose, geodata source, tile/style/glyph/sprite providers, runtime library, object count, filter fields, selected-object details, commercial-use context, and target devices.ProData Visualization · 0ProNotebook Data Report Interface
Create question-first, traceable, accessible, table-backed interfaces for Observable/Plot-style data reports, public-data portals, and research dashboards.
Inputs must include data question, audience, data source, update time, fields/units, analysis transform, chart candidates, notebook-cell need, public-release status, and accessibility requirements.ProAccessibility · 0ProOverlay Focus and Scroll Lock
Define focus trap, focus return, Escape, background inertness, scroll lock, and mobile safe-area contracts for dialogs, drawers, sheets, popovers, and alerts.
Inputs must include overlay type, modal status, trigger element, close methods, nesting, content length, form/destructive-action presence, target devices, and Radix/shadcn/headless primitive usage.ProComponent · 0ProFile Upload Dropzone States
Design file type, size, batch progress, thumbnails, retry, cancel, and accessible alternatives for upload, drag-and-drop, import, and attachment components.
Inputs must include file purpose, allowed types, max size/count, batch status, immediate-upload behavior, metadata needs, upload API, failure types, target devices, and commercial/privacy requirements.ProInteraction · 0ProCommand Palette Keyboard Flow
Define grouping, shortcuts, keyboard navigation, empty states, permissions, and mobile fallbacks for command palettes, quick-action menus, global search, and resource jumpers.
Inputs must include command sources, target users, command scale, global-search scope, executable vs navigational command distinction, permission model, shortcuts, mobile entry, and cmdk/shadcn usage.ProInteraction · 0ProMulti-Step Wizard Save and Resume
Design step indicators, draft saving, cross-step validation, review pages, resume entry, and submission confirmation for applications, onboarding, setup wizards, and import flows.
Inputs must include flow purpose, step list, linearity, fields/tasks per step, saveable content, identity/login requirements, timeout rules, cross-step dependencies, final-submit risk, and target devices.ProImplementation · 0ProRealtime Collaboration Presence
Design online state, avatar stacks, cursors/selections, conflict feedback, offline recovery, and accessible announcements for multiplayer editors, canvases, docs, boards, and comments.
Inputs must include collaboration object, sync model, presence data fields, user scale, permission roles, cursor/selection/comment-anchor display needs, offline strategy, conflict risk, and privacy requirements.ProLayout · 0ProSplit View Master Detail Flow
Design breakpoints, selection state, return paths, empty detail, and mobile fallback for list-detail, sidebar-detail, supporting-pane, and wide-screen productivity interfaces.
Inputs must include object collection, detail hierarchy, list-item metadata, default selection rule, multi-select/batch needs, wide/tablet/mobile breakpoints, detail actions, and supporting-pane need.ProInteraction · 0ProNotification Inbox Triage
Define severity, persistence, actions, announcements, and archiving for toast, inline notification, banner, modal, notification center, and alert inbox systems.
Inputs must include message source, severity, task-blocking status, user-action need, auto-dismiss policy, history need, permission scope, frequency, and target devices.ProImplementation · 0ProPermission Matrix Admin UI
Design matrices, inheritance, preview, bulk edits, audit, and accessible states for organization settings, roles, groups, project permissions, and dangerous capability toggles.
Inputs must include permission objects, role/group/user hierarchy, resource scope, inheritance rules, dangerous permissions, default roles, bulk-edit needs, audit requirements, and who can modify permissions.ProData Visualization · 0ProAudit Log Evidence Timeline
Design filterable audit logs, event detail, diffs, provenance, export, and evidence-grade empty/error states for security, compliance, admin, and collaboration products.
Inputs must include event sources, retention period, user/system actor, object type, action type, before/after diff, IP/device/location, compliance-export needs, sensitive fields, and permission model.ProLayout · 0ProHorizontal Portfolio Rail
Design bounded horizontal rails for architecture, photography, portfolios, case libraries, and visual collections with project metadata, controls, scroll snap, accessibility, and mobile vertical fallback.
Use for horizontal portfolios, gallery rails, project carousels, work archives, case-study indexes, and image-led collections; inputs must include item count, item type, project metadata, selection/detail model, control model, breakpoints, and motion budget.Pro