Set up Tailwind CSS, shadcn/ui and Lucide icons in the frontend, so the interface issues (#40–#48) are built on the same components and icons from the start. **Why** - **Accessibility** is a course requirement. shadcn/ui components are built on accessible primitives (keyboard support, focus handling, ARIA), so we do not write that ourselves. - **Consistency.** One set of buttons, inputs, selects and badges, and one set of design tokens. - **Green web.** shadcn/ui copies the components into the repository, so only the ones we use end up in the bundle. Lucide icons are imported one by one and tree-shaken. **Tried in a scratch copy of `dev` (nothing committed)** - It works with our versions: Vite 8.3, TypeScript 6.0, React 19 and Tailwind CSS 4.3. `shadcn init`, build and tests passed. - The path alias must use `paths` only. TypeScript 6 deprecates `baseUrl`, which the shadcn guide still tells us to add. - Size with one Button and one icon: JS 224 kB → 265 kB (70 kB → 86 kB gzip), CSS 28 kB (6 kB gzip), plus three Geist font files (15–30 kB each). - `npm run lint` fails with one error: `react-refresh/only-export-components` on the generated `button.tsx` (it also exports `buttonVariants`). The generated folder needs an ESLint override. **Decisions to make first** 1. **Style and primitives.** The current CLI defaults to the `base-nova` style on Base UI (`@base-ui/react`). Radix UI is the older alternative. Pick one and write why in the README. 2. **Class-name helper.** The CLI adds the new `cn` package (published by the shadcn team in September 2026). The classic choice is `clsx` plus `tailwind-merge`. Pick one. 3. **Font.** The CLI adds the Geist font. System fonts cost nothing to load and fit the green web requirement better. 4. **Colour tokens.** The CLI adds its variables (`--background`, `--foreground`, `--border`, `--accent` …) to `src/index.css`. `--border` and `--accent` already exist there with other meanings, so they collide. Decide how the tokens from #27 and shadcn's tokens become one set. 5. **Dark mode.** shadcn uses a `.dark` class. We currently use `prefers-color-scheme`. Pick one. **Done when:** - [ ] The decisions above are made and written in the README, with the reasons - [ ] Tailwind CSS 4 with the Vite plugin, and the `@/` alias, are set up (`paths` only) - [ ] `components.json` exists, and shadcn/ui and `lucide-react` are installed - [ ] Colour tokens are one set, and dark mode works the way we decided - [ ] ESLint passes (override for the generated components), and Prettier formats the generated files - [ ] One Button and one icon are used on a page, as proof that build, lint and tests pass - [ ] The README explains how to add a component (`npx shadcn@latest add <component>`) - [ ] The people who build #40–#48 know it is done and have read how to use it **Coordination:** do this before #40–#48 get far, because their components should use it. Check with whoever works on the interface first.