Personal Homepage Skill
A skill with templates: an agent builds a personal page, portfolio or 16:9 HTML deck from a reference, with no invented metrics.
- 362 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill creates page files and runs local checks; it uses no external services.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/personal-homepage-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill creates page files and runs local checks; it uses no external services.
This is third-party code. Review the repository files before installing.
What it does
The skill guides an agent through two separate scenarios. In page mode it builds a responsive site: a personal page, portfolio, resume or project showcase. In presentation mode it builds 16:9 HTML slides with page-by-page playback, notes and a separate presenter window. The agent first finds out who the author is and what to show, then follows the user's reference. Templates are used when no direction is given: 18 style previews, a full Hero template, a single HTML file and React with Tailwind. The finished file can be edited in the browser and saved again.
Who it is for. Designers, developers and creators who need a personal page or a presentation and want to avoid identical template layouts with purple gradients.
Good fit when
- You need a business-card page or portfolio with real projects, screenshots and links.
- A reference is given as a screenshot or link, and the agent must follow its direction rather than pick its own.
- A talk calls for a 16:9 HTML presentation with notes and a presenter window.
- The page must look right with Chinese and other CJK fonts.
Not a fit when
- A multi-page site with a backend, forms and an admin panel is needed: the skill builds a showcase.
- There is no content: the author has to supply name, projects and facts, and inventing them is forbidden.
- The page is built in a visual editor such as Figma, without code.
Example request
Build my portfolio from these three projects and screenshots: one page, a calm tone, no invented reviews or numbers.Limitations
Documentation is in Chinese and English, and some material, including font rules, is oriented to CJK. The 18 styles are previews rather than 18 finished sites or decks: only Hero is a full template. The template gallery needs Node.js and `npm install`, and checks run with `npm run check`. The last commit dates from September 2026 and GitHub does not recognize the license. The skill does not substitute content: it marks missing facts instead of inventing them.
How to disable. Delete the `personal-homepage-skill` folder from the skills directory, for example `.claude/skills/`. Pages and presentations already created remain ordinary project files.
FAQ
How do I install the skill?
Place the folder in a compatible skills directory, for example `.claude/skills/personal-homepage-skill/`. Then ask the agent for a page or a presentation.
How do the modes differ?
A page gets continuous responsive layout, while a presentation gets a fixed 16:9 frame with page-by-page playback and notes. If both are needed, the agent produces two separate files.
How do I preview the templates?
Run `npm install`, then `npm run dev` to open the interactive gallery. A static example lives in `demo/template-gallery.html`.
How do I get a portable page?
`npm run build:hero-portable` builds `templates/hero/portable/`, where `index.html` opens with a double click. To share it, send the whole folder or a ZIP.
What does npm run check verify?
Documentation links, the template index and the build. The extended `npm run check:all` adds browser and shared-runtime tests.
Discussion
No questions or reviews yet.
Related
SkillsHTML Presentation builds a prompt from a transcript or director script that lets an agent produce a 16:9 HTML deck for video.
The agent turns rich answers, files, folders and service exports into an HTML page in a ready style, checked in a browser
A skill and CLI that make dependency-free single-file HTML: shadcn tokens, seven layouts, SVG charts and an agent self-check
Twelve skills that make an agent build single-file HTML animations: slides, protocol diagrams, architecture diagrams and demos for screen recording
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Six focused skills for building self-contained HTML artifacts: wireframes, prototypes, mockups, plans and diagrams
README in short
The project consists of the skill, workflows for pages and presentations, a template gallery in React and Tailwind, and static checks. The core is `SKILL.md`, which only recognizes the task and loads the right workflow.