Interface Lab

Interface Lab Library

LibrarySkills119 items

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.

Skills119
Website Systems93
PPT Styles55
Assets232
Skills

Prompt Skills

Local expression layer: layout, motion, borders, shadows, WebGL, and copy-ready prompt techniques.

Open Style
Implementation · 0Pro

shadcn 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.Pro
Implementation · 0Pro

Copy-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.Pro
Implementation · 0Pro

React/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.Pro
Implementation · 0Pro

Code 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.Pro
Implementation · 0Pro

API 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.Pro
Implementation · 0Pro

AI 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.Pro
Implementation · 0Pro

Translucent 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.Pro
Implementation · 0Pro

OKLCH 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.Pro
Implementation · 0Pro

Realtime 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.Pro
Implementation · 0Pro

Permission 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.Pro