UI blueprint for building rich SEO landing pages with Next.js/TSX. Defines the exact section order, animated SVG patterns, comparison tables, FAQ accordions, CTA blocks, JSON-LD structured data, and color palette. Use when building any /use-case/ or landing page that needs to rank in search.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
UI blueprint for building rich SEO landing pages with Next.js/TSX. Defines the exact section order, animated SVG patterns, comparison tables, FAQ accordions, CTA blocks, JSON-LD structured data, and color palette. Use when building any /use-case/ or landing page that needs to rank in search.
user_invocable
true
SEO Page UI
A reusable UI blueprint for building rich, SEO-optimized landing pages in Next.js (TSX). This skill defines the visual component patterns, section order, animated SVG templates, comparison tables, and structured data that every SEO landing page should have.
This is the UI layer only. It does not handle keyword discovery, state files, or pipeline orchestration. It tells you what to build visually.
When to Use
Building a /use-case/ page targeting a keyword
Creating any SEO landing page that needs rich media
When a pipeline skill (like gsc-seo-page or underserved-seo-page) needs to know the page structure
File Structure
Each page is a single TSX file at src/app/{route}/{slug}/page.tsx:
Never use: indigo (#6366f1), purple (#818cf8, #8b5cf6), or blue (#3b82f6).
CSS classes for the page body use the site's design tokens: text-white, text-muted, text-accent, bg-surface-light/50, border-white/5, border-accent/20.
Required Metadata
exportconstmetadata: Metadata = {
title: "AI {Topic} Automation for Mac - {Subtitle} | Fazm",
description: "155-160 char meta description with primary keyword naturally included.",
keywords: [
"primary keyword",
"primary keyword mac",
"variation 1",
"variation 2",
"variation 3",
"variation 4",
],
alternates: { canonical: "https://fazm.ai/{route}/{slug}" },
openGraph: {
title: "AI {Topic} Automation for Mac - Fazm",
description: "Short OG description under 200 chars.",
type: "website",
url: "https://fazm.ai/{route}/{slug}",
siteName: "Fazm",
},
twitter: {
card: "summary_large_image",
title: "AI {Topic} Automation for Mac - Fazm",
description: "Short Twitter description.",
},
};
Required JSON-LD (4 blocks)
Every page must include these 4 structured data blocks in a jsonLd array:
1. WebPage
{
"@context": "https://schema.org",
"@type": "WebPage",
name: "AI {Topic} Automation for Mac",
description: "Same as meta description.",
url: "https://fazm.ai/{route}/{slug}",
}
<h1 className="text-4xl sm:text-5xl font-bold text-white mb-6">
AI {Topic} Automationfor macOS
</h1>
<pclassName="text-lg text-muted max-w-3xl mb-8">
{2-4 sentences. Lead with a concrete stat or pain point. Explain why every
existing tool is cloud/SaaS. Position Fazm as the desktop agent alternative.
No filler, no marketing fluff.}
</p>
Section 3: Hero Animated SVG
A flow diagram showing data moving through Fazm to target apps. Must include SMIL <animate> elements for moving dots.
Customization per page: Change the source label, Fazm subtitle, and target app names. Adjust the cy values on animated dots so each dot flows to a different target box.
Section 4: Problem + Comparison Table
<section className="mb-16">
H2 naming the pain point. 2 paragraphs: first explains the manual pain, second explains why cloud tools miss the desktop angle.
Standard dimensions to compare: Setup time, Works with {specific app}, Works with legacy software, {Core capability}, Cross-app workflows, Data privacy.
Section 5: Example Prompts (7 items)
<section className="mb-16">
<h2className="text-2xl font-bold text-white mb-6">
{Topic} Commands You Can Give Fazm
</h2><divclassName="space-y-3">
{[
"First prompt with specific app names and actions...",
"Second prompt...",
// ... 7 total
].map((prompt) => (
<divkey={prompt}className="p-4 rounded-xl bg-surface-light/50 border border-white/5"><divclassName="flex items-start gap-3"><spanclassName="text-accent mt-0.5">✓</span><spanclassName="text-white text-sm">"{prompt}"</span></div></div>
))}
</div>
</section>
Each prompt must name real apps and describe a concrete workflow. Not generic.
Section 6: Workflow Diagram + Steps
A wider workflow SVG (viewBox 0 0 720 120) with arrowhead markers, then 4 numbered steps.
Important: Use a unique marker ID per page (e.g., arrowhead-bk for bookkeeping, arrowhead-ds for document signing) to avoid SVG ID collisions if multiple pages are rendered.
Section 7: Benefits (3 Cards)
<section className="mb-16">
<h2className="text-2xl font-bold text-white mb-6">
Why a Desktop Agent Beats {Cloud Competitor Category}
</h2><divclassName="grid grid-cols-1 sm:grid-cols-3 gap-4">
{[
{ title: "Works with {app} and legacy software", desc: "..." },
{ title: "Your data stays on your Mac", desc: "..." },
{ title: "Cross-app workflows without integrations", desc: "..." },
].map((item) => (
<divkey={item.title}className="p-5 rounded-xl bg-surface-light/50 border border-white/5"><h3className="text-white font-semibold mb-2">{item.title}</h3><pclassName="text-muted text-sm">{item.desc}</p></div>
))}
</div>
</section>
No icons on benefit cards. Text only.
Section 8: Real-World Scenario
<section className="mb-16">
<h2className="text-2xl font-bold text-white mb-6">A Real-World Example</h2><divclassName="p-5 rounded-xl bg-surface-light/50 border border-white/5"><pclassName="text-muted text-sm mb-3">
{Setup: who the person is, their role, the repetitive task they face,
with concrete numbers (e.g., "120 transactions per month", "8-12 invoices")}
</p><pclassName="text-white text-sm font-medium mb-3">"{The exact prompt they gave Fazm, 2-4 sentences, specific}"</p><pclassName="text-muted text-sm">
{The measurable result: "categorized 114 of 120 transactions", "took 22
minutes instead of 3 hours". Always include before/after comparison.}
</p></div>
</section>
Section 9: FAQ Accordions (4 items)
<section className="mb-16">
<h2className="text-2xl font-bold text-white mb-6">Frequently Asked Questions</h2><divclassName="space-y-4">
{[
{
q: "How is Fazm different from {cloud competitor}?",
a: "...",
},
{
q: "Can Fazm work with {specific desktop app}?",
a: "...",
},
{
q: "Does Fazm handle {specific capability}?",
a: "...",
},
{
q: "Is my data safe with Fazm?",
a: "...",
},
].map((faq) => (
<detailskey={faq.q}className="p-5 rounded-xl bg-surface-light/50 border border-white/5 group"><summaryclassName="text-white font-semibold cursor-pointer list-none flex items-center justify-between">
{faq.q}
<spanclassName="text-muted group-open:rotate-45 transition-transform text-xl">+</span></summary><pclassName="text-muted text-sm mt-3">{faq.a}</p></details>
))}
</div>
</section>
FAQ content must match the FAQPage JSON-LD exactly (same questions, same answers).
