Build a product interface
Audit and maintain the interface
Finish Project Board with an accessibility, design, dependency, source-control, and update review that reflects the open-code ownership model.
8 minute lesson
A component page that looks good is not finished until its interactions, states, code ownership, and maintenance path are understood.
Audit behavior by state: initial, loading, empty, populated, invalid, pending, failed, successful, and unauthorized. Keyboard-test every action, inspect names and errors in the accessibility tree, check contrast and reduced motion, and review narrow screens, zoom, long content, and both themes. Test what happens when a dialog trigger disappears and when a network result is uncertain.
Audit ownership next. Separate generated primitives, local changes, domain compositions, registry sources, and runtime dependencies. Commit components.json, generated source, styles, and package changes together. Record the chosen base and style plus meaningful deviations, because a future maintainer cannot infer which upstream change is safe to merge.
Updates are source reviews. Use view or generate a fresh item separately, compare it with the owned file, and merge useful fixes while preserving intentional local behavior. Before any reinstall command, read CLI help and inspect the working tree so local changes are not silently replaced.
npx shadcn@latest --help
npx shadcn@latest add --help
npm run lint
npm run build
Complete Project Board with cards, a dialog form, schema validation, server-safe mutation states, theming, and responsive behavior. Write a maintenance note naming the base, style, registries, dependencies, customizations, test matrix, and update procedure. Another developer should be able to explain what is owned and reproduce the review without relying on the demo screenshot.
Lesson completed