Skip to content

Commit fac5fea

Browse files
ducdmdevducdmdev
committed
docs: add landing page implementation plan (2 tasks)
1 parent b711702 commit fac5fea

1 file changed

Lines changed: 279 additions & 0 deletions

File tree

‎docs/plans/2026-03-24-landing-page.md‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
# Landing Page — Implementation Plan
2+
3+
> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.
4+
5+
**Goal:** Build a single-page landing page for the agent-team-plugin with an interactive terminal demo, hosted on GitHub Pages.
6+
7+
**Architecture:** Single `index.html` with inline CSS and JS. Terminal Dark style (#0f0f23 background, monospace). Interactive terminal animation auto-types the 3-stage pipeline demo. No build tools, no dependencies. Deployed via GitHub Pages from `site/` directory.
8+
9+
**Tech Stack:** HTML, CSS, vanilla JS. No frameworks, no build tools.
10+
11+
**Spec:** `docs/specs/2026-03-24-landing-page-design.md`
12+
13+
---
14+
15+
## Chunk 1: Build the Landing Page
16+
17+
### Task 1: Create site directory and index.html
18+
19+
**Files:**
20+
- Create: `site/index.html`
21+
22+
- [ ] **Step 1: Create site directory**
23+
24+
```bash
25+
mkdir -p site
26+
```
27+
28+
- [ ] **Step 2: Create index.html with all 5 sections**
29+
30+
Create `site/index.html` — a single self-contained HTML file with inline `<style>` and `<script>`. The file should contain all 5 sections from the spec.
31+
32+
**Overall structure:**
33+
34+
```html
35+
<!DOCTYPE html>
36+
<html lang="en">
37+
<head>
38+
<meta charset="UTF-8">
39+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
40+
<title>Agent Team — Orchestrate parallel AI teammates in Claude Code</title>
41+
<meta name="description" content="Claude Code plugin that decomposes complex tasks into parallel work streams executed by multiple AI teammates across 3 pipeline stages.">
42+
<style>/* all CSS inline */</style>
43+
</head>
44+
<body>
45+
<!-- Section 1: Hero -->
46+
<!-- Section 2: Terminal Demo -->
47+
<!-- Section 3: Pipeline Overview -->
48+
<!-- Section 4: Features Grid -->
49+
<!-- Section 5: Install + Footer -->
50+
<script>/* all JS inline */</script>
51+
</body>
52+
</html>
53+
```
54+
55+
**CSS requirements** (inline in `<style>`):
56+
57+
- Base: `body { background: #0f0f23; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; margin: 0; }`
58+
- Monospace: `.mono { font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; }`
59+
- Container: `max-width: 960px; margin: 0 auto; padding: 0 20px;`
60+
- Section spacing: `padding: 80px 0;`
61+
- Colors: background #0f0f23, card background #1a1a2e, text #e2e8f0, muted #94a3b8, purple #a78bfa, blue #60a5fa, green #4ade80
62+
- Terminal window: dark chrome bar with 3 dots, monospace content, blinking cursor
63+
- Pipeline columns: 3-column grid with colored top borders
64+
- Feature cards: grid layout, code accent text
65+
- Copy button: small button on terminal blocks that copies text to clipboard
66+
- Responsive: `@media (max-width: 768px)` stacks columns
67+
- Reduced motion: `@media (prefers-reduced-motion: reduce)` skips animation
68+
69+
**Section 1: Hero** (HTML):
70+
71+
```html
72+
<header style="text-align: center; padding: 60px 0 20px;">
73+
<a href="https://github.com/ducdmdev/agent-team-plugin"
74+
style="position: absolute; top: 20px; right: 20px; color: #94a3b8;">
75+
<!-- GitHub SVG icon -->
76+
</a>
77+
<h1 class="mono" style="font-size: 2.5rem; margin: 0;">Agent Team</h1>
78+
<p style="color: #94a3b8; font-size: 1.1rem; margin: 12px 0 24px;">
79+
Orchestrate parallel AI teammates in Claude Code
80+
</p>
81+
<div class="terminal-block">
82+
<code>$ claude plugin marketplace add ducdmdev/agent-team-plugin</code><br>
83+
<code>$ claude plugin install agent-team</code>
84+
<button class="copy-btn" onclick="copyInstall()">Copy</button>
85+
</div>
86+
<span style="color: #94a3b8; font-size: 0.8rem;">v3.2.0</span>
87+
<p style="color: #64748b; margin-top: 30px;">Watch the demo ↓</p>
88+
</header>
89+
```
90+
91+
**Section 2: Terminal Demo** (HTML + JS):
92+
93+
The terminal is a `<div>` styled as a macOS terminal window:
94+
95+
```html
96+
<section id="demo">
97+
<div class="terminal">
98+
<div class="terminal-chrome">
99+
<span class="dot red"></span>
100+
<span class="dot yellow"></span>
101+
<span class="dot green"></span>
102+
<span class="terminal-title">claude</span>
103+
<button class="skip-btn" onclick="skipDemo()">Skip</button>
104+
</div>
105+
<div class="terminal-body" id="terminal-output">
106+
<!-- Lines injected by JS -->
107+
</div>
108+
</div>
109+
</section>
110+
```
111+
112+
JS animation logic:
113+
- Define the demo as an array of line objects: `{ text, delay, type, class }`
114+
- `type: 'input'` — type character by character (50ms/char)
115+
- `type: 'output'` — appear as a block (100ms delay between lines)
116+
- `type: 'header'` — stage header with 500ms pause before
117+
- `class` — optional CSS class for coloring (plan-line, execute-line, audit-line)
118+
- Demo content: directly from README lines 24-104, adapted to the line-object format
119+
- `IntersectionObserver` on `#demo` to auto-start when scrolled into view
120+
- `skipDemo()` function: clears animation timers, renders all lines immediately
121+
- Click on terminal to replay: reset `#terminal-output` innerHTML and re-run animation
122+
- `prefers-reduced-motion`: show all lines immediately, no animation
123+
124+
**Section 3: Pipeline Overview** (HTML):
125+
126+
```html
127+
<section>
128+
<div class="container">
129+
<p style="text-align: center; color: #94a3b8; max-width: 700px; margin: 0 auto 40px;">
130+
Agent Team splits every task into 3 stages — Plan, Execute, Audit — each with its
131+
own ephemeral team. Auto-detects team type from your task description.
132+
</p>
133+
<div class="pipeline-grid">
134+
<!-- 3 cards with colored top borders -->
135+
<div class="pipeline-card" style="border-top: 4px solid #a78bfa;">
136+
<h3 class="mono">Stage 1: Plan</h3>
137+
<p class="mono" style="color: #a78bfa; font-size: 0.85rem;">
138+
Researcher + Analyst + Plan Reviewer
139+
</p>
140+
<ul>
141+
<li>Prior context loading</li>
142+
<li>Plan-mode gate</li>
143+
<li>7-check plan audit</li>
144+
</ul>
145+
</div>
146+
<!-- Execute card (blue) -->
147+
<!-- Audit card (green) -->
148+
</div>
149+
</div>
150+
</section>
151+
```
152+
153+
**Section 4: Features Grid** (HTML):
154+
155+
7 feature cards in a responsive grid. Each card:
156+
157+
```html
158+
<div class="feature-card">
159+
<code class="feature-accent">exit 2</code>
160+
<h3>13 Hooks</h3>
161+
<p>Block premature completion, enforce file ownership, validate task graphs,
162+
limit plan revisions, enforce pre-shutdown commits</p>
163+
</div>
164+
```
165+
166+
Cards: 13 Hooks, 13 Roles, Error Recovery, Elegance Review, Lessons Capture, Team Per Stage, 5 Archetypes.
167+
168+
**Section 5: Install + Footer** (HTML):
169+
170+
```html
171+
<section>
172+
<h2 style="text-align: center;">Get Started</h2>
173+
<div class="install-grid">
174+
<div class="terminal-block">
175+
<code># Install from marketplace</code><br>
176+
<code>$ claude plugin marketplace add ducdmdev/agent-team-plugin</code><br>
177+
<code>$ claude plugin install agent-team</code>
178+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
179+
</div>
180+
<div class="terminal-block">
181+
<code># Enable agent teams feature</code><br>
182+
<code>$ export CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1</code><br><br>
183+
<code style="color: #64748b;"># Or in settings.json:</code><br>
184+
<code style="color: #64748b;"># { "env": { "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" } }</code>
185+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
186+
</div>
187+
</div>
188+
<p style="text-align: center; color: #64748b; font-size: 0.85rem;">
189+
Requires: Claude Code CLI · jq (hooks skip gracefully without it) · git (optional)
190+
</p>
191+
<p style="text-align: center;">
192+
<a href="https://github.com/ducdmdev/agent-team-plugin#readme">Full documentation →</a>
193+
</p>
194+
</section>
195+
196+
<footer>
197+
<a href="https://github.com/ducdmdev/agent-team-plugin">GitHub</a> · v3.2.0 · Made for Claude Code developers
198+
</footer>
199+
```
200+
201+
- [ ] **Step 3: Test locally**
202+
203+
```bash
204+
open site/index.html
205+
# Or: python3 -m http.server 8000 --directory site
206+
```
207+
208+
Verify:
209+
- Hero renders with install command and version badge
210+
- Terminal demo auto-starts on scroll, types input, shows all 3 stages
211+
- Skip button works
212+
- Click terminal to replay works
213+
- Pipeline columns render 3 cards with correct colors
214+
- Features grid renders 7 cards
215+
- Install section has copy buttons that work
216+
- Footer has GitHub link
217+
- Responsive: resize to mobile width, verify single-column layout
218+
- Reduced motion: test with system setting or `prefers-reduced-motion` override
219+
220+
- [ ] **Step 4: Commit**
221+
222+
```bash
223+
git add site/
224+
git commit -m "feat: add landing page with interactive terminal demo"
225+
```
226+
227+
---
228+
229+
### Task 2: GitHub Pages setup and deploy
230+
231+
**Files:**
232+
- Modify: `.gitignore` (ensure `site/` is NOT ignored)
233+
234+
- [ ] **Step 1: Verify site/ is not gitignored**
235+
236+
```bash
237+
git check-ignore site/index.html
238+
```
239+
240+
If ignored, update `.gitignore` to exclude the exclusion.
241+
242+
- [ ] **Step 2: Push to main**
243+
244+
```bash
245+
git push origin main
246+
```
247+
248+
- [ ] **Step 3: Enable GitHub Pages**
249+
250+
```bash
251+
gh api repos/ducdmdev/agent-team-plugin/pages -X POST -f source.branch=main -f source.path=/site 2>/dev/null || \
252+
gh api repos/ducdmdev/agent-team-plugin/pages -X PUT -f source.branch=main -f source.path=/site
253+
```
254+
255+
- [ ] **Step 4: Verify deployment**
256+
257+
Wait 1-2 minutes for GitHub Pages to build, then:
258+
259+
```bash
260+
curl -s -o /dev/null -w "%{http_code}" https://ducdmdev.github.io/agent-team-plugin/
261+
```
262+
263+
Expected: `200`
264+
265+
- [ ] **Step 5: Update README with landing page link**
266+
267+
Add to the top of `README.md`, after the badge:
268+
269+
```markdown
270+
🌐 **[Live Demo](https://ducdmdev.github.io/agent-team-plugin/)** — see the pipeline in action
271+
```
272+
273+
- [ ] **Step 6: Commit**
274+
275+
```bash
276+
git add README.md .gitignore
277+
git commit -m "docs: add landing page link to README"
278+
git push origin main
279+
```

0 commit comments

Comments
 (0)