Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Responsive 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%Frontend Implementationcontainer-query / responsiveContainer Query Component Contract
Responsive components should not only follow the viewport; cards, sidebars, charts, and resource cards should adapt density, hierarchy, and actions to their own container width.
Container queries move responsive decisions from page-level breakpoints into component context, letting the same component work inside grids, sidebars, drawers, modals, and dashboard slots.95%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%Design Systems Page Patternsresponsive / stabilityResponsive Layout Stability
Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.
Boards, toolbars, counters, and button groups need predefined sizing rules.82%Interaction Responsive Motiontables / responsiveResponsive Tables and Comparison
Tables support comparison, so responsive behavior must preserve columns, sorting, and key actions.
Turning tables into cards indiscriminately can destroy comparison; choose the pattern by data task.82%Interaction Responsive Motionbreakpoints / responsiveBreakpoint Recomposition, Not Scaling
Responsive design should recombine layout relationships at breakpoints instead of scaling everything by viewport.
Scaling type and containers causes unpredictable overflow; recomposition is more stable.82%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%Visual Foundationsgrid / layoutGrid as a Decision System
A grid is not decoration; it decides span, alignment, responsive recomposition, and density.
A stable grid reduces ad hoc placement and keeps complex pages structured across viewports.82%