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.

Ir a la instalación

Repositorio: bsamiee/Maghz
Última actividad en el origen: 19 de julio de 2026 a las 01:46
Idioma detectado de SKILL.md: inglés
Estrellas: 0
Forks: 0

Opciones de instalación

De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.

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

El comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.

¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.

Revisa los archivos de origen

Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.

Explorador de archivos

7 archivos

SKILL.md

Instrucciones de origen · Vista previa de solo lectura

Volver a la búsqueda Volver a la instalación

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

Ver todos los de este repositorio

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

Datos de origen

Opciones de instalación

Revisa los archivos de origen

Más de este repositorio

Más de este repositorio

[HTML_STUDIO]

[01]-[ROUTING]

[02]-[BUILD]

[03]-[CONTRACT]

[04]-[INTEGRATION]

[HTML_STUDIO]

[01]-[ROUTING]

[02]-[BUILD]

[03]-[CONTRACT]

[04]-[INTEGRATION]