原稿の主張と図の役割を頁ごとに整理し、選んだ書式を全頁へ引き継ぐ画像スライドと話者ノートを作る。
react-slide-deck-ja
原典React/ViteとFramer Motionで、日本語の図解・操作を含むWebスライドを制作する。
含まれるファイル(200)
- SKILL.md3.2 KB
- references/CURRENT-EXAMPLE.md2.4 KB
- references/example-source/build_reactdeck_repository_example.py26.3 KB
- references/recipe.json15.7 KB
- references/WORKFLOW.md2.4 KB
- SOURCE.json37.8 KB
- upstream/ACQUISITION.json538 B
- upstream/examples/en-claude-code-skills/eslint.config.js616 B
- upstream/examples/en-claude-code-skills/index.html373 B
- upstream/examples/en-claude-code-skills/package-lock.json137.3 KB
- upstream/examples/en-claude-code-skills/package.json877 B
- upstream/examples/en-claude-code-skills/README.md2.4 KB
- upstream/examples/en-claude-code-skills/src/App.tsx3.8 KB
- upstream/examples/en-claude-code-skills/src/assets/react.svg4.0 KB
- upstream/examples/en-claude-code-skills/src/assets/vite.svg8.5 KB
- upstream/examples/en-claude-code-skills/src/components/SlideLayout.tsx640 B
- upstream/examples/en-claude-code-skills/src/index.css1.7 KB
- upstream/examples/en-claude-code-skills/src/lib/animations.ts1.6 KB
- upstream/examples/en-claude-code-skills/src/lib/theme.ts567 B
- upstream/examples/en-claude-code-skills/src/lib/useSlideScale.ts666 B
- upstream/examples/en-claude-code-skills/src/main.tsx230 B
- upstream/examples/en-claude-code-skills/src/slides/01-title.tsx2.4 KB
- upstream/examples/en-claude-code-skills/src/slides/02-problem.tsx2.2 KB
- upstream/examples/en-claude-code-skills/src/slides/03-what-if.tsx2.2 KB
- upstream/examples/en-claude-code-skills/src/slides/04-what-is-skill.tsx3.1 KB
- upstream/examples/en-claude-code-skills/src/slides/05-how-skills-work.tsx3.1 KB
- upstream/examples/en-claude-code-skills/src/slides/06-anatomy.tsx3.8 KB
- upstream/examples/en-claude-code-skills/src/slides/07-trigger-system.tsx3.7 KB
- upstream/examples/en-claude-code-skills/src/slides/08-builtin-vs-custom.tsx4.1 KB
- upstream/examples/en-claude-code-skills/src/slides/09-creating-first.tsx2.9 KB
- upstream/examples/en-claude-code-skills/src/slides/10-example-slides.tsx3.6 KB
- upstream/examples/en-claude-code-skills/src/slides/11-example-screenshots.tsx3.5 KB
- upstream/examples/en-claude-code-skills/src/slides/12-sharing.tsx3.0 KB
- upstream/examples/en-claude-code-skills/src/slides/13-best-practices.tsx2.7 KB
- upstream/examples/en-claude-code-skills/src/slides/14-takeaway.tsx2.8 KB
- upstream/examples/en-claude-code-skills/src/slides/15-getting-started.tsx3.5 KB
- upstream/examples/en-claude-code-skills/src/slides/index.ts788 B
- upstream/examples/en-claude-code-skills/tsconfig.app.json732 B
- upstream/examples/en-claude-code-skills/tsconfig.json119 B
- upstream/examples/en-claude-code-skills/tsconfig.node.json653 B
- upstream/examples/en-claude-code-skills/vite.config.ts192 B
- upstream/examples/en-context-engineering/eslint.config.js616 B
- upstream/examples/en-context-engineering/index.html374 B
- upstream/examples/en-context-engineering/package-lock.json137.6 KB
- upstream/examples/en-context-engineering/package.json905 B
- upstream/examples/en-context-engineering/README.md2.4 KB
- upstream/examples/en-context-engineering/src/App.css2.8 KB
- upstream/examples/en-context-engineering/src/App.tsx1.9 KB
- upstream/examples/en-context-engineering/src/assets/react.svg4.0 KB
- upstream/examples/en-context-engineering/src/assets/vite.svg8.5 KB
- upstream/examples/en-context-engineering/src/components/SlideLayout.tsx1.1 KB
- upstream/examples/en-context-engineering/src/index.css649 B
- upstream/examples/en-context-engineering/src/lib/animations.ts1015 B
- upstream/examples/en-context-engineering/src/lib/theme.ts359 B
- upstream/examples/en-context-engineering/src/lib/useSlideScale.ts612 B
- upstream/examples/en-context-engineering/src/main.tsx230 B
- upstream/examples/en-context-engineering/src/slides/01-title.tsx2.1 KB
- upstream/examples/en-context-engineering/src/slides/02-problem.tsx2.7 KB
- upstream/examples/en-context-engineering/src/slides/03-discussion.tsx2.8 KB
- upstream/examples/en-context-engineering/src/slides/04-concept.tsx2.7 KB
- upstream/examples/en-context-engineering/src/slides/05-context-window.tsx3.8 KB
- upstream/examples/en-context-engineering/src/slides/06-seven-components.tsx2.9 KB
- upstream/examples/en-context-engineering/src/slides/07-system-vs-user.tsx4.0 KB
- upstream/examples/en-context-engineering/src/slides/08-few-shot.tsx4.1 KB
- upstream/examples/en-context-engineering/src/slides/09-rag.tsx4.3 KB
- upstream/examples/en-context-engineering/src/slides/10-tool-use.tsx4.1 KB
- upstream/examples/en-context-engineering/src/slides/11-quality-equation.tsx3.3 KB
- upstream/examples/en-context-engineering/src/slides/12-bad-vs-good.tsx4.4 KB
- upstream/examples/en-context-engineering/src/slides/13-coding-assistant.tsx3.4 KB
- upstream/examples/en-context-engineering/src/slides/14-takeaway.tsx2.5 KB
- upstream/examples/en-context-engineering/src/slides/15-resources.tsx5.1 KB
- upstream/examples/en-context-engineering/src/slides/index.ts780 B
- upstream/examples/en-context-engineering/tsconfig.app.json732 B
- upstream/examples/en-context-engineering/tsconfig.json119 B
- upstream/examples/en-context-engineering/tsconfig.node.json653 B
- upstream/examples/en-context-engineering/vite.config.ts192 B
- upstream/examples/en-how-llm-works/eslint.config.js616 B
- upstream/examples/en-how-llm-works/index.html368 B
- upstream/examples/en-how-llm-works/package-lock.json137.6 KB
- upstream/examples/en-how-llm-works/package.json899 B
- upstream/examples/en-how-llm-works/README.md2.4 KB
- upstream/examples/en-how-llm-works/src/App.tsx2.4 KB
- upstream/examples/en-how-llm-works/src/assets/react.svg4.0 KB
- upstream/examples/en-how-llm-works/src/assets/vite.svg8.5 KB
- upstream/examples/en-how-llm-works/src/components/SlideLayout.tsx704 B
- upstream/examples/en-how-llm-works/src/index.css1.6 KB
- upstream/examples/en-how-llm-works/src/lib/animations.ts830 B
- upstream/examples/en-how-llm-works/src/lib/theme.ts309 B
- upstream/examples/en-how-llm-works/src/lib/useSlideScale.ts559 B
- upstream/examples/en-how-llm-works/src/main.tsx230 B
- upstream/examples/en-how-llm-works/src/slides/01-title.tsx1.8 KB
- upstream/examples/en-how-llm-works/src/slides/02-problem.tsx2.1 KB
- upstream/examples/en-how-llm-works/src/slides/03-discussion.tsx2.6 KB
- upstream/examples/en-how-llm-works/src/slides/04-next-token.tsx2.8 KB
- upstream/examples/en-how-llm-works/src/slides/05-tokenization.tsx3.2 KB
- upstream/examples/en-how-llm-works/src/slides/06-transformer.tsx3.0 KB
- upstream/examples/en-how-llm-works/src/slides/07-attention.tsx3.5 KB
- upstream/examples/en-how-llm-works/src/slides/08-training.tsx2.9 KB
- upstream/examples/en-how-llm-works/src/slides/09-scale.tsx3.6 KB
- upstream/examples/en-how-llm-works/src/slides/10-finetuning.tsx3.0 KB
- upstream/examples/en-how-llm-works/src/slides/11-inference.tsx3.2 KB
- upstream/examples/en-how-llm-works/src/slides/12-limitations.tsx2.5 KB
- upstream/examples/en-how-llm-works/src/slides/13-example.tsx2.8 KB
- upstream/examples/en-how-llm-works/src/slides/14-takeaway.tsx1.9 KB
- upstream/examples/en-how-llm-works/src/slides/15-resources.tsx2.8 KB
- upstream/examples/en-how-llm-works/src/slides/index.ts743 B
- upstream/examples/en-how-llm-works/tsconfig.app.json732 B
- upstream/examples/en-how-llm-works/tsconfig.json119 B
- upstream/examples/en-how-llm-works/tsconfig.node.json653 B
- upstream/examples/en-how-llm-works/vite.config.ts192 B
- upstream/examples/vi-claude-code-skills/eslint.config.js616 B
- upstream/examples/vi-claude-code-skills/index.html373 B
- upstream/examples/vi-claude-code-skills/package-lock.json137.3 KB
- upstream/examples/vi-claude-code-skills/package.json877 B
- upstream/examples/vi-claude-code-skills/README.md2.4 KB
- upstream/examples/vi-claude-code-skills/src/App.tsx1.9 KB
- upstream/examples/vi-claude-code-skills/src/assets/react.svg4.0 KB
- upstream/examples/vi-claude-code-skills/src/assets/vite.svg8.5 KB
- upstream/examples/vi-claude-code-skills/src/components/SlideLayout.tsx2.3 KB
- upstream/examples/vi-claude-code-skills/src/index.css512 B
- upstream/examples/vi-claude-code-skills/src/lib/animations.ts1.1 KB
- upstream/examples/vi-claude-code-skills/src/lib/theme.ts277 B
- upstream/examples/vi-claude-code-skills/src/lib/useSlideScale.ts676 B
- upstream/examples/vi-claude-code-skills/src/main.tsx230 B
- upstream/examples/vi-claude-code-skills/src/slides/index.ts720 B
- upstream/examples/vi-claude-code-skills/src/slides/Slide01.tsx1.6 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide02.tsx2.0 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide03.tsx2.0 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide04.tsx2.0 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide05.tsx2.6 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide06.tsx2.6 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide07.tsx2.7 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide08.tsx2.7 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide09.tsx2.9 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide10.tsx2.3 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide11.tsx2.4 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide12.tsx2.7 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide13.tsx2.2 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide14.tsx2.1 KB
- upstream/examples/vi-claude-code-skills/src/slides/Slide15.tsx2.8 KB
- upstream/examples/vi-claude-code-skills/tsconfig.app.json732 B
- upstream/examples/vi-claude-code-skills/tsconfig.json119 B
- upstream/examples/vi-claude-code-skills/tsconfig.node.json653 B
- upstream/examples/vi-claude-code-skills/vite.config.ts220 B
- upstream/examples/vi-context-engineering/eslint.config.js616 B
- upstream/examples/vi-context-engineering/index.html374 B
- upstream/examples/vi-context-engineering/package-lock.json137.3 KB
- upstream/examples/vi-context-engineering/package.json878 B
- upstream/examples/vi-context-engineering/README.md2.4 KB
- upstream/examples/vi-context-engineering/src/App.tsx1.5 KB
- upstream/examples/vi-context-engineering/src/assets/react.svg4.0 KB
- upstream/examples/vi-context-engineering/src/assets/vite.svg8.5 KB
- upstream/examples/vi-context-engineering/src/components/SlideLayout.tsx3.0 KB
- upstream/examples/vi-context-engineering/src/index.css994 B
- upstream/examples/vi-context-engineering/src/lib/animations.ts1.7 KB
- upstream/examples/vi-context-engineering/src/lib/theme.ts817 B
- upstream/examples/vi-context-engineering/src/lib/useSlideScale.ts654 B
- upstream/examples/vi-context-engineering/src/main.tsx230 B
- upstream/examples/vi-context-engineering/src/slides/01-title.tsx3.7 KB
- upstream/examples/vi-context-engineering/src/slides/02-problem.tsx3.4 KB
- upstream/examples/vi-context-engineering/src/slides/03-discussion.tsx3.7 KB
- upstream/examples/vi-context-engineering/src/slides/04-concept.tsx3.6 KB
- upstream/examples/vi-context-engineering/src/slides/05-context-window.tsx4.4 KB
- upstream/examples/vi-context-engineering/src/slides/06-components.tsx3.5 KB
- upstream/examples/vi-context-engineering/src/slides/07-system-vs-user.tsx5.0 KB
- upstream/examples/vi-context-engineering/src/slides/08-few-shot.tsx4.1 KB
- upstream/examples/vi-context-engineering/src/slides/09-rag.tsx4.7 KB
- upstream/examples/vi-context-engineering/src/slides/10-tool-use.tsx5.1 KB
- upstream/examples/vi-context-engineering/src/slides/11-formula.tsx4.6 KB
- upstream/examples/vi-context-engineering/src/slides/12-comparison.tsx6.0 KB
- upstream/examples/vi-context-engineering/src/slides/13-coding-assistant.tsx3.9 KB
- upstream/examples/vi-context-engineering/src/slides/14-takeaway.tsx3.5 KB
- upstream/examples/vi-context-engineering/src/slides/15-resources.tsx5.1 KB
- upstream/examples/vi-context-engineering/src/slides/index.ts796 B
- upstream/examples/vi-context-engineering/tsconfig.app.json732 B
- upstream/examples/vi-context-engineering/tsconfig.json119 B
- upstream/examples/vi-context-engineering/tsconfig.node.json653 B
- upstream/examples/vi-context-engineering/vite.config.ts192 B
- upstream/examples/vi-how-llm-works/eslint.config.js616 B
- upstream/examples/vi-how-llm-works/index.html386 B
- upstream/examples/vi-how-llm-works/package-lock.json137.3 KB
- upstream/examples/vi-how-llm-works/package.json872 B
- upstream/examples/vi-how-llm-works/README.md2.4 KB
- upstream/examples/vi-how-llm-works/src/App.tsx3.2 KB
- upstream/examples/vi-how-llm-works/src/assets/react.svg4.0 KB
- upstream/examples/vi-how-llm-works/src/assets/vite.svg8.5 KB
- upstream/examples/vi-how-llm-works/src/components/SlideLayout.tsx2.7 KB
- upstream/examples/vi-how-llm-works/src/index.css609 B
- upstream/examples/vi-how-llm-works/src/lib/animations.ts1.0 KB
- upstream/examples/vi-how-llm-works/src/lib/theme.ts686 B
- upstream/examples/vi-how-llm-works/src/lib/useSlideScale.ts559 B
- upstream/examples/vi-how-llm-works/src/main.tsx230 B
- upstream/examples/vi-how-llm-works/src/slides/01-title.tsx2.6 KB
- upstream/examples/vi-how-llm-works/src/slides/02-problem.tsx3.1 KB
- upstream/examples/vi-how-llm-works/src/slides/03-autocomplete.tsx4.0 KB
- upstream/examples/vi-how-llm-works/src/slides/04-core-idea.tsx3.6 KB
- upstream/examples/vi-how-llm-works/src/slides/05-tokenization.tsx4.3 KB
- upstream/examples/vi-how-llm-works/src/slides/06-transformer.tsx4.4 KB
- upstream/examples/vi-how-llm-works/src/slides/07-attention.tsx4.3 KB
- upstream/examples/vi-how-llm-works/src/slides/08-training.tsx4.8 KB
SKILL.md(原文)
インストールする前に、エージェントに与えられる指示の中身を確認できます。
日本語で動くWebスライドを作る
原典は code-on-sunday/slide-deck-generator。upstream/skills/slide-deck/SKILL.md と slide-guidelines.md、references/WORKFLOW.mdを読む。原典en-context-engineeringのApp、SlideLayout、useSlideScale、animation variantsを使い、別の共通rendererへ置き換えない。
日本語で渡す入力
読み手、説明したいこと、実際の資料・数値、話す時間、雰囲気をまとめる。見出しは短く、問題→問い→概念→例→持ち帰りをひとつの流れにする。実例の4週間・10問は架空の企画目標で、実績として流用しない。
制作
- 原典presetを一つ選び、色と動きの理由を原稿へ記録する。日本語は公式配布のNoto Sans JP等を使い、OFLと参照元を保持する。
- Reactのページと図解を組む。単純な図はSVGとnative要素、週別タブ等の独自拡張は独立stateで作り、操作中にページが飛ばないようにする。新しい本文の字形をfont subsetへ含める。
- 元のVite8/Tailwind4.2.1にはpeer衝突がある。この固定版の再現にはTailwind4.2.2と記録したlockを使う。npmの検査を--forceで無効化しない。
- npm ci、TypeScript、Vite buildを実行。動くページ状態・クリック・キー・reduced-motionを確認し、全ページをブラウザーで見る。
- index.htmlとassetsとfontsをひと組でHTTP配信する。Windowsの再現キットは短い展開先を使う。
確認と条件
原典sourceと日本語diff、入力、実行ログ、全頁の描画を保存する。外側プレイヤーと接続する場合はparentのsourceとoriginを両方確認する。PPTXは生成しない。内蔵・外部AI APIを必須にする工程ではない。制作QA、人による正式採用、外部公開を分ける。原典MIT、依存のLICENSE、書体OFLを保持する。
当作例では原典のBold Signal、問題→問い→概念→例→持ち帰り、画面内への縮尺、文字の段階表示を使う。週別タブは作例固有の拡張で、原典の内蔵部品ではない。全5頁とW1〜W4の切替を再確認した記録はsource/repair-browser-review.json。
現在の作例の実施範囲(Round4)
原典の研修の流れとBold Signalを使用。表紙は色付きカードを中心にし、本文は図の段階表示、作例の週別タブで操作して読める。
- 原典のInteractive slideを参考にした週別タブは局所拡張。Recharts、他preset、外部API、量的効果測定は未実施。
- 4週間・10問は架空の目標。FAQ改善や問い合わせ削減の実績はない。
- 元Vite8/Tailwind4.2.1のpeer不一致はTailwind4.2.2の固定lockへ局所修正。60fpsの定量計測・全端末の検査は未実施。
全5頁の実描画と個別の動作証拠は制作側の確認。独立Kimi K3/Opus5.5の新しい版の評価は別に行う。過去の採点を新しい画像へ引き継がない。
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
Convert literature reviews, paper folders, thesis drafts, journal-style reports, or research outlines into rigorous academic slide decks and review artifacts. Use when Codex must create, rebuild, or polish PPTX presentations from scholarly sources while preserving academic logic, citation-aware image/formula handling, editable layouts, figure explanations, template fidelity, and export-based visual QA.
日本語の概要は準備中です。原文の説明を表示しています。
既存PPTXの書式・配置を抽出し、planとnative編集操作からPowerPointを生成・検査する。
読者と目的から構成・版式を決め、確認を挟みながら、編集できる図形と文字のPPTXにする。
aham-ppt
無料全流程AI制作PPT演示文稿技能,克制专业、风格可选 A/B/C 三档(Aham UI v6.1 · Office 轨 · PPT)。 当用户说"帮我做PPT""做演示文稿""做一个汇报""根据这份资料做PPT" "做客户方案PPT""制作幻灯片"时立即触发。即使只有一句话需求也触发。 八阶段模块化流程:规范加载→材料解析→论点提炼→叙事骨架→大纲版式→样稿确认→逐页设计→质检交付。 内置能力自适应教练机制,无论用户专业水平高低,均引导至及格以上输出。 注意:本技能用于 PowerPoint / pptx 输出;SVG/HTML 版本见 ppt-svg 技能。
日本語の概要は準備中です。原文の説明を表示しています。
原典のReact scene kitを実scaffoldし、安定layoutIdの共通canvasでentityが移動・morphする日本語ブラウザ資料を作る。