Agentic Frontend Development

A hands-on, 4-day workshop for frontend and full-stack developers who want to work smarter with AI tools like GitHub Copilot. You'll go beyond autocomplete — using AI to plan architecture, scaffold projects, implement features, write tests, document components, and debug real bugs across the full development lifecycle.

What You'll Learn

• Understand the AI landscape — models, agents, MCP, reasoning tiers, and the difference between Ask, Plan, and Agent mode
• Master GitHub Copilot — inline completions, chat, agent mode, memory, and custom instructions
• Prompt effectively — write actionable prompts, manage context, and get consistent results
• Plan before you build — create Architecture Decision Records, code conventions, and phased feature plans with AI assistance
• Build a complete React + TypeScript app — design system, REST API integration, CRUD features, Storybook documentation, and full test coverage
• Debug with confidence — trace frontend bugs and backend issues using AI-assisted workflows
• Write secure code — review AI-generated code for OWASP risks, handle secrets safely, and maintain trust boundaries

Course Modules

01. AI Landscape: Models, tiers, reasoning, Ask/Plan/Agent, MCP

02. Copilot Fundamentals: Inline completions, Ask mode, Plan mode

03. Copilot Chat: Chat sessions, slash commands, context management, prompt engineering

04. Copilot Agents: Autonomous multi-step tasks, tool use, terminal integration

05. Memory & Context: copilot-instructions.md, custom instructions, persistent project context

06. Security: Reviewing AI-generated code, secrets, supply chain risks

07. Prepare Environment: Scaffold Vite + React + TypeScript, Vitest, Cypress, Storybook, GitHub Actions CI/CD

08. Building Plans: ADRs, code conventions, phased feature plans, preventing technical debt

09. Implement Plans: Design system, codebase structure, REST API integration

10. Build a Webapp: Feature development, AI-assisted testing, Storybook documentation

11. Bug Fixes: Frontend bugs, tracing a bug from UI to backend API

Who This Is For

Frontend and full-stack developers ready to adopt AI-assisted development workflows.
No prior AI experience needed — solid JavaScript/TypeScript fundamentals are expected.

Format

Style: Hands-on, prompt-and-build exercises using GitHub Copilot
Outcome: A complete React webapp built with AI, and the judgment to know when to use it, when to override it, and how to stay in control

Vibe coding is not about letting AI write everything for you. It's about staying in control, planning before prompting, and trusting but verifying. Good AI-assisted development leads to faster scaffolding, more consistent code, better test coverage, and more time for architecture and design thinking.