web-craftlisted

Orchestrates the editorial-web-craft skill set to build a new website, landing page, case study, report, dashboard mockup, portfolio, or any HTML/CSS front-end — or to take an existing page and make it feel premium, editorial, and considered instead of templated. Routes the brief to the right skills (ledger layout, fluid type, two-face typography, dual-ground colour, optical polish, tactile motion, native semantics), builds from a self-contained boilerplate, runs the combined audit, and previews the result in Chrome DevTools at three widths and under reduced motion. Use this whenever the user asks to build, design, redesign, mock up, prototype, polish, review, or preview a web page or site, says "make it look premium / editorial / high-end / less generic / less like a SaaS dashboard", asks for a landing page or one-pager, or hands over an HTML file to improve — even if they don't mention any of the individual skills.
fernandokylas/editorial-web-craft · ★ 2 · Web & Frontend · score 73

Install: claude install-skill fernandokylas/editorial-web-craft

# Web Craft The twenty skills beside this one each fix one thing well. A page needs most of them, in the right order, and then needs to be *looked at* — because the last mile of premium is judged by eye, not by lint. This skill is the order and the eye: it classifies the job, loads what's needed phase by phase, builds, audits, previews in a real browser, and iterates until the page passes both the scripts and the screenshot. Read `references/routing.md` before building anything; it decides what to load. Read `references/preview-protocol.md` when you reach the preview step. ## 0. What's available Check before promising anything: - **Browser**: are Chrome DevTools tools present (any name ending in `navigate_page`, `take_screenshot`, `evaluate_script`, `emulate`, `performance_start_trace`)? → *full mode*: build, audit, preview, iterate. Absent → *static mode*: build and audit, then hand the user the preview checklist. Never block on a missing browser and never claim a preview you didn't run. - **Python 3**: needed for `scripts/audit.py` and the skills' generators. Absent → apply the skills' quick-check lists by hand and say so. ## 1. Intake Classify on five axes (`routing.md` has the tell-tales): **kind** (reading / grid / deck / mixed), **ground** (paper / obsidian / mixed), **motion** (none / tactile / choreographed), **network** (zero / fonts / cdn), **task** (new / improve). Ask only if two readings would produce materially different pages — a "dashboard" that's reall