# Statusphere HTML Example Implementation Plan > **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. **Goal:** Create a single-file HTML example app that mirrors the statusphere-example-app functionality using quickslice's GraphQL API. **Architecture:** A self-contained `index.html` with embedded CSS and JavaScript. Implements OAuth PKCE flow for authentication, GraphQL queries for fetching statuses/profiles, and mutations for posting statuses. No external dependencies. **Tech Stack:** Vanilla HTML/CSS/JavaScript, Web Crypto API for PKCE, Fetch API for GraphQL, sessionStorage for tokens. --- ## Prerequisites Before using this example, users must: 1. Have quickslice server running at `http://localhost:8080` 2. Register an OAuth client via quickslice admin UI or GraphQL mutation 3. Set the client's redirect URI to match where they serve the HTML file --- ## Task 1: Create Directory Structure and Base HTML **Files:** - Create: `examples/01-statusphere-html/index.html` **Step 1: Create the examples directory** ```bash mkdir -p examples/01-statusphere-html ``` **Step 2: Create base HTML structure** Create `examples/01-statusphere-html/index.html`: ```html Statusphere

Statusphere

Set your status on the Atmosphere

``` **Step 3: Verify file exists** Run: `ls -la examples/01-statusphere-html/` Expected: `index.html` listed **Step 4: Commit** ```bash git add examples/01-statusphere-html/index.html git commit -m "feat(examples): add base HTML structure for statusphere example" ``` --- ## Task 2: Add CSS Styling **Files:** - Modify: `examples/01-statusphere-html/index.html` (inside `