SvelteKit: Project scaffold from prototype #7

New issue

Open

opened 2026-03-28 02:10:03 +00:00 by forgejo_admin · 0 comments

forgejo_admin commented

2026-03-28 02:10:03 +00:00

Type

Feature

Lineage

Depends on daily-100 #1, #2, #3, #4, #5, #6 (all prototype issues).

Repo

forgejo_admin/daily-100

User Story

As a developer
I want the prototype converted to a SvelteKit project
So that I have a maintainable component-based frontend

Context

Initialize SvelteKit project. Convert the HTML prototype (index.html, style.css, app.js) into SvelteKit routes and components using the SvelteKit-style comments in the prototype as guides. Components: ChecklistItem, HeatMap, StatsGrid, GamificationHeader, ScoreDisplay. The SvelteKit app should achieve visual parity with the prototype.

File Targets

Files the agent should modify or create:

src/routes/+page.svelte -- main page composing all components
src/lib/components/ChecklistItem.svelte -- single checklist row
src/lib/components/HeatMap.svelte -- heat map grid
src/lib/components/StatsGrid.svelte -- 2x2 stats cards
src/lib/components/GamificationHeader.svelte -- streak + level header
src/lib/components/ScoreDisplay.svelte -- score counter
src/app.css -- global styles from prototype

Files the agent should NOT touch:

prototype/ -- keep prototype files as reference

Acceptance Criteria

SvelteKit project initialized and builds
All prototype sections converted to Svelte components
Visual output matches prototype exactly
Component boundaries match SvelteKit comments from prototype

Test Expectations

npm run build succeeds without errors
Visual parity with prototype verified
Run command: npm run build && npm run preview

Constraints

SvelteKit 2 with Svelte 5
Preserve prototype files in prototype/ directory
Match prototype visual output exactly

Checklist

PR opened
Tests pass
No unrelated changes

daily-100 -- project

### Type Feature ### Lineage Depends on daily-100 #1, #2, #3, #4, #5, #6 (all prototype issues). ### Repo `forgejo_admin/daily-100` ### User Story As a developer I want the prototype converted to a SvelteKit project So that I have a maintainable component-based frontend ### Context Initialize SvelteKit project. Convert the HTML prototype (index.html, style.css, app.js) into SvelteKit routes and components using the SvelteKit-style comments in the prototype as guides. Components: ChecklistItem, HeatMap, StatsGrid, GamificationHeader, ScoreDisplay. The SvelteKit app should achieve visual parity with the prototype. ### File Targets Files the agent should modify or create: - `src/routes/+page.svelte` -- main page composing all components - `src/lib/components/ChecklistItem.svelte` -- single checklist row - `src/lib/components/HeatMap.svelte` -- heat map grid - `src/lib/components/StatsGrid.svelte` -- 2x2 stats cards - `src/lib/components/GamificationHeader.svelte` -- streak + level header - `src/lib/components/ScoreDisplay.svelte` -- score counter - `src/app.css` -- global styles from prototype Files the agent should NOT touch: - `prototype/` -- keep prototype files as reference ### Acceptance Criteria - [ ] SvelteKit project initialized and builds - [ ] All prototype sections converted to Svelte components - [ ] Visual output matches prototype exactly - [ ] Component boundaries match SvelteKit comments from prototype ### Test Expectations - [ ] `npm run build` succeeds without errors - [ ] Visual parity with prototype verified - Run command: `npm run build && npm run preview` ### Constraints - SvelteKit 2 with Svelte 5 - Preserve prototype files in `prototype/` directory - Match prototype visual output exactly ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - `daily-100` -- project