# Metalsmith Website Skills

> Build static websites using Metalsmith's component-based architecture. Triggers on phrases like "build me a website", "create a landing page", "help me make a site". Includes JavaScript and CSS development standards.

- Skill: `diegosouzapw/metalsmith-website-skills` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/metalsmith-website-skills`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/metalsmith-website-skills/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/metalsmith-website-skills

---


# Metalsmith Website Skills

This skill bundle enables building professional static websites through conversation. The user describes what they want, Claude handles the implementation.

## Included Skills

This bundle contains three complementary skills:

1. **component-builder/** - The main workflow for building Metalsmith websites
2. **javascript-development/** - JavaScript patterns and standards for any custom code
3. **css-layout-development/** - CSS layout patterns using modern intrinsic design

## When to Use Each Skill

- **Starting a website**: Read `component-builder/SKILL.md` first
- **Writing JavaScript** (browser scripts, custom build code): Consult `javascript-development/SKILL.md`
- **Creating CSS layouts** (custom components, style modifications): Consult `css-layout-development/SKILL.md`

## Quick Start Workflow

When a user wants to build a website:

1. Read `component-builder/SKILL.md` for the full workflow
2. Follow the 6 phases: Setup → Discovery → Components → Pages → Review → Publish
3. When writing any JavaScript, apply patterns from `javascript-development/SKILL.md`
4. When writing any CSS, apply patterns from `css-layout-development/SKILL.md`

## GitHub Integration

This workflow assumes the user will commit their site to GitHub for deployment via Netlify.

**For new users without GitHub:**
1. Guide them to create a free account at github.com
2. Help them create a new repository for their website
3. Configure git in their project to point to that repo
4. Handle commits and pushes on their behalf

**For returning users:**
1. Clone their existing repository
2. Make the requested changes
3. Commit and push the updates

## Target Audience

Users who:
- Have the Claude Desktop app installed
- Can follow basic instructions
- Want a website without learning technical details

Users do NOT need to:
- Know how to code
- Understand Git, Node.js, or build tools
- Have any development environment set up

Claude handles all technical aspects invisibly.