Base HTML Foundation
Relevant source files
The following files were used as context for generating this wiki page:
- index.html
- README.md
- PROMPTS.md
- .devcontainer/devcontainer.json (Referenced via README.md instructor notes)
- package.json (Implied by tooling in README.md)
The Base HTML Foundation serves as the entry point and structural template for the "Vibe Coding" workflow. It provides an initial user interface that guides developers through the setup process of connecting to Claude and serves as a placeholder that is ultimately replaced by the AI-generated application.
This foundation is designed to work within a browser-based environment, specifically GitHub Codespaces, where a terminal-based Claude interface interacts with the local file system to modify this base file.
Sources: index.html:1-25, README.md:1-12
Core Structure and Styling
The foundation is built using a single-file HTML5 architecture. It incorporates internal CSS within a <style> block to ensure a consistent look and feel without external dependencies during the initial boot phase.
Visual Components
The base layout uses a modern, responsive design pattern focused on readability and instructional flow.
| Element | Style Properties | Purpose |
|---|---|---|
| Body | max-width: 640px, margin: 12vh auto, font-family: system-ui | Centers the content and provides a clean, readable layout. |
| Heading (H1) | color: #1F4E79, font-size: 30px | Provides clear branding and status indication. |
| Steps (.step) | background: #eef4fb, border-left: 4px solid #1F4E79 | Highlights the sequential instructions for the user. |
| Code | background: #f3f3f3, border-radius: 4px | Distinguishes technical commands from descriptive text. |
Sources: index.html:7-15, index.html:19-25
Development Workflow Logic
The Base HTML Foundation exists within a specific lifecycle where it is transformed from a static instruction page into a functional web application through AI-driven iterations.
Initialization and Transformation Flow
The following diagram illustrates how the initial HTML structure is utilized and eventually superseded.
This process relies on the serve . command and the Claude CLI tool to bridge the gap between user descriptions and the index.html file.
Sources: README.md:14-41, index.html:26
Environment Configuration
The foundation is supported by environment variables and terminal commands that enable the AI to interact with the project files.
| Command | Action | Related File |
|---|---|---|
export ANTHROPIC_API_KEY=... | Sets the authentication token for Claude. | README.md |
claude | Launches the interactive AI development interface. | README.md |
serve . | Initiates a local web server for the current directory. | README.md |
Sources: README.md:44-51
Implementation Patterns
The starter files provide specific implementation patterns that the foundation is expected to adopt during the "vibe coding" process. These patterns prioritize single-page application (SPA) architectures and browser-side storage.
Data Persistence and Interactivity
Based on the provided starter prompts, the foundation is intended to evolve into applications using the following technical strategies:
- Local Storage: Applications such as the "Habit Tracker" or "Flashcard Study Tool" are directed to save data in the browser.
- Dynamic Updates: Interaction patterns often require results to update "the instant I change anything," implying event-driven JavaScript implementation.
- Responsive Design: Iteration prompts frequently include instructions to "make it work on a phone."
Sources: PROMPTS.md:32-35, PROMPTS.md:43-46, PROMPTS.md:25-27
Implementation Example: Initial State
<!-- index.html:18-26 -->
<body>
<h1>You're in. Nice.</h1>
<p>This is your workspace. You are about to build something real...</p>
<div class="step"><strong>1.</strong> Open the Claude panel...</div>
<div class="step"><strong>2.</strong> Tell it what you want to build...</div>
<div class="step"><strong>3.</strong> Run it, look at it, and ask Claude to change something.</div>
<p>When you build your own page, it replaces this one.</p>
</body>
Sources: index.html:18-26
Conclusion
The Base HTML Foundation is a temporary structural scaffold. Its primary role is to provide immediate feedback to the developer upon launching the workspace and to serve as the target file for Claude's code generation. By combining minimal styling with clear instructional content, it facilitates the "Describe → Look → Refine" loop that defines the project's development philosophy.
Sources: README.md:38-41, index.html:26