creating-kiro-packages

Creating Kiro Packages

Overview

Kiro uses two package types:

1. Steering files (.kiro/steering/*.md) - Markdown with optional YAML frontmatter
2. Hooks (.kiro/hooks/*.json) - JSON configuration for event-driven automation

Package Types

Type	Location	Format	Purpose
Steering Files	.kiro/steering/*.md	Markdown + YAML	Context-aware instructions
Hooks	.kiro/hooks/*.json	JSON	Event-driven automation

Steering Files

Inclusion Modes

Mode	Frontmatter	When Applied
always (default)	inclusion: always	All contexts
fileMatch	inclusion: fileMatch + fileMatchPattern	Files matching pattern
manual	inclusion: manual	User manually triggers

Quick Reference

---
inclusion: always  # always, fileMatch, or manual
fileMatchPattern: "components/**/*.tsx"  # Required for fileMatch
domain: testing  # Optional: for organization
---

Creating Always-Included Steering Files

Used for workspace-wide standards that influence all code generation:

---
inclusion: always
---

# Core Technology Stack

Our workspace uses the following technologies and standards.

## Stack

- **Frontend**: React 18 + TypeScript + Vite
- **Backend**: Node.js + Express + Prisma
- **Database**: PostgreSQL
- **Testing**: Vitest + Testing Library

## Universal Principles

- Write self-documenting code
- Keep functions under 50 lines
- Use meaningful variable names
- Add comments only for complex logic

Creating FileMatch Steering Files

Applied automatically when working with files matching the pattern:

---
inclusion: fileMatch
fileMatchPattern: "components/**/*.tsx"
domain: frontend
---

# React Component Guidelines

Applied automatically when working with React components.

## Component Standards

- Use functional components with hooks
- Keep components under 200 lines
- Extract logic into custom hooks
- Co-locate styles with components

## Example

\`\`\`tsx
// Good: Focused component
function UserProfile({ userId }: Props) {
  const user = useUser(userId);
  return <div>{user.name}</div>;
}
\`\`\`