Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
File Upload State and Validation Contract
An uploader is not a dashed box. It is a state machine from selection, validation, upload, pause, failure, retry, and final file record; drag-and-drop is enhancement, not a replacement for accessible file selection and server validation.
File upload spans interaction, network, privacy, security, and accessibility. A healthy uploader defines file purpose, restrictions, API, states, and recovery before choosing react-dropzone, Uppy, FilePond, tus-js-client, or native input.96%Interaction Responsive Motionfilters / stateFilter Query State Preservation
Filter Query State Preservation turns a frequent interface judgment into an executable constraint before generation.
Filter results are user-built work context and should persist across refresh, back navigation, and sharing.85%Interaction Responsive Motionfeedback / latencyOptimistic Update Feedback
Optimistic Update Feedback turns a frequent interface judgment into an executable constraint before generation.
Optimistic updates make interfaces feel fast while failure and rollback remain understandable.84%Interaction Responsive Motionnavigation / wayfindingNavigation Landmarks and Current State
Users need to know where they are, where they can go, and what scope the current page belongs to.
Navigation is not a pile of links; it continuously communicates structure and current location.82%Typography Color Accessibilityaccessibility / colorColor Must Not Stand Alone
State, risk, category, and selection cannot rely on color alone; text, icon, shape, or position must help.
Color semantics weaken under color blindness, low vision, printing, and poor lighting.82%Typography Color Accessibilitysemantic-color / stateSemantic and State Colors
Success, warning, error, info, selected, and pending states need clear and stable visual language.
State colors are system feedback and should not be reused casually as decoration or brand emphasis.82%