Initial commit

2025-11-30 08:56:44 +08:00
commit 5e6eb99dc0
25 changed files with 4597 additions and 0 deletions
--- a/.claude-plugin/plugin.json
+++ b/.claude-plugin/plugin.json
@@ -0,0 +1,11 @@
+{
+  "name": "marp-slideplugin",
+  "description": "Marpスライドを7つの美しいテーマで作成。スライドやプレゼン資料の作成依頼時に使用。「良い感じにして」などの曖昧な指示にも対応し、自動的に高品質なデザインを適用。",
+  "version": "1.0.0",
+  "author": {
+    "name": "shi."
+  },
+  "skills": [
+    "./skills"
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,3 @@
+# marp-slideplugin
+
+Marpスライドを7つの美しいテーマで作成。スライドやプレゼン資料の作成依頼時に使用。「良い感じにして」などの曖昧な指示にも対応し、自動的に高品質なデザインを適用。
--- a/plugin.lock.json
+++ b/plugin.lock.json
@@ -0,0 +1,129 @@
+{
+  "$schema": "internal://schemas/plugin.lock.v1.json",
+  "pluginId": "gh:shin902/shi-marketplace:marp-slide",
+  "normalized": {
+    "repo": null,
+    "ref": "refs/tags/v20251128.0",
+    "commit": "dd343ed18df807f90e8a05b45958aaf313af5ed3",
+    "treeHash": "0c7a9e858bb94697e94c6e04ccd72e45318e4b2631b42b15981bf3268cedbe16",
+    "generatedAt": "2025-11-28T10:28:19.152661Z",
+    "toolVersion": "publish_plugins.py@0.2.0"
+  },
+  "origin": {
+    "remote": "git@github.com:zhongweili/42plugin-data.git",
+    "branch": "master",
+    "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
+    "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
+  },
+  "manifest": {
+    "name": "marp-slideplugin",
+    "description": "Marpスライドを7つの美しいテーマで作成。スライドやプレゼン資料の作成依頼時に使用。「良い感じにして」などの曖昧な指示にも対応し、自動的に高品質なデザインを適用。",
+    "version": "1.0.0"
+  },
+  "content": {
+    "files": [
+      {
+        "path": "README.md",
+        "sha256": "d00424752c595c311a3a5fbaf464e5da0e7059bc9c42ce0d3053e136a409d34e"
+      },
+      {
+        "path": ".claude-plugin/plugin.json",
+        "sha256": "4e7c536f9c56b5d10a4bb0a34ef71e0a77de81e6f1898e6460874bcc1b2b007d"
+      },
+      {
+        "path": "skills/marp-slide/SKILL.md",
+        "sha256": "4244be1fd746625cca59d9d04736357c587b270d8840f750b6ac9894886cf2aa"
+      },
+      {
+        "path": "skills/marp-slide/references/marp-syntax.md",
+        "sha256": "d07c88e509c34dcf09f1e38308856efa6df1d4b101b819075a8bdac12a3f56dd"
+      },
+      {
+        "path": "skills/marp-slide/references/best-practices.md",
+        "sha256": "4aa2adca8db83fdc599b34d1a92ea03bd0b208a90462ff4007c85ed0d9e260cd"
+      },
+      {
+        "path": "skills/marp-slide/references/image-patterns.md",
+        "sha256": "1bd0d7493768e2fec13a4940cc945b03a511fd13ab13630c8f68b9e8fb776741"
+      },
+      {
+        "path": "skills/marp-slide/references/official-themes.md",
+        "sha256": "dd493209c59d788839c821f1e3bc8a6f03034588a2580593d064e4fd586078e7"
+      },
+      {
+        "path": "skills/marp-slide/references/advanced-features.md",
+        "sha256": "d5a2a89fa3d7a5a404da49dc0d278983bf23903a5616c98a2dc5009eb0111a5b"
+      },
+      {
+        "path": "skills/marp-slide/references/theme-selection.md",
+        "sha256": "3d76bd08b992468670d296e3501a7018fd154ca6659aed7a9f5db5d2f97ba188"
+      },
+      {
+        "path": "skills/marp-slide/references/theme-css-guide.md",
+        "sha256": "826da079bb0476b78fc7449d3967306c66bf35f320efbb2d7e7524800978926b"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-colorful.css",
+        "sha256": "ac11be3e812c2e937d6de8df8e8529c67b9ea87c4e708926af7d2a586b43f9cb"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-business.css",
+        "sha256": "0266dc73c523cb50b5a4007f9bf9873180d771c18d44adbade7894f2926ed162"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-default.css",
+        "sha256": "591cc218c971aca36cffd13274acd1262c25b40a919057db481657afd90b2de3"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-minimal.css",
+        "sha256": "327d0035d7472a5506619e5fd83bbbfbec70350e5cbd2456fb09ba04fe75f473"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-dark.css",
+        "sha256": "3619caf6e4bb49bd57cdd2a05d0de1938d2c08d11efda0f758d1ad98dec61fea"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-dark.md",
+        "sha256": "a31a393aeb025a7a55fc3c1bd6d8a094321c39d5337d1b956c652635b74650a3"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-basic.md",
+        "sha256": "0c656adc843f8df8cc395fb605670859a38d3d3abf209aa577f25ea349bd5479"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-business.md",
+        "sha256": "2e08480b416a28a3de55c5b86cb194d6d8b1d097158e76728e2092b5e736809b"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-minimal.md",
+        "sha256": "fd398a9cd3afbe30d1c061fc5e0ca1a22272f54eba2fdbfa27872e542e1385d6"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-tech.css",
+        "sha256": "4a83b08fa36f9b85fc4a6231be4660ca6d29d648dc550d4296e132a3082eaad7"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-colorful.md",
+        "sha256": "efaf844952d271184cfb0c895fc2e638b48c94ca19b11accf8cce6457563e53f"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-tech.md",
+        "sha256": "2b9f51b06e39f63f0aa64a4eb41167e7adf31bad1a249f85c311ea271fa340ab"
+      },
+      {
+        "path": "skills/marp-slide/assets/template-gradient.md",
+        "sha256": "dedb860f2e30ca62e51a1d2b49c0b51159dd10695b7c58deb3513210349a4dce"
+      },
+      {
+        "path": "skills/marp-slide/assets/theme-gradient.css",
+        "sha256": "729fb211d1dd84b0bee45477d933ebafa2da1ca16e3c438596dbc235b34123e2"
+      }
+    ],
+    "dirSha256": "0c7a9e858bb94697e94c6e04ccd72e45318e4b2631b42b15981bf3268cedbe16"
+  },
+  "security": {
+    "scannedAt": null,
+    "scannerVersion": null,
+    "flags": []
+  }
+}
--- a/skills/marp-slide/SKILL.md
+++ b/skills/marp-slide/SKILL.md
@@ -0,0 +1,237 @@
+---
+name: marp-slide
+description: Create professional Marp presentation slides with 7 beautiful themes (default, minimal, colorful, dark, gradient, tech, business). Use when users request slide creation, presentations, or Marp documents. Supports custom themes, image layouts, and "make it look good" requests with automatic quality improvements.
+---
+
+# Marp Slide Creator
+
+Create professional, visually appealing Marp presentation slides with 7 pre-designed themes and built-in best practices.
+
+## When to Use This Skill
+
+Use this skill when the user:
+- Requests to create presentation slides or Marp documents
+- Asks to "make slides look good" or "improve slide design"
+- Provides vague instructions like "良い感じにして" (make it nice) or "かっこよく" (make it cool)
+- Wants to create lecture or seminar materials
+- Needs bullet-point focused slides with occasional images
+
+## Quick Start
+
+### Step 1: Select Theme
+
+First, determine the appropriate theme based on the user's request and content.
+
+**Quick theme selection:**
+- **Technical/Developer content** → tech theme
+- **Business/Corporate** → business theme
+- **Creative/Event** → colorful or gradient theme
+- **Academic/Simple** → minimal theme
+- **General/Unsure** → default theme
+- **Dark background preferred** → dark or tech theme
+
+For detailed theme selection guidance, read `references/theme-selection.md`.
+
+### Step 2: Create Slides
+
+1. **Read relevant references first**:
+   - Always start by reading `references/marp-syntax.md` for basic syntax
+   - For images: `references/image-patterns.md` (official Marpit image syntax)
+   - For advanced features (math, emoji): `references/advanced-features.md`
+   - For custom themes: `references/theme-css-guide.md`
+
+2. Copy content from the appropriate template file:
+   - `assets/template-basic.md` - Default theme (most common)
+   - `assets/template-minimal.md` - Minimal theme
+   - `assets/template-colorful.md` - Colorful theme
+   - `assets/template-dark.md` - Dark mode theme
+   - `assets/template-gradient.md` - Gradient theme
+   - `assets/template-tech.md` - Tech/code theme
+   - `assets/template-business.md` - Business theme
+
+3. Read `references/best-practices.md` for quality guidelines
+
+4. Structure content following best practices:
+   - Title slide with `<!-- _class: lead -->`
+   - Concise h2 titles (5-7 characters in Japanese)
+   - 3-5 bullet points per slide
+   - Adequate whitespace
+
+5. Add images if needed using patterns from `references/image-patterns.md`
+
+6. Save to `/mnt/user-data/outputs/` with `.md` extension
+
+## Available Themes
+
+### 1. Default Theme
+**Colors**: Beige background, navy text, blue headings
+**Style**: Clean, sophisticated with decorative lines
+**Use for**: General seminars, lectures, presentations
+**Template**: `template-basic.md`
+
+### 2. Minimal Theme
+**Colors**: White background, gray text, black headings
+**Style**: Minimal decoration, wide margins, light fonts
+**Use for**: Content-focused presentations, academic talks
+**Template**: `template-minimal.md`
+
+### 3. Colorful & Pop Theme
+**Colors**: Pink gradient background, multi-color accents
+**Style**: Vibrant gradients, bold fonts, rainbow accents
+**Use for**: Youth-oriented events, creative projects
+**Template**: `template-colorful.md`
+
+### 4. Dark Mode Theme
+**Colors**: Black background, cyan/purple accents
+**Style**: Dark theme with glow effects, eye-friendly
+**Use for**: Tech presentations, evening talks, modern look
+**Template**: `template-dark.md`
+
+### 5. Gradient Background Theme
+**Colors**: Purple/pink/blue/green gradients (varies per slide)
+**Style**: Different gradient per slide, white text, shadows
+**Use for**: Visual-focused, creative presentations
+**Template**: `template-gradient.md`
+
+### 6. Tech/Code Theme
+**Colors**: GitHub-style dark background, blue/green accents
+**Style**: Code fonts, Markdown-style headers with # symbols
+**Use for**: Programming tutorials, tech meetups, developer content
+**Template**: `template-tech.md`
+
+### 7. Business Theme
+**Colors**: White background, navy headings, blue accents
+**Style**: Corporate presentation style, top border, table support
+**Use for**: Business presentations, proposals, reports
+**Template**: `template-business.md`
+
+## Creating Slides Process
+
+### Basic Workflow
+
+1. **Understand requirements**
+   - Identify content: title, topics, key points
+   - Determine target audience
+   - Assess formality level
+
+2. **Select theme**
+   - Use quick selection rules above
+   - If uncertain, consult `references/theme-selection.md`
+   - Default to default theme if still unsure
+
+3. **Apply template**
+   - Load appropriate template from `assets/`
+   - CSS is already embedded - no external files needed
+   - Maintain template structure
+
+4. **Structure content**
+   - Title slide: `<!-- _class: lead -->` + h1
+   - Content slides: h2 title + bullet points
+   - Keep titles to 5-7 characters (Japanese)
+   - Use 3-5 bullet points per slide
+
+5. **Refine quality**
+   - Read `references/best-practices.md`
+   - Ensure adequate whitespace
+   - Maintain consistency
+   - Keep text concise (15-25 chars per line)
+
+6. **Add images**
+   - If needed, consult `references/image-patterns.md`
+   - Common: `![bg right:40%](image.png)` for side images
+   - Use proper Marp image syntax
+
+7. **Output file**
+   - Save to `/mnt/user-data/outputs/`
+   - Use descriptive filename like `presentation.md`
+
+## Handling "Make It Look Good" Requests
+
+When users give vague instructions like "良い感じにして", "かっこよく", or "make it cool":
+
+1. **Infer theme from content**:
+   - Business content → business theme
+   - Technical content → tech or dark theme
+   - Creative content → gradient or colorful theme
+   - General → default theme
+
+2. **Apply best practices automatically**:
+   - Shorten titles to 5-7 characters
+   - Limit bullet points to 3-5 items
+   - Add adequate whitespace
+   - Use consistent structure
+
+3. **Enhance visual hierarchy**:
+   - Use h3 for sub-sections when appropriate
+   - Break up dense text into multiple slides
+   - Ensure logical flow (intro → body → conclusion)
+
+4. **Maintain professional tone**:
+   - Match formality to content
+   - Use parallel structure in lists
+   - Keep technical terms consistent
+
+## Image Integration
+
+For slides with images, consult `references/image-patterns.md` for detailed syntax.
+
+Common patterns:
+- **Side image**: `![bg right:40%](image.png)` - Image on right, text on left
+- **Centered**: `![w:600px](image.png)` - Centered with specific width
+- **Full background**: `![bg](image.png)` - Full-screen background
+- **Multiple images**: Multiple `![bg]` declarations
+
+Example lecture pattern:
+```markdown
+## Slide Title
+
+![bg right:40%](diagram.png)
+
+- Explanation point 1
+- Explanation point 2
+- Explanation point 3
+```
+
+## File Output
+
+Always save the final Marp file to `/mnt/user-data/outputs/` with `.md` extension:
+- `presentation.md`
+- `seminar-slides.md`
+- `lecture-materials.md`
+
+## Quality Checklist
+
+Before delivering slides, verify:
+- [ ] Theme selected appropriately for content
+- [ ] CSS theme is embedded in the file
+- [ ] Title slide uses `<!-- _class: lead -->`
+- [ ] All h2 titles are concise (5-7 chars)
+- [ ] Bullet points are 3-5 items per slide
+- [ ] Images use proper Marp syntax
+- [ ] File saved to outputs directory
+- [ ] Content follows best practices
+
+## References
+
+### Core Documentation
+- **Marp syntax**: `references/marp-syntax.md` - Basic Marp/Marpit syntax (directives, frontmatter, pagination, etc.)
+- **Image patterns**: `references/image-patterns.md` - Official image syntax (bg, filters, split backgrounds)
+- **Theme CSS guide**: `references/theme-css-guide.md` - How to create custom themes based on Marpit specification
+- **Advanced features**: `references/advanced-features.md` - Math, emoji, fragmented lists, Marp CLI, VS Code
+- **Official themes**: `references/official-themes.md` - default, gaia, uncover themes documentation
+
+### Quality & Selection Guides
+- **Theme selection**: `references/theme-selection.md` - How to choose the right theme for content
+- **Best practices**: `references/best-practices.md` - Quality guidelines for "cool" slides
+
+### Templates & Assets
+- **Templates**: `assets/template-*.md` - Starting points with embedded CSS for each theme (7 themes)
+- **Standalone CSS**: `assets/theme-*.css` - CSS files for reference (already embedded in templates)
+
+### Official External Links
+- **Marp Official Site**: https://marp.app/
+- **Marpit Directives**: https://marpit.marp.app/directives
+- **Marpit Image Syntax**: https://marpit.marp.app/image-syntax
+- **Marpit Theme CSS**: https://marpit.marp.app/theme-css
+- **Marp Core GitHub**: https://github.com/marp-team/marp-core
+- **Marp CLI GitHub**: https://github.com/marp-team/marp-cli
--- a/skills/marp-slide/assets/template-basic.md
+++ b/skills/marp-slide/assets/template-basic.md
@@ -0,0 +1,146 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+:root {
+  --color-background: #f8f8f4;
+  --color-foreground: #3a3b5a;
+  --color-heading: #4f86c6;
+  --color-hr: #000000;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 8px solid var(--color-hr);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 60px;
+  height: 2px;
+  background-color: var(--color-hr);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-foreground);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 8px;
+  background-color: var(--color-heading);
+}
+
+section.lead {
+  border-bottom: 8px solid var(--color-hr);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーションタイトル
+
+あなたの名前
+2024年XX月XX日
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+- トピック4
+
+---
+
+## スライドタイトル
+
+- ポイント1
+- ポイント2
+- ポイント3
+
+---
+
+## まとめ
+
+- 要点1
+- 要点2
+- ご清聴ありがとうございました
--- a/skills/marp-slide/assets/template-business.md
+++ b/skills/marp-slide/assets/template-business.md
@@ -0,0 +1,180 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
+
+:root {
+  --color-background: #ffffff;
+  --color-foreground: #1f2937;
+  --color-heading: #1e40af;
+  --color-accent: #3b82f6;
+  --color-border: #d1d5db;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-top: 8px solid var(--color-heading);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 54px;
+  line-height: 1.3;
+  text-align: left;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 38px;
+  padding-top: 0;
+  padding-bottom: 16px;
+  border-bottom: 3px solid var(--color-accent);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 26px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+}
+
+footer {
+  font-size: 16px;
+  color: #6b7280;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+footer::before {
+  content: '';
+  flex: 1;
+  height: 2px;
+  background-color: var(--color-border);
+  margin-right: 20px;
+}
+
+section.lead {
+  border-top: 8px solid var(--color-heading);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 32px;
+  color: var(--color-heading);
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  font-weight: 500;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 20px 0;
+  font-size: 18px;
+}
+
+th, td {
+  border: 1px solid var(--color-border);
+  padding: 12px;
+  text-align: left;
+}
+
+th {
+  background-color: var(--color-heading);
+  color: #ffffff;
+  font-weight: 700;
+}
+
+tr:nth-child(even) {
+  background-color: #f9fafb;
+}
+
+strong {
+  color: var(--color-heading);
+  font-weight: 700;
+}
+
+code {
+  background-color: #f3f4f6;
+  color: var(--color-heading);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.9em;
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+ビジネスライク
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライド
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/template-colorful.md
+++ b/skills/marp-slide/assets/template-colorful.md
@@ -0,0 +1,155 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
+
+:root {
+  --color-background: #fff5f7;
+  --color-foreground: #2d2d2d;
+  --color-heading: #ff6b9d;
+  --color-accent-1: #ffd93d;
+  --color-accent-2: #6bcf7f;
+  --color-accent-3: #4d96ff;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background: linear-gradient(135deg, var(--color-background) 0%, #ffe5ec 100%);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 10px solid var(--color-accent-1);
+  position: relative;
+  line-height: 1.7;
+  font-size: 24px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 900;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 64px;
+  line-height: 1.3;
+  text-align: left;
+  background: linear-gradient(135deg, var(--color-heading), var(--color-accent-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 44px;
+  padding-top: 0;
+  padding-bottom: 20px;
+  background: linear-gradient(90deg, var(--color-heading), var(--color-accent-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
+  border-radius: 2px;
+}
+
+h2 + * {
+  margin-top: 120px;
+}
+
+h3 {
+  color: var(--color-accent-3);
+  font-size: 30px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 12px;
+}
+
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 10px;
+  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
+  border-radius: 5px;
+}
+
+section.lead {
+  border-bottom: 10px solid var(--color-accent-1);
+  background: linear-gradient(135deg, #fff5f7 0%, #ffe5ec 50%, #ffd5e0 100%);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 26px;
+  color: var(--color-foreground);
+  font-weight: 700;
+}
+
+strong {
+  color: var(--color-heading);
+  font-weight: 900;
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+カラフル＆ポップ
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライド
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/template-dark.md
+++ b/skills/marp-slide/assets/template-dark.md
@@ -0,0 +1,153 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+:root {
+  --color-background: #1a1a1a;
+  --color-foreground: #e0e0e0;
+  --color-heading: #61dafb;
+  --color-accent: #bb86fc;
+  --color-hr: #61dafb;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 8px solid var(--color-hr);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+  text-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 60px;
+  height: 2px;
+  background-color: var(--color-hr);
+  box-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 8px;
+  background: linear-gradient(90deg, var(--color-heading), var(--color-accent));
+  box-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
+}
+
+section.lead {
+  border-bottom: 8px solid var(--color-hr);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+}
+
+code {
+  background-color: #2d2d2d;
+  color: #61dafb;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+ダークモード
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライド
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/template-gradient.md
+++ b/skills/marp-slide/assets/template-gradient.md
@@ -0,0 +1,159 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+:root {
+  --color-foreground: #ffffff;
+  --color-heading: #ffffff;
+  --color-accent: #ffd700;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+section:nth-child(2n) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+section:nth-child(3n) {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+section:nth-child(4n) {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+section:nth-child(5n) {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 80px;
+  height: 3px;
+  background-color: var(--color-accent);
+  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+footer {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.7);
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+section.lead {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+グラデーション背景
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライド
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/template-minimal.md
+++ b/skills/marp-slide/assets/template-minimal.md
@@ -0,0 +1,124 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
+
+:root {
+  --color-background: #ffffff;
+  --color-foreground: #2c2c2c;
+  --color-heading: #1a1a1a;
+  --color-accent: #e0e0e0;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 300;
+  box-sizing: border-box;
+  position: relative;
+  line-height: 1.8;
+  font-size: 24px;
+  padding: 60px 80px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 60px;
+  line-height: 1.3;
+  text-align: left;
+  font-weight: 300;
+  letter-spacing: 0.02em;
+}
+
+h2 {
+  font-size: 42px;
+  margin-bottom: 40px;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+h3 {
+  color: var(--color-foreground);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 14px;
+  line-height: 1.7;
+}
+
+footer {
+  font-size: 14px;
+  color: #999999;
+  position: absolute;
+  left: 80px;
+  right: 80px;
+  bottom: 40px;
+  text-align: center;
+}
+
+section.lead {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+section.lead h1 {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  font-weight: 300;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--color-accent);
+  margin: 40px 0;
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+シンプル＆ミニマル
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライドタイトル
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/template-tech.md
+++ b/skills/marp-slide/assets/template-tech.md
@@ -0,0 +1,174 @@
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Fira+Code:wght@400;500;700&display=swap');
+
+:root {
+  --color-background: #0d1117;
+  --color-foreground: #c9d1d9;
+  --color-heading: #58a6ff;
+  --color-accent: #7ee787;
+  --color-code-bg: #161b22;
+  --color-border: #30363d;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+  --font-code: 'Fira Code', 'Consolas', 'Monaco', monospace;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-left: 4px solid var(--color-accent);
+  position: relative;
+  line-height: 1.6;
+  font-size: 20px;
+  padding: 56px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-code);
+}
+
+h1 {
+  font-size: 52px;
+  line-height: 1.3;
+  text-align: left;
+}
+
+h1::before {
+  content: '# ';
+  color: var(--color-accent);
+}
+
+h2 {
+  font-size: 38px;
+  margin-bottom: 40px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--color-border);
+}
+
+h2::before {
+  content: '## ';
+  color: var(--color-accent);
+}
+
+h3 {
+  color: var(--color-foreground);
+  font-size: 26px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+h3::before {
+  content: '### ';
+  color: var(--color-accent);
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+li::marker {
+  color: var(--color-accent);
+}
+
+pre {
+  background-color: var(--color-code-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+  font-family: var(--font-code);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+code {
+  background-color: var(--color-code-bg);
+  color: var(--color-accent);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--font-code);
+  font-size: 0.9em;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  color: var(--color-foreground);
+}
+
+footer {
+  font-size: 14px;
+  color: #8b949e;
+  font-family: var(--font-code);
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  text-align: right;
+}
+
+footer::before {
+  content: '// ';
+  color: var(--color-accent);
+}
+
+section.lead {
+  border-left: 4px solid var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 22px;
+  color: var(--color-foreground);
+  font-family: var(--font-code);
+}
+
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+}
+</style>
+
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+技術系（コード向け）
+
+---
+
+## アジェンダ
+
+- トピック1
+- トピック2
+- トピック3
+
+---
+
+## スライド
+
+- ポイント1
+- ポイント2
+- ポイント3
--- a/skills/marp-slide/assets/theme-business.css
+++ b/skills/marp-slide/assets/theme-business.css
@@ -0,0 +1,209 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
+
+/* --- ビジネスライクテーマ --- */
+:root {
+  --color-background: #ffffff;
+  --color-foreground: #1f2937;
+  --color-heading: #1e40af;
+  --color-accent: #3b82f6;
+  --color-border: #d1d5db;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-top: 8px solid var(--color-heading);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 54px;
+  line-height: 1.3;
+  text-align: left;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 38px;
+  padding-top: 0;
+  padding-bottom: 16px;
+  border-bottom: 3px solid var(--color-accent);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 26px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  font-weight: 600;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+  line-height: 1.7;
+}
+
+/* フッター（ページ番号風）*/
+footer {
+  font-size: 16px;
+  color: #6b7280;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+footer::before {
+  content: '';
+  flex: 1;
+  height: 2px;
+  background-color: var(--color-border);
+  margin-right: 20px;
+}
+
+section.lead {
+  border-top: 8px solid var(--color-heading);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 32px;
+  color: var(--color-heading);
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  font-weight: 500;
+}
+
+/* テーブル */
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 20px 0;
+  font-size: 18px;
+}
+
+th, td {
+  border: 1px solid var(--color-border);
+  padding: 12px;
+  text-align: left;
+}
+
+th {
+  background-color: var(--color-heading);
+  color: #ffffff;
+  font-weight: 700;
+}
+
+tr:nth-child(even) {
+  background-color: #f9fafb;
+}
+
+/* 強調ボックス */
+.highlight-box {
+  background-color: #eff6ff;
+  border-left: 4px solid var(--color-accent);
+  padding: 20px;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+
+/* 数値の強調 */
+.number {
+  font-size: 48px;
+  font-weight: 700;
+  color: var(--color-accent);
+  line-height: 1;
+}
+
+/* ステップ番号 */
+.step {
+  display: inline-block;
+  width: 36px;
+  height: 36px;
+  background-color: var(--color-heading);
+  color: #ffffff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 36px;
+  font-weight: 700;
+  margin-right: 12px;
+}
+
+/* 引用 */
+blockquote {
+  border-left: 4px solid var(--color-accent);
+  padding-left: 20px;
+  color: #6b7280;
+  font-style: italic;
+  margin: 20px 0;
+  font-size: 20px;
+}
+
+/* リンク */
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-accent);
+}
+
+a:hover {
+  color: var(--color-heading);
+  border-bottom-color: var(--color-heading);
+}
+
+/* 強調 */
+strong {
+  color: var(--color-heading);
+  font-weight: 700;
+}
+
+/* コード */
+code {
+  background-color: #f3f4f6;
+  color: var(--color-heading);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 0.9em;
+}
--- a/skills/marp-slide/assets/theme-colorful.css
+++ b/skills/marp-slide/assets/theme-colorful.css
@@ -0,0 +1,143 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');
+
+/* --- カラフル＆ポップテーマ --- */
+:root {
+  --color-background: #fff5f7;
+  --color-foreground: #2d2d2d;
+  --color-heading: #ff6b9d;
+  --color-accent-1: #ffd93d;
+  --color-accent-2: #6bcf7f;
+  --color-accent-3: #4d96ff;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background: linear-gradient(135deg, var(--color-background) 0%, #ffe5ec 100%);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 10px solid var(--color-accent-1);
+  position: relative;
+  line-height: 1.7;
+  font-size: 24px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 900;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 64px;
+  line-height: 1.3;
+  text-align: left;
+  background: linear-gradient(135deg, var(--color-heading), var(--color-accent-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 44px;
+  padding-top: 0;
+  padding-bottom: 20px;
+  background: linear-gradient(90deg, var(--color-heading), var(--color-accent-3));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
+  border-radius: 2px;
+}
+
+h2 + * {
+  margin-top: 120px;
+}
+
+h3 {
+  color: var(--color-accent-3);
+  font-size: 30px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 12px;
+  position: relative;
+}
+
+li::marker {
+  color: var(--color-heading);
+  font-weight: 700;
+}
+
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 10px;
+  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
+  border-radius: 5px;
+}
+
+section.lead {
+  border-bottom: 10px solid var(--color-accent-1);
+  background: linear-gradient(135deg, #fff5f7 0%, #ffe5ec 50%, #ffd5e0 100%);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 26px;
+  color: var(--color-foreground);
+  font-weight: 700;
+}
+
+/* ポップな強調 */
+strong {
+  color: var(--color-heading);
+  font-weight: 900;
+}
+
+/* カラフルな区切り線 */
+hr {
+  border: none;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2), var(--color-accent-3));
+  margin: 30px 0;
+  border-radius: 2px;
+}
--- a/skills/marp-slide/assets/theme-dark.css
+++ b/skills/marp-slide/assets/theme-dark.css
@@ -0,0 +1,138 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+/* --- ダークモードテーマ --- */
+:root {
+  --color-background: #1a1a1a;
+  --color-foreground: #e0e0e0;
+  --color-heading: #61dafb;
+  --color-accent: #bb86fc;
+  --color-hr: #61dafb;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 8px solid var(--color-hr);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+  text-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 60px;
+  height: 2px;
+  background-color: var(--color-hr);
+  box-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 8px;
+  background: linear-gradient(90deg, var(--color-heading), var(--color-accent));
+  box-shadow: 0 0 20px rgba(97, 218, 251, 0.3);
+}
+
+section.lead {
+  border-bottom: 8px solid var(--color-hr);
+}
+
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+}
+
+/* コード風の強調 */
+code {
+  background-color: #2d2d2d;
+  color: #61dafb;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+/* ダークモード用のリンク */
+a {
+  color: var(--color-heading);
+  text-decoration: none;
+  border-bottom: 1px solid var(--color-heading);
+}
+
+a:hover {
+  text-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
+}
+
+/* グロー効果 */
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+}
--- a/skills/marp-slide/assets/theme-default.css
+++ b/skills/marp-slide/assets/theme-default.css
@@ -0,0 +1,127 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+/* --- 色やフォントの基本設定 --- */
+:root {
+  --color-background: #f8f8f4;
+  --color-foreground: #3a3b5a;
+  --color-heading: #4f86c6;
+  --color-hr: #000000;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+/* --- スライド全体のスタイル --- */
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-bottom: 8px solid var(--color-hr);
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+section:last-of-type {
+  border-bottom: none;
+}
+
+/* --- 見出しのスタイル --- */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+/* タイトルページ(h1)のスタイル */
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+/* 通常スライドのタイトル(##) */
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+/* h2の疑似要素(::after)を使って、短い線を実装 */
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 60px;
+  height: 2px;
+  background-color: var(--color-hr);
+}
+
+/* h2と後続コンテンツの間のスペースを確保 */
+h2 + * {
+  margin-top: 112px;
+}
+
+/* サブ見出し (例: 目的, 目標) */
+h3 {
+  color: var(--color-foreground);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+/* --- リストのスタイル --- */
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+/* フッターとして機能する、太い青いラインを実装 */
+footer {
+  font-size: 0;
+  color: transparent;
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  height: 8px;
+  background-color: var(--color-heading);
+}
+
+/* --- 特別なクラス --- */
+section.lead {
+  border-bottom: 8px solid var(--color-hr);
+}
+
+/* タイトルページではフッターラインを非表示にする */
+section.lead footer {
+  display: none;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+}
+
+/* ガイドライン用のスタイル */
+.bad-example {
+  background-color: #fbe9e7;
+  color: #c62828;
+  padding: 8px 16px;
+  border-radius: 4px;
+}
--- a/skills/marp-slide/assets/theme-gradient.css
+++ b/skills/marp-slide/assets/theme-gradient.css
@@ -0,0 +1,150 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+
+/* --- グラデーション背景テーマ --- */
+:root {
+  --color-foreground: #ffffff;
+  --color-heading: #ffffff;
+  --color-accent: #ffd700;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  position: relative;
+  line-height: 1.7;
+  font-size: 22px;
+  padding: 56px;
+}
+
+/* スライドごとに異なるグラデーション */
+section:nth-child(2n) {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+section:nth-child(3n) {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+section:nth-child(4n) {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+section:nth-child(5n) {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+h1 {
+  font-size: 56px;
+  line-height: 1.4;
+  text-align: left;
+}
+
+h2 {
+  position: absolute;
+  top: 40px;
+  left: 56px;
+  right: 56px;
+  font-size: 40px;
+  padding-top: 0;
+  padding-bottom: 16px;
+}
+
+h2::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 8px;
+  width: 80px;
+  height: 3px;
+  background-color: var(--color-accent);
+  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
+}
+
+h2 + * {
+  margin-top: 112px;
+}
+
+h3 {
+  color: var(--color-accent);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+footer {
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.7);
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+section.lead {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+  text-align: center;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+/* 半透明の背景ボックス */
+.text-box {
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  padding: 20px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 強調テキスト */
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+}
+
+/* コード */
+code {
+  background-color: rgba(0, 0, 0, 0.3);
+  color: var(--color-accent);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
--- a/skills/marp-slide/assets/theme-minimal.css
+++ b/skills/marp-slide/assets/theme-minimal.css
@@ -0,0 +1,97 @@
+/* Google Fontsから日本語フォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
+
+/* --- シンプル＆ミニマルテーマ --- */
+:root {
+  --color-background: #ffffff;
+  --color-foreground: #2c2c2c;
+  --color-heading: #1a1a1a;
+  --color-accent: #e0e0e0;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 300;
+  box-sizing: border-box;
+  position: relative;
+  line-height: 1.8;
+  font-size: 24px;
+  padding: 60px 80px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 60px;
+  line-height: 1.3;
+  text-align: left;
+  font-weight: 300;
+  letter-spacing: 0.02em;
+}
+
+h2 {
+  font-size: 42px;
+  margin-bottom: 40px;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+h3 {
+  color: var(--color-foreground);
+  font-size: 28px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+  font-weight: 400;
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 14px;
+  line-height: 1.7;
+}
+
+footer {
+  font-size: 14px;
+  color: #999999;
+  position: absolute;
+  left: 80px;
+  right: 80px;
+  bottom: 40px;
+  text-align: center;
+}
+
+section.lead {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+section.lead h1 {
+  margin-bottom: 32px;
+  text-align: center;
+}
+
+section.lead p {
+  font-size: 24px;
+  color: var(--color-foreground);
+  font-weight: 300;
+}
+
+/* ミニマルな区切り線 */
+hr {
+  border: none;
+  border-top: 1px solid var(--color-accent);
+  margin: 40px 0;
+}
--- a/skills/marp-slide/assets/theme-tech.css
+++ b/skills/marp-slide/assets/theme-tech.css
@@ -0,0 +1,203 @@
+/* Google Fontsから日本語フォントとコードフォントを読み込み */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Fira+Code:wght@400;500;700&display=swap');
+
+/* --- 技術系（コード向け）テーマ --- */
+:root {
+  --color-background: #0d1117;
+  --color-foreground: #c9d1d9;
+  --color-heading: #58a6ff;
+  --color-accent: #7ee787;
+  --color-code-bg: #161b22;
+  --color-border: #30363d;
+  --font-default: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
+  --font-code: 'Fira Code', 'Consolas', 'Monaco', monospace;
+}
+
+section {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-default);
+  font-weight: 400;
+  box-sizing: border-box;
+  border-left: 4px solid var(--color-accent);
+  position: relative;
+  line-height: 1.6;
+  font-size: 20px;
+  padding: 56px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: var(--color-heading);
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-code);
+}
+
+h1 {
+  font-size: 52px;
+  line-height: 1.3;
+  text-align: left;
+}
+
+h1::before {
+  content: '# ';
+  color: var(--color-accent);
+}
+
+h2 {
+  font-size: 38px;
+  margin-bottom: 40px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid var(--color-border);
+}
+
+h2::before {
+  content: '## ';
+  color: var(--color-accent);
+}
+
+h3 {
+  color: var(--color-foreground);
+  font-size: 26px;
+  margin-top: 32px;
+  margin-bottom: 12px;
+}
+
+h3::before {
+  content: '### ';
+  color: var(--color-accent);
+}
+
+ul, ol {
+  padding-left: 32px;
+}
+
+li {
+  margin-bottom: 10px;
+}
+
+li::marker {
+  color: var(--color-accent);
+}
+
+/* コードブロック */
+pre {
+  background-color: var(--color-code-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+  font-family: var(--font-code);
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+code {
+  background-color: var(--color-code-bg);
+  color: var(--color-accent);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: var(--font-code);
+  font-size: 0.9em;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  color: var(--color-foreground);
+}
+
+/* フッター */
+footer {
+  font-size: 14px;
+  color: #8b949e;
+  font-family: var(--font-code);
+  position: absolute;
+  left: 56px;
+  right: 56px;
+  bottom: 40px;
+  text-align: right;
+}
+
+footer::before {
+  content: '// ';
+  color: var(--color-accent);
+}
+
+section.lead {
+  border-left: 4px solid var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+section.lead h1 {
+  margin-bottom: 24px;
+}
+
+section.lead p {
+  font-size: 22px;
+  color: var(--color-foreground);
+  font-family: var(--font-code);
+}
+
+/* テーブル */
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 20px 0;
+}
+
+th, td {
+  border: 1px solid var(--color-border);
+  padding: 10px;
+  text-align: left;
+}
+
+th {
+  background-color: var(--color-code-bg);
+  color: var(--color-heading);
+  font-family: var(--font-code);
+}
+
+/* リンク */
+a {
+  color: var(--color-heading);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* 強調 */
+strong {
+  color: var(--color-accent);
+  font-weight: 700;
+}
+
+/* 引用 */
+blockquote {
+  border-left: 4px solid var(--color-accent);
+  padding-left: 20px;
+  color: #8b949e;
+  font-style: italic;
+  margin: 20px 0;
+}
+
+/* ターミナル風 */
+.terminal {
+  background-color: #000000;
+  color: #00ff00;
+  font-family: var(--font-code);
+  padding: 20px;
+  border-radius: 6px;
+  font-size: 16px;
+}
+
+.terminal::before {
+  content: '$ ';
+  color: #00ff00;
+  font-weight: 700;
+}
--- a/skills/marp-slide/references/advanced-features.md
+++ b/skills/marp-slide/references/advanced-features.md
@@ -0,0 +1,441 @@
+# Marp 高度な機能リファレンス
+
+Marp CoreとMarpitの高度な機能。
+
+## Fragmented List（段階的表示）
+
+リストアイテムを段階的に表示する機能（アニメーション効果）。
+
+公式ドキュメント: https://github.com/marp-team/marpit/tree/main/docs/fragmented-list
+
+### 基本的な使い方
+
+```markdown
+* Item 1
+* Item 2
+* Item 3
+```
+
+通常、すべてのアイテムが一度に表示されます。
+
+### アスタリスク（*）の使用
+
+```markdown
+* Item 1
+* Item 2
+* Item 3
+```
+
+Marp CLIで`--html`オプション使用時、各アイテムが順次表示されます。
+
+### 注意事項
+
+- **HTML出力時のみ有効**: PDF/PPTX/画像では効果なし
+- **プレゼンテーションモード**: ブラウザでのプレゼンテーション時に機能
+- **Marp for VS Code**: プレビューでは動作しない場合あり
+
+## 数式記法（Marp Core拡張）
+
+Pandoc形式の数式をサポート。KaTeXを使用してレンダリング。
+
+公式: https://github.com/marp-team/marp-core#math-typesetting
+
+### インライン数式
+
+```markdown
+文中に $E = mc^2$ を挿入
+```
+
+### ブロック数式
+
+```markdown
+$$
+\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
+$$
+```
+
+### 複数行の数式
+
+```markdown
+$$
+\begin{aligned}
+  f(x) &= x^2 + 2x + 1 \\
+  &= (x + 1)^2
+\end{aligned}
+$$
+```
+
+### 数式の例
+
+```markdown
+## 二次方程式の解
+
+$$
+x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+
+## オイラーの等式
+
+$$
+e^{i\pi} + 1 = 0
+$$
+```
+
+### 注意事項
+
+- **KaTeX記法**: LaTeX構文のサブセット
+- **サポート外の記法**: 一部のLaTeX機能は非対応
+- **KaTeX公式**: https://katex.org/docs/supported.html
+
+## 絵文字（Marp Core拡張）
+
+GitHub Emoji記法をサポート。
+
+公式: https://github.com/marp-team/marp-core#emoji
+
+### 使用方法
+
+```markdown
+:smile: :heart: :+1: :sparkles:
+```
+
+レンダリング結果: 😄 ❤️ 👍 ✨
+
+### よく使う絵文字
+
+```markdown
+:arrow_right: →
+:check: ✓
+:x: ✗
+:bulb: 💡
+:warning: ⚠️
+:rocket: 🚀
+:tada: 🎉
+```
+
+### 絵文字リスト
+
+完全なリスト: https://github.com/ikatyang/emoji-cheat-sheet
+
+## Auto-scaling（自動スケーリング）
+
+テキストが多い場合、自動的にフォントサイズを調整。
+
+### 無効化
+
+```markdown
+---
+marp: true
+---
+
+<!-- _class: no-scaling -->
+
+# 自動スケーリングなし
+```
+
+カスタムCSSで制御：
+
+```css
+section.no-scaling {
+  --marpit-auto-scaling: off;
+}
+```
+
+## HTMLタグの使用
+
+Markdown内で直接HTMLを記述可能。
+
+### 配置制御
+
+```markdown
+<div style="text-align: center;">
+中央配置のテキスト
+</div>
+```
+
+### 2カラムレイアウト
+
+```markdown
+<div style="display: flex;">
+<div style="flex: 1;">
+
+## 左側
+
+- ポイント1
+- ポイント2
+
+</div>
+<div style="flex: 1;">
+
+## 右側
+
+- ポイント3
+- ポイント4
+
+</div>
+</div>
+```
+
+### スタイル付きボックス
+
+```markdown
+<div style="background-color: #e3f2fd; padding: 20px; border-radius: 8px;">
+
+**重要なポイント**
+
+ここに重要な内容を記述
+
+</div>
+```
+
+## Marp CLI 詳細オプション
+
+公式: https://github.com/marp-team/marp-cli
+
+### 基本的なコマンド
+
+```bash
+# HTMLに変換
+marp slide.md
+
+# PDFに変換
+marp slide.md --pdf
+
+# PowerPointに変換
+marp slide.md --pptx
+
+# 画像に変換
+marp slide.md --images png
+```
+
+### 監視モード
+
+```bash
+# ファイルを監視して自動変換
+marp -w slide.md
+
+# サーバーモードで監視
+marp -s -w slide.md
+```
+
+### テーマ指定
+
+```bash
+# カスタムテーマを使用
+marp slide.md --theme custom-theme.css
+
+# テーマディレクトリを指定
+marp slide.md --theme-set themes/
+```
+
+### 複数ファイルの一括変換
+
+```bash
+# ディレクトリ内のすべてのMarkdownを変換
+marp slides/*.md
+
+# 出力ディレクトリを指定
+marp slides/*.md -o output/
+```
+
+### HTML出力オプション
+
+```bash
+# HTML出力（単一ファイル）
+marp slide.md -o output.html
+
+# スタンドアロンHTML（CDN使用）
+marp slide.md --html
+```
+
+### PDF出力オプション
+
+```bash
+# PDF出力
+marp slide.md --pdf --allow-local-files
+
+# ページ番号なしでPDF
+marp slide.md --pdf --pdf-notes
+```
+
+### 画像出力
+
+```bash
+# PNG画像として出力
+marp slide.md --images png
+
+# JPEG画像として出力
+marp slide.md --images jpeg
+
+# 解像度指定
+marp slide.md --images png --image-scale 2
+```
+
+## Marp for VS Code
+
+公式: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
+
+### 有効化
+
+Markdownファイルのフロントマターに記述：
+
+```markdown
+---
+marp: true
+---
+```
+
+### プレビュー
+
+- `Ctrl+Shift+V` (Win/Linux)
+- `Cmd+Shift+V` (Mac)
+
+### エクスポート
+
+1. コマンドパレット (`Ctrl+Shift+P`)
+2. "Marp: Export slide deck..."を選択
+3. 形式を選択（HTML/PDF/PPTX/PNG/JPEG）
+
+### 設定
+
+VS Codeの設定でカスタマイズ可能：
+
+```json
+{
+  "markdown.marp.themes": [
+    "./themes/custom-theme.css"
+  ],
+  "markdown.marp.enableHtml": true
+}
+```
+
+## GitHub Actions での自動ビルド
+
+公式: https://github.com/marketplace/actions/marp-action
+
+### 基本的なワークフロー
+
+```yaml
+name: Marp Build
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Marp Build
+        uses: docker://marpteam/marp-cli:latest
+        with:
+          args: slides.md --pdf --allow-local-files
+          
+      - name: Upload PDF
+        uses: actions/upload-artifact@v3
+        with:
+          name: slides
+          path: slides.pdf
+```
+
+### GitHub Pagesへの公開
+
+```yaml
+- name: Marp to Pages
+  uses: docker://marpteam/marp-cli:latest
+  with:
+    args: slides.md -o index.html
+
+- name: Deploy to Pages
+  uses: peaceiris/actions-gh-pages@v3
+  with:
+    github_token: ${{ secrets.GITHUB_TOKEN }}
+    publish_dir: ./
+```
+
+## Tips & Tricks
+
+### 1. スライド番号のカスタマイズ
+
+```css
+section::after {
+  content: 'Page ' attr(data-marpit-pagination);
+}
+```
+
+### 2. 背景のグラデーション
+
+```markdown
+---
+backgroundImage: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
+color: white
+---
+```
+
+### 3. 2段組レイアウト
+
+```markdown
+<div class="columns">
+<div>
+
+左側のコンテンツ
+
+</div>
+<div>
+
+右側のコンテンツ
+
+</div>
+</div>
+
+<style>
+.columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+</style>
+```
+
+### 4. プログレスバー
+
+```css
+section::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--paginate) / var(--paginate-total) * 100%);
+  height: 5px;
+  background-color: #3b82f6;
+}
+```
+
+## トラブルシューティング
+
+### PDFが生成されない
+
+- ChromeまたはEdgeがインストールされているか確認
+- `--allow-local-files`オプションを追加
+
+### フォントが表示されない
+
+- Google Fontsなどは`@import`で読み込む
+- ローカルフォントは絶対パスで指定
+
+### 画像が表示されない
+
+- 画像の相対パスを確認
+- `--allow-local-files`が必要な場合あり
+
+## 公式リファレンス集
+
+- **Marp公式サイト**: https://marp.app/
+- **Marpit Directives**: https://marpit.marp.app/directives
+- **Image Syntax**: https://marpit.marp.app/image-syntax
+- **Theme CSS**: https://marpit.marp.app/theme-css
+- **Marp Core**: https://github.com/marp-team/marp-core
+- **Marp CLI**: https://github.com/marp-team/marp-cli
+- **VS Code Extension**: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
--- a/skills/marp-slide/references/best-practices.md
+++ b/skills/marp-slide/references/best-practices.md
@@ -0,0 +1,160 @@
+# Marpスライド作成ベストプラクティス
+
+「かっこいい」高品質なスライドを作成するためのガイドライン。
+
+## スライドタイトル（h2）
+
+### ✅ 良い例
+- **簡潔に**：5-7文字程度
+- **分かりやすく**：内容が一目で理解できる
+- **一貫性**：同じ階層では同じ文体を使う
+
+```markdown
+## 導入
+## 課題
+## 解決策
+## 効果
+```
+
+### ❌ 悪い例
+```markdown
+## この章では導入について説明します
+## 私たちが直面している課題とは何か
+```
+
+## 箇条書き
+
+### ✅ 良い例
+- **3-5項目**：多すぎない
+- **簡潔に**：1行あたり15-25文字程度
+- **並列性**：同じ階層では同じ文法構造
+
+```markdown
+- シンプルで分かりやすい
+- 統一感のあるデザイン
+- 効果的な情報伝達
+```
+
+### ❌ 悪い例
+```markdown
+- これは非常に長い説明文で、一行に収まりきらないため読みにくくなってしまいます
+- 短い
+- 次の項目は文章形式になっています。このように統一感がないと読みにくいです。
+```
+
+## スライド構成
+
+### 基本構造
+
+1. **タイトルスライド**（`<!-- _class: lead -->`）
+   - タイトル
+   - 発表者名
+   - 日付
+
+2. **アジェンダスライド**
+   - 全体の流れを示す
+   - 3-5項目程度
+
+3. **本文スライド**
+   - 1スライド = 1メッセージ
+   - タイトルで内容を要約
+
+4. **まとめスライド**
+   - 要点を再確認
+   - 感謝の言葉
+
+### スライド枚数の目安
+
+- 5分プレゼン：5-8枚
+- 10分プレゼン：10-15枚
+- 20分プレゼン：15-25枚
+
+## テキスト量
+
+### ✅ 良いバランス
+
+```markdown
+## 製品の特徴
+
+- 高速処理
+- 直感的なUI
+- 拡張性の高い設計
+```
+
+### ❌ 詰め込みすぎ
+
+```markdown
+## 製品について
+
+この製品は、最新のテクノロジーを活用して開発されました。
+主な特徴として、以下の7点が挙げられます：
+- 特徴1: 詳細な説明が長々と続く...
+- 特徴2: さらに詳しい説明...
+（以下省略）
+```
+
+## 余白の使い方
+
+- **適度な余白**：情報を詰め込みすぎない
+- **視線誘導**：重要な情報に自然と目が向く配置
+- **呼吸**：スライド間にも適度な「間」を
+
+## 色の使い方
+
+テーマで定義された色を活用：
+- **背景色**：`#f8f8f4`（明るいベージュ）
+- **テキスト色**：`#3a3b5a`（濃いネイビー）
+- **見出し色**：`#4f86c6`（青）
+- **アクセント色**：`#000000`（黒）
+
+### 追加の色を使う場合
+
+```markdown
+<span style="color: #c62828;">重要なポイント</span>
+```
+
+控えめに使用し、過度な装飾を避ける。
+
+## 画像の使用
+
+### 効果的な使い方
+
+- **目的を明確に**：装飾ではなく、理解を助けるため
+- **高品質**：解像度の高い画像を使用
+- **適切なサイズ**：大きすぎず小さすぎず
+
+### 配置のコツ
+
+```markdown
+# 左にテキスト、右に画像
+![bg right:40%](image.png)
+
+- ポイント1
+- ポイント2
+```
+
+## フォントサイズの目安
+
+テーマで定義済み：
+- h1: 56px（タイトルスライドのみ）
+- h2: 40px（通常スライドのタイトル）
+- h3: 28px（サブ見出し）
+- 本文: 22px
+
+## アニメーションとトランジション
+
+Marpは基本的にアニメーション非対応。
+シンプルなスライド遷移に集中する。
+
+## チェックリスト
+
+スライド完成後、以下を確認：
+
+- [ ] タイトルは簡潔か（5-7文字）
+- [ ] 箇条書きは3-5項目か
+- [ ] 1スライド1メッセージか
+- [ ] テキスト量は適切か
+- [ ] 余白は十分か
+- [ ] 画像は効果的に使われているか
+- [ ] 全体の統一感はあるか
+- [ ] スライド枚数は適切か
--- a/skills/marp-slide/references/image-patterns.md
+++ b/skills/marp-slide/references/image-patterns.md
@@ -0,0 +1,288 @@
+# Marp 画像記法リファレンス
+
+Marpit公式の画像記法に基づく、画像の配置とスタイリング方法。
+
+公式ドキュメント: https://marpit.marp.app/image-syntax
+
+## 基本的な画像挿入
+
+### 通常の画像
+
+```markdown
+![](image.png)
+![代替テキスト](image.png)
+```
+
+画像はコンテンツとして表示されます。
+
+### サイズ指定
+
+Marpでは画像にサイズキーワードを追加可能：
+
+```markdown
+![width:600px](image.png)
+![height:400px](image.png)
+![w:600px h:400px](image.png)
+```
+
+**サポートされる単位**:
+- `px` - ピクセル
+- `%` - パーセント
+- `em`, `rem`, `cm`, `mm`, `in`, `pt`, `pc`
+
+**省略形**:
+- `w:` = `width:`
+- `h:` = `height:`
+
+## 背景画像 (`bg`キーワード)
+
+### 基本的な背景画像
+
+```markdown
+![bg](image.png)
+```
+
+画像をスライドの背景として配置します。テキストコンテンツと重ならず、背景に配置されます。
+
+### 背景サイズキーワード
+
+```markdown
+![bg fit](image.png)
+![bg cover](image.png)
+![bg contain](image.png)
+![bg auto](image.png)
+```
+
+| キーワード | 動作 | CSS相当 |
+|----------|------|--------|
+| `fit` | アスペクト比を保ちスライド内に収める | `background-size: contain` |
+| `cover` | アスペクト比を保ちスライド全体を覆う | `background-size: cover` |
+| `contain` | `fit`と同じ | `background-size: contain` |
+| `auto` | 元のサイズ | `background-size: auto` |
+
+### 背景サイズ（数値指定）
+
+```markdown
+![bg 80%](image.png)
+![bg 1280px](image.png)
+![bg 50% 80%](image.png)
+```
+
+CSSの`background-size`プロパティと同じ構文をサポート。
+
+## 分割背景（Split Backgrounds）
+
+複数の背景画像を使って画面を分割できます。
+
+### 基本的な分割
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+```
+
+2つの画像が左右に分割表示されます。
+
+### 3分割以上
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+![bg](image3.png)
+```
+
+3つ以上の画像は等分に分割されます。
+
+### 分割方向の指定
+
+デフォルトは水平分割（horizontal）ですが、垂直分割も可能：
+
+```markdown
+![bg vertical](image1.png)
+![bg](image2.png)
+```
+
+`vertical`キーワードで垂直分割に変更。
+
+### 左右の配置指定
+
+```markdown
+![bg left](image.png)
+```
+
+画像を左側に配置し、右側にテキストスペースを確保。
+
+```markdown
+![bg right](image.png)
+```
+
+画像を右側に配置し、左側にテキストスペースを確保。
+
+### サイズ比率の指定
+
+```markdown
+![bg left:33%](image.png)
+```
+
+左側33%に画像、右側67%にテキストスペース。
+
+```markdown
+![bg right:60%](image.png)
+```
+
+右側60%に画像、左側40%にテキストスペース。
+
+## フィルター効果
+
+### 明度調整
+
+```markdown
+![brightness:0.5](image.png)
+![brightness:1.5](image.png)
+```
+
+値の範囲: 0（真っ黒）〜 1（通常）〜 2以上（明るく）
+
+### コントラスト
+
+```markdown
+![contrast:0.8](image.png)
+![contrast:1.5](image.png)
+```
+
+### ぼかし
+
+```markdown
+![blur:10px](image.png)
+```
+
+### グレースケール
+
+```markdown
+![grayscale](image.png)
+![grayscale:1](image.png)
+```
+
+値の範囲: 0（カラー）〜 1（完全なグレースケール）
+
+### セピア
+
+```markdown
+![sepia](image.png)
+![sepia:0.8](image.png)
+```
+
+### 色相回転
+
+```markdown
+![hue-rotate:180deg](image.png)
+```
+
+### 反転
+
+```markdown
+![invert](image.png)
+![invert:0.8](image.png)
+```
+
+### 透明度
+
+```markdown
+![opacity:0.5](image.png)
+```
+
+### 彩度
+
+```markdown
+![saturate:2](image.png)
+```
+
+### 複数のフィルター
+
+```markdown
+![brightness:1.2 contrast:1.1 saturate:1.3](image.png)
+```
+
+## 実用的なパターン例
+
+### パターン1: 左にテキスト、右に画像
+
+```markdown
+## プロダクト紹介
+
+![bg right:40%](product.png)
+
+- 特徴1
+- 特徴2
+- 特徴3
+```
+
+### パターン2: 背景画像 + オーバーレイテキスト
+
+```markdown
+![bg brightness:0.5](hero.png)
+
+# キャッチコピー
+
+サブテキスト
+```
+
+暗くした背景の上に白いテキストを配置。
+
+### パターン3: 複数画像の比較
+
+```markdown
+![bg left:50%](before.png)
+![bg right:50%](after.png)
+```
+
+Before/Afterを左右に並べる。
+
+### パターン4: 縦並び比較
+
+```markdown
+![bg vertical](image1.png)
+![bg](image2.png)
+```
+
+上下に画像を配置。
+
+### パターン5: サイズ指定した通常画像
+
+```markdown
+## 図解
+
+![w:600px](diagram.png)
+
+上記の図は...
+```
+
+### パターン6: 3分割レイアウト
+
+```markdown
+![bg](image1.png)
+![bg](image2.png)
+![bg](image3.png)
+```
+
+### パターン7: フィルター効果を使った背景
+
+```markdown
+![bg blur:5px brightness:0.7](background.png)
+
+# 見やすいテキスト
+
+ぼかしと暗さで背景を控えめに
+```
+
+## 注意事項
+
+1. **背景画像とテキスト**: `![bg]`画像は背景レイヤーに配置され、テキストと重なりません
+2. **複数背景の順序**: 記述順に左から右（または上から下）に配置されます
+3. **フィルター対応**: すべてのフィルターがすべての環境で動作するとは限りません
+4. **相対パス**: 画像パスはMarkdownファイルからの相対パスで指定
+
+## 公式リファレンス
+
+詳細は公式ドキュメントを参照：
+- **Image syntax**: https://marpit.marp.app/image-syntax
--- a/skills/marp-slide/references/marp-syntax.md
+++ b/skills/marp-slide/references/marp-syntax.md
@@ -0,0 +1,256 @@
+# Marp 基本構文リファレンス
+
+公式ドキュメントに基づくMarpの基本的な書き方。
+
+## フロントマター（Directives）
+
+### 基本構造
+
+```markdown
+---
+marp: true
+theme: default
+paginate: true
+---
+```
+
+### 主要なグローバルディレクティブ
+
+| ディレクティブ | 説明 | 値の例 |
+|------------|------|-------|
+| `marp` | Marp機能の有効化 | `true` |
+| `theme` | テーマの指定 | `default`, `gaia`, `uncover` |
+| `size` | スライドサイズ（Marp Core拡張） | `16:9`, `4:3`, `A4` |
+| `paginate` | ページ番号の表示 | `true`, `false` |
+| `header` | 全スライドのヘッダー | 任意のテキスト |
+| `footer` | 全スライドのフッター | 任意のテキスト |
+| `backgroundColor` | 背景色 | `#fff`, `white` |
+| `backgroundImage` | 背景画像 | `url('image.png')` |
+| `color` | テキスト色 | `#000`, `black` |
+| `class` | CSSクラスの適用 | `lead`, `invert` |
+
+### サイズディレクティブ（Marp Core）
+
+```markdown
+---
+size: 16:9
+---
+```
+
+利用可能なサイズ：
+- `16:9` (1280x720, デフォルト)
+- `4:3` (960x720)
+- `A4` (210mm x 297mm)
+
+### ページ固有のディレクティブ
+
+スライドごとに設定を変更する場合、`<!-- ディレクティブ名: 値 -->`形式で記述：
+
+```markdown
+<!-- _class: lead -->
+<!-- _backgroundColor: black -->
+<!-- _color: white -->
+
+# このスライドだけ適用
+```
+
+**アンダースコア `_` の意味**：
+- `_`なし：以降の全スライドに適用
+- `_`あり：現在のスライドのみ適用
+
+## スライドの区切り
+
+```markdown
+---
+
+# 最初のスライド
+
+---
+
+# 次のスライド
+
+---
+```
+
+`---`（水平線）で新しいスライドに切り替わります。
+
+## ヘッダーとフッター
+
+### グローバル設定
+
+```markdown
+---
+header: '講義名'
+footer: '2024年10月'
+---
+```
+
+### スライドごとの設定
+
+```markdown
+<!-- header: 'セクション1' -->
+<!-- footer: 'ページ番号表示' -->
+```
+
+### 無効化
+
+```markdown
+<!-- header: '' -->
+<!-- footer: '' -->
+```
+
+## ページネーション（ページ番号）
+
+```markdown
+---
+paginate: true
+---
+```
+
+テーマによって表示位置やスタイルが異なります。
+
+特定のスライドで非表示：
+```markdown
+<!-- paginate: false -->
+```
+
+または：
+```markdown
+<!-- _paginate: false -->
+```
+
+## インラインスタイル
+
+### Markdown内でのスタイル指定
+
+```markdown
+---
+marp: true
+---
+
+<style>
+section {
+  background-color: #f0f0f0;
+}
+
+h1 {
+  color: #333;
+}
+</style>
+
+# スライド
+```
+
+### Scoped Style
+
+特定のスライドのみにスタイルを適用：
+
+```markdown
+<style scoped>
+h1 {
+  color: red;
+}
+</style>
+
+# このスライドだけ赤い見出し
+```
+
+## 数式（Marp Core拡張）
+
+Pandoc形式の数式をサポート：
+
+### インライン数式
+
+```markdown
+$E = mc^2$
+```
+
+### ブロック数式
+
+```markdown
+$$
+\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+$$
+```
+
+## 絵文字（Marp Core拡張）
+
+```markdown
+:smile: :+1: :sparkles:
+```
+
+GitHub Emoji記法をサポート。
+
+## コメント
+
+HTMLコメントはレンダリングされません：
+
+```markdown
+<!-- これはコメントです -->
+```
+
+ディレクティブもコメント形式で記述：
+
+```markdown
+<!-- _class: lead -->
+```
+
+## 公式リファレンスリンク
+
+詳細は公式ドキュメントを参照：
+
+- **Directives一覧**: https://marpit.marp.app/directives
+- **Marp Core機能**: https://github.com/marp-team/marp-core
+- **Theme CSS仕様**: https://marpit.marp.app/theme-css
+- **公式サイト**: https://marp.app/
+
+## よくある設定例
+
+### 基本設定
+
+```markdown
+---
+marp: true
+theme: default
+size: 16:9
+paginate: true
+---
+```
+
+### タイトルスライド
+
+```markdown
+---
+marp: true
+theme: default
+---
+
+<!-- _class: lead -->
+<!-- _paginate: false -->
+
+# プレゼンテーションタイトル
+
+発表者名
+```
+
+### セクション区切り
+
+```markdown
+<!-- _class: lead -->
+
+# 第2章
+
+新しいセクション
+
+---
+
+## 通常のスライド
+```
+
+### カスタム背景色
+
+```markdown
+<!-- _backgroundColor: #e3f2fd -->
+
+# 明るい青背景のスライド
+```
--- a/skills/marp-slide/references/official-themes.md
+++ b/skills/marp-slide/references/official-themes.md
@@ -0,0 +1,405 @@
+# Marp 公式テーマリファレンス
+
+Marp Coreに含まれる3つの公式テーマの解説。
+
+公式実装: https://github.com/marp-team/marp-core/tree/main/themes
+
+## 公式テーマ一覧
+
+1. **default** - シンプルで汎用的なテーマ
+2. **gaia** - モダンでカラフルなテーマ
+3. **uncover** - ミニマルでエレガントなテーマ
+
+## Default テーマ
+
+### 特徴
+
+- **配色**: 白背景、黒テキスト、青アクセント
+- **フォント**: シンプルなサンセリフ
+- **用途**: 汎用的なプレゼンテーション
+- **スタイル**: 清潔、読みやすい
+
+### 使用方法
+
+```markdown
+---
+marp: true
+theme: default
+---
+
+# タイトル
+
+コンテンツ
+```
+
+### 利用可能なクラス
+
+#### lead（タイトルスライド）
+
+```markdown
+<!-- _class: lead -->
+
+# プレゼンテーション
+
+副題や説明
+```
+
+中央寄せ、大きなテキスト。
+
+#### invert（反転配色）
+
+```markdown
+<!-- _class: invert -->
+
+# 黒背景・白文字
+```
+
+背景が黒、テキストが白に反転。
+
+#### 組み合わせ
+
+```markdown
+<!-- _class: lead invert -->
+
+# 反転タイトルスライド
+```
+
+複数のクラスを同時に適用可能。
+
+### カスタマイズ例
+
+```markdown
+---
+theme: default
+---
+
+<style>
+section {
+  background-color: #f5f5f5;
+}
+
+h1 {
+  color: #1e40af;
+}
+</style>
+```
+
+## Gaia テーマ
+
+### 特徴
+
+- **配色**: カラフル、鮮やかなアクセントカラー
+- **フォント**: モダンなサンセリフ
+- **用途**: クリエイティブなプレゼン、デザイン発表
+- **スタイル**: 活気的、視覚的に魅力的
+
+### 使用方法
+
+```markdown
+---
+marp: true
+theme: gaia
+---
+
+# タイトル
+```
+
+### カラーバリエーション
+
+Gaiaテーマは複数の配色を持ちます：
+
+```markdown
+<!-- _class: lead -->
+# デフォルト配色
+
+---
+
+<!-- _class: lead invert -->
+# 反転配色
+
+---
+
+<!-- _class: lead gaia -->
+# Gaia配色
+```
+
+### 特徴的なスタイル
+
+- **グラデーション背景**: タイトルスライドで使用
+- **カラフルなアクセント**: 見出しやリンク
+- **大きなタイポグラフィ**: インパクトのある見出し
+
+### カスタマイズ例
+
+```markdown
+---
+theme: gaia
+---
+
+<style>
+section {
+  --color-background: #fff;
+  --color-foreground: #333;
+  --color-highlight: #e91e63;
+}
+</style>
+```
+
+## Uncover テーマ
+
+### 特徴
+
+- **配色**: ミニマル、白または黒ベース
+- **フォント**: エレガントなセリフフォント
+- **用途**: フォーマルなプレゼン、学術発表
+- **スタイル**: 洗練、シンプル、エレガント
+
+### 使用方法
+
+```markdown
+---
+marp: true
+theme: uncover
+---
+
+# タイトル
+```
+
+### 利用可能なクラス
+
+#### lead（タイトルスライド）
+
+```markdown
+<!-- _class: lead -->
+
+# プレゼンテーション
+```
+
+中央寄せ、大きなセリフフォント。
+
+#### invert（反転配色）
+
+```markdown
+<!-- _class: invert -->
+
+# 黒背景のスライド
+```
+
+黒背景、白文字。
+
+### 特徴的なスタイル
+
+- **セリフフォント**: 見出しに使用
+- **広い余白**: ミニマルなレイアウト
+- **中央寄せ**: コンテンツが中央に配置される傾向
+
+### カスタマイズ例
+
+```markdown
+---
+theme: uncover
+---
+
+<style>
+section {
+  font-family: 'Georgia', serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+</style>
+```
+
+## テーマ比較表
+
+| 特徴 | default | gaia | uncover |
+|------|---------|------|---------|
+| **背景色** | 白 | カラフル | 白/黒 |
+| **フォント** | サンセリフ | サンセリフ | セリフ |
+| **配色** | シンプル | 鮮やか | ミニマル |
+| **用途** | 汎用 | クリエイティブ | フォーマル |
+| **スタイル** | 清潔 | 活気的 | エレガント |
+
+## クラスの共通仕様
+
+すべての公式テーマで使用可能：
+
+### lead
+
+```markdown
+<!-- _class: lead -->
+```
+
+- タイトルスライド用
+- 中央寄せ
+- 大きなテキスト
+- フッター/ページ番号を非表示
+
+### invert
+
+```markdown
+<!-- _class: invert -->
+```
+
+- 配色を反転
+- 背景とテキストの色を入れ替え
+- ダークモード風
+
+## テーマ選択のガイドライン
+
+### defaultを選ぶべき場合
+
+- 汎用的なプレゼンテーション
+- ビジネス用途
+- シンプルで読みやすいデザインが必要
+- カスタマイズの基盤として使用
+
+### gaiaを選ぶべき場合
+
+- クリエイティブなプレゼン
+- デザイン関連の発表
+- 若い世代向け
+- 視覚的なインパクトが必要
+
+### uncoverを選ぶべき場合
+
+- フォーマルなプレゼン
+- 学術発表
+- ミニマルなデザイン志向
+- エレガントな印象を与えたい
+
+## カスタムテーマとの組み合わせ
+
+### 公式テーマを拡張
+
+```css
+/* @theme my-custom-default */
+
+@import-theme 'default';
+
+section {
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+h1 {
+  color: #1e3a8a;
+}
+```
+
+### 複数テーマの切り替え
+
+```markdown
+---
+marp: true
+theme: default
+---
+
+# セクション1（defaultテーマ）
+
+---
+
+<!-- theme: gaia -->
+
+# セクション2（gaiaテーマ）
+
+---
+
+<!-- theme: uncover -->
+
+# セクション3（uncoverテーマ）
+```
+
+注：同一ファイル内でのテーマ切り替えは限定的なサポート。
+
+## 実践例
+
+### defaultテーマの活用
+
+```markdown
+---
+marp: true
+theme: default
+paginate: true
+---
+
+<!-- _class: lead -->
+
+# プロジェクト報告
+
+2024年10月
+
+---
+
+## アジェンダ
+
+1. 進捗状況
+2. 課題と対策
+3. 今後の予定
+
+---
+
+## 進捗状況
+
+- タスクA: 完了
+- タスクB: 進行中
+- タスクC: 予定通り
+```
+
+### gaiaテーマの活用
+
+```markdown
+---
+marp: true
+theme: gaia
+---
+
+<!-- _class: lead -->
+
+# 新製品発表
+
+革新的なデザイン
+
+---
+
+## コンセプト
+
+**3つの柱**
+
+1. 🎨 美しさ
+2. 🚀 速さ
+3. 💡 使いやすさ
+```
+
+### uncoverテーマの活用
+
+```markdown
+---
+marp: true
+theme: uncover
+---
+
+<!-- _class: lead -->
+
+# 研究発表
+
+深層学習の応用
+
+---
+
+## 研究背景
+
+近年の技術発展により...
+
+---
+
+<!-- _class: invert -->
+
+## 実験結果
+
+精度: 95.3%
+```
+
+## 公式リファレンス
+
+- **公式テーマ実装**: https://github.com/marp-team/marp-core/tree/main/themes
+- **Marp Core README**: https://github.com/marp-team/marp-core
+- **テーマCSS仕様**: https://marpit.marp.app/theme-css
--- a/skills/marp-slide/references/theme-css-guide.md
+++ b/skills/marp-slide/references/theme-css-guide.md
@@ -0,0 +1,394 @@
+# Marp テーマCSS作成ガイド
+
+Marpit公式のテーマCSS仕様に基づく、カスタムテーマの作成方法。
+
+公式ドキュメント: https://marpit.marp.app/theme-css
+
+## テーマの基本構造
+
+### @themeメタデータ（必須）
+
+テーマCSSには`@theme`メタデータが必要：
+
+```css
+/* @theme theme-name */
+```
+
+このメタデータがないと、テーマとして認識されません。
+
+### 基本的なテーマCSS例
+
+```css
+/* @theme my-theme */
+
+section {
+  background-color: #fff;
+  color: #333;
+  font-size: 24px;
+  padding: 60px;
+}
+
+h1 {
+  color: #1e40af;
+  font-size: 48px;
+}
+
+h2 {
+  color: #3b82f6;
+  font-size: 36px;
+}
+```
+
+## HTML構造
+
+Marpが生成するHTML構造：
+
+```html
+<section>
+  <h1>スライドタイトル</h1>
+  <p>コンテンツ</p>
+</section>
+```
+
+各スライドは`<section>`要素として生成されます。
+
+## スライドサイズ
+
+### デフォルトサイズ
+
+```css
+section {
+  width: 1280px;
+  height: 720px;
+}
+```
+
+16:9比率（1280x720）がデフォルト。
+
+### カスタムサイズの定義
+
+```css
+/* @theme my-theme */
+/* @size 4:3 960px 720px */
+
+section {
+  width: 960px;
+  height: 720px;
+}
+```
+
+`@size`メタデータでカスタムサイズを定義できます。
+
+## ページネーション
+
+ページ番号のスタイリング：
+
+```css
+section::after {
+  content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
+  position: absolute;
+  right: 30px;
+  bottom: 20px;
+  font-size: 16px;
+  color: #666;
+}
+```
+
+**利用可能な属性**:
+- `data-marpit-pagination` - 現在のページ番号
+- `data-marpit-pagination-total` - 総ページ数
+
+## ヘッダーとフッター
+
+### ヘッダー
+
+```css
+header {
+  position: absolute;
+  top: 30px;
+  left: 60px;
+  right: 60px;
+  font-size: 18px;
+  color: #666;
+}
+```
+
+### フッター
+
+```css
+footer {
+  position: absolute;
+  bottom: 30px;
+  left: 60px;
+  right: 60px;
+  font-size: 18px;
+  color: #666;
+}
+```
+
+## テーマの拡張と継承
+
+### @importでの読み込み
+
+```css
+/* @theme my-extended-theme */
+
+@import 'default';
+
+section {
+  background-color: #f0f0f0;
+}
+```
+
+既存のテーマを拡張できます。
+
+### @import-themeで名前付きテーマを継承
+
+```css
+/* @theme my-theme */
+
+@import-theme 'default';
+
+h1 {
+  color: red;
+}
+```
+
+`@import-theme`を使用すると、テーマ名で読み込めます。
+
+## クラスベースのバリエーション
+
+### leadクラス（タイトルスライド）
+
+```css
+section.lead {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+section.lead h1 {
+  font-size: 64px;
+}
+```
+
+### invertクラス（反転配色）
+
+```css
+section.invert {
+  background-color: #000;
+  color: #fff;
+}
+
+section.invert h1,
+section.invert h2 {
+  color: #fff;
+}
+```
+
+## Scoped Style（スライド固有のスタイル）
+
+Markdown内で`<style scoped>`を使用：
+
+```markdown
+<style scoped>
+section {
+  background-color: #e3f2fd;
+}
+</style>
+
+# このスライドだけ青い背景
+```
+
+## 背景画像のスタイリング
+
+背景画像は自動的に処理されますが、CSSで調整可能：
+
+```css
+section[data-marpit-background-image] {
+  background-size: cover;
+  background-position: center;
+}
+```
+
+## 数式のスタイリング（Marp Core）
+
+```css
+.katex {
+  font-size: 1.2em;
+}
+
+.katex-display {
+  margin: 1em 0;
+}
+```
+
+## リストのスタイリング
+
+```css
+ul, ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+li {
+  margin: 0.3em 0;
+}
+
+li::marker {
+  color: #3b82f6;
+}
+```
+
+## テーブルのスタイリング
+
+```css
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 0.5em 1em;
+  text-align: left;
+}
+
+th {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+```
+
+## コードブロックのスタイリング
+
+```css
+pre {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  padding: 1em;
+  overflow-x: auto;
+}
+
+code {
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+```
+
+## レスポンシブ対応
+
+```css
+@media screen and (max-width: 1280px) {
+  section {
+    font-size: 20px;
+  }
+  
+  h1 {
+    font-size: 40px;
+  }
+}
+```
+
+## 実践的なテーマ例
+
+### ミニマルテーマ
+
+```css
+/* @theme minimal */
+
+section {
+  background-color: #ffffff;
+  color: #333333;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 24px;
+  padding: 80px;
+}
+
+h1, h2, h3 {
+  font-weight: 300;
+  color: #000000;
+}
+
+h1 {
+  font-size: 60px;
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  font-size: 40px;
+  margin-bottom: 0.5em;
+}
+```
+
+### ダークテーマ
+
+```css
+/* @theme dark */
+
+section {
+  background-color: #1a1a1a;
+  color: #e0e0e0;
+  font-size: 22px;
+  padding: 60px;
+}
+
+h1, h2, h3 {
+  color: #61dafb;
+}
+
+a {
+  color: #61dafb;
+}
+
+code {
+  background-color: #2d2d2d;
+  color: #61dafb;
+}
+```
+
+## Markdown内でのスタイル埋め込み
+
+```markdown
+---
+marp: true
+---
+
+<style>
+section {
+  background-color: #f8f8f4;
+  font-family: 'Noto Sans JP', sans-serif;
+}
+
+h1 {
+  color: #4f86c6;
+}
+</style>
+
+# スライド
+```
+
+この方法でテーマを使わずにカスタムスタイルを適用できます。
+
+## ベストプラクティス
+
+1. **コントラストを確保**: 背景とテキストの色のコントラスト比を4.5:1以上に
+2. **適切なフォントサイズ**: 本文22-24px、タイトル40-60px程度
+3. **余白を十分に**: パディング60px以上推奨
+4. **フォールバックフォント**: Web Fontが読み込めない場合のシステムフォントを指定
+5. **印刷対応**: `@media print`で印刷用スタイルも定義
+
+## 公式リファレンス
+
+詳細は公式ドキュメントを参照：
+- **Theme CSS**: https://marpit.marp.app/theme-css
+- **Marpit API**: https://marpit-api.marp.app/
+- **公式テーマ実装**: https://github.com/marp-team/marp-core/tree/main/themes
--- a/skills/marp-slide/references/theme-selection.md
+++ b/skills/marp-slide/references/theme-selection.md
@@ -0,0 +1,115 @@
+# Marpテーマ選択ガイド
+
+全7種類のテーマから、用途に合わせて最適なテーマを選択します。
+
+## テーマ一覧と用途
+
+### 1. デフォルト（theme-default.css / template-basic.md）
+**特徴**: 洗練された日本語対応デザイン、装飾線、フッターバー
+**配色**: ベージュ背景 + ネイビー文字 + 青見出し
+**用途**: 汎用的なセミナー、講習、プレゼンテーション
+**雰囲気**: 落ち着いた、上品、洗練された
+
+### 2. シンプル＆ミニマル（theme-minimal.css / template-minimal.md）
+**特徴**: 最小限の装飾、広い余白、軽量フォント
+**配色**: 白背景 + グレー文字 + 黒見出し
+**用途**: 内容重視のプレゼン、学術発表、静かな印象を与えたい場合
+**雰囲気**: 清潔、シンプル、洗練された
+
+### 3. カラフル＆ポップ（theme-colorful.css / template-colorful.md）
+**特徴**: グラデーション、明るい色使い、太字強調
+**配色**: ピンク系背景 + マルチカラーアクセント
+**用途**: 若い世代向け、イベント、クリエイティブな企画
+**雰囲気**: 楽しい、元気、華やか
+
+### 4. ダークモード（theme-dark.css / template-dark.md）
+**特徴**: 暗い背景、グロー効果、目に優しい
+**配色**: 黒背景 + シアン/紫アクセント
+**用途**: 技術プレゼン、夜間発表、モダンな印象
+**雰囲気**: クール、モダン、未来的
+
+### 5. グラデーション背景（theme-gradient.css / template-gradient.md）
+**特徴**: 各スライドで異なるグラデーション、白文字、影効果
+**配色**: 紫〜ピンク〜青〜緑のグラデーション
+**用途**: ビジュアル重視、クリエイティブ発表、印象的なプレゼン
+**雰囲気**: 鮮やか、ダイナミック、印象的
+
+### 6. 技術系（コード向け）（theme-tech.css / template-tech.md）
+**特徴**: GitHub風デザイン、コードフォント、Markdown風記号
+**配色**: 黒背景 + 青/緑アクセント
+**用途**: プログラミング講座、技術勉強会、開発者向け
+**雰囲気**: 技術的、開発者向け、GitHub風
+
+### 7. ビジネスライク（theme-business.css / template-business.md）
+**特徴**: 企業プレゼン風、テーブル対応、上部ボーダー
+**配色**: 白背景 + 濃紺見出し + 青アクセント
+**用途**: ビジネスプレゼン、企画提案、報告会
+**雰囲気**: フォーマル、信頼感、プロフェッショナル
+
+## テーマ選択の判断フロー
+
+### ステップ1: 用途で絞り込む
+
+**技術系/開発者向け** → 技術系（コード向け）
+**ビジネス/企業向け** → ビジネスライク
+**クリエイティブ/イベント** → カラフル＆ポップ or グラデーション背景
+**学術/シンプル** → シンプル＆ミニマル
+**汎用/迷ったら** → デフォルト
+
+### ステップ2: 雰囲気で選ぶ
+
+**明るく楽しく** → カラフル＆ポップ、グラデーション背景
+**落ち着いて上品** → デフォルト、ビジネスライク
+**クールでモダン** → ダークモード、技術系
+**シンプルで清潔** → シンプル＆ミニマル
+
+### ステップ3: 背景色で選ぶ
+
+**明るい背景**: シンプル＆ミニマル、デフォルト、ビジネスライク、カラフル＆ポップ
+**暗い背景**: ダークモード、技術系
+**グラデーション**: グラデーション背景
+
+## ユーザーリクエストからの推測
+
+### 「良い感じにして」「かっこよく」
+→ 内容に応じて判断：
+- ビジネス系: ビジネスライク
+- 技術系: 技術系 or ダークモード
+- 汎用: デフォルト
+- クリエイティブ: グラデーション背景
+
+### 「シンプルに」「見やすく」
+→ シンプル＆ミニマル or デフォルト
+
+### 「派手に」「目立つように」
+→ カラフル＆ポップ or グラデーション背景
+
+### 「技術的に」「プログラミング」
+→ 技術系（コード向け）
+
+### 「ビジネス」「企業」「提案」
+→ ビジネスライク
+
+### 「ダーク」「黒背景」「目に優しい」
+→ ダークモード or 技術系
+
+## デフォルトテーマの使用判断
+
+以下の場合はデフォルトテーマを使用：
+- ユーザーが特定のテーマを指定していない
+- 用途が明確でない
+- 「良い感じに」などの曖昧な指示のみ
+- 講習・セミナー用途
+
+## 複数テーマの提案
+
+以下の場合は、2-3個のテーマを簡潔に提案：
+- ユーザーが「どれがいい？」と聞いた場合
+- 内容から複数の選択肢がある場合
+- 初めての利用で迷っていそうな場合
+
+提案例：
+「このプレゼンには以下のテーマがおすすめです：
+1. **ビジネスライク**: フォーマルな印象
+2. **デフォルト**: バランスの取れた万能型
+どちらがよろしいですか？」