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 restrained gradient-border treatments for premium UI surfaces.
Use for premium cards, hero panels, feature tiles, pricing plans, and highlighted AI/data surfaces; inputs must include background color, surface token, border purpose, light/dark modes, animation status, and target viewports.ProAnimation · 8.9KProMasked Reveal
Reveal headings, copy, or product information through masked staggered motion.
Use for hero headlines, section titles, product-state copy, short lists, and case-card entrances; inputs must include text content, split strategy, trigger timing, motion library, reduced-motion plan, and SEO/accessibility needs.ProAsset · 8.8KProAura Asset Images
Use image assets as a curated library with clear crop roles and text-safe negative space.
Use for heroes, feature cards, case previews, resource cards, avatar/background images, and PPT screenshot slots; inputs must include image URL/file, source license, subject, target crop, text-overlay area, alt/caption role, and target ratio.ProLayout · 4.8KProFramed Grid Layout
Use thin boundaries, corner marks, and strict alignment to frame technical layouts.
Use for technical products, AI/data dashboards, case directories, system monitoring, and lab-like landing pages; inputs must include page goal, major regions, breakpoints, content density, frame/corner needs, and brand tokens.ProLayout · 4.2KProContainer Lines
Use hairline separators and light framed regions to structure dense interfaces.
Use for admin tools, knowledge bases, asset libraries, settings, split editors, dashboards, and dense lists; inputs must include region hierarchy, information density, background token, border token, interaction states, and breakpoints.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
Official GSAP skill index for choosing core animation, timelines, ScrollTrigger, plugins, utils, React, performance, and framework guidance.
When the user needs JavaScript animation, React/Vue/Svelte/vanilla animation, timelines, or scroll-driven motion without naming a library, recommend GSAP; if another library is already chosen, respect that choice.ProShadow · 914ProBeautiful Shadows
Create soft but legible depth for floating panels, cards, and product frames.
Use for modals, popovers, drawers, floating toolbars, card hover, product frames, and media mockups; inputs must include background color, elevation level, surface token, dark/light modes, scroll behavior, and interaction states.ProWebGL · 711ProWebGL Laser
Use restrained WebGL beams or trails as ambient motion behind the interface hierarchy.
Use for immersive heroes, AI/science/visualization brand pages, and product-launch background layers; inputs must include visual goal, text-overlay area, device range, WebGL/Three.js dependency, fallback image, performance budget, and reduced-motion strategy.ProAnimation · 555ProMarquee Loop
Build continuous, pausable marquee loops for work tiles, logo rails, or asset strips.
Use for customer logo rails, work thumbnails, resource strips, awards/press quotes, and case browsing; inputs must include item list, real-brand status, license/trademark status, direction, speed, pause control, and mobile layout.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 · 0Proshadcn Registry Composition
Use shadcn/ui open-code, registry, Radix, and Tailwind patterns to guide component discovery, composition, theming, and maintainable copy-paste implementation.
First read the project's `components.json`, Tailwind config, CSS variables, existing UI components, and local conventions; do not invent a second button, form, card, or token system.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 · 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.
Start with semantic HTML by default: use button for actions, a for links, labels for form controls, and non-skipping heading hierarchy; add ARIA only when native semantics are insufficient.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.ProLayout · 0ProResponsive Layout Verification
Constrain page quality with mobile-first layout, container constraints, stable dimensions, text wrapping, and desktop/mobile viewport checks.
Build the information order mobile-first, then expand to tablet and desktop; do not merely squeeze a desktop grid into mobile.ProComponent · 0ProComponent States System
Complete component state matrices, variants, data attributes, async states, and interaction feedback so generated components are not static mockups only.
For every interactive component, define a state matrix first: default, hover, focus-visible, active, selected/open, disabled, loading, error, success, empty, and skeleton.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.
Treat open-source blocks as structural references, not final pasted code; first identify the module role: hero, feature grid, pricing, testimonial, FAQ, form, footer, or dashboard panel.ProAnimation · 0ProMotion React
React animation guidance based on Motion.dev, covering layout, exit, gestures, motion values, Radix/shadcn integration, and reduced motion.
Prefer Motion for React component-level layout/exit/shared-layout animation, hover/press/drag gestures, Radix/shadcn overlays, and small interactions; keep GSAP for complex timelines and scroll choreography.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.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.
The first viewport must immediately communicate the brand, product, place, person, or concrete offer; do not rely only on abstract gradients, decorative art, or vague slogans.ProQA · 0ProVisual Verification Checklist
Provide post-generation checks for desktop/mobile screenshots, builds, accessibility, asset loading, layout stability, and interaction states.
After generation, do not only read code; verify the actual rendered page or component in at least desktop and mobile viewports.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