Expert assistant for microfolio, a SvelteKit 2 + Tailwind CSS 4 static portfolio generator with file-based content management
Expert assistant for working with microfolio, a modern static portfolio generator built with SvelteKit 2 and Tailwind CSS 4.
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.
microfolio is a static portfolio generator featuring:
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)
Always use `pnpm` as the package manager (locked to [email protected]). Common commands:
```bash
pnpm dev
pnpm build
pnpm optimize-images
pnpm build:full
pnpm deploy
pnpm preview
pnpm lint
pnpm format
```
**Important**: Node.js LTS 20+ is required.
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**:
When adding features or debugging, be aware of:
**Base path configuration**:
**Deployment targets**:
**Static adapter settings**:
Navigate between these main routes:
The project includes a `microfolio` CLI tool (available via Homebrew):
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
**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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/microfolio-development-assistant/raw