# PROJ-001: Landing Page

## Problem
The project needs an attractive landing page that explains what Agent Skills are and how to use them.

## Solution
A single-page marketing site with hero, features section, skill showcase, and getting started guide.

## User Stories
- As a visitor, I want to understand what Agent Skills are at a glance
- As a developer, I want to see example skills and how they work
- As a new user, I want clear instructions to get started

## Acceptance Criteria
- [ ] Hero section with headline, subtext, and CTA button
- [ ] Features section showing the 7 skills with icons
- [ ] Code example showing a skill file
- [ ] "Get Started" section with installation steps
- [ ] Responsive design (mobile, tablet, desktop)
- [ ] Dark mode support
- [ ] Page loads in under 2 seconds

## Edge Cases
- Very long skill names should truncate gracefully
- Code blocks should be horizontally scrollable on mobile

## Out of Scope
- User authentication
- Skill marketplace / browser
- Backend API

## Architecture

### Component Tree
```
Page (Server Component)
├── Header
│   ├── Logo
│   └── Nav (GitHub link, dark mode toggle)
├── Hero
│   ├── Headline
│   ├── Subtext
│   └── CTA Button
├── Features
│   └── SkillCard (x7)
├── CodeExample
│   └── Syntax-highlighted skill file
├── GetStarted
│   └── Step cards (1-2-3)
└── Footer
```

### Key Decisions
| Decision | Choice | Reason |
|----------|--------|--------|
| Styling | Tailwind | Project standard |
| Dark mode | CSS `prefers-color-scheme` + toggle | No JS needed for initial load |
| Code highlighting | Server-side with shiki | No client bundle for syntax |