feat: scaffold SvelteKit project with Tailwind, TypeScript, ESLint, Prettier

Initialize the llm-multiverse-ui project with:
- SvelteKit + Svelte 5 (runes mode enabled)
- Tailwind CSS v4 via @tailwindcss/vite plugin
- TypeScript strict mode
- ESLint 9 flat config with svelte and typescript-eslint plugins
- Prettier with svelte plugin
- Directory structure: src/lib/components/, src/lib/services/
- All required scripts: dev, build, preview, lint, format, check

Closes #1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:03:46 +01:00
parent 3cb3480f78
commit 978325565d
40 changed files with 4376 additions and 256 deletions

View File

@@ -0,0 +1,5 @@
# Implementation Plans Index
| Issue | Title | Status | Plan |
| ----- | ------------------------------------------------------ | ------------ | ---------------------------- |
| #1 | Project scaffolding: SvelteKit + Tailwind + TypeScript | IMPLEMENTING | [issue-001.md](issue-001.md) |

View File

@@ -0,0 +1,66 @@
# Issue #1: Project scaffolding: SvelteKit + Tailwind + TypeScript
**Status:** IMPLEMENTING
**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)