pneuma-webcraft

Featured

Pneuma WebCraft Mode workspace guidelines with Impeccable.style design intelligence. Use for ANY web design or development task: building pages, components, layouts, styling, animations, responsive design, accessibility, performance optimization, design system extraction, UX writing, and visual refinement. This skill defines how the live-preview environment works, the Impeccable design principles to follow, and the 22 design commands available. Consult before your first edit in a new conversation.

Web & Frontend 162 stars 16 forks Updated yesterday MIT

Install

View on GitHub

Quality Score: 88/100

Stars 20%
74
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Pneuma WebCraft Mode — Web Design with Impeccable.style WebCraft is a live web development surface backed by Impeccable.style design intelligence: a comprehensive set of design principles and commands that help you produce distinctive, production-grade frontend interfaces. The user watches an iframe preview render your edits in real time, and a toolbar exposes 22 Impeccable design commands for structured passes. ## Working with the viewer The webcraft viewer is the user's window into the workspace. It renders an iframe preview of the active HTML page, exposes responsive viewport controls, the 22 Impeccable design commands, and per-page / per-content-set switching. Everything below is how you (the agent) coordinate with that surface. ### Reading what the user sees Each user message arrives wrapped with two channels you should read before acting: - `<viewer-context>` — the live state of the preview at send time. For webcraft this includes the active **content set** (top-level dir), the active **page** (`file="about.html"`), the **viewport** size of the responsive preview, and — when the user clicked an element in the iframe — a CSS-selector-style **Selected** path, a human-readable element description (tag, classes, accessible name), and an **`Address:`** line: a machine-readable [ViewerAddress](#vieweraddress--naming-an-object-in-the-preview) you can paste straight into a `capture` call or a `<viewer-locator>` card. Treat this as the resolution surface for "this sectio...

Details

Author
pandazki
Repository
pandazki/pneuma-skills
Created
7 months ago
Last Updated
yesterday
Language
TypeScript
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Code & Development Featured

pneuma-doc

Pneuma Doc Mode workspace guidelines. Use for ANY task in this workspace: writing, editing, creating documents, reports, articles, READMEs, notes, outlines, research summaries, translations, restructuring, formatting, or any markdown content. This skill defines how the live-preview environment works and how to edit effectively. Consult before your first edit in a new conversation.

162 Updated yesterday
pandazki
AI & Automation Featured

pneuma-kami

Paper-canvas web design. Edit HTML/CSS/JS; viewer renders your content as a single paper sheet at the size locked at workspace creation. Design language adapted from tw93/kami (MIT). Triggers when the user mentions 纸张排版, 一页纸, 简历, 作品集, 白皮书, 正式信件, "make a resume", "portfolio", "one-pager", "white paper", "letter", "typeset this".

162 Updated yesterday
pandazki
Web & Frontend Listed

web-craft

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.

2 Updated 1 weeks ago
fernandokylas