readme-to-landing-page
README to Landing Page
Transform a project's README.md into a concise, visual, developer-friendly landing page.
Core Principle: Show, Don't Tell
Developers skim — they don't read walls of text. The output README must:
- Prefer visuals over prose — use mermaid diagrams for architecture, workflows, data flow
- Be concise — every sentence must earn its place; cut ruthlessly
- Be scannable — badges, tables, code blocks, diagrams; minimize paragraphs
- Be direct — lead with what matters, skip the preamble
- No emoji — never use emoji in headings, body text, badges, or section labels
If something can be a diagram, make it a diagram. If something can be a table, make it a table. If something can be a one-liner, don't write three sentences.
Anti-Slop Rules
AI-generated READMEs have predictable tells. Slop signals "nobody reviewed this" and kills credibility. See references/anti-slop-rules.md for the full banned-phrase list and structural patterns to avoid.
Quick test: read each sentence and ask "does this give the reader information they didn't already have?" If not, cut it.
Repo Sync Before Edits (mandatory)
branch="$(git rev-parse --abbrev-ref HEAD)"
git fetch origin
git pull --rebase origin "$branch"
If the working tree is dirty: git stash push -u -m "pre-sync", sync, then git stash pop.
If origin is missing or conflicts occur, stop and ask the user.
Workflow
Step 1: Gather Context
Read project files to build a picture:
| File | Purpose |
|---|---|
README.md |
Source material (required) |
package.json / pyproject.toml / Cargo.toml / go.mod |
Name, description, version |
CHANGELOG.md |
Momentum signals |
LICENSE |
Risk reversal ("MIT licensed") |
docs/ |
Existing detailed docs to preserve |
Also check: GitHub stars, forks, download stats, notable users. If purpose or audience is unclear, ask.
Step 2: Identify Audience & Value Prop
Determine these three things — write them down before proceeding:
- Who — primary audience (developers, data scientists, ops teams, etc.)
- Pain — what's frustrating about the status quo
- Benefit — one sentence, becomes the H1 headline
Step 3: Select Framework
| Project Type | Framework | Approach |
|---|---|---|
| CLI tools, libraries, infra | PAS | Problem -> Agitate -> Solution |
| Apps, platforms, end-user products | AIDA | Attention -> Interest -> Desire -> Action |
| Strong narrative / user request | StoryBrand | Hero -> Guide -> Plan -> CTA |
Tell the user which you picked. Let them override.
Step 4: Back Up Original
cp README.md README.backup.md
Step 5: Rewrite README.md
Follow the section flow in references/section-templates.md (hero, how it works, features, quick start, examples, comparison, social proof, FAQ, CTA, collapsed technical details). Each template includes good vs. bad patterns and exact length budgets.
Key rules across all sections:
- H1 = value proposition (<=10 words), not the project name
- Hero <=5 lines (excluding badges)
- Each feature description <=15 words
- One copy-paste-runnable command per code block
- Quick Start <=5 steps
- All original technical content preserved in
<details>blocks
Step 6: Self-Review Checklist
Before presenting to the user, verify:
| Check | Rule |
|---|---|
| Code blocks | Each independently-runnable command is in its own block |
| Mermaid diagrams | >=1 diagram showing how the project works |
| Hero length | <=5 lines (excluding badges) |
| Feature descriptions | <=15 words each |
| Quick Start | <=5 commands |
| Paragraphs | No paragraph exceeds 3 sentences |
| Total prose | Diagrams + tables + code >= 50% of content |
| Original content | All preserved in <details> blocks |
| Fabricated data | None — real numbers or placeholders only |
| No emoji | Zero emoji anywhere in the output |
| No slop phrases | None of the banned phrases from references/anti-slop-rules.md |
| No filler | Every sentence adds information the reader didn't have |
| No rhetorical questions | No "Tired of X?" or "Want to Y?" patterns |
If any check fails, fix it before presenting.
Step 7: Present to User
Briefly explain:
- Framework chosen
- Where original content lives (
README.backup.md+ collapsed sections)
Ask for feedback. Do NOT commit unless asked.
Expected Output
For a CLI tool called "fastbuild", the rewritten README.md opens with:


# Incremental builds in under a second
fastbuild watches your source tree and recompiles only changed modules —
no config files, no daemon, no warm-up time.
[**Get Started ->**](#getting-started)
## How It Works
` ` `mermaid
graph LR
A[Source files] --> B[fastbuild watcher]
B --> C{Changed?}
C -->|Yes| D[Compile changed modules]
C -->|No| E[Skip]
D --> F[Output bundle]
` ` `
| Feature | What you get |
|---|---|
| Zero config | Works out of the box — no setup files |
| Incremental | Recompiles only changed modules |
| Fast | < 1s on codebases with 10k+ files |
Original content is preserved in README.backup.md and in <details> blocks at the end of the new README.
Edge Cases
- No README.md found — Offer to create one from scratch using project manifest files.
- README is already marketing-style — Offer targeted section-by-section refinements; preserve what works.
- Insufficient context for value prop — Ask the user: what it does, who it's for, what problem it solves.
- No real social proof — Skip the section entirely; never fabricate stars, downloads, or testimonials.
- Highly technical README (API reference) — Preserve all content in
<details>blocks; landing-page sections stay brief. - Project with no visual output — Use code-before/after comparisons and terminal snippets instead of screenshots.
- README longer than 300 lines — Preserve full original in
README.backup.md; summarize technical sections as collapsed<details>blocks.
Acceptance Criteria
- Original README backed up to
README.backup.mdbefore any rewrite - Rewritten README uses one of PAS, AIDA, or StoryBrand and names which one was chosen
- H1 is the value proposition (<=10 words), not the project name
- At least one mermaid diagram shows how the project works
- Hero section is <=5 lines (excluding badges)
- Each feature description is <=15 words
- Quick Start has <=5 steps; each independently-runnable command in its own code block
- No banned slop phrases appear in the output
- All original technical content preserved in
<details>blocks - No fabricated data — real numbers or
[placeholder]markers only - Zero emoji in the output
- Self-review checklist (13 checks) passes before presenting
Step Completion Reports
After each major step, output a status report. See references/step-reports.md for the format and phase-specific checks.
Guidelines
- One code block per copy-paste unit. Commands that can run independently must be in separate code blocks. Only combine commands that must run together.
- Never fabricate data. Use real numbers or leave
[placeholder]markers. - Respect the project's voice. A security tool != a startup pitch.
- H1 = value proposition, not the project name.
- Preserve all original content in collapsed sections.
- One primary audience. Don't try to speak to everyone.
- When in doubt, cut text. A shorter README that gets read beats a longer one that doesn't.
Error Handling
- No README.md found -> Offer to create from scratch using project files.
- Already marketing-style -> Offer targeted refinements, not full rewrite.
- Insufficient context -> Ask: what it does, who it's for, what problem it solves.
More from luongnv89/skills
ollama-optimizer
Optimize Ollama configuration for the current machine's hardware. Use when asked to speed up Ollama, tune local LLM performance, or pick models that fit available GPU/RAM.
126logo-designer
Generate professional SVG logos from project context, producing 7 brand variants (mark, full, wordmark, icon, favicon, white, black) plus a showcase HTML page. Skip for raster-only logos, product illustrations, or full brand-guideline docs.
122code-optimizer
Analyze code for performance bottlenecks, memory leaks, and algorithmic inefficiencies. Use when asked to optimize, find bottlenecks, or improve efficiency. Don't use for bug-hunting code review, security audits, or refactoring without a perf goal.
76code-review
Review code changes for bugs, security vulnerabilities, and code quality issues — producing prioritized findings with specific fix suggestions. Don't use for performance tuning, writing new features from scratch, or generating test cases.
75idea-validator
Evaluate app ideas and startup concepts across market viability, technical feasibility, and competitive landscape. Use when asked to validate, review, or score a product idea. Don't use for writing a PRD, detailed go-to-market plans, or financial/investor pitch decks.
70test-coverage
Generate unit tests for untested branches and edge cases. Use when coverage is low, CI flags gaps, or a release needs hardening. Not for integration/E2E suites, framework migrations, or fixing production bugs.
63