[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-78156":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},78156,"magic-slide","daniel-style\u002Fmagic-slide","daniel-style","A skill that generates polished self-contained HTML presentations with smooth Magic Move-style slide transitions.","https:\u002F\u002Fmagicslide.show",null,"Python",161,9,52,0,15,24,71,45,3,"MIT License",false,"main",true,[],"2026-06-12 02:03:46","# Magic Slide\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fassets\u002Freadme\u002Fmagic-slide-logo.svg\" alt=\"Magic Slide logo\" width=\"88\">\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Cstrong>Official website and live demo:\u003C\u002Fstrong>\n  \u003Ca href=\"https:\u002F\u002Fwww.magicslide.show\u002F\">magicslide.show\u003C\u002Fa>\n\u003C\u002Fp>\n\n![Magic Slide promotional artwork](.\u002Fassets\u002Freadme\u002Fmagic-slide-promo.png)\n\nMagic Slide is a toolkit for building polished, self-contained HTML presentations\nwith Magic Move transitions, integrated PipeLLM image generation,\nand high-quality web search for research-backed decks.\n\nIt is designed for presentations that need to feel intentional rather than\ntemplate-driven: narrative outlines, distinctive visual systems, smooth motion,\neditable source files, and a portable final HTML deck.\n\n## Installation\n\n```bash\nnpx skills add daniel-style\u002Fmagic-slide\n```\n\n## Runtime Requirements\n\nMagic Slide's bundled scripts require Python 3. The core workflow uses only the\nPython standard library plus a modern browser for merging slides, injecting the\nruntime, marking QA notes, and running the preview server.\n\nOptional capabilities have separate requirements:\n\n- PipeLLM web search and image generation require a `PIPELLM_API_KEY`.\n- Agent-run screenshot QA requires Playwright.\n- `scripts\u002Fcheck-magic-text-wrap.py` also requires Playwright.\n\nIf Python 3 is not available, install Python 3 before running Magic Slide\ncommands. The scripts are intentionally kept as lightweight Python helpers\nrather than packaged binaries or rewritten per platform.\n\n## Highlights\n\n### Magic Move Transitions\n\nMagic Slide uses a FLIP-based runtime to animate shared elements between slides.\nWhen titles, cards, metrics, labels, diagrams, or images reappear across adjacent\nslides, they can glide, resize, fade, and settle into the next composition\ninstead of hard-cutting.\n\nGood use cases include:\n\n- Overview-to-detail flows\n- Agenda items expanding into section headers\n- Cards moving from grids into focused detail slides\n- Reused metrics or labels carrying continuity across a story\n- Diagram nodes staying visually connected while the explanation changes\n\n### PipeLLM Image Generation\n\nThe project includes `scripts\u002Fgenerate-image.py`, a PipeLLM-powered image\ngeneration helper for creating presentation assets on demand. Generated images\ncan be used as cover atmospheres, content illustrations, product-style visuals,\nor replaceable placeholders inside the deck.\n\nImage generation is optional. When a deck does not use generated images, the\nvisual system should still be rich: typography, CSS diagrams, data treatments,\nsimple geometric systems, and reliable inline SVG can replace image-heavy\nlayouts.\n\n### PipeLLM Web Search\n\nThe project includes `scripts\u002Fwebsearch.py` for PipeLLM-backed web research. It\nis intended for decks where current facts, market context, product details, or\nsource-backed claims matter.\n\nWhen a user agrees to web search, Magic Slide should run `scripts\u002Fwebsearch.py`\nfirst. Agent-provided\u002Fdefault web search tools are fallback paths only after the\nPipeLLM script cannot produce usable results.\n\nThe search path is treated as a first-class part of deck quality: use it to\nsharpen the thesis, improve evidence slides, and avoid generic summaries. Search\nresults should be converted into a clear argument, not pasted into slides as a\nraw fact dump.\n\n### Self-Contained HTML Output\n\nThe final presentation is a single HTML file with runtime, styles, slide markup,\nand local assets embedded or referenced through the build pipeline. It can be\nshared, archived, and presented without a framework-specific runtime.\n\n### Editable Source Workflow\n\nDecks are generated from modular source files:\n\n- `sources\u002Foutline.md` keeps the approved narrative plan\n- `sources\u002Fstyle.css` contains the deck visual system\n- `sources\u002Fslide-XX.html` files contain individual slide fragments\n- `index.html` is the final merged, runtime-injected presentation\n\nThis keeps iteration practical: edit one slide or the shared CSS, rebuild, and\npreview again.\n\n## Project Structure\n\n```text\nmagic-slide-skill\u002F\n├── README.md\n├── SKILL.md\n├── scripts\u002F\n│   ├── extract-slides.py\n│   ├── generate-image.py\n│   ├── inject-runtime.py\n│   ├── merge-slides.py\n│   ├── serve.py\n│   └── websearch.py\n└── references\u002F\n    ├── design-system.md\n    ├── flip-engine.md\n    ├── generation-guide.md\n    ├── html-contract.md\n    ├── images.md\n    ├── layout-guide.md\n    ├── layouts\u002F\n    │   └── primitives.md\n    └── workflows\u002F\n        ├── step-01-requirements.md\n        ├── step-02-websearch.md\n        ├── step-03-outline.md\n        ├── step-04-design-brief.md\n        ├── step-05-prototype.md\n        ├── step-06-visual-gate.md\n        ├── step-07-generate.md\n        ├── step-08-merge.md\n        ├── step-09-inject.md\n        └── step-10-preview.md\n```\n\nGenerated decks use this structure:\n\n```text\n{topic}\u002F\n├── index.html\n├── assets\u002F\n│   └── image-1.png\n└── sources\u002F\n    ├── outline.md\n    ├── style.css\n    ├── slide-01.html\n    ├── slide-02.html\n    └── qa\u002F\n```\n\nThe topic root is reserved for deliverables. Process files stay inside\n`sources\u002F`.\n\n## Generation Workflow\n\nBefore step 1, create a visible TODO\u002Fplan for the `$magic-slide` run and update\nit as each stage progresses.\n1. Gather requirements: topic, visual direction, language, and whether generated\n   images should be used.\n2. Optionally run PipeLLM web search when the deck needs fresh or source-backed\n   information.\n3. Create an outline with a clear audience, thesis spine, chapter arc, and\n   closing idea.\n4. Write a compact design brief before producing CSS or slide HTML.\n5. Generate `style.css` and the individual slide fragments.\n6. Merge slide fragments into `index.html`.\n7. Inject the Magic Move runtime and editing helpers.\n8. Launch the preview server, open the QA capture URL\n   `?ms_qa=overview&ms_qa_capture=1`, take one full-page overview longshot for\n   first-pass visual triage with Playwright, fix obvious visible issues, then\n   stop for the user to add `Revise slide` notes. Do not run single-slide\n   screenshot repair before that human revision step. After saved notes are\n   repaired, mark them `fixed_pending_confirmation` and return to QA Overview\n   for user confirmation instead of running a screenshot verification pass.\n\n## Core Scripts\n\n### Merge slide sources\n\n```bash\npython3 scripts\u002Fmerge-slides.py .\u002Fmy-deck\u002Fsources --lang en\n```\n\nCombines `style.css` and `slide-XX.html` fragments into a deck HTML file.\n\n### Inject runtime\n\n```bash\npython3 scripts\u002Finject-runtime.py .\u002Fmy-deck\u002Findex.html\n```\n\nAdds the presentation runtime, navigation, overview mode, edit mode, progress\nstate, image upload support, and Magic Move transition engine.\n\n### Preview a deck\n\nUse the skill command for your agent environment:\n\n```text\n\u002Fmagic-slide preview my-deck\n$magic-slide preview my-deck\n```\n\nClaude Code uses `\u002Fmagic-slide`; Codex uses `$magic-slide`. The `preview`\nargument treats `my-deck` as a deck directory and opens `my-deck\u002Findex.html`.\nPassing an explicit `index.html` file also works. Preview starts the Magic Slide\nserver through `scripts\u002Fserve.py`.\n\nThe underlying script can also be called directly:\n\n```bash\npython3 scripts\u002Fserve.py .\u002Fmy-deck\u002Findex.html\n```\n\nStarts the Magic Slide preview server. Use this server for preview and editing;\nit supports features that direct file opening and generic static servers do not.\n\n### Mark repaired QA notes\n\n```bash\npython3 scripts\u002Fmark-qa-repaired.py .\u002Fmy-deck\u002Fsources\u002Fqa\u002Fvisual-issues.json \\\n  --changed-files .\u002Fmy-deck\u002Fsources\u002Fslide-03.html .\u002Fmy-deck\u002Fsources\u002Fstyle.css\n```\n\nMarks open `Revise slide` notes as fixed and awaiting user confirmation. The\npreview server opens QA Overview automatically while pending confirmations\nexist.\n\n### Generate an image with PipeLLM\n\n```bash\npython3 scripts\u002Fgenerate-image.py \"minimal abstract editorial cover texture\" \\\n  --aspect 16:9 \\\n  --output .\u002Fmy-deck\u002Fassets\u002Fcover.png\n```\n\n### Search with PipeLLM\n\n```bash\npython3 scripts\u002Fwebsearch.py \"latest market data for renewable energy storage\"\n```\n\n## Configuration\n\nPipeLLM features require an API key from [PipeLLM](https:\u002F\u002Fwww.pipellm.ai\u002F).\nRecommended local setup:\n\n```bash\npython3 scripts\u002Fgenerate-image.py --save-key\n```\n\nThe command reads from a hidden prompt in an interactive terminal, or from stdin\nwhen piped. Do not pass API keys as command-line arguments.\n\nThis stores the key at:\n\n```text\n~\u002F.config\u002Fpipellm\u002Fapi_key\n```\n\nFor automation, provide `PIPELLM_API_KEY` from your shell or CI secret store:\n\n```bash\nexport PIPELLM_API_KEY\n```\n\nSee [Runtime Requirements](#runtime-requirements) for the Python, browser, and\nPlaywright runtime contract.\n\n## Design Principles\n\nThe design layer integrates principles from Anthropic's official\n`frontend-design` skill to guide visual direction, typography, composition,\ncolor depth, and anti-generic quality checks. The source design guidance is\nbased on Anthropic's public skill:\n[anthropics\u002Fskills: frontend-design](https:\u002F\u002Fgithub.com\u002Fanthropics\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ffrontend-design).\n\n- Start with an argument, not a topic inventory.\n- Make slide 1 a distinct cover moment, not an ordinary content layout.\n- Use Magic Move for meaningful continuity, not decoration.\n- Treat generated images as part of the design promise when they are requested.\n- When images are not used, replace them deliberately with diagrams, data,\n  typography, and geometric systems.\n- Prefer reliable HTML\u002FCSS diagrams and simple SVG over fragile decorative\n  effects.\n- Keep source files modular so decks remain easy to revise.\n\n## Quality Checklist\n\nBefore delivery, verify:\n\n- Slides render without errors.\n- QA overview has been captured with Playwright as one full-page visual wall,\n  open `sources\u002Fqa\u002Fvisual-issues.json` notes are treated as known revisions,\n  and new-deck first-pass repairs stop at the human `Revise slide` step before\n  any targeted single-slide screenshot checks. Repaired notes are marked\n  `fixed_pending_confirmation` and confirmed by the user in QA Overview.\n- Text does not overflow or overlap.\n- Slide backgrounds cover the full viewport.\n- Magic Move transitions are smooth and semantically meaningful.\n- Images load correctly when used.\n- Inline SVG connectors do not render as filled black shapes.\n- Navigation, overview mode, progress, and edit mode work in the preview server.\n- The deck has a specific visual world that could not be reused unchanged for a\n  completely different topic.\n","Magic Slide 是一个用于生成具有流畅幻灯片过渡效果的精致独立HTML演示文稿的工具包。其核心功能包括使用FLIP技术实现的魔术移动过渡效果，使得标题、卡片、指标等元素在相邻幻灯片间平滑过渡；集成PipeLLM图像生成和高质量网络搜索能力以支持研究驱动的内容创作。项目主要采用Python编写，并保持轻量级设计，仅依赖Python标准库及现代浏览器完成基本操作流程。适合需要展现故事性而非模板化风格的演讲场景，如从概览到细节的流程展示、议程项扩展为章节标题等情况，尤其适用于追求视觉连贯性和内容丰富性的场合。",2,"2026-06-11 03:56:30","CREATED_QUERY"]