Quick Reference

Checklists, templates, and troubleshooting guides for AI agent collaboration

⚡ Quick Reference Resources

Your go-to resource for templates, checklists, and troubleshooting guides. Bookmark this page for quick access while working on your Web Dev II projects!

📚 Complete Learning Path

AI Agent Basics → Effective Prompts → Agent Memory → Advanced Context → Quick Reference

📋 Context Provision Checklists

Use these checklists to ensure you're providing complete context for different types of AI agent requests.

Basic Project Context ✅

  • □ Your skill level (Web Dev II student)
  • □ Project type (portfolio, creative, business)
  • □ Technical constraints (HTML/CSS only)
  • □ Accessibility requirements (WCAG AA)
  • □ Current file structure or organization

Advanced Project Context ✅

  • □ Reference to project-goals.md
  • □ Reference to design-philosophy.md
  • □ Current session goals from progress-log.md
  • □ Existing code patterns to follow
  • □ Specific files that need coordination

Poetry Project Context ✅

  • □ Reference to poem-analysis.md
  • □ Reference to visual-concept.md
  • □ Creative goals and artistic vision
  • □ Technical implementation requirements
  • □ Balance between creativity and accessibility

🚀 Prompt Templates

Copy and customize these proven prompt patterns for better AI agent results.

Session Startup Template

Hi! I'm continuing work on my [PROJECT TYPE] from [LAST SESSION].

CONTEXT:
- Please read my project-goals.md and progress-log.md files
- I'm a Web Dev II student, constraints: HTML/CSS only, WCAG AA
- My design philosophy: [BRIEF DESCRIPTION]

CURRENT GOAL:
Today I want to [SPECIFIC GOAL]. Last session I [ACCOMPLISHMENT].
My current challenge is [SPECIFIC PROBLEM].

REQUEST:
Please help me [SPECIFIC REQUEST] while following my established
patterns in [RELEVANT FILES].

Debugging Template

DEBUGGING CONTEXT:

PROBLEM:
My [SPECIFIC ELEMENT] is [SPECIFIC ISSUE]. Expected: [WHAT SHOULD HAPPEN].
Actually seeing: [WHAT'S HAPPENING].

CONTEXT:
- Browser/device: [BROWSER/DEVICE]
- Related files: [FILE NAMES]
- Recent changes: [WHAT YOU CHANGED]
- Error messages: [ANY ERRORS]

REQUEST:
Help me debug and fix this issue while maintaining my existing
[DESIGN PATTERNS/CONSTRAINTS].

Creative-Technical Balance Template

CREATIVE-TECHNICAL PROJECT:

ARTISTIC VISION:
- Read my [CREATIVE ANALYSIS FILE] for artistic goals
- The [CREATIVE ELEMENT] should reflect [SPECIFIC MOOD/THEME]
- Visual inspiration: [DESCRIBE DESIRED FEELING]

TECHNICAL REQUIREMENTS:
- Constraints: HTML/CSS only, accessible, responsive
- Must work with existing [FILES/COMPONENTS]
- Follow patterns in my [STYLE GUIDE FILE]

BALANCE GOAL:
I need to [TECHNICAL IMPLEMENTATION] while maintaining
[ARTISTIC ELEMENT]. Help me achieve both.

📁 File Organization Templates

Quick copy-paste templates for organizing your project documentation.

Basic Project Structure

my-project/
├── project-goals.md
├── design-philosophy.md
├── progress-log.md
├── index.html
├── styles.css
└── assets/
    └── images/

Advanced Project Structure

my-portfolio/
├── docs/
│   ├── project-goals.md
│   ├── design-philosophy.md
│   ├── progress-log.md
│   ├── style-guide.md
│   └── design-system.md
├── styles/
│   ├── base.css
│   ├── layout.css
│   ├── components.css
│   └── utilities.css
├── pages/
│   ├── index.html
│   ├── about.html
│   └── portfolio.html
└── assets/
    ├── images/
    └── fonts/

Poetry Project Structure

my-poetry-project/
├── poem-analysis.md
├── visual-concept.md
├── design-philosophy.md
├── progress-log.md
├── index.html
├── poem.html
├── styles/
│   ├── typography.css
│   ├── layout.css
│   └── theme.css
└── assets/
    └── images/

Agent Configuration Files

Add these configuration files to automatically teach AI agents about your project constraints and standards.

Basic Configuration Setup

my-project/
├── .github/
│   └── copilot-instructions.md    # GitHub Copilot configuration
├── CLAUDE.md                      # Claude Code configuration
├── project-goals.md               # Project documentation
├── design-philosophy.md           # Design decisions
└── index.html

Advanced Configuration Setup

my-portfolio/
├── .github/
│   └── copilot-instructions.md    # GitHub Copilot configuration
├── .claude/                       # Claude settings folder
├── CLAUDE.md                      # Claude Code configuration
├── AGENTS.md                      # Advanced AI agent configuration
├── docs/
│   ├── project-goals.md
│   └── design-philosophy.md
└── index.html

🆘 Emergency Troubleshooting

When things go wrong with AI agent interactions, follow these recovery steps.

Agent Not Understanding Your Project

🚨 Symptoms

  • Generic suggestions that don't fit your project
  • Ignoring your stated constraints
  • Not referencing your existing files

💊 Quick Fix

  1. Stop and restart with clear context
  2. Reference specific documentation files
  3. List your constraints explicitly
  4. Provide a concrete example from your existing code

Agent Suggests Wrong Technology

⚠️ Symptoms

  • Recommends JavaScript when you need CSS-only
  • Suggests frameworks or libraries
  • Ignores "HTML/CSS only" constraint

💊 Quick Fix

"Stop. This is a Web Dev II course project. I can ONLY use HTML5 and CSS3. No JavaScript, no frameworks, no libraries. Please suggest a CSS-only solution for [specific need]."

Agent Breaks Your Existing Code

✅ Recovery Steps

  1. Identify what broke (specific functionality)
  2. Revert to last working version if needed
  3. Ask agent to review your existing patterns in [specific file]
  4. Request solution that preserves existing functionality

"The suggestion broke my [existing functionality]. Please review my current [file] and suggest a solution that preserves my existing [specific patterns] while adding [new feature]."

📊 Common Patterns Reference

Quick reference for the most useful prompt patterns by project type.

🏗️ Layout Requests

  • "Create CSS Grid layout for [content] with [columns] on desktop, [columns] on tablet, [columns] on mobile"
  • "Add responsive navigation with hamburger menu for mobile using CSS-only"
  • "Implement flexbox card layout with hover effects and accessibility"

♿ Accessibility Requests

  • "Review [element] for WCAG AA compliance and screen reader compatibility"
  • "Add proper ARIA labels and focus indicators to [interactive element]"
  • "Ensure keyboard navigation works for [component]"

🎨 Styling Requests

  • "Apply my design-philosophy.md color scheme to [component]"
  • "Create hover animations with [duration] transitions"
  • "Implement typography hierarchy using [font system]"

🔧 Organization Requests

  • "Reorganize CSS using [methodology] and logical sections"
  • "Create style-guide.md documenting my [existing patterns]"
  • "Optimize CSS for [performance goal] while maintaining [visual goals]"

📖 Memory File Quick Start

Example files for a Web Dev II project.

📋 project-goals.md

# Project Goals: [Your Project Name]

## Technical Constraints
- HTML5 and CSS3 only (no JavaScript)
- WCAG AA accessibility compliance
- Mobile-first responsive design
- Deploy to Netlify

## Success Criteria
- [ ] [Your specific goals]
- [ ] Professional visual design
- [ ] Fast loading (under 3 seconds)
- [ ] Accessible to screen readers

🎨 design-philosophy.md

# Design Philosophy: [Your Project Name]

## Color Palette
- Primary: [color] ([purpose])
- Secondary: [color] ([purpose])
- Accent: [color] ([purpose])

## Typography
- Headings: [font choice] ([reasoning])
- Body: [font choice] ([reasoning])

## User Experience Goals
- [specific goal and reasoning]

📝 progress-log.md

# Progress Log: [Your Project Name]

## Session [Date] - [Duration]

### Goals for Today
- [ ] [Goal 1]
- [ ] [Goal 2]

### What I Accomplished
- ✅ [Completed item]

### Next Session Priorities
1. [Priority item]

### Files Modified
- [file]: [what changed]

⚙️ Agent Configuration Templates

Copy-paste these configuration files to set up automatic AI agent behavior for your Web Dev II projects.

Essential Configuration Files (Copy These)

📄 .github/copilot-instructions.md

GitHub Copilot Agent Mode configuration

# GitHub Copilot Instructions for Web Dev II ## Project Context This is a Web Development II student portfolio project focusing on advanced HTML5 and CSS3 techniques. ## Technical Constraints - HTML5 and CSS3 ONLY - no JavaScript - Mobile-first responsive design required - WCAG AA accessibility compliance required - Deploy to Netlify ## Coding Standards - Semantic HTML5 elements preferred over divs - CSS Grid and Flexbox for layouts - CSS custom properties for consistent styling - Mobile-first media queries with min-width breakpoints - BEM naming methodology for CSS classes ## Accessibility Requirements - Minimum 4.5:1 color contrast ratio - Proper heading hierarchy (h1-h6) - Alt text for all images - Form labels properly associated - Keyboard navigation support - Screen reader compatibility ## Preferred Approaches - Progressive enhancement over graceful degradation - Performance optimization (minimize CSS, optimize images) - Clean, maintainable code with clear comments - Consistent spacing and typography scales

📄 CLAUDE.md

Claude Code repository configuration

# Claude Code Instructions for Web Dev II Repository ## Repository Context This repository contains a Web Development II student portfolio project. The student has completed Web Dev I and is building advanced HTML/CSS skills. ## Technical Constraints - **HTML5 and CSS3 only** - no JavaScript allowed - **Accessibility first** - WCAG AA compliance required - **Mobile-first responsive design** - min-width media queries - **Semantic markup** - proper HTML5 elements over divs ## Code Style Preferences - Clean, readable code with logical organization - CSS custom properties for design tokens - Consistent naming conventions (kebab-case for CSS) - Comments explaining complex CSS techniques - Modular CSS organization (base, layout, components, utilities) ## Development Approach - Progressive enhancement methodology - Performance considerations (optimize CSS, images) - Cross-browser compatibility (modern browsers) - Professional coding standards and best practices ## Project Goals - Build portfolio suitable for entry-level web developer positions - Demonstrate advanced HTML/CSS skills - Show understanding of accessibility and responsive design - Create maintainable, professional-quality code

📄 AGENTS.md

Advanced AI agent configuration (optional)

# Advanced AI Agent Configuration ## Agent Behavior Guidelines - Always consider accessibility in every suggestion - Prioritize semantic HTML over presentational markup - Suggest CSS-only solutions for interactions - Provide mobile-first responsive approaches - Include performance considerations in recommendations ## Code Review Focus Areas - Semantic HTML structure and hierarchy - CSS organization and maintainability - Accessibility compliance (WCAG AA) - Mobile responsiveness and touch targets - Cross-browser compatibility ## Project-Specific Context - Student skill level: Completed Web Dev I, learning advanced techniques - Portfolio focus: Entry-level web developer job applications - Creative projects: Balance artistic vision with technical requirements - Learning goals: Professional coding standards and industry best practices ## Preferred Response Format - Explain the reasoning behind suggestions - Provide both basic and advanced solution options - Include accessibility considerations in all recommendations - Suggest testing approaches for implemented solutions - Reference relevant web standards and best practices

Quick Configuration Setup

Fast Setup for GitHub Copilot

  1. Create .github folder in your project root
  2. Create copilot-instructions.md inside the .github folder
  3. Copy the template above and customize for your specific project
  4. Commit and push to GitHub
  5. Start getting better AI assistance immediately!

🎯 Pro Tip: Start Simple

You don't need all three files right away. Start with just .github/copilot-instructions.md for immediate improvement in your AI interactions. Add the others as your projects become more complex.

Troubleshooting Configuration Issues

🚨 Agent Ignoring Configuration

  • Check file location (.github folder)
  • Verify file name spelling
  • Commit and push changes to repository
  • Restart AI agent session

⚠️ Configuration Not Working

  • Try simpler language in instructions
  • Be more specific about constraints
  • Add concrete examples
  • Test with basic requests first

🎯 Success Checklist

Use this checklist to verify you're getting the most out of AI agent collaboration.

Signs You're Using AI Agents Effectively ✅

  • ✅ Agent responses reference your specific files and patterns
  • ✅ Suggestions fit your project constraints without reminders
  • ✅ Code maintains consistency with your existing style
  • ✅ Agent builds on previous session work seamlessly
  • ✅ Solutions enhance rather than replace your creative vision
  • ✅ You spend more time creating and less time explaining context

🎓 You've Mastered AI Agent Collaboration When...

  • 🎯 Your prompts include context automatically
  • 🎯 You can troubleshoot context issues quickly
  • 🎯 Your documentation enables sophisticated agent assistance
  • 🎯 You balance creative vision with technical requirements
  • 🎯 Your projects benefit from cumulative agent knowledge
← Advanced Context Back to Sarah Jones →