How do I install the Portfolio Site skill?

Run npx skillmds@latest add huyquocvq-lang/portfolio-site in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Portfolio Site safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Portfolio Site?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Portfolio Site free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Portfolio Site?

huyquocvq-lang (@huyquocvq-lang) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Portfolio Site by huyquocvq-lang — Agent Skill

Name: Portfolio Site
Author: huyquocvq-lang

Portfolio Site

Work on the Jenny Tang React+Vite portfolio: homepage data, routes, per-project pages, styles, and mandatory doc sync. Use when editing this repo, adding a project, changing Hero/Nav/projects, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation. Invoke with /portfolio-site.

File contents

Portfolio site workflow

Before coding

Read AGENTS.md
Read docs/USAGE_GUIDE.md (doc sync mapping table)
Confirm: React 18 + Vite 5 web SPA - not React Native

Mandatory: update docs

After any code or config change, update docs per docs/USAGE_GUIDE.md §4.2.

List which doc files you updated before finishing.

Content source (`docs/CONTENT_SOURCE.md`)

Mapping reference only - not bundled in the app
On content changes: update CONTENT_SOURCE.md and runtime files (src/data/*, src/projects/*)
User instructions in chat override CONTENT_SOURCE.md

Edit homepage copy

Content	File
Profile, contact	`src/data/profile.js`
Hero + impact numbers	`src/data/stats.js`
About	`src/data/about.js`
Skills	`src/data/skills.js`, `src/data/skillIcons.js`
Project cards	`src/data/projects.js`

→ Update docs/FEATURE_MAP.md for affected features.

Edit one project page

JSX: src/projects/<Name>Project.jsx
CSS: src/styles/projects/<name>.css
Wrap with ProjectShell and matching slug prop
Do not collapse into a shared generic template

→ Update docs/FEATURE_MAP.md for that project.

Add a new project

src/data/projects.js - { slug, link: '/projects/<slug>', ... }
src/projects/NewProject.jsx + src/styles/projects/new-project.css
src/App.jsx - <Route path="/projects/<slug>" element={<NewProject />} />
public/images/projects/<slug>.jpg
Update: FEATURE_MAP.md, ARCHITECTURE_OVERVIEW.md, AI_AGENT_GUIDE.md, FULL_DOCUMENTATION.md, API_FLOW.md, AGENTS.md if routes change
Verify prev/next pager on ProjectShell

Invariants

projects.js slug === App.jsx path segment === ProjectShell slug prop
projects.js link === '/projects/' + slug
getAllProjects() order === prev/next pager order

Commands

npm install && npm run dev

Node 18+.

Avoid

motion.div (no framer-motion in this repo)
href="#work" on project pages → href="/#work" or <Link to="/#work">
Long case study body only in projects.js (full copy lives in src/projects/*.jsx)

Reference

docs/AI_AGENT_GUIDE.md
docs/ARCHITECTURE_OVERVIEW.md

---name: portfolio-sitedescription: Work on the Jenny Tang React+Vite portfolio: homepage data, routes, per-project pages, styles, and mandatory doc sync. Use when editing this repo, adding a project, changing Hero/Nav/projects, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation. Invoke with /portfolio-site.---# Portfolio site workflow## Before coding1. Read `AGENTS.md`2. Read `docs/USAGE_GUIDE.md` (doc sync mapping table)3. Confirm: **React 18 + Vite 5 web SPA** - not React Native## Mandatory: update docsAfter **any** code or config change, update docs per `docs/USAGE_GUIDE.md` §4.2.List which doc files you updated before finishing.## Content source (`docs/CONTENT_SOURCE.md`)- Mapping reference only - not bundled in the app- On content changes: update `CONTENT_SOURCE.md` and runtime files (`src/data/*`, `src/projects/*`)- User instructions in chat override `CONTENT_SOURCE.md`## Edit homepage copy| Content | File ||---------|------|| Profile, contact | `src/data/profile.js` || Hero + impact numbers | `src/data/stats.js` || About | `src/data/about.js` || Skills | `src/data/skills.js`, `src/data/skillIcons.js` || Project cards | `src/data/projects.js` |→ Update `docs/FEATURE_MAP.md` for affected features.## Edit one project page- JSX: `src/projects/<Name>Project.jsx`- CSS: `src/styles/projects/<name>.css`- Wrap with `ProjectShell` and matching `slug` prop- **Do not** collapse into a shared generic template→ Update `docs/FEATURE_MAP.md` for that project.## Add a new project1. `src/data/projects.js` - `{ slug, link: '/projects/<slug>', ... }`2. `src/projects/NewProject.jsx` + `src/styles/projects/new-project.css`3. `src/App.jsx` - `<Route path="/projects/<slug>" element={<NewProject />} />`4. `public/images/projects/<slug>.jpg`5. Update: `FEATURE_MAP.md`, `ARCHITECTURE_OVERVIEW.md`, `AI_AGENT_GUIDE.md`, `FULL_DOCUMENTATION.md`, `API_FLOW.md`, `AGENTS.md` if routes change6. Verify prev/next pager on `ProjectShell`## Invariants```projects.js slug === App.jsx path segment === ProjectShell slug propprojects.js link === '/projects/' + sluggetAllProjects() order === prev/next pager order```## Commands```bashnpm install && npm run dev```Node 18+.## Avoid- `motion.div` (no framer-motion in this repo)- `href="#work"` on project pages → `href="/#work"` or `<Link to="/#work">`- Long case study body only in `projects.js` (full copy lives in `src/projects/*.jsx`)## Reference- `docs/AI_AGENT_GUIDE.md`- `docs/ARCHITECTURE_OVERVIEW.md`

Frequently asked questions