skills/perfect-landing-page/SKILL.md
Build high-converting landing pages with a simple 6-section framework. Use for landing page guidance.
npx skillsauth add da1z/agent-things perfect-landing-pageInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Build landing pages using this proven 6-section structure. Each section has a specific purpose in the conversion journey.
1. Hero Section (Above the Fold)
2. Features & Benefits
3. Additional Social Proof
4. FAQ (Handle Objections)
5. Final Call to Action
6. Footer
The most critical section. If this fails, visitors won't scroll further.
| Element | Purpose | Copy Guidance | | ---------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | Title | Explain the VALUE you provide | Don't just describe what you do—explain what happens when they use it. "Generate more traffic" > "Marketing agency" | | Subtitle | Explain HOW the value is created | Include the method and optionally WHO it's for. "We building high-converting websites for small businesses" | | Visual | Help them imagine the outcome | Show product in use, the experience, or the person behind the service | | Social Proof | Make claims believable | Logos, numbers ("5,000 customers"), years in business | | CTA | Tell them what to do next | One clear action: "Get Started", "Book a Call", "Buy Now" |
Title: [Value/Outcome they get]
Subtitle: [How you deliver it] + [Who it's for]
CTA: [Specific next action]
Stripe:
Service Provider:
Deliver on the promise made in the hero. Explain HOW it works.
| Type | Definition | Example (Tesla) | | ----------- | ---------------------------- | ------------------------------------------------------- | | Feature | Technical specs, what it has | "200 mph top speed", "120 horsepower" | | Benefit | What happens when you use it | "Stay connected anywhere", "Immersive sound experience" |
The feature is "we have a flower." The benefit is "you can throw fireballs."
Always connect features TO benefits. Don't just list specs—explain what those specs mean for the user.
Short format: 3-4 key benefits with icons Long format: Detailed feature sections with visuals
Reinforce credibility after explaining how it works.
Handle objections before they become reasons not to buy.
A landing page is a sales presentation without a live salesperson. FAQs predict and answer the questions that would prevent purchase.
Think about why someone might NOT buy:
**Q: [Common objection phrased as question]**
A: [Direct answer that addresses the concern]
Last chance before they leave. Repeat the CTA.
[Headline restating value]
[Brief supporting text]
[CTA Button]
Organizational element for navigation and legal requirements.
When building a landing page, verify each section:
- [ ] Hero: Title explains VALUE, not just what you do
- [ ] Hero: Subtitle explains HOW and/or WHO
- [ ] Hero: Visual helps them imagine the outcome
- [ ] Hero: Social proof makes claims credible
- [ ] Hero: CTA is clear and specific
- [ ] Features: Connected to benefits, not just specs
- [ ] Social Proof: Specific and verifiable
- [ ] FAQ: Addresses real objections
- [ ] Final CTA: Clear next step before they leave
- [ ] Footer: Navigation and legal requirements
| Section | Purpose | Key Question to Answer | | ----------------- | ------------------------------ | ------------------------------ | | Hero | Capture attention, state value | "What's in it for me?" | | Features/Benefits | Explain how it works | "How does this deliver value?" | | Social Proof | Build credibility | "Can I trust this?" | | FAQ | Handle objections | "Why shouldn't I buy?" | | Final CTA | Drive action | "What do I do next?" | | Footer | Navigation | "What else is here?" |
development
Guide agents to organize code by functionality instead of technical file type. Use when adding features, refactoring project structure, reviewing architecture, colocating related code, or deciding where components, hooks, types, utilities, tests, styles, and API code should live.
development
How to access Hono framework documentation.
development
Save team knowledge notes into ./knowledge/ with date-prefixed filenames. Every solved problem, discovered pattern, or key decision becomes searchable knowledge that makes future work easier. Use when the user wants to capture gotchas, errors, build issues, solutions, patterns, or decisions for future reference.
development
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.