Implementation Plan: [FEATURE]

Branch: [###-feature-name] | Date: [DATE] | Spec: [link] Input: Feature specification from /specs/[###-feature-name]/spec.md

Note: This template is filled in by the /speckit.plan command. See .specify/templates/commands/plan.md for the execution workflow.

Summary

Unify frontend styling using a centralized Tailwind CSS configuration and a set of standardized Svelte wrapper components. Implement internationalization (i18n) with support for Russian (default) and English, persisting language preference in LocalStorage.

Technical Context

Language/Version: Node.js 18+ (Frontend Build), Svelte 5.x Primary Dependencies: SvelteKit, Tailwind CSS, date-fns (existing) Storage: LocalStorage (for language preference) Testing: Manual verification per User Scenarios (Visual Regression) Target Platform: Web Browser (Responsive) Project Type: Web application (Frontend) Performance Goals: Instant language switching, zero layout shift Constraints: Must support existing pages without breaking layout Scale/Scope: ~10-15 core UI components, global CSS update

Constitution Check

GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.

Semantic Protocol Compliance: PASS. New Svelte components must follow the Component Header standard.
Causal Validity: PASS. Design System (Tokens) and Component Contracts will be defined before implementation.
Immutability of Architecture: PASS. No changes to backend architecture; strictly frontend presentation layer.
Design by Contract: PASS. Components will define strict props/interfaces.
Everything is a Plugin: N/A. UI components are not backend plugins, but will be modular.

Project Structure

Documentation (this feature)

specs/[###-feature]/
├── plan.md              # This file (/speckit.plan command output)
├── research.md          # Phase 0 output (/speckit.plan command)
├── data-model.md        # Phase 1 output (/speckit.plan command)
├── quickstart.md        # Phase 1 output (/speckit.plan command)
├── contracts/           # Phase 1 output (/speckit.plan command)
└── tasks.md             # Phase 2 output (/speckit.tasks command - NOT created by /speckit.plan)

Source Code (repository root)

frontend/
├── src/
│   ├── lib/
│   │   ├── i18n/              # [NEW] Translation dictionaries and stores
│   │   └── ui/                # [NEW] Standardized Svelte components
│   ├── components/            # [EXISTING] To be refactored to use lib/ui
│   ├── routes/                # [EXISTING] Pages
│   └── app.css                # [EXISTING] Global styles (Tailwind directives)

Structure Decision: Adopting a standard SvelteKit structure where reusable UI components and logic (i18n) reside in src/lib, accessible via $lib alias. Existing components directory will be gradually refactored or moved to lib/ui if generic enough.

Complexity Tracking

Fill ONLY if Constitution Check has violations that must be justified

Violation	Why Needed	Simpler Alternative Rejected Because
[e.g., 4th project]	[current need]	[why 3 projects insufficient]
[e.g., Repository pattern]	[specific problem]	[why direct DB access insufficient]

3.4 KiB Raw Blame History