Context
Without page-level specs, developers assemble pages ad-hoc — pulling in components without clear data contracts, skipping metadata, and ignoring loading states. This skill produces the blueprint that lets a developer build a complete, production-ready page from a single document.
Procedure
- For each page in the site architecture, define the section sequence using patterns from the section library. Example: Homepage = Hero → Trust Strip → Feature Grid → How It Works → Testimonial → Final CTA.
- Map data sources for each section: static (hardcoded in the component), file system (markdown files), API (fetch at build or request time), CMS (headless CMS query).
- Define the page metadata: title tag (50-60 chars), meta description (120-160 chars), OG title, OG description, OG image URL, canonical URL.
- Specify the rendering strategy: static generation (SSG), server-side rendering (SSR), or client-side with loading states. Choose based on data freshness requirements.
- Define loading and error states: what the user sees while data fetches, and what happens if a data source fails (fallback content, error boundary).
- Set the performance budget: target LCP element, maximum JS bundle size for the page, image optimization requirements.
Output Format
# Page Assembly — [Route]
## Route: /[path]
- **Purpose**: [one-sentence from IA]
- **Rendering**: [SSG | SSR | ISR with revalidate interval]
- **Template**: [layout wrapper]
## Section Sequence
| Order | Pattern | Data Source | Notes |
|-------|---------|-------------|-------|
| 1 | Hero | Static | LCP element: headline text |
| 2 | Trust Strip | Static | 6 logos, grayscale |
| 3 | Feature Grid | Static | 3 cards |
| 4 | How It Works | Static | 3 steps |
| 5 | Testimonial | File system | Load from /content/testimonials |
| 6 | Final CTA | Static | Primary + secondary actions |
## Data Flow
```text
[data source] → [loader function] → [page component] → [section props]
SEO Metadata
| Field | Value | |-------|-------| | title | "[Page title — Brand]" (max 60 chars) | | description | "[Meta description]" (max 160 chars) | | og:title | "[Same as title or shorter]" | | og:description | "[Same as description]" | | og:image | "/og/[page-name].png" | | canonical | "https://domain.com/[path]" |
Loading States
| Section | Loading | Error | |---------|---------|-------| | Hero | Instant (static) | — | | Testimonial | Skeleton card | Show static fallback quote | | Dynamic data | Skeleton pulse | Error boundary with retry |
Performance Budget
| Metric | Target | LCP Element | |--------|--------|-------------| | LCP | < 2.5s | Hero headline (text) | | CLS | < 0.1 | No layout shift from lazy images | | INP | < 200ms | CTA button response | | JS bundle | < 100KB gzipped | Code-split below-fold sections |
Implementation Notes
- [Framework-specific notes: Next.js generateMetadata, dynamic imports, etc.]
- [Image optimization: next/image with priority for hero, lazy for below-fold]
- [Analytics events to fire on this page]
## QA Rubric (scored)
- Completeness (0-5): every section, data source, and metadata field is defined.
- Implementability (0-5): a developer can build the page without asking questions.
- Performance (0-5): LCP element identified, budget targets set, code-splitting planned.
- SEO readiness (0-5): metadata is complete, crawlable, and unique per page.
## Examples (good/bad)
- Good: "Homepage: 6 sections in sequence, all static data (no API calls), SSG rendering, LCP is hero headline text (renders instantly), JS bundle under 80KB with below-fold sections dynamically imported."
- Bad: "Homepage: put a hero, some features, and a CTA. Make sure it loads fast." — no data flow, no metadata, no performance targets.
## Variants
- App page mode: includes client-side state management, authentication checks, and real-time data subscriptions.
- Marketing page mode: fully static with zero client-side JS (progressively enhanced with optional interactivity).