Web App Overview
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 and provide access to the contents of the Kiro specification-driven development guide. Its primary purpose is to serve as a user-friendly interface for navigating and consuming the comprehensive documentation related to the Kiro methodology, system capabilities, project guidance, and commands.
The application is designed as a single-page application (SPA) using React, providing a dynamic and responsive experience for users who want to learn about and utilize the Kiro system. It organizes a wide range of content, from high-level methodology concepts to specific, ready-to-use templates and command references.
Sources: kiro-web-app/README.md
Tech Stack
The application is built with a modern frontend technology stack focused on performance, type safety, and a streamlined development experience.
| Layer | Technology | Rationale / Usage |
|---|---|---|
| UI Framework | React 18 | Core library for building the user interface. |
| Language | TypeScript | Provides static typing for improved code quality and maintainability. |
| Build Tool | Vite | A fast frontend build tool for development and production bundling. |
| Styling | Tailwind CSS | A utility-first CSS framework for rapid UI development. |
| Routing | React Router | Manages client-side routing for the single-page application. |
| Icons | Lucide React | Provides a library of icons used throughout the application. |
Sources: kiro-web-app/README.md:27-33, kiro-web-app/package.json:17-23
Project Structure
The project follows a standard structure for a React application, separating concerns into distinct directories. The main application logic resides within the src folder.
This diagram shows the basic directory structure within the src folder.
Sources: kiro-web-app/README.md:48-57
Key Directories
src/components/: Contains reusable React components, such asLayout.tsx, which likely defines the main application shell (e.g., header, sidebar, footer).src/pages/: Contains top-level components that correspond to different routes or pages within the application, such asHome.tsx,ContentCoverage.tsx, andValidationReport.tsx.
Sources: kiro-web-app/README.md:49-52, kiro-web-app/src/pages/ContentCoverage.tsx, kiro-web-app/src/pages/ValidationReport.tsx
Application Architecture
The application is architected as a single-page application using a component-based model. The root component, App.tsx, sets up the routing and main layout.
Component Hierarchy
The following diagram illustrates the primary component hierarchy. The App component renders the Layout, which in turn renders the specific page component determined by the current route via an Outlet.
Sources: kiro-web-app/src/App.tsx:10-14
Routing
Client-side routing is managed by react-router-dom. The App.tsx file defines the application's routes, mapping URL paths to their corresponding page components. The application uses a nested routing structure where a main Layout component wraps all page-specific components.
The routing configuration is defined as follows:
// kiro-web-app/src/App.tsx:10-14
<Routes>
<Route path="/" element={<Layout />}>
{/* Page routes are rendered here as children */}
</Route>
</Routes>
While the specific child routes are not detailed in the provided App.tsx, the structure indicates that pages like ContentCoverage and ValidationReport would be rendered within the Layout component.
Sources: kiro-web-app/src/App.tsx:10-14, kiro-web-app/src/pages/ContentCoverage.tsx, kiro-web-app/src/pages/ValidationReport.tsx
Features
The web app is designed to present the full Kiro specification-driven development guide, organized into several key areas.
| Category | Description |
|---|---|
| Full Content Display | Presents core concepts, process guides, AI reasoning, and prompting strategies. |
| System Documentation | Details Kiro AI Assistant's capabilities, response style, and quality standards. |
| Project Guidance | Provides project-specific standards for code quality, Git workflows, and API design. |
| Commands & Automation | Documents commands for generating guidance documents and integrating with the Model Context Protocol (MCP). |
| Validation & Coverage | Includes pages like ContentCoverage and ValidationReport to show the completeness of the documentation. |
Sources: kiro-web-app/README.md:5-24, kiro-web-app/src/pages/ContentCoverage.tsx, kiro-web-app/src/pages/ValidationReport.tsx
Build and Development
The project uses npm as its package manager and provides several scripts for common development tasks.
Development Workflow
The typical development process is visualized below.
NPM Scripts
The package.json file defines the following scripts to manage the application's lifecycle.
| Script | Description |
|---|---|
dev | Starts the Vite development server, typically on http://localhost:3000. |
build | Creates a production-ready build of the application. |
lint | Runs ESLint to check for code quality and style issues. |
preview | Serves the production build locally for previewing. |
Sources: kiro-web-app/package.json:8-12, kiro-web-app/README.md:39-46