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.
Framed 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.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.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.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.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.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