Practice and reinforce the concepts from Lesson 10
Master AI prompting through hands-on practice: identify anti-patterns, rewrite prompts using best practices, create an agent.md file, and apply advanced strategies (chain-of-thought, feature decomposition).
Prerequisites: Concept 10 completed, Trae IDE configured, Spelling Bee project from Activity 9
Identify which anti-pattern (1-5) each prompt exhibits and explain why it fails.
Anti-Patterns: (1) Vague Request, (2) Single-Word Command, (3) Assumption Trap, (4) "Fix It" Paradox, (5) Feature Dump
| Prompt | Anti-Pattern # | Why It Fails | Impact |
|---|---|---|---|
| "Add authentication, leaderboard, user profiles, social sharing, achievements, daily challenges, streak tracking" | ___ | ___ | ___ |
| "Debug" | ___ | ___ | ___ |
| "Make the game more engaging" | ___ | ___ | ___ |
| "Add real-time multiplayer" | ___ | ___ | ___ |
| "My code doesn't work. Fix it." | ___ | ___ | ___ |
Transform vague prompts using WHAT-HOW-WHERE-CONTEXT-CONSTRAINTS structure.
Template:
WHAT: [Clear goal]
HOW: [3-5 specific requirements]
WHERE: [File locations]
CONTEXT: [Existing code/structure]
CONSTRAINTS: [What NOT to do]
| Task | Original Prompt | Your Rewrite (use template) |
|---|---|---|
| Timer | "Add a timer to my Spelling Bee game" | ___ |
| Debug | "The scoring system is broken" | ___ |
| Feature | "Add difficulty levels" | ___ |
WHAT: Add 60-second countdown timer to Spelling Bee game
HOW:
- Display at top right, count down from 60s
- Update every second, end game at 0
- Show "Game Over - Time's Up!" message
- Turn red when < 10 seconds
WHERE:
- index.html (header section)
- game.js (startTimer() function)
- style.css (match theme colors)
CONTEXT:
- startGame() initializes
- checkAnswer() processes answers
- endGame() shows final score
CONSTRAINTS:
- Use setInterval (no external libraries)
- Don't block user input
- Clear timer when game ends early
Create agent.md in your Spelling Bee project root to help AI understand your codebase instantly.
Required Sections (fill with YOUR project details):
# Spelling Bee Game - Agent Instructions
## Project Description
[2-3 sentences: what the game does]
## Tech Stack
- HTML5, CSS3, Vanilla JavaScript (ES6)
- [Other libraries]
## File Structure
/spelling-bee/
├── index.html # [Purpose]
├── game.js # [Purpose]
├── style.css # [Purpose]
└── words.js # [Purpose]
## Code Style
- Arrow functions: `const fn = () => {}`
- const/let (never var)
- camelCase variables
- Template literals
## Data Structures
### Word Object
{ word: "algorithm", difficulty: "medium", definition: "..." }
### Game State
{ score: 0, currentWord: null, isPlaying: false }
## Key Functions
- `startGame()` - [Purpose]
- `checkAnswer(input)` - [Purpose]
- `calculateScore()` - [Purpose]
## Current Features
- [x] Word display with definition
- [x] Answer checking & scoring
- [ ] Hint system (not built)
## Known Issues
1. Score can go negative
2. No input validation
## Upcoming Features
- [ ] Timer (60 seconds)
- [ ] Hint system
## Important Context
- Student project (keep simple)
- No backend (browser only)
- Must work offline
Test Your agent.md: Run this prompt in Trae:
"@agent.md Add a button to show word length as a hint.
Follow project coding conventions."
Success Criteria: AI uses arrow functions, matches naming conventions, integrates with gameState.
Decompose this complex feature into 5-7 sequential prompts:
Feature: "Add scoring system with achievements: Bronze (10 correct), Silver (25), Gold (50). Show badges when earned. Track progress. Display stats."
| Step | Focus | Your Prompt |
|---|---|---|
| 1 | Setup | "Create data structures: Achievement id, name, threshold, icon, earned , Stats totalCorrect, gamesPlayed . New file: achievements.js" |
| 2 | Logic | ___ |
| 3 | Integration | ___ |
| 4 | UI (badges) | ___ |
| 5 | UI (notifications) | ___ |
| 6 | Stats display | ___ |
| 7 | Persistence | ___ |
Step 2: "Implement checkAchievements(totalCorrect) - return newly earned achievements, mark as earned" Step 3: "Integrate with game.js - call checkAchievements() after each correct answer" Step 4: "Create badge display section in index.html - show earned (unlocked icons) vs locked" Step 5: "Create notification popup with animation - show for 3s when achievement unlocked" Step 6: "Add stats panel - total correct/incorrect, win rate, next achievement progress" Step 7: "Add localStorage - save/load achievements & stats, reset button for testing"
Write a chain-of-thought prompt to decide: JavaScript file vs external JSON for word list?
Template:
"Help me decide: JavaScript file vs external JSON for word list.
Think step-by-step:
1. Key differences: ___
2. My project needs: ___
3. Tradeoffs: ___
4. Recommendation: ___
Context:
- No backend server
- Word list size: ___ words
- Update frequency: ___
- Team sharing: ___
What do you recommend?"
Create a displayFeedback(isCorrect) function matching your code style.
Prompt Template:
"Create displayFeedback(isCorrect) matching my style.
Example 1 (my startGame function):
[Paste YOUR code]
Example 2 (my checkAnswer function):
[Paste YOUR code]
Patterns I use:
- Arrow functions
- camelCase variables
- Template literals
Requirements:
- Green "Correct!" if true, red "Wrong!" if false
- Appear for 2s then fade
- Target div: id='feedback-message'"
Submit:
agent.md fileReflection Questions:
Prompt Battle: Write same feature request twice (basic vs best practices), compare AI outputs Agent.md Evolution: Add "Common Patterns" and "Troubleshooting" sections Template Library: Create reusable templates (Add Feature, Debug Error, Refactor, Optimize) Decomposition Master: Decompose "multiplayer mode" into 10+ prompts
The 3 C's of Great Prompts: Clear (specific goals), Concise (no fluff), Complete (context + constraints + examples)
When in doubt: Use Specificity Pyramid (What-How-Where), show examples instead of describing, break complex features into steps.