Arrow keys / Space
Open-source AI Skill

personal-homepage-skill

A documentation-first quality system for agents that generate distinctive personal homepages, portfolios, creator hubs, and developer profiles.

reference-first anti-AI-slop continuous webpage
PH
The problem

AI homepages often look like the same generic landing page.

Vague hero copyVisitors cannot tell who the person is or what proof supports their identity.
Visual references ignoredConcrete templates are replaced by unrelated AI-generated style options.
Fake credibilityMetrics, awards, testimonials, and links are invented instead of marked as placeholders.
Icon-wall skillsCapabilities are reduced to logo lists instead of being connected to real output.
Weak project cardsProjects lack problem, role, features, stack, result, and next-click clarity.
Stacked slidesSections have hard background seams and feel like PPT pages pasted together.
Core behavior

A personal homepage must answer five questions.

The Skill keeps the agent focused on identity, proof, trust, and the next click.

Who is this person?

Name, nickname, role, and an immediate identity signal.

What do they do?

Clear positioning without generic SaaS marketing language.

What proof supports it?

Projects, writing, work history, demos, or honest placeholders.

Why trust them?

Credibility from real work, not invented metrics or fake testimonials.

What should visitors click?

GitHub, posts, contact, media accounts, project demos, or resume links.

Agent workflow

From request to reviewed runnable homepage.

detect

Recognize fit

Use for personal homepages, portfolios, creator pages, resume sites, and person-led project pages.

reference

Follow first

If a template, site, screenshot, or detailed prompt exists, preserve its rhythm before inventing.

style

Pick direction

Use previews only when direction is unclear; previews must look like real hero sections.

structure

Build IA

Hero, About, Projects, Content, Contact, and only the sections that fit the person.

code

Generate

React or HTML output with accessible markup, profile data, motion fallbacks, and real CTAs.

review

Check quality

Run design review for identity, continuity, mobile readability, source boundaries, and no fake data.

Visual preset library

Distinct directions, not endless generic templates.

Cinematic Scroll

Dark premium personal brand with fixed video and sparse motion.

Clean Developer

Light, friendly developer homepage inspired by clean personal sites.

TOONHUB Carousel

Character IP / playful creator hero with bold figure motion.

Art Museum

Curated portfolio for artists, photographers, and visual storytellers.

AI Dashboard

Research-grid language for AI systems and technical credibility.

3D Tech Portfolio

Spatial cards and 3D identity objects for technical demos.

Dark Editorial

Magazine-like case study rhythm with image-led storytelling.

Business Brand

Consultant / founder homepage with services, cases, and booking CTA.

Continuous webpage quality

The page should feel like one real website, not stacked slides.

no hard background seams shared texture wave / gradient bridges repeated visual grammar
Open-source package

Documentation-first, easy to audit, easy to extend.

SKILL.mdMain entrypoint and agent workflow.
STYLE_PRESETS.mdVisual library and best-fit guidance.
MOTION_PATTERNS.mdAnimation, 3D, background, and fallbacks.
HOMEPAGE_SECTIONS.mdSection-level content rules.
DESIGN_REVIEW.mdFinal QA checklist before completion.
OPEN_SOURCE_PRD.mdGitHub release product requirements.
USER_STORIES.mdBacklog-ready stories and acceptance criteria.
TEST_SCENARIOS.mdTrigger, reference, placeholder, accessibility, and license tests.
CONTRIBUTING.mdContribution rules and copyright boundaries.
examples / demoPrompt library and this browser presentation.
Roadmap

Release the Skill, then turn patterns into runnable examples.

V1

Documentation Skill

  • Skill entrypoint
  • Preset library
  • Motion patterns
  • Data schema
  • Review checklist
  • Demo deck
V2

Runnable templates

  • React + Tailwind example
  • Single-file HTML example
  • Next.js App Router example
  • Template Gallery expansion
V3

Validation automation

  • Markdown link checker
  • Homepage quality checker
  • Screenshot validation
  • Mobile and reduced-motion tests