Skip to main content

design-html

design-html

Catalogue généré le 2026-05-11

En une phrase

DesignTransforme finalization:un generatesdesign production-qualityapprouvé Pretext-native(maquette, plan, ou simple description) en HTML/CSS.CSS de qualité production, prêt à être servi en ligne, sans dépendances.

Quand l'utiliser

  • UseQuand when:tu "finalizeas thischoisi design",une "turnmaquette thisvia into/design-shotgun HTML",et "buildtu meveux aen page",faire "implementune thisvraie design",page or after any planning skill.web.
  • ProactivelyQuand suggestun whenplan userCEO has approved aou design orest hasvalidé aet planil ready.faut (gstack)maintenant Voicele triggersmatérialiser (speech-to-texten aliases):code.
"buildQuand thetu design",décris "codeune thepage mockup",à "makeClaude itet real".tu veux qu'il te ponde le HTML d'un coup, sans framework lourd. Pour créer une landing page, une page produit, ou un mini-site léger qui doit charger vite.

Comment l'invoquer

  • Slash command : /design-html (si exposé dans ton CLI)
  • Voice triggers : « build the design » · « code the mockup » · « make it real »
  • Phrases déclencheurs (texte) : voir"finalize lathis descriptiondesign" complète/ ci-dessous"turn this into HTML" / "build me a page" / "implement this design"
  • Auto-invocation : ✅ ProactivelyOui suggest— whenClaude usersuggère hasce approvedskill aquand tu viens d'approuver un design orou hasque atu as un plan ready.prêt (gstack)à Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".coder.

Description complètedétaillée

DesignCe finalization:skill generatesgénère production-quality Pretext-nativedu HTML/CSS.CSS Works"Pretext-native" with— approvedune mockupsapproche fromoù le texte coule naturellement, où les hauteurs sont calculées dynamiquement, et où les layouts s'adaptent au contenu. Pas de JavaScript lourd, pas de framework, juste environ 30 Ko de code total pour rendre la page autonome.

Il sait s'enchaîner avec d'autres skills : il peut partir d'une maquette validée par /design-shotgun,shotgun, CEOd'un plansplan fromstratégique de /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".

Pour aller plus loin

Preamble (run first)

Plan Mode Safe Operations

In plan mode, allowed because they inform the plan: $B, $D, codex exec/codex review, writesdu tocontexte d'une revue design ~/.gstack/plan-design-review, writesou tosimplement thed'une plandescription file,écrite andpar open for generated artifacts.toi.

Skill Invocation During Plan Mode

If the user invokesIl a skillun inroutage planintelligent mode,: theselon skillle takestype precedencede overdesign generic plan mode behavior. Treat the skill file as executable instructions, not reference. Follow it step by step starting from Step 0; the first AskUserQuestion is the workflow entering plan mode, not a violation of it. AskUserQuestiondemandé (anylanding, variantdashboard, —formulaire, mcp__*__AskUserQuestionetc.), oril native;choisit seeles "AskUserQuestionbons Formatpatterns →Pretext Toolà resolution")appliquer. satisfiesLe planrésultat mode'sest end-of-turncensé requirement.être Ifdirectement nopubliable, variantpas isun callable,brouillon theà skill is BLOCKED — stop and report BLOCKED — AskUserQuestion unavailable per the AskUserQuestion Format rule. At a STOP point, stop immediately. Do not continue the workflow or call ExitPlanMode there. Commands marked "PLAN MODE EXCEPTION — ALWAYS RUN" execute. Call ExitPlanMode only after the skill workflow completes, or if the user tells you to cancel the skill or leave plan mode.retoucher.

(extraitL'intérêt —par voirrapport à un "Claude qui code une page" classique : le SKILL.mdrésultat completest pensé pour laêtre suite)responsive, accessible et léger dès le départ, plutôt que de faire un Tailwind générique qu'il faudra ensuite nettoyer.

Source

  • Plugin : gstack
  • Nom interne : design-html
  • Fichier : /home/thymon/.claude/skills/gstack/design-html/SKILL.md
Back to top