[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3119":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":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},3119,"future-slide-skill","bytonylee\u002Ffuture-slide-skill","bytonylee","The workflow for disciplined slide generation. Extract design, plan the deck, render with consistency.","https:\u002F\u002Ffuture-slide.tonylee.im",null,"HTML",117,21,1,0,42,4.03,"Apache License 2.0",false,"main",true,[],"2026-06-12 02:00:46","# Future Slide Skill\n\n[English](.\u002FREADME.md) | [한국어](.\u002FREADME.ko.md)\n\n![Version](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fversion-v0.0.3-333333?style=flat-square)\n[![License: Apache-2.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache--2.0-yellow.svg)](.\u002FLICENSE)\n\nNavigation: [Workflow](#recommended-workflow) |\n[Tightened Slide](#tightened-slide-html-decks) |\n[Examples](#example-prompts) | [Install](#installation) | [License](#license)\n\n![Future Slide Skill Flow](public\u002Fdiagram\u002Ffour-skill-flow.png)\n\nA reusable skill bundle for turning:\n\n1. a **reference slide image**\n2. **user-provided files**\n3. a **user prompt \u002F deck request**\n\ninto a disciplined four-stage slide-generation workflow:\n\n1. **Extract `DESIGN.md` from the reference slide image**\n2. **Build a persuasive slide plan in JSON**\n3. **Write page-by-page slide prompts in JSON**\n4. **Generate page images sequentially from the prompt JSON**\n\nThis bundle is intentionally modeled after the *reason* `gpt-taste` exists in the `taste-skill` repo: not to add more decoration, but to add **stricter enforcement**, stronger anti-default rules, and mandatory pre-flight structure so GPT-class models do not skip steps or collapse into generic output.\n\n## Why this is split into 4 skills\n\nA single prompt often fails in predictable ways:\n\n- it starts writing slides before the theme is extracted\n- it mixes design analysis with deck strategy\n- it produces page prompts without a real narrative arc\n- it loses layout consistency across body slides\n- it overfits to the visible text in the reference image instead of the slide *design system*\n- it stops after writing prompts and never actually renders numbered slide outputs\n\nSo this bundle separates responsibilities:\n\n- **`slide-design`** → extract a reusable `DESIGN.md`\n- **`gpt-image-slide-plan`** → decide deck logic, ordering, and persuasion\n- **`gpt-image-slide-prompt`** → convert that plan into detailed page prompts\n- **`gpt-image-slide-render`** → generate slide images sequentially and save them with page-number filenames\n\n## GPT image slide commands\n\n- **`$gpt-image-slide`** → run the full image workflow: design → plan → prompt → render\n- **`$slide-design`** → only create `DESIGN.md`\n- **`$gpt-image-slide-plan`** → only create `slide_plan.json`\n- **`$gpt-image-slide-prompt`** → only create `slide_prompts.json`\n- **`$gpt-image-slide-render`** → only render `page_1.png ... page_N.png`\n\n### Tightened Slide command\n\n- **`$tightened-slide`** → build a single-file HTML horizontal-swipe deck with locked layouts, strict grid rules, image-slot discipline, and validation\n\n## Recommended workflow\n\nUse the skills in this exact sequence:\n\n### 1) `slide-design`\nInputs:\n- reference slide image(s)\n\nOutput:\n- one `DESIGN.md` focused on presentation design, not slide content\n\n### 2) `gpt-image-slide-plan`\nInputs:\n- extracted `DESIGN.md`\n- user files\n- user goal \u002F audience \u002F prompt\n\nOutput:\n- deck plan JSON with slide ordering, narrative flow, and evidence mapping\n\n### 3) `gpt-image-slide-prompt`\nInputs:\n- `DESIGN.md`\n- plan JSON\n- supporting files if needed\n\nOutput:\n- slide-by-slide prompt JSON with detailed visual\u002Fcontent instructions\n\n### 4) `gpt-image-slide-render`\nInputs:\n- `DESIGN.md`\n- page-level prompt JSON such as `slide_prompts.json`\n\nOutput:\n- final slide images saved sequentially into the workspace, for example:\n  - `page_1.png`\n  - `page_2.png`\n  - `page_3.png`\n\nThis step is intentionally separate so generation can:\n- inspect each page one by one\n- preserve deck consistency across outputs\n- save project-bound assets explicitly instead of leaving them in tool cache\n\n[Back to top](#future-slide-skill)\n\n## Tightened Slide HTML decks\n\n`tightened-slide` is an independent HTML deck workflow. Use it when the target is\na polished horizontal-swipe presentation rather than generated page images.\n\nIt produces:\n\n- `index.html` from `skills\u002Ftightened-slide\u002Fassets\u002Ftemplate.html`\n- an adjacent `images\u002F` folder for local deck assets\n- a browser-ready presentation with keyboard navigation and static mode\n\nThe skill is intentionally stricter than the general HTML slide workflow:\n\n- body slides must use the registered `S01` to `S22` layouts\n- maps and route\u002Flocation pages should use `S08` with the Tightened Map Component\n- images must be assigned to known layout slots before prompting or placement\n- deck language is set explicitly with `lang` and `data-language`\n- delivery requires `node skills\u002Ftightened-slide\u002Fscripts\u002Fvalidate-deck.mjs path\u002Fto\u002Findex.html`\n\nExample:\n\n```text\n$tightened-slide\nCreate a 9-page Korean launch deck for a new AI research product.\nUse the International Klein Blue theme, include one hero image page, and validate the final HTML.\n```\n\n[Back to top](#future-slide-skill)\n\n## Example prompts\n\nBelow are concrete example prompts based on the actual way these skills were used for the Samsung Biologics \u002F Hana Securities workflow.\n\n### `slide-design`\n\nUse when you have a reference slide image or reference deck image and want to extract a reusable design system.\n\nExample:\n\n```text\n$slide-design [Image #1]\n```\n\nMore explicit example:\n\n```text\n$slide-design\nExtract the design theme from this reference slide image.\nFocus on official DESIGN.md output with layout placement, header\u002Fbody\u002Ffooter flow,\ntitle page \u002F body page \u002F end page flow, icon usage, infographic cards, and diagram behavior.\n```\n\n### `gpt-image-slide-plan`\n\nUse when you already have `DESIGN.md` and want to build the storyline and slide sequence from files plus user intent.\n\nExample:\n\n```text\n$gpt-image-slide-plan \u002FUsers\u002Ftonylee\u002FDownloads\u002F하나증권 _보고서.pdf\nWrite the analysis slide for 'Samsung Biologics' in Korean based on report pdf file.\n```\n\nExpanded full-deck example:\n\n```text\n$gpt-image-slide-plan \u002FUsers\u002Ftonylee\u002FDownloads\u002F하나증권 _보고서.pdf\nCreate a more detailed full deck in Korean from this equity research report.\nKeep the structure analytical and report-native.\nPlan title page, body pages, end page, and appendix\u002Fdisclosure flow.\n```\n\n### `gpt-image-slide-prompt`\n\nUse after planning is complete and you want detailed page-level prompt JSON for slide generation.\n\nMinimal example:\n\n```text\n$gpt-image-slide-prompt\n```\n\nMore explicit example:\n\n```text\n$gpt-image-slide-prompt\nUse the current DESIGN.md and slide_plan.json.\nGenerate strict page-by-page prompt JSON with explicit header\u002Fbody\u002Ffooter zoning,\ntable\u002Fchart\u002Fcard hierarchy, icon rules, and anti-generic constraints.\n```\n\n### `gpt-image-slide-render`\n\nUse after `slide_prompts.json` exists and you want actual slide images rendered sequentially.\n\nMinimal example:\n\n```text\n$gpt-image-slide-render\n```\n\nMore explicit example:\n\n```text\n$gpt-image-slide-render\nBased on @slide_prompts.json, create all slide images 1 by 1 and save them\nwith the page_number naming rule.\n```\n\nFull-deck example:\n\n```text\n$gpt-image-slide-render\nUse DESIGN.md and slide_prompts.json.\nRender the full deck sequentially and save:\npage_1.png ... page_N.png\n```\n\n[Back to top](#future-slide-skill)\n\n## Example end-to-end usage\n\nTypical sequence:\n\n```text\n$slide-design [reference slide image]\n$gpt-image-slide-plan \u002Fpath\u002Fto\u002Freport.pdf Create a full Korean research-summary deck.\n$gpt-image-slide-prompt\n$gpt-image-slide-render\n```\n\n## What this bundle optimizes for\n\n- theme extraction first, content second\n- strong cross-slide consistency\n- persuasive story flow\n- explicit evidence-to-slide mapping\n- reusable layout families\n- body-slide discipline\n- title \u002F body \u002F end-page flow discipline\n- explicit header \u002F body \u002F footer zoning\n- icon \u002F infographic \u002F table \u002F chart role clarity\n- sequential image generation with stable numbering\n- no hallucinated design rules when the reference image is ambiguous\n\n## Output artifacts\n\nThis bundle includes:\n- `skills\u002Fgpt-image-slide\u002FSKILL.md`\n- `skills\u002Fslide-design\u002FSKILL.md`\n- `skills\u002Fgpt-image-slide-plan\u002FSKILL.md`\n- `skills\u002Fgpt-image-slide-prompt\u002FSKILL.md`\n- `skills\u002Fgpt-image-slide-render\u002FSKILL.md`\n- `skills\u002Ftightened-slide\u002FSKILL.md`\n- `templates\u002FDESIGN_TEMPLATE.md`\n\n## Current skill responsibilities\n\n### `slide-design`\n- extracts design theme, placement rules, header\u002Fbody\u002Ffooter flow, title\u002Fbody\u002Fend-page behavior\n- captures icon usage, infographic card logic, table\u002Fchart treatment, and diagram behavior\n\n### `gpt-image-slide-plan`\n- builds the storyline and page-family rhythm\n- decides where tables, charts, icon-led modules, or comparison exhibits belong\n- plans split topics across multiple pages when needed\n\n### `gpt-image-slide-prompt`\n- converts the plan into strict per-page prompt JSON\n- makes layout family, zoning, and anti-generic rules explicit for every page\n\n### `gpt-image-slide-render`\n- reads `DESIGN.md` and prompt JSON\n- renders slide images one by one with Codex native image generation\n- saves final outputs into the project using page-number naming\n\n## Recommended generated artifact set\n\nFor a full run, the typical artifact chain is:\n\n1. `DESIGN.md`\n2. `slide_plan.json`\n3. `slide_prompts.json`\n4. `page_1.png ... page_N.png`\n\n[Back to top](#future-slide-skill)\n\n## Installation\n\n### Install with `npx skills`\n\nUse the Skills CLI from a terminal with Node.js 18+:\n\n```bash\nnpx skills add jyoung105\u002Ffuture-slide-skill\n```\n\nYou can also use the repository URL:\n\n```bash\nnpx skills add https:\u002F\u002Fgithub.com\u002Fjyoung105\u002Ffuture-slide-skill.git\n```\n\nRestart Codex after installation so the new skills are discovered.\n\n### Manual install into `.codex`\n\nDownload or clone this repository, then copy the skill folders into your\nCodex skills directory:\n\n```bash\nmkdir -p ~\u002F.codex\u002Fskills\ncp -R skills\u002Fgpt-image-slide ~\u002F.codex\u002Fskills\u002F\ncp -R skills\u002Fslide-design ~\u002F.codex\u002Fskills\u002F\ncp -R skills\u002Fgpt-image-slide-plan ~\u002F.codex\u002Fskills\u002F\ncp -R skills\u002Fgpt-image-slide-prompt ~\u002F.codex\u002Fskills\u002F\ncp -R skills\u002Fgpt-image-slide-render ~\u002F.codex\u002Fskills\u002F\ncp -R skills\u002Ftightened-slide ~\u002F.codex\u002Fskills\u002F\n```\n\nFor project-local installation, copy the same folders into:\n\n```text\n.codex\u002Fskills\u002F\n```\n\nCodex discovers skills from folders that contain `SKILL.md`, so each copied\nfolder must keep its `SKILL.md` at the folder root.\n\n[Back to top](#future-slide-skill)\n\n## License\n\nFuture Slide Skill is released under the [Apache License 2.0](.\u002FLICENSE).\n\n[Back to top](#future-slide-skill)\n","Future Slide Skill 是一个用于规范幻灯片生成的工作流工具。它通过四个阶段将参考幻灯片图像、用户提供的文件和用户请求转换成一致且有说服力的幻灯片：首先从参考图像中提取设计信息，然后构建一个具有说服力的幻灯片计划（JSON格式），接着按页编写详细的幻灯片提示（也是JSON格式），最后根据这些提示顺序生成幻灯片图像。此项目强调严格的执行规则与结构化流程，以确保GPT类模型不会跳过步骤或生成过于泛化的输出。适用于需要高质量、一致性高的演示文稿制作场景，如商业报告、学术讲座等。",2,"2026-06-01 02:48:39","CREATED_QUERY"]