Metalsmith Component Builder

1. Fetch reference pages at /references/sections/[component-name]/
2. Fetch blog posts for conceptual understanding
3. Check /blog/installing-metalsmith-components/ for installation patterns

Key documentation:

• /section-anatomy/ - How components are structured
• /yaml-to-html/ - The rendering process
• /blog/building-pages-with-components/ - Page construction patterns

Workflow Overview

1. Project Setup - Clone starter, install dependencies, start dev server
2. Discovery Dialog - Understand what the website needs
3. Component Selection - Identify required components, download and install
4. Page Building - Create pages iteratively with live preview
5. Review & Refine - User previews at localhost, provides feedback
6. Publish - Push to GitHub, Netlify auto-deploys

Phase 1: Project Setup

When user says they want to build a website, immediately set up the project:

# Clone the micro starter into current directory
git clone https://github.com/wernerglinka/microStarter.git .

# Install dependencies
npm install

# Start development server
npm start

Tell the user:

"I've set up your project. Open another terminal and the dev server is running at http://localhost:3000. You should see a basic starter page. Keep that running while we work."

Wait for confirmation before proceeding.

Phase 2: Discovery Dialog

Have a conversation to understand what the user needs. Ask these questions naturally, not as a checklist:

About the website

• What is this website for? (business, portfolio, nonprofit, personal, event)
• Who will visit it?
• What should visitors do when they arrive?

About the homepage

• What's the first thing visitors should see?
• What's the main message or call to action?
• Do you have images or video in mind?

About other pages

• What pages beyond the homepage? (About, Services, Contact, Blog, Team, Pricing)
• Do you have content ready or do you need help writing it?

About special features

• Need a contact form?
• Will you write blog posts?
• Any special features? (search, image galleries, testimonials)

Summarize what you learned before proceeding:

"So you need a photography portfolio with: a hero section showing your best work, an about page with your background, a gallery page, and a contact form. Does that sound right?"

Phase 3: Component Selection

Based on discovery, determine which components are needed.

Included in starter:

• text-only - Text content with optional CTAs
• header - Site header with navigation
• footer - Site footer

Available at metalsmith-components.com:

Download and install needed components:

# Download component
curl -L https://metalsmith-components.com/downloads/sections/hero.zip -o hero.zip

# Extract
unzip hero.zip

# Run install script
cd hero
chmod +x install.sh
./install.sh

# Clean up
cd ..
rm -rf hero hero.zip

The install script automatically downloads and installs any missing dependencies. If hero requires the icon partial and it's not installed, the script fetches and installs it before completing. Nested dependencies are handled recursively.

After installing components, restart the dev server:

# In the terminal running npm start, press Ctrl+C then:
npm start

Phase 4: Page Building

Create pages in src/ with YAML frontmatter. Every page follows this structure:

---