Agent-Skills.md

Agent Skills: Landing Page Architect

>

UncategorizedID: Spectaculous-Code/raamattu-nyt/landing-page-architect

Repository

Spectaculous-Code/raamattu-nyt
Spectaculous-Code

Install this agent skill to your local

pnpm dlx add-skill https://github.com/Spectaculous-Code/raamattu-nyt/tree/HEAD/.claude/skills/landing-page-architect

Skill Files

Browse the full folder contents for landing-page-architect.

Download Skill

Loading file tree…

.claude/skills/landing-page-architect/SKILL.md

Skill Metadata

Name
landing-page-architect
Description
>

Landing Page Architect

Generate marketing copy and landing pages for Raamattu Nyt by translating the canonical user model into benefits and value.

Authority

  • Consumes Docs/ai/core-user-model.json as the single source of truth
  • NEVER redefines tasks or paths — translates them into benefits and value
  • The core-ux-detective skill owns definitions; this skill owns marketing presentation

Workflow

1. Read the User Model

Read Docs/ai/core-user-model.json

If file doesn't exist, inform the user to run core-ux-detective first.

2. Determine Scope

From user request, determine what to generate:

  • Full landing page: Hero + feature sections + CTAs
  • Feature page: Single feature deep-dive
  • Cinema marketing: market Cinema OS / cinema modes → read references/cinema-os.md for modes, benefit framings, CTA angles, and existing assets (don't reinvent /cinema).
  • CTA copy / audit: Call-to-action suggestions or conversion review
  • Messaging framework: Benefit mapping for all tasks/paths

For any non-trivial page, read references/landing-best-practices.md first — it holds the conversion spine, the expanded CTA framework, accessibility, SEO/OG, and the repo conventions (PageHeroHeader / FeatureCard / Step / useSEO / landing i18n namespace) to build with.

3. Transform Paths → Narratives

For each user_path, generate a benefit narrative:

| Model Field | Marketing Use | |-------------|---------------| | user_paths[].intent | Problem statement / user need | | user_paths[].label | Section heading (Finnish) | | user_paths[].steps | Implied complexity → simplicity promise | | user_paths[].primary | Hero section (true) vs. feature section (false) |

Primary paths → hero section and main value proposition. Secondary paths → feature cards / supporting sections.

4. Transform Tasks → Benefits

For each core_task, map to a user benefit:

Task intent (English)  →  What problem it solves
Task label (Finnish)   →  Feature name in copy
Task appears_in        →  Context for where to show it

Focus on outcomes, not mechanics:

  • "Löydä jakeet hetkessä" (Find verses instantly) — not "Hakutoiminto käyttää tekstihakua"
  • "Kuuntele Raamattu matkalla" (Listen to the Bible on the go) — not "TTS-toisto ElevenLabs APIlla"

5. Generate Copy

See references/copy-patterns.md for page structure templates and Finnish copywriting patterns, and references/landing-best-practices.md for the expanded CTA framework (hierarchy, placement, microcopy, measurement) and conversion structure.

6. Output (repo conventions)

Build with the existing per-feature pattern — do NOT create one mega LandingPage.tsx:

| Output | Format | Location | |--------|--------|----------| | Feature landing page | React page, lazy-routed | apps/raamattu-nyt/src/pages/<Feature>LandingPage.tsx (+ route in routes/main.tsx) | | Page sub-sections | Component per part | apps/raamattu-nyt/src/pages/<feature>-landing/ | | Visible copy | i18n landing namespace | apps/raamattu-nyt/public/locales/{fi,en}/landing.json (<feature>.*) | | SEO / OG / JSON-LD | useSEO hook | inside the page component | | Admin-editable copy | EditableText (namespace landing) | wrap headings/paragraphs |

Reuse PageHeroHeader, FeatureCard, Step, SiteFooter, BottomNavigation. Existing references to copy: CinemaLandingPage.tsx, ReadingPlansLandingPage.tsx, etc.

CTA (always design deliberately)

Every page has ONE primary action. The CTA is the conversion surface — never an afterthought. Quick rules (full framework in references/landing-best-practices.md):

  • One primary per view (filled, verb-first, ≤4 words), in the hero AND repeated at the end. Secondary = outline/ghost, one only. Tertiary = soft in-content links.
  • Value-first, never pushy — "Kokeile ilmaiseksi", not "Osta nyt". No urgency, scarcity, countdowns, or exclamation marks.
  • Make it safe — a tiny sub-label ("Ei tunnusta tarvita") removes hesitation.
  • Measurement-ready — give the primary CTA a stable data-cta="…" id.

Cinema OS & cinema modes

When marketing the cinema experience, read references/cinema-os.md: the modes, benefit framings, per-mode CTA angles, and the existing /cinema assets to extend (don't duplicate). Market the calm/listening/focus outcome — never internal terms (Cinema OS, CinemaShell, snap-scroll, Ken Burns, ElevenLabs). The cinema-voice-architect skill owns the implementation; this skill owns its marketing presentation.

Messaging Rules

  1. Never rename tasks or paths from the canonical model
  2. Never invent features that don't exist in core-user-model.json
  3. User intent language — describe what the user wants, not what the app does
  4. Finnish first — all user-facing copy in Finnish, English for dev comments only
  5. No superlatives — avoid "paras", "vallankumouksellinen", "uskomaton"
  6. Trustworthy tone — clear, honest, non-pushy
  7. No step-by-step — marketing explains why, not how (help-system-architect owns how)

Tone

  • Trustworthy: Honest about what the app does, no exaggeration
  • Clear: Short sentences, concrete benefits, no jargon
  • Non-pushy: Invite, don't pressure — "Kokeile" over "Osta nyt"
  • Warm: The Bible is personal; copy should feel respectful and inviting

Learnings

Read references/learnings.md before writing copy — it captures the i18n-namespace rule, the cinema-marketing-vs-mechanics boundary, and CTA anti-patterns discovered in practice.