Web App Pages
Relevant source files
The following files were used as context for generating this wiki page:The Kiro Web App is a modern web application built to present the content of the Kiro specification-driven development guide. It serves as the primary user interface for developers and project managers to access methodology, process guides, templates, and examples. The application is structured into several key pages, each dedicated to a specific aspect of the guide.
The core purpose of the web app is to provide a navigable and user-friendly experience for the extensive markdown-based documentation that forms the Kiro guide.
Sources: kiro-web-app/README.md
Application Architecture and Technology
The web application is a single-page application (SPA) built with React. It uses a component-based architecture where different sections of the guide are rendered as distinct pages managed by React Router.
Sources: kiro-web-app/README.md:27-36
Technology Stack
The following table details the technologies used to build the web application.
| Layer | Technology | Purpose |
|---|---|---|
| UI Framework | React 18 | User interface framework |
| Language | TypeScript | Type safety |
| Styling | Tailwind CSS | Styling framework |
| Routing | React Router | Routing management |
| Icons | Lucide React | Icon library |
| Build Tool | Vite | Build tool |
Sources: kiro-web-app/README.md:27-36
Page Navigation Structure
The web app's pages are organized to follow the logical structure of the Spec-Driven Development Guide. The navigation allows users to move between high-level concepts, detailed processes, and practical resources.
This diagram illustrates the main navigational flow between the key pages of the application.
Page Content and Features
The web application is composed of several pages, each corresponding to a major section of the Kiro guide.
Methodology Page
This page explains the core concepts, philosophy, and benefits of specification-driven development. It is intended for users new to the methodology to understand its foundational principles.
Content Includes:
- Overview: An introduction to the three-phase approach (Requirements, Design, Tasks).
- Philosophy: The "why" behind the methodology, focusing on clarity before code and iterative refinement.
- When to Use: A decision framework to help users decide if spec-driven development is appropriate for their project.
Sources: spec-process-guide/methodology/overview.md, kiro-web-app/README.md:8
Process Guide Page
This page provides a detailed, step-by-step walkthrough of the three-phase development workflow. It serves as a practical guide for users actively creating a specification.
Content Includes:
- Requirements Phase: How to gather and structure requirements using the EARS format.
- Design Phase: How to create comprehensive technical design documents.
- Tasks Phase: How to break down a design into actionable coding tasks.
The workflow is visualized as a state machine, emphasizing the sequential and iterative nature of the process.
Prompting Strategies Page
This section is dedicated to effective communication techniques for collaborating with AI assistants during the spec-development process.
Content Includes:
- Core Principles: Best practices like "Context is King" and using specific, concrete requests.
- Phase-Specific Practices: Tailored advice for prompting during the Requirements, Design, and Tasks phases.
- Communication Techniques: Guidance on iterative refinement and providing structured feedback.
- Troubleshooting: Solutions for common issues like generic AI responses or scope creep.
Sources: spec-process-guide/prompting/best-practices.md, kiro-web-app/README.md:11
Commands & Automation Page
This page documents the system's built-in capabilities, particularly automated commands that assist in project setup and development. A key feature is the Create Steering Documents command.
Content Includes:
- System Capabilities: An overview of core functions and features of the Kiro AI Assistant.
- Command Documentation: Detailed usage for commands like
Create steering documents. - MCP Integration: Information on Model Context Protocol support.
The process for the Create Steering Documents command is as follows:
Other Content Pages
The web app also features several other pages to provide a comprehensive resource for users.
| Page / Feature | Description |
|---|---|
| Full Content Display | Presents the complete guide, including AI Reasoning, Execution Guide, and Template Library. |
| System Documentation | Details on Kiro AI Assistant's capabilities, response style, and quality standards. |
| Project Guidance | Contains generated steering documents like Project Standards, Git Workflow, and API Design. |
Sources: kiro-web-app/README.md:7-21
Summary
The pages within the Kiro Web App are designed to provide a structured and accessible interface to the Spec-Driven Development Guide. By organizing the guide's extensive content into distinct, navigable pages, the application supports developers and managers in learning and applying the methodology effectively. The integration of documentation, examples, and automated command references into a single front-end makes it a central tool for any project following the Kiro process.
Sources: kiro-web-app/README.md, README.md:5-13