Add 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):

---