59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
|
# 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 |
|