Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

html-poster

Étoiles0

Forks0

Mis à jour23 juin 2026 à 13:51

Generate clean, self-contained, print-ready HTML documents — course flyers, research posters, departmental memos, event one-pagers — with inline CSS sized for US Letter or A4. Use when the user wants a polished printable handout, flyer, poster, or memo they can open in a browser and save as PDF, rather than fighting with Word.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

timothyfraser

timothyfraser/systems-ai-workshop

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

GraphistesArts, design, divertissement, sports et médias·SOC 27-1024

SKILL.md

readonly

name	html-poster
description	Generate clean, self-contained, print-ready HTML documents — course flyers, research posters, departmental memos, event one-pagers — with inline CSS sized for US Letter or A4. Use when the user wants a polished printable handout, flyer, poster, or memo they can open in a browser and save as PDF, rather than fighting with Word.

HTML poster / flyer / memo builder

Goal

Produce a single self-contained .html file the user can open in any browser and print to PDF — no external assets, no build step, no internet required to view it.

Hard requirements

One file. All CSS is inline in a <style> block. No external stylesheets, no CDN fonts, no remote images (use system font stacks and CSS for graphics).
Print-first. Include an @page rule and a @media print block. Default to US Letter (8.5in x 11in); offer A4 if asked. Set sensible margins (e.g. 0.5in).
Readable typography. System font stack (-apple-system, "Segoe UI", Roboto, sans-serif), generous line-height, clear hierarchy.
Accessible color. Maintain strong contrast. Don't rely on color alone to convey meaning.
Self-evident structure. A title/banner, then well-spaced sections. Don't overcrowd a one-pager.

Workflow

Clarify the essentials if not given: purpose, audience, page size, the exact text/sections, and visual tone (academic-clean, bold-colorful, minimal).
Draft the HTML following the requirements above.
Tell the user how to use it: save as name.html, open in a browser, Ctrl/Cmd+P → "Save as PDF."
Iterate in small steps on color, spacing, and layout when they ask.

Starter skeleton

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<style>
  @page { size: Letter; margin: 0.5in; }
  :root { --ink:#1a1a2e; --accent:#16324f; --muted:#566; }
  * { box-sizing: border-box; }
  body { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
         color:var(--ink); line-height:1.5; margin:0; }
  .banner { background:var(--accent); color:#fff; padding:24px 28px; }
  .banner h1 { margin:0; font-size:30px; letter-spacing:.2px; }
  .wrap { padding:24px 28px; }
  h2 { color:var(--accent); border-bottom:2px solid #e6ebf0; padding-bottom:4px; }
  .muted { color:var(--muted); }
  @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
</style>
</head>
<body>
  <header class="banner"><h1>TITLE</h1></header>
  <main class="wrap">
    <!-- sections here -->
  </main>
</body>
</html>

Anti-patterns

Linking remote fonts, CSS, or images (breaks offline and print).
Cramming a poster with dense paragraphs — favor headings, short lines, whitespace.
Fixed pixel widths that don't print cleanly. Use page-relative units and the @page rule.

Done when

One self-contained file, opens offline
Prints cleanly to the requested page size
Clear hierarchy, strong contrast, no overcrowding

Plus depuis ce dépôt

même dépôt

interactive-toolmaker

timothyfraser/systems-ai-workshop

Build a single self-contained HTML mini-tutorial that teaches ONE concept through a GENUINELY interactive centerpiece — something the reader manipulates that responds live — then verify it actually works before handing it back. The *form* of the interactive is chosen to fit the concept (a network process, a parameter model with sliders, an agent-based grid, a step-through algorithm, a data explorer, a what-if calculator, …) — contagion-on-a-network is just one example, not the default. Every build opens with a big-picture question, puts a hands-on interactive at the center with live-updating readouts, uses a fixed color scheme and uniform headings, and ends with tap-to-reveal learning checks (phone-friendly). Use when a faculty member wants an interactive explainer, a lesson dashboard, a concept simulator, or a "mini tutorial" they can open in a browser or share on a phone.

2026-06-240

scholar-mentions-log

timothyfraser/systems-ai-workshop

A monthly routine for scholars: search the web for recent mentions, press, talks, and citations of a named researcher and their work, then append the genuinely-new ones to a CSV (date logged, date published, title, source, URL, one-line description) — deduped against what's already there. Use when a researcher wants to track who is talking about them and their work over time, with links they can skim later.

2026-06-240

plan-then-act

timothyfraser/systems-ai-workshop

Have the agent propose a concrete, numbered plan and get approval BEFORE executing — then work the plan step by step, re-planning out loud when reality diverges. Part of the "keep the agent on track" suite. Use for any task big enough that a wrong first move is costly, or when an agent tends to charge ahead.

2026-06-240

project-memory

timothyfraser/systems-ai-workshop

Maintain a persistent house-rules file (CLAUDE.md or AGENTS.md) the agent reads every session — what the project is, how to run/test it, conventions, architecture pointers, and gotchas/"don'ts" — so it stops relearning the project and repeating mistakes. Part of the "keep the agent on track" suite. Use for any repo an agent will touch more than once.

2026-06-240

vertical-slice

timothyfraser/systems-ai-workshop

Break a complex build into thin, end-to-end slices — each independently runnable and verifiable — instead of horizontal layers, so you always have something working and learn early. Part of the "keep the agent on track" suite. Use when a task is big enough that "build it all, then test" risks weeks of invisible drift.

2026-06-240

decision-log

timothyfraser/systems-ai-workshop

Keep an append-only log of decisions (Architecture Decision Records) — each with context, the decision, and its rationale and consequences — so the agent doesn't re-litigate or silently contradict past choices. Part of the "keep the agent on track" suite. Use when a project accumulates choices you'll need to remember the "why" for.

2026-06-240

name	html-poster
description	Generate clean, self-contained, print-ready HTML documents — course flyers, research posters, departmental memos, event one-pagers — with inline CSS sized for US Letter or A4. Use when the user wants a polished printable handout, flyer, poster, or memo they can open in a browser and save as PDF, rather than fighting with Word.

HTML poster / flyer / memo builder

Goal

Produce a single self-contained .html file the user can open in any browser and print to PDF — no external assets, no build step, no internet required to view it.

Hard requirements

One file. All CSS is inline in a <style> block. No external stylesheets, no CDN fonts, no remote images (use system font stacks and CSS for graphics).
Print-first. Include an @page rule and a @media print block. Default to US Letter (8.5in x 11in); offer A4 if asked. Set sensible margins (e.g. 0.5in).
Readable typography. System font stack (-apple-system, "Segoe UI", Roboto, sans-serif), generous line-height, clear hierarchy.
Accessible color. Maintain strong contrast. Don't rely on color alone to convey meaning.
Self-evident structure. A title/banner, then well-spaced sections. Don't overcrowd a one-pager.

Workflow

Clarify the essentials if not given: purpose, audience, page size, the exact text/sections, and visual tone (academic-clean, bold-colorful, minimal).
Draft the HTML following the requirements above.
Tell the user how to use it: save as name.html, open in a browser, Ctrl/Cmd+P → "Save as PDF."
Iterate in small steps on color, spacing, and layout when they ask.

Starter skeleton

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<style>
  @page { size: Letter; margin: 0.5in; }
  :root { --ink:#1a1a2e; --accent:#16324f; --muted:#566; }
  * { box-sizing: border-box; }
  body { font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
         color:var(--ink); line-height:1.5; margin:0; }
  .banner { background:var(--accent); color:#fff; padding:24px 28px; }
  .banner h1 { margin:0; font-size:30px; letter-spacing:.2px; }
  .wrap { padding:24px 28px; }
  h2 { color:var(--accent); border-bottom:2px solid #e6ebf0; padding-bottom:4px; }
  .muted { color:var(--muted); }
  @media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
</style>
</head>
<body>
  <header class="banner"><h1>TITLE</h1></header>
  <main class="wrap">
    <!-- sections here -->
  </main>
</body>
</html>

Anti-patterns

Linking remote fonts, CSS, or images (breaks offline and print).
Cramming a poster with dense paragraphs — favor headings, short lines, whitespace.
Fixed pixel widths that don't print cleanly. Use page-relative units and the @page rule.

Done when

One self-contained file, opens offline
Prints cleanly to the requested page size
Clear hierarchy, strong contrast, no overcrowding