Adding New Behaviors
Relevant source files
The following files were used as context for generating this wiki page:
Adding new behaviors in this project is achieved through a "vibe coding" workflow, where the user describes desired functionality in plain English to an AI assistant (Claude). This process automates the generation and modification of code within a browser-based development environment, primarily targeting single-page web applications.
The scope of adding behaviors ranges from initial project generation using "starter" prompts to iterative refinements that adjust appearance, logic, and persistence. The system leverages GitHub Codespaces to provide a pre-configured environment where Claude can directly edit files like index.html based on natural language instructions.
Sources: README.md:1-5, PROMPTS.md:1-5, index.html:20-22
Iterative Development Cycle
The core mechanism for adding behaviors is a "Describe → Look → Refine" loop. This loop allows for continuous improvement of the application by observing changes in a live preview and providing follow-up instructions.
The diagram shows the feedback loop where plain-language requests become working software through constant refinement.
Sources: README.md:31-33, index.html:24-26
Core Iteration Commands
When directing the AI to add or modify behaviors, specific natural language patterns are recommended to ensure accuracy:
| Movement Type | Purpose | Example Phrase |
|---|---|---|
| Add | Introduce new elements or logic | "Add a [thing] that does [behavior]." |
| Change | Modify existing styles or text | "Change the [color/layout] to [what]." |
| Fix | Correct erroneous behavior | "It's doing [wrong thing] but I want [right thing]." |
| Polish | Improve aesthetic or responsiveness | "Make it look more [modern/playful]." |
Sources: PROMPTS.md:73-78
Implementation Categories
New behaviors are categorized based on the complexity of the logic and the interaction with the browser environment.
Logic and State Management
Behaviors that require tracking data (like habit streaks or flashcard progress) involve adding state management. The system supports persistence by directing Claude to use browser-based storage.
- Data Persistence: Instructing the AI to "Save everything in the browser" ensures data remains after a refresh.
- Dynamic Calculations: Behaviors like a tip splitter or unit converter require real-time updates as inputs change.
Sources: PROMPTS.md:37-41, PROMPTS.md:27-29
Visual and Responsive Adjustments
Adding behaviors also includes modifying the User Interface (UI) to support different devices or aesthetic preferences. This is done by requesting specific CSS or layout changes.
- Mobile Optimization: Use prompts like "Make it work on a phone."
- Animations: Adding "satisfying check animations" to interactive elements.
Sources: PROMPTS.md:16-18, PROMPTS.md:46
Technical Workflow
Adding behaviors requires a specific technical setup to connect the AI to the local workspace files.
This sequence illustrates how the claude CLI tool interacts with the workspace to implement requested behaviors.
Sources: README.md:16-28, index.html:28-28
Environment Configuration
The environment is pre-configured to support these behaviors through a .devcontainer setup.
- API Connection: The
export ANTHROPIC_API_KEYcommand is critical for authenticating the AI agent that performs the code modifications. - Preview System: The
serve .command (often handled automatically) allows for immediate validation of new behaviors.
Sources: README.md:18-22, README.md:42
Summary
Adding new behaviors is an accessible process that replaces traditional manual coding with AI-driven instruction. By utilizing the starter prompts in PROMPTS.md and following the iterative loop, users can implement complex features like data persistence, dynamic calculations, and responsive design directly within their browser-based workspace.
Sources: README.md:52-56, index.html:20-22