How do I install the Portfolio Site skill?

Run npx skillmds@latest add huyquocvq-lang/portfolio-site-2 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 site: edit content, routes, per-project pages, styles, and mandatory documentation sync. Use when modifying this portfolio repo, adding projects, changing homepage sections, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation.

File contents

Portfolio site workflow

Before coding

Read AGENTS.md
Read docs/USAGE_GUIDE.md - doc sync table
Confirm: web React 18 + Vite, not React Native

Mandatory: update docs

After any code change, update docs per the mapping table in USAGE_GUIDE.md.

Tell the user which doc files you updated.

Content source (`docs/CONTENT_SOURCE.md`)

Mapping reference only - not imported at runtime
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 (custom design)

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

→ Update docs/FEATURE_MAP.md for that project.

Add 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 docs: FEATURE_MAP.md, ARCHITECTURE_OVERVIEW.md, AI_AGENT_GUIDE.md, FULL_DOCUMENTATION.md, API_FLOW.md, AGENTS.md if routes change

Sync 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

Avoid

motion.div typos (no framer-motion)
href="#work" on project pages → use href="/#work" or <Link to="/#work">
Editing only projects.js for long case study body (content lives in src/projects/*.jsx)

Deep reference

---name: portfolio-site-2description: Work on the Jenny Tang React+Vite portfolio site: edit content, routes, per-project pages, styles, and mandatory documentation sync. Use when modifying this portfolio repo, adding projects, changing homepage sections, or when the user mentions AGENTS.md, USAGE_GUIDE, or portfolio documentation.---# Portfolio site workflow## Before coding1. Read [AGENTS.md](../../AGENTS.md)2. Read [docs/USAGE_GUIDE.md](../../docs/USAGE_GUIDE.md) - doc sync table3. Confirm: **web React 18 + Vite**, not React Native## Mandatory: update docsAfter **any** code change, update docs per the mapping table in `USAGE_GUIDE.md`.Tell the user which doc files you updated.## Content source (`docs/CONTENT_SOURCE.md`)- Mapping reference only - **not** imported at runtime- 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 (custom design)- JSX: `src/projects/<Name>Project.jsx`- CSS: `src/styles/projects/<name>.css`- Wrap with `ProjectShell` + matching `slug` prop- **Do not** merge into a shared generic template→ Update `docs/FEATURE_MAP.md` for that project.## Add 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 docs: `FEATURE_MAP.md`, `ARCHITECTURE_OVERVIEW.md`, `AI_AGENT_GUIDE.md`, `FULL_DOCUMENTATION.md`, `API_FLOW.md`, `AGENTS.md` if routes change## Sync 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```## Avoid- `motion.div` typos (no framer-motion)- `href="#work"` on project pages → use `href="/#work"` or `<Link to="/#work">`- Editing only `projects.js` for long case study body (content lives in `src/projects/*.jsx`)## Deep reference- [docs/AI_AGENT_GUIDE.md](../../docs/AI_AGENT_GUIDE.md)- [docs/ARCHITECTURE_OVERVIEW.md](../../docs/ARCHITECTURE_OVERVIEW.md)

Frequently asked questions