Exercise: AI Coding Assistant Enablement Bootcamp Session 6

[github-actions]

AI Coding Assistant Enablement Bootcamp Session 6

👋 Hey there @pythagoras2357! Welcome to your Skills exercise!

Welcome to the AI Coding Assistant Enablement Bootcamp Session 6! 🚀 This guided experience will introduce you to SpecKit - a powerful toolkit for Spec-Driven Development. You'll learn how to build high-quality software faster by focusing on specifications and structured workflows rather than vibe coding. Get ready to transform how you develop with AI! 💻✨

As you complete each step, I will respond in the comments to:

• check your work and give feedback
• share next steps
• occasionally share tips
• congratulate you when you finish!

Good luck and have fun!
- Mona

[github-actions]

Step 6-1: Initialize SpecKit in Your Project

Overview

Welcome to Session 6! In this lesson, we're building on top of the foundation you created in Session 2. You already have a working todo application with context documents that guide Copilot. Now, we'll use SpecKit to add new functionality to the application using Spec-Driven Development - a structured approach that focuses on specifications, plans, and tasks before implementation.

Before we begin with SpecKit, let's verify that your todo application is working correctly.

Goal

Initialize SpecKit in your project to enable Spec-Driven Development with structured workflows and slash commands for your AI coding assistant.

Using Claude Sonnet 4.5

For optimal performance during development, you can configure GitHub Copilot to use the Claude Sonnet 4.5 model:

1. In GitHub Copilot chat, click the Model selector dropdown (usually showing the current model)
2. Select Claude Sonnet 4.5 from the available models
3. This model provides superior reasoning and code generation capabilities, ideal for spec-driven development workflows

You can switch back to the default model at any time using the same dropdown.

Instructions

⌨️ Activity: Launch a Codespace for this repository and create a new branch

Click the below button to open the Create Codespace page in a new tab. Use the default configuration.

✏️ Create a new branch called feature/speckit. ✏️

⌨️ Activity: Verify the application is running

1. Open a terminal in your Codespace.
2. Start the application:

   npm start

3. Verify that both the frontend and backend start successfully and the todo app is accessible.
4. Stop the application (Ctrl+C) once you've confirmed it's working.

⌨️ Activity: Initialize SpecKit

Note: The uv package manager should be automatically installed in your Codespace. If for any reason you need to install it manually, follow the instructions at https://docs.astral.sh/uv/getting-started/installation/.

1. Install the SpecKit CLI tool using uv:

   uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

2. Initialize SpecKit in the current project directory:

   specify init --here --force --ai copilot

3. Verify that the .specify/ directory was created with the necessary files.
4. Commit and push your changes:

   git add .
   git commit -m "Initialize SpecKit for spec-driven development"
   git push origin feature/speckit

Success Criteria

To complete this exercise successfully, ensure that:

• A new feature/speckit branch is pushed
• The .specify/ directory exists in the project root
• The file .specify/memory/constitution.md exists
• The .specify/ directory contains the SpecKit templates and configuration

If you encounter any issues, you can:

• Double check that the newly pushed branch is called feature/speckit
• Verify that uv is installed by running uv --version
• Review that .specify/memory/constitution.md was created
• Check that the specify init command ran successfully without errors

Why?

Initializing SpecKit sets up your project with the tools and templates needed for Spec-Driven Development. This structured approach helps you build high-quality software by focusing on specifications, plans, and tasks before implementation - rather than "vibe coding" from scratch. The .specify/ directory contains templates for constitution, specifications, plans, and tasks that guide the development process.

[github-actions]

Step 6-1 - Passed ✅

Status	Description
✅ - Pass	The '.specify/' directory should exist in the project root
✅ - Pass	The file '.specify/memory/constitution.md' should exist

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6-2! One moment... 🤓

[github-actions]

Step 6-2: Establish Project Constitution

Goal

Create a project constitution that defines governing principles and development guidelines. This ensures all AI-generated code follows your team's standards, coding conventions, and quality principles.

Using Claude Sonnet 4.5

For optimal performance during development, you can configure GitHub Copilot to use the Claude Sonnet 4.5 model:

1. In GitHub Copilot chat, click the Model selector dropdown (usually showing the current model)
2. Select Claude Sonnet 4.5 from the available models
3. This model provides superior reasoning and code generation capabilities, ideal for spec-driven development workflows

You can switch back to the default model at any time using the same dropdown.

Instructions

⌨️ Activity: Use SpecKit to create the project constitution

1. Open the Copilot chat panel and switch to Agent mode using the dropdown menu.
2. Select Claude Sonnet 4.5 from the Model selector dropdown for optimal performance.
3. Start a new chat to ensure clean context.
4. In the Copilot chat input field, use the SpecKit slash command to create your constitution:

   /speckit.constitution create principles based on existing guidelines in the docs folder
   

5. Review the generated constitution in .specify/memory/constitution.md to ensure it reflects your project's actual practices.
6. Commit and push your changes:

   git add .
   git commit -m "Establish project constitution with SpecKit"
   git push origin feature/speckit

Success Criteria

To complete this exercise successfully, ensure that:

• The file .specify/memory/constitution.md has been updated with project-specific principles
• The constitution contains actual principles (not placeholder names like "PRINCIPLE_1_NAME")
• The constitution references your existing documentation (coding-guidelines.md, testing-guidelines.md, ui-guidelines.md, functional-requirements.md)
• Changes are committed and pushed to the feature/speckit branch

If you encounter any issues, you can:

• Make sure you're using Agent mode in Copilot chat
• Verify that the docs folder contains your project guidelines
• Check that .specify/memory/constitution.md was updated with real content
• Ask Copilot to regenerate the constitution if it contains placeholder text

Why?

The constitution serves as the foundation for all spec-driven development in your project. It ensures consistency across all AI-generated specifications, plans, and implementations. By establishing clear principles upfront, you guide the AI to produce code that aligns with your team's standards, architectural decisions, testing requirements, and UI/UX guidelines. This reduces rework and maintains code quality throughout the development lifecycle.

[github-actions]

Step 6-2 - Passed ✅

Status	Description
✅ - Pass	The file '.specify/memory/constitution.md' should exist
✅ - Pass	The constitution should contain real principles (not placeholder text like 'PRINCIPLE_1_NAME')

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6-3! One moment... 🤓

[github-actions]

Step 6-3: Create Your First Specification

Goal

Use SpecKit to create a detailed specification for adding overdue task indicators to the todo application. This is where you define what you want to build before thinking about how to build it.

Using Claude Sonnet 4.5

For optimal performance during development, you can configure GitHub Copilot to use the Claude Sonnet 4.5 model:

1. In GitHub Copilot chat, click the Model selector dropdown (usually showing the current model)
2. Select Claude Sonnet 4.5 from the available models
3. This model provides superior reasoning and code generation capabilities, ideal for spec-driven development workflows

You can switch back to the default model at any time using the same dropdown.

Instructions

⌨️ Activity: Create a specification using SpecKit

1. Open the Copilot chat panel and switch to Agent mode using the dropdown menu.
2. Select Claude Sonnet 4.5 from the Model selector dropdown for optimal performance.
3. Start a new chat to ensure clean context for this feature.
4. In the Copilot chat input field, use the SpecKit slash command:

   /speckit.specify
   

5. When prompted, provide the following user story:

   # Support for Overdue Todo Items
   
   ## User Story
   
   **As a** todo application user  
   **I want to** easily identify and distinguish overdue tasks in my todo list  
   **So that** I can prioritize my work and quickly see which tasks are past their due date
   
   ## Description
   
   Users need a clear, visual way to identify which todos have not been completed by their due date. This helps users quickly spot overdue items without having to manually check dates against today's date.

6. SpecKit will create a new feature branch and generate a detailed specification document.
7. Review the generated spec to ensure it captures the requirements correctly. Don't worry if some details seem unclear - we'll clarify and refine the specification in the next step.
8. Commit and push your changes - take note that you are on a new branch that speckit created

Success Criteria

To complete this exercise successfully, ensure that:

• A new Git branch matching the pattern 001-* was created (e.g., 001-overdue-todos)
• The file specs/001-*/spec.md exists with the detailed specification
• The specification includes the user story, requirements, and acceptance criteria

If you encounter any issues, you can:

• Make sure you're using Agent mode in Copilot chat
• Verify you started a new chat for this feature
• Check that the /speckit.specify command was recognized
• Review the created branch name (it should start with 001-)
• Ask Copilot to regenerate the specification if needed

Why?

Creating a specification before implementation is the foundation of Spec-Driven Development. The spec documents what needs to be built and why, without getting into implementation details. This gives the AI clear requirements to work from and creates a reference point for all subsequent steps (clarification, planning, tasks, and implementation). A good specification reduces ambiguity and ensures everyone understands the feature before any code is written.

[github-actions]

Step 6-3 - Passed ✅

Status	Description
✅ - Pass	A branch matching pattern '001-*' should exist
✅ - Pass	The file 'specs/001-*/spec.md' should exist

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6-4! One moment... 🤓

[github-actions]

Step 6-4: Clarify the Specification

Goal

Use SpecKit to identify and resolve any ambiguous or underspecified areas in the specification before creating the technical plan. This ensures clarity and prevents misunderstandings during implementation.

Using Claude Sonnet 4.5

For optimal performance during development, you can configure GitHub Copilot to use the Claude Sonnet 4.5 model:

1. In GitHub Copilot chat, click the Model selector dropdown (usually showing the current model)
2. Select Claude Sonnet 4.5 from the available models
3. This model provides superior reasoning and code generation capabilities, ideal for spec-driven development workflows

You can switch back to the default model at any time using the same dropdown.

Instructions

⌨️ Activity: Clarify the specification using SpecKit

1. Open the Copilot chat panel and switch to Agent mode using the dropdown menu.
2. Select Claude Sonnet 4.5 from the Model selector dropdown for optimal performance.
3. Start a new chat to ensure clean context for this step.
4. In the Copilot chat input field, use the SpecKit clarify command:

   /speckit.clarify
   

5. SpecKit will analyze the specification and ask clarifying questions about:
   • Visual design details for the overdue indicator
   • Behavioral edge cases (e.g., what happens at midnight?)
   • Interaction patterns
   • Data handling and filtering
6. Answer the clarifying questions with specific decisions and requirements.
7. SpecKit will update the specification with a "Clarifications" section documenting these decisions.
8. Commit and push your changes:

   git add .
   git commit -m "Clarify specification for overdue todo items"
   git push

Success Criteria

To complete this exercise successfully, ensure that:

• The file specs/001-*/spec.md has been updated
• The specification now contains a "Clarifications" section
• All ambiguities from the original spec have been addressed
• Additional requirements or constraints are documented

If you encounter any issues, you can:

• Make sure you're using Agent mode in Copilot chat
• Verify you're continuing in the same chat (not starting a new one)
• Check that /speckit.clarify command was recognized
• Review that the spec file now contains the "Clarifications" section
• Ask Copilot to regenerate clarifications if needed

Why?

The clarify step is crucial for reducing ambiguity and ensuring alignment before investing time in planning and implementation. By asking clarifying questions early, you capture important design and behavior decisions in writing. This creates a shared understanding and provides reference documentation for the implementation phase. It also prevents the common scenario where different team members have different assumptions about what needs to be built.

[github-actions]

Step 6-4 - Passed ✅

Status	Description
✅ - Pass	The specification should contain a 'Clarifications' section

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6-5! One moment... 🤓

[github-actions]

Step 6-5: Create Technical Implementation Plan

Goal

Use SpecKit to create a technical implementation plan that defines the architecture, tech stack decisions, and approach for implementing the overdue task feature based on your clarified specification.

Using Claude Sonnet 4.5

For optimal performance during development, you can configure GitHub Copilot to use the Claude Sonnet 4.5 model:

1. In GitHub Copilot chat, click the Model selector dropdown (usually showing the current model)
2. Select Claude Sonnet 4.5 from the available models
3. This model provides superior reasoning and code generation capabilities, ideal for spec-driven development workflows

You can switch back to the default model at any time using the same dropdown.

Instructions

⌨️ Activity: Create a technical implementation plan using SpecKit

1. Open the Copilot chat panel and switch to Agent mode using the dropdown menu.
2. Select Claude Sonnet 4.5 from the Model selector dropdown for optimal performance.
3. Start a new chat to ensure clean context for this step.
4. In the Copilot chat input field, use the SpecKit plan command:

   /speckit.plan
   

5. SpecKit will analyze the specification and clarifications, then create a technical implementation plan that includes:
   • High-level technical approach
   • Architecture decisions
   • Files that need to be modified or created
   • Component modifications needed
   • Integration points
6. Review the generated plan to ensure it aligns with your project structure and existing architecture.
7. Commit and push your changes:

   git add .
   git commit -m "Create implementation plan for overdue todo items"
   git push

Success Criteria

To complete this exercise successfully, ensure that:

• The file specs/001-*/plan.md exists with the technical implementation plan
• The plan references your specific project files and structure
• Technical decisions are clearly documented
• The plan respects your project's existing architecture and patterns

If you encounter any issues, you can:

• Make sure you're using Agent mode in Copilot chat
• Verify you started a new chat for this step
• Check that the /speckit.plan command was recognized
• Review that specs/001-*/plan.md was created
• Ask Copilot to regenerate the plan if needed

Why?

The implementation plan bridges the gap between the "what" (specification) and the "how" (implementation). It documents technical decisions, architecture choices, and the specific approach for implementing the feature. Having a clear plan ensures that the implementation tasks are well-defined and that the generated code follows your project's patterns and conventions. This also provides a reference for code review and helps ensure consistency across the codebase.

[github-actions]

Step 6-5 - Passed ✅

Status	Description
✅ - Pass	The file 'specs/001-*/plan.md' should exist

[github-actions]

🎉🎉🎉 Nice work! Everything is perfect! 🎉🎉🎉
Preparing content for step 6-6! One moment... 🤓