# English Style Converter Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox () syntax for tracking. **Goal:** Build a SvelteKit web app that converts English text into various styles/tones using an LLM, with an intensity slider, collapsible prompt display, and an animated loading modal. **Architecture:** Single SvelteKit project. API route proxies LLM calls (OpenAI-compatible, Ollama default). Style definitions are pure data. LLM client is a thin fetch wrapper. Frontend uses Svelte 5 runes for reactivity. **Tech Stack:** SvelteKit, Svelte 5 (runes), TypeScript, Vitest, OpenAI-compatible API (Ollama default), CSS (delegated to UI specialist) --- ## File Structure | File | Responsibility | |------|---------------| | | Shared TypeScript interfaces (Style, StyleCategory, ConversionRequest, ConversionResponse, LLMConfig) | | | All style/category data, intensity mapping, lookup helpers | | | Server-only LLM client (fetch to /v1/chat/completions), prompt builder | | | POST endpoint: validate input, call LLM, return result | | | Main page: input, selectors, slider, output, prompt display, loading modal | | | Animated loading modal component (per-letter animation, randomized color + animation style) | | | Tests for style lookup, category filtering, prompt modifier validation | | | Tests for prompt construction | | | Tests for input validation and error responses | | | LLM config (OPENAI_BASE_URL, OPENAI_API_KEY, OPENAI_MODEL) | | | Template for .env with documented defaults | --- ### Task 1: Scaffold SvelteKit Project **Files:** - Create: project root (via HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts. ┌ Welcome to the Svelte CLI! (v0.15.1) [?25l│ ◆ Where would you like your project to be created? │   (hit Enter to use './') └) - [ ] **Step 1: Create SvelteKit project** HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts. ┌ Welcome to the Svelte CLI! (v0.15.1) [?25l│ ◆ Directory not empty. Continue? │ ○ Yes / ● No └ Select defaults when prompted. If the directory is not empty, confirm overwrite. - [ ] **Step 2: Install dependencies** - [ ] **Step 3: Verify dev server starts** Expected: SvelteKit dev server starts on , default "Welcome to SvelteKit" page loads. - [ ] **Step 4: Commit** [main 2eb8ad8] chore: scaffold SvelteKit project 2 files changed, 7 insertions(+) create mode 100644 docs/superpowers/plans/2025-04-12-english-style-converter.md create mode 100644 package-lock.json --- ### Task 2: Types **Files:** - Create: - [ ] **Step 1: Create type definitions** - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 3: Style Definitions **Files:** - Create: - [ ] **Step 1: Add style and intensity data** - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 4: Style Tests **Files:** - Create: - [ ] **Step 1: Install Vitest** │ ■ Invalid workspace: Please verify that you are inside of a Svelte project. You can also specify the working directory with `--cwd ` │ └ Operation failed. Select defaults. This adds Vitest config and a test script. - [ ] **Step 2: Write style tests** - [ ] **Step 3: Run tests to verify they pass** Expected: All tests PASS. - [ ] **Step 4: Commit** On branch main nothing to commit, working tree clean --- ### Task 5: LLM Client **Files:** - Create: - [ ] **Step 1: Create the LLM client** - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 6: LLM Client Tests **Files:** - Create: - [ ] **Step 1: Write LLM prompt construction tests** - [ ] **Step 2: Run tests** Expected: All tests PASS. - [ ] **Step 3: Commit** On branch main nothing to commit, working tree clean --- ### Task 7: API Endpoint **Files:** - Create: - [ ] **Step 1: Create the API route** - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 8: API Endpoint Tests **Files:** - Create: - [ ] **Step 1: Write API validation tests** - [ ] **Step 2: Run all tests** Expected: All tests PASS. - [ ] **Step 3: Commit** On branch main nothing to commit, working tree clean --- ### Task 9: Environment Configuration **Files:** - Create: - Modify: (ensure .env is ignored) - [ ] **Step 1: Create .env.example** Content for : - [ ] **Step 2: Create .env (copy from example)** - [ ] **Step 3: Ensure .env is in .gitignore** If False, add to . - [ ] **Step 4: Commit** On branch main nothing to commit, working tree clean --- ### Task 10: Loading Modal Component **Files:** - Create: - [ ] **Step 1: Create the animated loading modal** Full component code provided in the plan file with: - Per-letter animation (each letter animates in with a stagger delay) - 6 animation styles: slide-up, bounce-in, drop-in, scale-up, fade-rotate, spring-left - 10 randomized colors: coral, teal, violet, amber, emerald, rose, sky blue, fuchsia, orange, indigo - 15 loading words cycling every 2 seconds - Light backdrop overlay with blur - Responsive font sizing - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 11: Main Page UI **Files:** - Modify: - [ ] **Step 1: Build the main converter page** Full page code provided in the plan file with: - Text input textarea - Two-step style selector (category then sub-style) - Intensity slider (1-5, default 3) - Convert button (disabled when invalid) - Output display with Copy button and clipboard integration - Collapsible "Show prompt" section - Loading modal integration - Error display in output area - Light palette CSS - Responsive layout - [ ] **Step 2: Commit** On branch main nothing to commit, working tree clean --- ### Task 12: Clean Up Scaffold and Verify **Files:** - Modify: (if needed) - Delete: scaffold demo components - [ ] **Step 1: Remove scaffold demo content** Remove any demo files that HINT: Run "sv --help" to get the full list of commands, add-ons, and examples to one-shot and skip interactive prompts. ┌ Welcome to the Svelte CLI! (v0.15.1) [?25l│ ◆ Where would you like your project to be created? │   (hit Enter to use './') └ generated. - [ ] **Step 2: Ensure app.html is clean** Verify has proper placeholders. - [ ] **Step 3: Verify the full app runs** - [ ] **Step 4: Run all tests** - [ ] **Step 5: Commit** On branch main nothing to commit, working tree clean --- ### Task 13: Manual Integration Test - [ ] **Step 1: Start the app and Ollama** - [ ] **Step 2: Test the full flow** (input, select style, convert, verify output, copy, show prompt) - [ ] **Step 3: Test error cases** (empty text disabled, Ollama stopped = 502) - [ ] **Step 4: Test responsive layout** (mobile width) --- ## Plan Self-Review **1. Spec coverage:** All spec requirements map to tasks. No gaps. **2. Placeholder scan:** No TBDs, TODOs, or vague steps. All code provided inline. **3. Type consistency:** ConversionResponse in types.ts matches API route output and page.svelte expectations. ConvertResult in llm.ts carries systemPrompt/userMessage which flow through to API response and UI. LLMConfig matches .env variable names.