67 lines
2.0 KiB
Markdown
67 lines
2.0 KiB
Markdown
# Issue #1: Project scaffolding: SvelteKit + Tailwind + TypeScript
|
|
|
|
**Status:** COMPLETED
|
|
**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/1
|
|
**Branch:** `feature/issue-1-project-scaffolding`
|
|
|
|
## Summary
|
|
|
|
Initialize the SvelteKit project with Svelte 5 (runes mode), Tailwind CSS, TypeScript strict mode, proper directory structure, and ESLint + Prettier configuration.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [ ] SvelteKit project initialized with Svelte 5 (runes mode)
|
|
- [ ] Tailwind CSS configured and working
|
|
- [ ] TypeScript strict mode enabled
|
|
- [ ] Directory structure: `src/lib/`, `src/routes/`, `src/lib/components/`
|
|
- [ ] ESLint + Prettier configured
|
|
- [ ] `dev`, `build`, `preview`, `lint`, `format` scripts in package.json
|
|
|
|
## Implementation Phases
|
|
|
|
### Phase 1: SvelteKit + TypeScript Initialization
|
|
|
|
Use the SvelteKit scaffolding tool (`npx sv create`) to create the project in the current directory with:
|
|
|
|
- SvelteKit with Svelte 5
|
|
- TypeScript strict mode
|
|
- Vite as the build tool
|
|
|
|
Since we're in an existing git repo with just a README, we'll scaffold into a temp directory and move files over.
|
|
|
|
### Phase 2: Tailwind CSS Integration
|
|
|
|
Add Tailwind CSS v4 using the SvelteKit integration:
|
|
|
|
- Install `@tailwindcss/vite` and `tailwindcss`
|
|
- Configure the Vite plugin
|
|
- Add Tailwind CSS import to app.css
|
|
|
|
### Phase 3: Directory Structure
|
|
|
|
Create the required directory structure:
|
|
|
|
- `src/lib/` (SvelteKit default)
|
|
- `src/lib/components/` — reusable UI components
|
|
- `src/lib/services/` — API/service layer (for future issues)
|
|
- `src/routes/` (SvelteKit default)
|
|
|
|
### Phase 4: ESLint + Prettier
|
|
|
|
Configure ESLint and Prettier using the SvelteKit recommended setup:
|
|
|
|
- `eslint` + `@eslint/js` + `eslint-plugin-svelte` + `typescript-eslint`
|
|
- `prettier` + `prettier-plugin-svelte`
|
|
- Add `lint` and `format` scripts to package.json
|
|
|
|
### Phase 5: Verify
|
|
|
|
- Run `dev` server to confirm it starts
|
|
- Run `build` to confirm production build works
|
|
- Run `lint` and `format` to confirm tooling works
|
|
- Verify TypeScript strict mode is active
|
|
|
|
## Deviations
|
|
|
|
(none yet)
|