html-studio

Author single-file, self-contained interactive HTML artifacts — reports, dashboards, roadmaps, plans, decision docs, and their variants (diff-reviews, quizzes, wargames, buy-in packets, boards, decks, explainers, atlases) — as typed deliverable compositions under one design system, then validated headless (`gate`, `render`) and optionally served with a return channel (`serve`, `receipts`) that brings the reader's judgment back as data. Use when a plan, roadmap, comparison, decision, dataset, or architecture reads better as an interactive page than markdown, when a page should return the user's adjustments as data, or when the user says HTML plan, roadmap, dashboard, deck, wargame, quiz, or report. Distinct from the Artifact tool's hosted fragments; mermaid fences belong to mermaid-diagramming.

Zur Installation springen

Repository: bsamiee/Maghz
Letzte Quellaktivität: 19. Juli 2026 um 01:46
Erkannte Sprache von SKILL.md: Englisch
Sterne: 0
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/bsamiee/Maghz --skill html-studio

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

7 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

docgen

Owns all prose, markdown files and the comments inside source files and fences through a register law, an anti-anchoring rule against rosters, counts, and freezes, a named defect catalog, file-kind templates, and a deterministic gate and fixer. Use when authoring, editing, reviewing, or markdown files of any kind, and comments in source files; when designing a document schema or marker vocabulary; when pruning code comments; or on "clean up this doc", "tighten the prose", "this doc is stale".

2026-07-23

agent-dispatch

Owns work placement and delegation craft across Claude Code's execution surfaces — main turn, `/btw`, fork, subagent, background task, nested subagent, agent team, dynamic workflow — with the selection economics that pick one, the delegation contract that makes a worker prompt self-contained (objective, territory, output contract, receipt), the communication topologies (star, pipeline, panel, tournament, generate-filter, loop), depth and fan-out budgeting, and the runtime mechanics of background permission surfacing, `SendMessage` resume, and worker memory. Use when parallelizing work, delegating a task to a subagent or teammate, choosing between a subagent, fork, team, or workflow, writing a `.claude/agents/` definition, designing a fan-out or review pipeline, or when a delegation stalls, over-prompts for permission, or returns weak results. Authoring runnable workflow scripts belongs to workflow-creator; gpt-5.6 offload belongs to the codex skill and Gemini offload to agy; harness configuration belongs to h

2026-07-19

agy

Bounded one-shot Gemini sub-calls through the Antigravity CLI (`agy`): multimodal judgment over screenshots, generated images, UI states, and diagrams, read-only adversarial review lanes that return typed falsifiable findings as a second-model perspective, Nano Banana image generation and edit iteration feeding html-studio and mermaid work, broad synthesis across competing designs, ambiguity reduction into crisp constraints, alternate approaches and counterexample hunts, and redacted log or dataset distillation. Use when a task gains from an external second model, a critique or red-team stage wants an independent Gemini lens, or the request names Gemini, Antigravity, Google Ultra, or Nano Banana. gpt-5.6 offload belongs to the codex skill; delegation across Claude's own surfaces belongs to agent-dispatch.

2026-07-19

Alle aus diesem Repository ansehen

name	html-studio
description	Author single-file, self-contained interactive HTML artifacts — reports, dashboards, roadmaps, plans, decision docs, and their variants (diff-reviews, quizzes, wargames, buy-in packets, boards, decks, explainers, atlases) — as typed deliverable compositions under one design system, then validated headless (`gate`, `render`) and optionally served with a return channel (`serve`, `receipts`) that brings the reader's judgment back as data. Use when a plan, roadmap, comparison, decision, dataset, or architecture reads better as an interactive page than markdown, when a page should return the user's adjustments as data, or when the user says HTML plan, roadmap, dashboard, deck, wargame, quiz, or report. Distinct from the Artifact tool's hosted fragments; mermaid fences belong to mermaid-diagramming.
allowed-tools	["Bash(uv run ${CLAUDE_SKILL_DIR}/scripts/studio.py *)"]

[HTML_STUDIO]

Every artifact is one self-contained file: a deliverable type fixes its composition — layout class, structural spine, element set, capture contract — and the references rule the code, style, figures, and interaction it composes from.

[01]-[ROUTING]

[REFERENCES]:

[01]-DELIVERABLES: registers each type — spine, layout class, element set, capture contract, variant-to-core table
[02]-HTML: advanced HTML — semantic structure, density, and the coding patterns every artifact composes from.
[03]-SVG: advanced inline SVG for HTML — the element vocabulary, construction patterns, and figure and diagram craft.
[04]-STYLE: rules the design language — token system, layout, theming, and the legibility law every artifact inherits
[05]-INTERACTION: rules the return channel — data-to-presentation mapping, the drawer, adjustments returned as data

[02]-[BUILD]

Load the references.
Select the deliverable type by the reader's first question; it fixes measure, spine, envelope, and drawer. A two-type page splits or subordinates.
Model content before rendering: the payload block carries every fact and stable ids on each capturable item; markup states nothing the model lacks.
Compose answer-first down the spine: real controls, data rows, and rendered rivals inherit the token registry, never prose over an unbuilt surface.
Run uv run ${CLAUDE_SKILL_DIR}/scripts/studio.py gate <file.html> until clean: self-containment, accessibility, style doctrine, W3C markup.
render <file.html> returns a headless screenshot and the console through the machine's pinned Chromium; --help lists every verb.
An artifact whose value is the user's judgment runs served: serve <file.html> hosts the return channel, receipts <file.html> reads submissions.

[03]-[CONTRACT]

One file: <!doctype html>, one <title>, all CSS in one <style>, one executable <script>, optional inert application/json payloads.
Zero external references — no CDN, webfont, or remote image; only in-page anchors, data: URIs, sibling-artifact links, and injected return metas.
Dark and light both render; wide content scrolls inside its own container and the body never scrolls sideways.
Injected source, diff, and answer text reaches the DOM through escaping before any span wraps it; embedded JSON payloads are sanitized on embed.

[04]-[INTEGRATION]

A durable artifact homes at docs/atlas/ as <kind>.<scope>[.<slug>].html; a session artifact stays in scratch and never commits.
Chart marks and palettes defer to the dataviz skill.
Mermaid fences defer to mermaid-diagramming, whose render lane delivers a mermaid-sourced figure as pre-rendered inline SVG the page hosts.
Interview method, kind contracts, and the durable-versus-ephemeral ruling defer to the interviewing skill.

html-studio

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

[HTML_STUDIO]

[01]-[ROUTING]

[02]-[BUILD]

[03]-[CONTRACT]

[04]-[INTEGRATION]

[HTML_STUDIO]

[01]-[ROUTING]

[02]-[BUILD]

[03]-[CONTRACT]

[04]-[INTEGRATION]