Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Scroll Container Ownership Contract
Long pages, libraries, and workbenches must define one primary scroll owner; declare scroll ownership before combining nested `height: 100vh`, `overflow: hidden/auto`, and sticky panels.
Scrolling is not incidental browser behavior; it is a layout contract. Decide who owns page scroll, who owns local scroll, which panels are sticky, and how mobile reflows before implementation.97%Interaction Responsive Motionoverlay / dialogOverlay Focus and Scroll Lock Contract
An overlay is not just a scrim; it is a contract across modality, initial focus, focus containment, dismissal, inert background, scroll locking, portal stacking, and mobile safe areas.
Whenever an overlay changes the interactive scope, keyboard, screen reader, pointer, scroll, and mobile behavior must be governed together; a visually covered but semantically reachable background is the most dangerous fake modal.96%Design Systems Page Patternssearch / filtersSearch and Filter UX Contract
Search, filters, facets, and sorting must explain the current result set together: query, scope, constraints, why results appear, and how to recover.
A retrieval interface is a state machine. Every query, facet selection, sort change, or reset should expose result count, active filters, matched excerpts, empty-result recovery, and shareable URL state.96%Frontend Implementationtables / responsiveResponsive Data Table Disclosure Contract
Complex data tables should not simply shrink text or force horizontal scrolling on mobile; define primary key, column priority, alternate presentation, header relationships, and batch/row action boundaries.
A data table is a comparison structure. Responsive treatment must preserve comparison relationships and accessible semantics, not only the desktop visual appearance.95%Interaction Responsive Motionforms / validationForm Error State Contract
A form error state contract puts labels, helper text, validation timing, inline errors, error summaries, submit states, server failures, mobile keyboards, and ARIA wiring into one implementable model.
Form errors are not one red component; they combine field contracts, state machines, and recovery paths, and should route to narrower guidance for summaries, accessible feedback, persistent labels, and transactional recovery.95%Design Systems Page Patternspatterns / flowReal Product Flows as Pattern Evidence
Pattern libraries should extract tasks, states, and copy from real product flows instead of imitating isolated screenshots.
Good UI patterns are not collections of visual screenshots. They are reusable evidence about task flow, state flow, constraints, and feedback.91%Interaction Responsive Motiongesture / mobileTouch Gesture Alternatives
Touch Gesture Alternatives turns a frequent interface judgment into an executable constraint before generation.
Swipe, pinch, and long press cannot be the only way to complete a task.86%Typography Color Accessibilityforms / inputTouch Keyboard and Input Purpose
Touch Keyboard and Input Purpose turns a frequent interface judgment into an executable constraint before generation.
Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.86%Interaction Responsive Motionmobile / actionsMobile Bottom Action Bar
Mobile Bottom Action Bar turns a frequent interface judgment into an executable constraint before generation.
Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.85%Interaction Responsive Motionresponsive / navigationResponsive Navigation Collapse
Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.
Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.85%Interaction Responsive Motionmobile / responsiveMobile Priority Stack Layout
Mobile is not a smaller desktop; content and actions should restack by task priority.
Small screens need important information, controls, and feedback early without overlap.82%Typography Color Accessibilitytouch-target / mobileAccessible Interactive Targets
Buttons, links, menu items, and icon buttons need sufficient hit area, especially on mobile.
A visually small control does not need a tiny hit area; targets require stable size and clear feedback.82%