page-architecture

Plans website information architecture, page sections, written content, and mock data specifications.

3|1|Updated Nov 19, 2025
One-click install
npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill page-architecture-lukaskellerstein
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-architecture
Source: https://github.com/lukaskellerstein/claude-my-marketplace/tree/main/plugins/web-design-plugin/skills/page-architecture
Command: npx skills add https://github.com/lukaskellerstein/claude-my-marketplace --skill page-architecture-lukaskellerstein

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Starting a website from a blank canvas leaves teams guessing which pages to build, what sections each page needs, and what content fills them. This Skill translates a business brief into a structured page specification that downstream design and implementation skills can execute against. ## Core Features & Use Cases - Site Map & Page Planning: Matches business type (SaaS, e-commerce, portfolio, restaurant, event, etc.) to proven page templates and defines routes in conversion-funnel order. - Section-by-Section Breakdown: Selects section variants (hero, features, testimonials, pricing, FAQ, CTA, footer) from a detailed catalog with layout, content slots, and responsive behavior. - Real Content Writing: Produces actual headlines, subheadlines, CTAs, and body copy using proven formulas — never placeholder text. - Mock Data Specifications: Defines Faker.js-based data shapes for dynamic content like blog posts, products, dashboards, and reviews, including edge cases. - Use Case: Given a brief for a SaaS startup, produce a complete page specification covering home, pricing, and features pages with written copy, icon requirements, and animation intent notes ready for frontend implementation. ## Quick Start Plan the pages, sections, and content for a SaaS marketing website based on my product brief.

Frequently Asked Questions about page-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan what pages and sections my website needs?▼

Match your business type to a page template (SaaS, e-commerce, portfolio, restaurant, event, etc.), then order sections by conversion funnel: hook, build trust, demonstrate value, prove it works, remove friction, and convert. Each page gets a section-by-section specification with content and media needs.

How to write website headlines and CTAs that convert?▼

Use benefit-driven, specific headlines of 5-10 words following formulas like outcome-focused or social proof patterns. CTAs should be action-oriented with clear value, such as "Start Free Trial" or "Book a Demo", avoiding generic text like "Submit" or "Click Here".

When should I use mock data versus hardcoded content?▼

Hardcode marketing copy like hero headlines, feature cards, and pricing tiers directly in JSX. Use Faker.js-generated mock data imported from data files for dynamic repeating content like blog posts, product listings, dashboard metrics, and reviews that would come from an API in production.

What sections should a SaaS landing page include?▼

A SaaS page typically follows: hero, logo bar, features, product demo or screenshot, pricing, testimonials, FAQ, CTA banner, and footer. This order mirrors the buyer journey from "what is this" through "how much" to "I'll try it".

Does this skill handle visual design like colors and fonts?▼

No. Page architecture defines what content goes where, not how it looks. Visual design decisions like colors, fonts, and spacing belong to the styleguide and frontend-aesthetics skills, while CSS structure belongs to css-architecture.