Prompting Basics
Relevant source files
The following files were used as context for generating this wiki page:
Prompting Basics refers to the fundamental skill of "Vibe Coding," a development methodology where natural language descriptions are used to direct Claude to generate, modify, and refine single-page web applications. This approach allows users to build functional software without manually writing code, operating within a browser-based environment integrated with GitHub Codespaces.
Sources: README.md:1-5, index.html:18-20
The Vibe Coding Workflow
The development cycle follows a continuous loop of "describe → look → refine." Users provide a plain English description of a feature, view the automatically generated preview, and then request specific adjustments or fixes.
The Development Loop
The workflow prioritizes rapid iteration and visual feedback. Claude replaces the content of index.html with the generated application, and the serve . command provides a live preview of the changes.
Sources: README.md:27-38, index.html:20-22
Prompting Strategies
Prompts are categorized into "Starters" for initial creation and "Iterate" prompts for refining existing code. Effective prompting involves using specific action verbs to direct AI behavior.
Action Commands
Users interact with Claude using specific linguistic patterns to achieve different outcomes:
| Move | Objective | Example Usage |
|---|---|---|
| Add | Introduce new features or behaviors | "Add a streak counter for each habit." |
| Change | Modify visual styles or layout | "Change the colors to navy and gold." |
| Fix | Correct errors or unintended behavior | "It's doing [wrong thing] but I want [right thing]." |
| Explain | Understand existing code logic | "What does this part do?" |
| Polish | Improve UI/UX and responsiveness | "Make it look more modern and work on a phone." |
Sources: PROMPTS.md:65-71
Application Templates
The project provides starter prompts for various application types, emphasizing browser-side storage for persistence.
| Project Type | Key Starter Components | Persistence |
|---|---|---|
| Personal Hub | Name, bio, photo, social buttons | N/A |
| Calculator | Inputs, percentage buttons, total displays | N/A |
| Tracker | Habit list, check-off system, 7-day view | Browser Storage |
| Study Tool | Question/Answer cards, flip functionality | Browser Storage |
| Event Tool | Date picker, countdown timer, animations | Browser Storage |
Sources: PROMPTS.md:7-60
Environment Interaction
The environment is pre-configured via .devcontainer to facilitate immediate prompting. The integration relies on an API key environment variable and a terminal-based interface to Claude.
Connection Sequence
Sources: README.md:10-24
Implementation Detail: Environment Setup
The .devcontainer/devcontainer.json and post-create.sh files ensure the environment is ready for prompting by installing necessary tooling and setting up the workspace.
{
"name": "Vibe Coding Starter",
"postCreateCommand": "bash .devcontainer/post-create.sh"
}
Sources: .devcontainer/devcontainer.json:1-5, .devcontainer/post-create.sh
Conclusion
Prompting Basics within this project transforms software development into a conversational process. By utilizing structured starter prompts and specific iterative commands ("Add", "Change", "Fix", "Polish"), developers can leverage Claude to handle the underlying implementation details while focusing on functional requirements and user interface design. The tight integration between the terminal-based Claude CLI, automatic browser previews, and GitHub Codespaces creates a friction-less environment for "Vibe Coding."
Sources: README.md:40-44, index.html:23