microfolio Development Assistant

Expert assistant for working with microfolio, a modern static portfolio generator built with SvelteKit 2 and Tailwind CSS 4.

What This Skill Does

Helps you develop, debug, and extend microfolio projects. Provides guidance on the file-based content system, project structure, configuration, and deployment workflows specific to this portfolio generator.

Project Context

microfolio is a static portfolio generator featuring:

Step-by-Step Instructions

1. Understanding the Project Structure

When working with microfolio, first familiarize yourself with:

- Projects: `/content/projects/{project-name}/index.md`

- Each project has `thumbnail.jpg` and subdirectories for `images/`, `documents/`, `videos/`

- Homepage: `/content/index.md`

- About page: `/content/about.md`

- `/src/routes/` - SvelteKit file-based routing with server-side data loading

- `/src/lib/components/` - Reusable Svelte components (AkHeader, AkFooter, AkProjectCard, etc.)

- `/src/lib/config.js` - Centralized site configuration (navigation, social links, metadata)

2. Development Workflow

Always use `pnpm` as the package manager (locked to [email protected]). Common commands:

```bash

Start development server

pnpm dev

Build for production

pnpm build

Generate optimized images (AVIF/WebP thumbnails)

pnpm optimize-images

Full build with image optimization

pnpm build:full

Deploy (production build with NODE_ENV=production)

pnpm deploy

Preview production build

pnpm preview

Lint and format

pnpm lint

pnpm format

```

**Important**: Node.js LTS 20+ is required.

3. Working with Project Content

Projects use Markdown files with YAML frontmatter:

```yaml

title: 'Project Title'

date: '2023-01-01'

location: 'City, Country'

coordinates: [latitude, longitude] # For map display

description: 'Project description'

type: 'architecture|design|art|etc'

tags: ['tag1', 'tag2']

authors:

- name: 'Author Name'

role: 'Role'

featured: true # Shows on homepage

```

**Data loading pattern**:

4. Key Dependencies

When adding features or debugging, be aware of:

5. Configuration & Deployment

**Base path configuration**:

**Deployment targets**:

**Static adapter settings**:

6. Core Routes

Navigate between these main routes:

7. Styling Guidelines

8. CLI Tool Integration

The project includes a `microfolio` CLI tool (available via Homebrew):

Important Constraints

1. **Always use `pnpm`** - The project is locked to [email protected]

2. **Node.js LTS 20+** required

3. **Content structure** - Projects must live in `/content/projects/{project-name}/` with `index.md`

4. **Component naming** - Custom components use `Ak` prefix convention

5. **No test framework** - Currently no automated tests configured

6. **Static adapter** - SvelteKit configured for static site generation only

7. **Environment variables** - `CUSTOM_DOMAIN` affects base path behavior in production

Example Usage

**Creating a new project**:

1. Create directory: `/content/projects/my-new-project/`

2. Add `index.md` with required YAML frontmatter

3. Add `thumbnail.jpg`

4. Add project images to `images/` subdirectory

5. Run `pnpm dev` to preview

**Modifying site configuration**:

1. Edit `/src/lib/config.js` for navigation, social links, metadata

2. Changes reflected immediately in dev server

3. Rebuild for production with `pnpm build`

**Adding a new view mode**:

1. Create route in `/src/routes/` (e.g., `/src/routes/timeline/+page.svelte`)

2. Add server-side data loading in `+page.server.js`

3. Update navigation in `/src/lib/config.js`

4. Add new component to `/src/lib/components/` if needed

Notes