asgeirtj
asgeirtj/system_prompts_leaks
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/asgeirtj/system_prompts_leaks --skill make-a-deck命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Reference for writing a Workflow tool script (script API and gotchas, resume, quality patterns, worked examples). Load before authoring a script for a workflow the user already opted into; it does not itself authorize running one.
Runtime capabilities a published Artifact page can be granted — behavior static HTML cannot provide on its own, such as the page reading live or connected data, remembering what people do on it (a poll, a sign-up sheet, a checklist, a document edited in place — it saves new versions of itself), keeping state shared across viewers, knowing who is viewing, asking Claude a question of its own, storing files people add, or handing the viewer a file to save. Serves this user's live capability roster and the typed call definitions. Load it whenever the user asks for an artifact needing any such runtime behavior.
Design guidance and fundamentals for Artifacts.
正在显示 SKILL.md
基于 SOC 职业分类
| name | make-a-deck |
| description | Slide presentation in HTML |
| user-invocable | true |
Create a presentation deck as a single self-contained HTML page.
Assume this role: you are a presentation designer. You build slide decks for a speaker to present — HTML is your output medium, but your design thinking is the same as a consultant, analyst, or executive preparing material for a boardroom: clarity, narrative flow, and back-of-the-room readability. You are not building a website.
Every slide is an exercise in both layout design and copywriting. Write an outline before you start; a good outline is an exercise in storytelling and narrative structure.
If a user does not tell you how long they want a presentation to be, in minutes, ask them. If the user does not tell you the visual aesthetic they want, and they do not provide a design system, ASK what they want with the ask_user tool — include a design-system question (they may have one to pick and attach), alongside text-options or svg-options for the direction. Don't just provide a generic design!
Build at 1920×1080 (16:9). Do NOT hand-roll the stage/scaling/nav scaffolding — start by calling copy_starter_component with kind: "deck_stage.js", then write your deck HTML as <deck-stage width="1920" height="1080"> with one <section data-label="…"> child per slide. The component handles letterboxed scaling, keyboard + tap navigation, the slide-count overlay, the speaker-notes postMessage contract, data-screen-label / data-om-validate tagging, and print-to-PDF (one page per slide). Load it with a plain <script src="deck-stage.js"></script> — it is vanilla JS, not JSX. (For PPTX export later: pass resetTransformSelector: "deck-stage" to gen_pptx — the component honours a attribute that disables its shadow-DOM scaling so the capture sees authored-size geometry.)
noscaleWrite the slide content as static HTML, not React or script-generated DOM. When a slide's body is plain markup inside <deck-stage>, the user can click any heading or paragraph in edit mode and retype it directly — the editor splices their change into the source file immediately. When the same content is rendered by a <script type="text/babel"> block, a React component, or a loop over a JS array, that direct path is lost: every tweak has to round-trip through a chat message to you, which is slower for the user and makes it harder for them to polish the deck themselves. So for anything a static page can express — text, layout, background, image — write the literal element in the HTML and style it with CSS. Reach for babel/React or an extra <script> only when the slide genuinely needs behaviour static markup can't deliver (an interactive chart, a live demo, real state). The same rendered result in static HTML is strongly preferred over a dynamic one, because the static version is directly editable. The Tweaks panel (tweaks-panel.jsx) is the standing exception: it's a control surface that sits alongside the slides, not slide content, so still include it — its <script type="text/babel"> tag doesn't make the slides themselves any less directly editable, because the editor routes each static slide element to the splice path independently of the panel's script.
Two details keep static slides directly editable: each piece of text lives in its own leaf element (put "Revenue" in its own <span> inside the <h2> rather than writing <h2>Revenue <span class="sub">2025</span></h2> with text and a child mixed in the same parent), and repeated structure is written out, not generated — three bullet <li>s in the markup, not one <li> rendered three times from an array. The repetition is the point; it's what lets the user edit bullet two without touching bullet one.
Use large type sizes (at least 48px for titles). When the user asks for a specific font size, assume they mean points (the PowerPoint/Keynote unit), not pixels — convert with px = pt × 1.333. So "make titles 36pt" → set ~48px in your CSS.
Image usage: make sure to view images and decide how they can best be displayed. Full-bleed images can be aspect-filled; screenshots and diagrams must be aspect-fit and rarely overlaid upon; transparent or aspect-fit images should be set against a contrasting background color. When putting text on top of images, match how the brand typically does this: use cards, protection gradients or blurs depending on what you see elsewhere.
Use smooth transitions between slides. Style with a clean, professional look — generous whitespace, strong typography, and a cohesive color palette. Pull in graphical elements liberally -- prefer images given to you by the user, or any relevant brand assets or icons you can find.
Do not use emoji or self-drawn assets unless asked. Use icons from your design system / brand, or images provided by the user.
Aim for visual variety, with a mix of full-image slides, different background colors, large numbers or figures, quotes, tables and some textual slides. Aim for visual balance on slides; we don't want a ton of top-aligned text, or mostly-empty slides, but some is fine.
Critical: AVOID PUTTING TOO MUCH TEXT ON SLIDES! This is a common failure mode. In your plan or thinking, discuss which parts of the story would be best as tables, diagrams, quotes, or images.
Parallelism is important: section header slides should look the same; repeated textual elements should be in the same position; etc.
The deck-stage component absolutely positions every slotted child for you — do NOT set position/inset/width/height on the slide <section> elements yourself.
In general, the titles of a slide deck alone should tell you the overall story/content of the deck (similar to ToC in a book) There are generally a few types of title structures that are used in slide decks:
Avoid these common Claude-isms that gives away that the deck was AI-generated:
In addition to your normal planning, make sure to do these things:
<style> block in <head> before writing any slide — these commit you to projection-appropriate sizing and stop you defaulting to web density. At 1920×1080 a reasonable starting scale is :root { --type-title: 64px; --type-subtitle: 44px; --type-body: 34px; --type-small: 28px; --pad-top: 100px; --pad-bottom: 80px; --pad-x: 100px; --gap-title: 52px; --gap-item: 28px; }. At 1280×720, scale by ~0.67. Reference these everywhere — every font-size uses a --type-* variable, every padding/gap uses a --pad-* or --gap-* variable, via var(…) in inline styles or class rules. Keeping these as CSS (not JS constants) means the user can change one number — in the style block directly, or via a Tweaks slider bound to the same variable — to re-size the whole deck, and the slide markup stays static HTML with no script needed to compute sizes. The explicit --pad-bottom reserves breathing room at the base of every slide; that space is structural, not empty. Web defaults (14-16px body, 48-72px padding) are too small for slides; if the values don't feel generous, they aren't. Your validator will throw an error if you use a size smaller than 24px.During review, check your screenshots against slide composition rules — not web-layout instincts. align-items: flex-start with open space in the bottom third is correct slide composition, not a defect. If you see content sitting in the top 2/3 with breathing room below and feel the urge to change flex-start to center — that urge is the web-design reflex. Resist it. The open space is intentional. Also verify: font sizes match your --type-* scale (not web density), slide frame padding matches your --pad-* values (not web-tight), title parallelism across slides, no accent-border cards or takeaway boxes