mcpField
R
reader-first-portfolio-architecture

reader-first-portfolio-architecture

github.com/arthurzakirovDesign & UI0164 installsUpdated 4w ago
Repository

About reader-first-portfolio-architecture

A design skill for structuring personal websites, portfolios, landing pages, and README hubs around what visitors can learn, use, and verify. It provides section substitutions, homepage layouts, and design checks that foreground visible content and evidence.

Key features

  1. 01Reader-oriented section naming
  2. 02Recommended homepage structure
  3. 03Visible guides and tool listings
  4. 04Outcome-focused track record
  5. 05Layout and content checklist

Use cases

  1. 01Reorganizing a personal portfolio
  2. 02Planning a landing page homepage
  3. 03Restructuring a README hub

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/arthurzakirov/proofstack --skill reader-first-portfolio-architecture

After installing, type/reader-first-portfolio-architecturein Claude Code to confirm it loaded.

Details

From the project README

Reader-First Portfolio Architecture Skill

Purpose

Design personal websites, portfolios, landing pages, and README hubs around what the reader can gain, not around generic sections like "Blog," "Projects," and "Resume."

Principle

A visitor does not primarily care that you have projects, posts, or a resume. They care about:

  • What can I learn?
  • What can I use?
  • Why should I trust this person?
  • How can I work with or contact them?

Replace Generic Sections

Generic SectionReader-First Section
BlogGuides from real accomplishments
ProjectsTools you can use
ResumeResults & track record
ContactWays to get in touch
AboutOperating principles / beyond work / how I think

Recommended Homepage Layout

  1. Hero
    • One authority-backed line.
    • Explain what you do, what proof exists, and what the reader can use.
  2. Guides
    • List actual guide titles immediately.
    • Include status labels: published, in progress, planned.
    • Do not hide everything behind "Read the blog."
  3. Tools
    • List the most relevant tools directly.
    • Include benefit-focused one-liners.
    • Link to setup guides or repositories.
  4. Results & Track Record
    • Show proof so the reader can judge whether the methods lead to outcomes they want.
    • Add organization context before bullets.
    • Bullets should focus on outcomes, not responsibilities.
  5. Testimonials / What Others Say
    • Use concise quotes in callout blocks.
    • Include attribution and role when relevant.
  6. Ways to Get in Touch
    • Explain what kind of problems are appropriate to reach out about.

Layout Pattern

Use a wide layout and reduce unnecessary vertical stacking.

Good:

  • 2x2 grid for top-level categories
  • Full-width proof section
  • Cards for tools/guides
  • One-column track record if entries are dense

Avoid:

  • Narrow centered column for everything
  • Empty "Explore more" cards with no visible content
  • Navigation tabs that hide the core value

Checklist

  • Are the actual guide/tool titles visible without clicking?
  • Does every section answer "what can the reader do with this?"
  • Are project descriptions framed as usable tools?
  • Is proof used to support trust, not to brag?
  • Does the page avoid negative framing such as "not toy projects"?

Comments

Markdown supported