Awesome-omni-skill 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.

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/metalsmith-website-skills" ~/.claude/skills/diegosouzapw-awesome-omni-skill-metalsmith-website-skills && rm -rf "$T"

manifest: skills/development/metalsmith-website-skills/SKILL.md

source content

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:

component-builder/ - The main workflow for building Metalsmith websites
javascript-development/ - JavaScript patterns and standards for any custom code
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:

Read
```
component-builder/SKILL.md
```
for the full workflow
Follow the 6 phases: Setup → Discovery → Components → Pages → Review → Publish
When writing any JavaScript, apply patterns from
```
javascript-development/SKILL.md
```
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:

Guide them to create a free account at github.com
Help them create a new repository for their website
Configure git in their project to point to that repo
Handle commits and pushes on their behalf

For returning users:

Clone their existing repository
Make the requested changes
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.