add-project

name: add-project description: Add a new project to the portfolio. Asks for project details and creates a numbered markdown or MDX file in the projects content directory. Supports embedding Claude Artifacts as interactive React components.

Add Project

Add a new project to the existing portfolio site by collecting details from the user and writing a markdown file into portfolio/src/content/projects/.

Workflow

Step 1: Check portfolio exists

Verify that portfolio/src/content/projects/ exists. If it doesn't, tell the user to run /build-portfolio first and stop.

Step 2: Determine next number

List existing files in portfolio/src/content/projects/ and find the highest numeric prefix (across both .md and .mdx files). The new file will use the next number (e.g. if 03-foo.md is the highest, use 04). Zero-pad to two digits.

Step 3: Ask for project name

Use AskUserQuestion to ask:

What is the name of your project?

This is the only required field — collect it before proceeding.

Step 4: Ask for project details

Use AskUserQuestion (single question, multiline-friendly) to ask:

Describe this project in a sentence or two.

Step 5: Ask for optional details and artifact

Use AskUserQuestion with options to ask:

Would you like to add any optional details?

Options:

• "Yes — let me provide URLs, technologies, etc."
• "Embed a Claude Artifact — I have JSX code to paste"
• "No — just create it with the basics"

This is a multiSelect question — the user can choose both optional details AND an artifact, or either one, or neither.

If the user selects "Yes — let me provide URLs, technologies, etc.", ask follow-up questions one at a time using AskUserQuestion:

1. Live URL (optional) — "What's the live URL for this project? (leave blank to skip)"
2. Repository URL (optional) — "What's the repository URL? (leave blank to skip)"
3. Image URL (optional) — "What's an image/screenshot URL? (leave blank to skip)"
4. Technologies (optional) — "What technologies does this project use? (comma-separated, e.g. React, TypeScript, Node.js)"
5. Featured? — "Should this project be featured on the home page?"
   • Options: "Yes" / "No"

If the user selects "Embed a Claude Artifact", follow the artifact embedding steps below (Step 5a–5e). If not, skip ahead to Step 6.

Step 5a: Collect the artifact JSX

Ask the user to paste their JSX code:

Paste the JSX code for your Claude Artifact below.

Step 5b: Ensure React and MDX dependencies are installed

Check portfolio/package.json for the required dependencies. If any are missing, install them by running:

cd portfolio && npx astro add react mdx --yes

This installs @astrojs/react, @astrojs/mdx, react, and react-dom and automatically updates astro.config.mjs to register both integrations.

Step 5c: Update content config for MDX

Check portfolio/src/content.config.ts. If the projects collection glob pattern is "**/*.md", update it to "**/*.{md,mdx}" so MDX project files are loaded.

Step 5d: Save the artifact component

Create a React component file at:

portfolio/src/components/artifacts/{PascalCaseProjectName}.jsx

Where {PascalCaseProjectName} is the project name converted to PascalCase (e.g. "My Cool App" → "MyCoolApp").

Write the user's pasted JSX code into this file. Ensure the component has a default export. If the pasted code is just a function component without an export, wrap it:

// If the user's code defines a component like:
//   function MyComponent() { ... }
// or
//   const MyComponent = () => { ... }
// Make sure it ends with:
export default MyComponent;

If the pasted code uses export default already, leave it as-is.

Step 5e: Set the file as MDX

Mark this project to be written as .mdx instead of .md (used in Step 7).

Step 6: Ask for body content

Use AskUserQuestion to ask:

Write a short description for the project detail page (1-3 paragraphs). Or say "skip" to leave it minimal.

Step 7: Write the project file

If the project has an embedded artifact, create an MDX file at portfolio/src/content/projects/{NN}-{slug}.mdx. Otherwise create a .md file.

MDX template (with artifact):

---
name: "{project name}"
description: "{description}"
url: "{url}"
repoUrl: "{repoUrl}"
imageUrl: "{imageUrl}"
technologies: [{technologies}]
featured: {true/false}
---
import {PascalCaseProjectName} from '../../components/artifacts/{PascalCaseProjectName}.jsx';

{body content}

<{PascalCaseProjectName} client:load />

Key rules for the MDX file:

• The import statement MUST go immediately after the closing --- of frontmatter, with no blank line between the --- and the import.
• client:load is required — this tells Astro to hydrate the React component on the client side so it is interactive.
• Omit optional frontmatter fields that were not provided (same rules as .md).

Markdown template (without artifact):

---
name: "{project name}"
description: "{description}"
url: "{url}"
repoUrl: "{repoUrl}"
imageUrl: "{imageUrl}"
technologies: [{technologies}]
featured: {true/false}
---

{body content}

Omit optional frontmatter fields (url, repoUrl, imageUrl, technologies, featured) if not provided.

Step 8: Confirm

Tell the user the file was created and show the path.

If an artifact was embedded, also mention:

• The component file path
• Any packages that were installed
• Suggest running /check-site to verify the interactive component works

Otherwise just suggest they can edit the file directly or run /check-site to preview.