pagecraft-block-design

Name: pagecraft-block-design
Author: page-craft.4partners.io

page-craft.4partners.ioDesign & UI122 installs

About pagecraft-block-design

PageCraft block design — a catalog of 20 style directions (brutalist, swiss, neumorphism, …), working with a reference (screenshot / Figma + MCP), comparing the result to the reference via chrome-devtools MCP, a CSS guide (container queries, fluid typography, BEM), and rules for a block's examples. Use when you are choosing a style without a reference, have a screenshot or Figma link, need to check the result against a mockup, are writing a block's style.css, deciding how many examples to include, or when the orchestrator pagecraft-block points to "Phase 3 — Style" / "Phase 7 — Comparison". Call it via the `Skill(pagecraft-block-design)` tool, not via `Read .../SKILL.md`.

Install

Copy the command and run it in a terminal.

$npx skills add https://page-craft.4partners.io --skill pagecraft-block-design

After installing, type/pagecraft-block-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/

css-guide.md

examples-guide.md

mcp-setup.md

styles-catalogue.md

Comments

Markdown supported