peterfei/landing-page-skill

Landing Page Skill

This Skill is designed to be agent-agnostic — usable with Claude Code, Codex CLI, Cursor, Trae, OpenClaw, Hermes Agent, or any agent supporting markdown-based skills. All file references use relative paths from this Skill's root directory.

Activation Conditions

Activate when user input contains any of the following trigger words: landing page, product page, marketing page, homepage design, single page website.

Honesty Boundaries (Applicability)

Applicable:

1. Single-page conversion landing pages (collecting leads, guiding sign-ups, driving purchases)
2. Product/service showcase pages (SaaS, single e-commerce items, consulting services, courses)
3. Tech stack: Next.js 14/15 + Tailwind CSS (MVP stage)
4. Pages with a clear conversion goal (CTA)

Not Applicable:

1. Multi-page websites or blog systems (beyond single-page scope)
2. Full applications requiring backend API, database, or user authentication
3. Complex interactions (real-time collaboration, data visualization dashboards, games)
4. Non-web platforms (mini-programs, native apps, desktop applications)

Boundary Statement: This Skill generates a high-quality starting codebase; manual polishing of copy details and brand assets is required. It does not promise "one-click perfection."

5-Phase Operational Protocol

Phase 1: Requirements Gathering

Confirm the following information with the user (skip if already provided):

1. Product/Service: What is it? What is the core value proposition?
2. Target Audience: Who will use it? What pain points do they have?
3. Conversion Goal: What do you want the user to do? (Sign up / Purchase / Download / Book)
4. Tech Stack: Confirm use of Next.js 14/15 + Tailwind CSS
5. Brand Style Preference: Choose from 6 styles in references/aesthetic-styles.md
6. Competitor References: Any preferred landing page references? (Optional)

Output: Requirements summary document (Markdown List), used in Phase 2.

Phase 2: Strategy Planning

1. Load Industry Template: Select template from references/page-templates/ based on product type:
   • SaaS Product → references/page-templates/saas-product.md
   • E-commerce Single Item → references/page-templates/ecommerce.md
   • Other → General structure (Hero → Features → Benefits → Social Proof → CTA → Footer)
2. Select Aesthetic Direction: Choose a style from references/aesthetic-styles.md, confirm color tendencies
3. Copy Structure: Plan using references/copy-formulas/:
   • Hero Headline: "Result + Audience + Mechanism" formula from references/copy-formulas/hero-headlines.md
   • CTA Copy: "Verb + Benefit" format from references/copy-formulas/cta-patterns.md
   • Objection Handling: 5 objection templates from references/copy-formulas/objection-handling.md
4. Conversion Framework Mapping: Map 7-part copy to DESIGNNAS 11 Elements (see references/conversion-framework.md)

Output: Strategy document (including style selection, color direction, copy outline, element mapping table).

Phase 3: Design System

Generate design tokens based on references/design-system.md:

1. Typography Tokens: Display font, Body font, heading size scale
2. Color Tokens: Primary / Secondary / Accent / Neutral / Background / Text (hex + CSS variables)
3. Motion Tokens: PageLoad animation, Scroll-triggered animation, Hover interaction (type + duration)
4. Layout Tokens: Grid type, Spacing scale, Section width, asymmetrical layout rules

Output: Design token document (directly copyable into tailwind.config.ts).

Phase 4: Code Generation

Generate code following references/tech-adapters/nextjs-tailwind.md:

1. Project Structure: app/page.tsx, app/layout.tsx, components/, lib/utils.ts, tailwind.config.ts
2. Componentization: Each DESIGNNAS element as an independent component (HeroSection, FeaturesSection, etc.)
3. Tailwind Configuration: Extend design system tokens (colors, fonts, animations)
4. Responsive Design: Use sm:/md:/lg:/xl: breakpoints
5. Accessibility: Semantic HTML, alt text, contrast, focus-visible

Output: Complete runnable Next.js project code.

Phase 5: Quality Validation (Closed-Loop Assurance)

5.1 Conversion Check

• 11-element coverage: Check for Hero, Social Proof, Features, Benefits, How It Works, Testimonials, Pricing/CTA, FAQ, Scarcity, Footer (at least 7 covered)
• CTA Clarity: Is CTA text using "Verb + Benefit" format?
• Hero Headline: Does it follow the "Result + Audience + Mechanism" formula?

5.2 Anti-pattern Detection (Check each item, see references/anti-patterns.md)

#	Rule	Detection Logic	Severity
1	Overused Font	Inter/Roboto/Arial as Display font	Blocking
2	Template Color Scheme	Purple gradient + pure white background template combo	Blocking
3	Vague CTA	CTA is Submit/Learn More/Click Here	Blocking
4	Missing Social Proof	No Social Proof element below Hero	Blocking
5	Weak Hero Headline	Starts with Welcome/Brand name, purely descriptive	Blocking
6	Missing Mobile Responsiveness	No sm:/md:/lg: responsive breakpoints	Warning
7	Accessibility Baseline	Missing alt/aria/semantic HTML	Warning
8	Missing SEO Basics	No meta/title/OG tags	Warning
9	Performance Risk	Large images unoptimized, missing lazy load	Warning
10	Token Consistency	Hardcoded colors/non-standard spacing	Warning

5.3 Auto-fix Loop (Blocking Rules)

When blocking rules (1-5) fail, automatically execute the fix loop:

1. For each failing blocking rule, generate specific fix code
2. Replace only the Section code triggering the rule (do not modify unrelated Sections)
3. Re-run detection for that rule
4. Repeat the above steps, up to 3 rounds
5. If still failing after 3 rounds → Report the failure reason, leave decision to user

5.4 Positive Pattern Validation (Advisory, see references/positive-patterns.md)

#	Pattern	Detection Logic
P1	CTA Verb+Benefit	CTA text matches "Verb + Specific Benefit" format
P2	Hero Result+Audience	Headline contains quantifiable result + target audience
P3	Social Proof Elements	Page contains ≥1 social proof type
P4	Urgency/Scarcity	Presence of spots/time/price urgency elements

Positive patterns do not trigger auto-fix; they only provide optimization suggestions in the report.

Output: Detection report (Anti-pattern + Positive pattern Markdown tables) + Auto-fix summary (if any fixes applied).

Phase 5.5: Iterative Optimization (Optional)

After Phase 5, offer the user 3 options:

A) Accept — Output final complete project code B) Modify specified Section — User describes the Section to modify and the modification request C) Regenerate specified Section — User specifies a Section to regenerate from scratch

Iteration Rules:

• Modifications/regenerations only affect the user-specified Section (section granularity)
• After each modification, re-detect anti-pattern rules related to that Section
• Up to 3 rounds of iteration, output current version after limit exceeded
• Each round outputs a change log: "Round N: Modified [Sections], Re-checked [Rules]"

Index

Tech Stack Adapters

• Next.js 14/15 + Tailwind CSS → references/tech-adapters/nextjs-tailwind.md

Industry Templates

• SaaS Product Page → references/page-templates/saas-product.md
• E-commerce Product Page → references/page-templates/ecommerce.md

Copy Formulas Library

• Hero Headlines → references/copy-formulas/hero-headlines.md
• CTA Patterns → references/copy-formulas/cta-patterns.md
• Objection Handling → references/copy-formulas/objection-handling.md

Design References

• Conversion Framework → references/conversion-framework.md
• Design System → references/design-system.md
• Aesthetic Styles → references/aesthetic-styles.md
• Anti-pattern Detection → references/anti-patterns.md
• Positive Pattern Detection → references/positive-patterns.md

Cross-Agent Environment Adaptation Notes

This Skill is designed to be agent-agnostic, compatible with the following runtimes:

Runtime	Support Method	Notes
Claude Code	Native support	Recommended, activate via /agent or trigger words
Codex CLI	Compatible	Directly load SKILL.md
Cursor	Compatible	Copy to .cursorrules or use Composer
Trae	Compatible	Directly load SKILL.md
OpenClaw	Compatible	Follows skills.sh protocol
Hermes Agent	Compatible	Directly load SKILL.md
Other markdown-based skill runtimes	Compatible	Any runtime supporting YAML frontmatter + Markdown

Path Convention

All file references use relative paths from this Skill's root directory:

• references/xxx.md
• assets/xxx.svg
• scripts/xxx.py

The agent or user resolves based on their own installation location, without relying on any absolute paths.

Self-Containment Principle

SKILL.md contains all necessary information and can be copied and used directly. Files in references/ provide deep knowledge supplements and can be loaded as needed.

This Skill follows the Agent Skills open protocol.