[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D85R51NP7JV460VRQHZ2X2":3,"skill-same:01M6D85R51NP7JV460VRQHZ2X2":81},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":55,"repositoryHtmlUrl":56,"repositoryHomepageUrl":6,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M6D85R51NP7JV460VRQHZ2X2","frontend-slides",null,"Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT\u002FPPTX to web, or create slides for a talk\u002Fpitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.","oabdelmaksoud\u002FSuperClaw","oabdelmaksoud","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F50699149?v=4","01M6D5CVVN778ZCDP1WHS816SP","Omar Abdelmaksoud","01M6D5CW1RHNSKCJR85GJACBFT",2,"MIT","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ffrontend-slides\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"frontend","slides","frontend slides","discover","pptx","visual","exploration","build","files","aesthetic","html","use","user","convert","Animation","create","powerpoint","presentations","web","2026-11-10 10:12:30",false,"---\nname: frontend-slides\ndescription: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT\u002FPPTX to web, or create slides for a talk\u002Fpitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.\norigin: ECC\n---\n\n# Frontend Slides\n\nCreate zero-dependency, animation-rich HTML presentations that run entirely in the browser.\n\nInspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).\n\n## When to Activate\n\n- Creating a talk deck, pitch deck, workshop deck, or internal presentation\n- Converting `.ppt` or `.pptx` slides into an HTML presentation\n- Improving an existing HTML presentation's layout, motion, or typography\n- Exploring presentation styles with a user who does not know their design preference yet\n\n## Non-Negotiables\n\n1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.\n2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.\n3. **Show, don't tell**: use visual previews instead of abstract style questionnaires.\n4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.\n5. **Production quality**: keep code commented, accessible, responsive, and performant.\n\nBefore generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.\n\n## Workflow\n\n### 1. Detect Mode\n\nChoose one path:\n- **New presentation**: user has a topic, notes, or full draft\n- **PPT conversion**: user has `.ppt` or `.pptx`\n- **Enhancement**: user already has HTML slides and wants improvements\n\n### 2. Discover Content\n\nAsk only the minimum needed:\n- purpose: pitch, teaching, conference talk, internal update\n- length: short (5-10), medium (10-20), long (20+)\n- content state: finished copy, rough notes, topic only\n\nIf the user has content, ask them to paste it before styling.\n\n### 3. Discover Style\n\nDefault to visual exploration.\n\nIf the user already knows the desired preset, skip previews and use it directly.\n\nOtherwise:\n1. Ask what feeling the deck should create: impressed, energized, focused, inspired.\n2. Generate **3 single-slide preview files** in `.ecc-design\u002Fslide-previews\u002F`.\n3. Each preview must be self-contained, show typography\u002Fcolor\u002Fmotion clearly, and stay under roughly 100 lines of slide content.\n4. Ask the user which preview to keep or what elements to mix.\n\nUse the preset guide in `STYLE_PRESETS.md` when mapping mood to style.\n\n### 4. Build the Presentation\n\nOutput either:\n- `presentation.html`\n- `[presentation-name].html`\n\nUse an `assets\u002F` folder only when the deck contains extracted or user-supplied images.\n\nRequired structure:\n- semantic slide sections\n- a viewport-safe CSS base from `STYLE_PRESETS.md`\n- CSS custom properties for theme values\n- a presentation controller class for keyboard, wheel, and touch navigation\n- Intersection Observer for reveal animations\n- reduced-motion support\n\n### 5. Enforce Viewport Fit\n\nTreat this as a hard gate.\n\nRules:\n- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`\n- all type and spacing must scale with `clamp()`\n- when content does not fit, split into multiple slides\n- never solve overflow by shrinking text below readable sizes\n- never allow scrollbars inside a slide\n\nUse the density limits and mandatory CSS block in `STYLE_PRESETS.md`.\n\n### 6. Validate\n\nCheck the finished deck at these sizes:\n- 1920x1080\n- 1280x720\n- 768x1024\n- 375x667\n- 667x375\n\nIf browser automation is available, use it to verify no slide overflows and that keyboard navigation works.\n\n### 7. Deliver\n\nAt handoff:\n- delete temporary preview files unless the user wants to keep them\n- open the deck with the platform-appropriate opener when useful\n- summarize file path, preset used, slide count, and easy theme customization points\n\nUse the correct opener for the current OS:\n- macOS: `open file.html`\n- Linux: `xdg-open file.html`\n- Windows: `start \"\" file.html`\n\n## PPT \u002F PPTX Conversion\n\nFor PowerPoint conversion:\n1. Prefer `python3` with `python-pptx` to extract text, images, and notes.\n2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual\u002Fexport-based workflow.\n3. Preserve slide order, speaker notes, and extracted assets.\n4. After extraction, run the same style-selection workflow as a new presentation.\n\nKeep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.\n\n## Implementation Requirements\n\n### HTML \u002F CSS\n\n- Use inline CSS and JS unless the user explicitly wants a multi-file project.\n- Fonts may come from Google Fonts or Fontshare.\n- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.\n- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.\n\n### JavaScript\n\nInclude:\n- keyboard navigation\n- touch \u002F swipe navigation\n- mouse wheel navigation\n- progress indicator or slide index\n- reveal-on-enter animation triggers\n\n### Accessibility\n\n- use semantic structure (`main`, `section`, `nav`)\n- keep contrast readable\n- support keyboard-only navigation\n- respect `prefers-reduced-motion`\n\n## Content Density Limits\n\nUse these maxima unless the user explicitly asks for denser slides and readability still holds:\n\n| Slide type | Limit |\n|------------|-------|\n| Title | 1 heading + 1 subtitle + optional tagline |\n| Content | 1 heading + 4-6 bullets or 2 short paragraphs |\n| Feature grid | 6 cards max |\n| Code | 8-10 lines max |\n| Quote | 1 quote + attribution |\n| Image | 1 image constrained by viewport |\n\n## Anti-Patterns\n\n- generic startup gradients with no visual identity\n- system-font decks unless intentionally editorial\n- long bullet walls\n- code blocks that need scrolling\n- fixed-height content boxes that break on short screens\n- invalid negated CSS functions like `-clamp(...)`\n\n## Related ECC Skills\n\n- `frontend-patterns` for component and interaction patterns around the deck\n- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics\n- `e2e-testing` if you need automated browser verification for the final deck\n\n## Deliverable Checklist\n\n- presentation runs from a local file in a browser\n- every slide fits the viewport without scrolling\n- style is distinctive and intentional\n- animation is meaningful, not noisy\n- reduced motion is respected\n- file paths and customization points are explained at handoff\n","# Frontend Slides\n\nCreate zero-dependency, animation-rich HTML presentations that run entirely in the browser.\n\nInspired by the visual exploration approach showcased in work by zarazhangrui (credit: @zarazhangrui).\n\n## When to Activate\n\n- Creating a talk deck, pitch deck, workshop deck, or internal presentation\n- Converting `.ppt` or `.pptx` slides into an HTML presentation\n- Improving an existing HTML presentation's layout, motion, or typography\n- Exploring presentation styles with a user who does not know their design preference yet\n\n## Non-Negotiables\n\n1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.\n2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.\n3. **Show, don't tell**: use visual previews instead of abstract style questionnaires.\n4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.\n5. **Production quality**: keep code commented, accessible, responsive, and performant.\n\nBefore generating, read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas.\n\n## Workflow\n\n### 1. Detect Mode\n\nChoose one path:\n- **New presentation**: user has a topic, notes, or full draft\n- **PPT conversion**: user has `.ppt` or `.pptx`\n- **Enhancement**: user already has HTML slides and wants improvements\n\n### 2. Discover Content\n\nAsk only the minimum needed:\n- purpose: pitch, teaching, conference talk, internal update\n- length: short (5-10), medium (10-20), long (20+)\n- content state: finished copy, rough notes, topic only\n\nIf the user has content, ask them to paste it before styling.\n\n### 3. Discover Style\n\nDefault to visual exploration.\n\nIf the user already knows the desired preset, skip previews and use it directly.\n\nOtherwise:\n1. Ask what feeling the deck should create: impressed, energized, focused, inspired.\n2. Generate **3 single-slide preview files** in `.ecc-design\u002Fslide-previews\u002F`.\n3. Each preview must be self-contained, show typography\u002Fcolor\u002Fmotion clearly, and stay under roughly 100 lines of slide content.\n4. Ask the user which preview to keep or what elements to mix.\n\nUse the preset guide in `STYLE_PRESETS.md` when mapping mood to style.\n\n### 4. Build the Presentation\n\nOutput either:\n- `presentation.html`\n- `[presentation-name].html`\n\nUse an `assets\u002F` folder only when the deck contains extracted or user-supplied images.\n\nRequired structure:\n- semantic slide sections\n- a viewport-safe CSS base from `STYLE_PRESETS.md`\n- CSS custom properties for theme values\n- a presentation controller class for keyboard, wheel, and touch navigation\n- Intersection Observer for reveal animations\n- reduced-motion support\n\n### 5. Enforce Viewport Fit\n\nTreat this as a hard gate.\n\nRules:\n- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`\n- all type and spacing must scale with `clamp()`\n- when content does not fit, split into multiple slides\n- never solve overflow by shrinking text below readable sizes\n- never allow scrollbars inside a slide\n\nUse the density limits and mandatory CSS block in `STYLE_PRESETS.md`.\n\n### 6. Validate\n\nCheck the finished deck at these sizes:\n- 1920x1080\n- 1280x720\n- 768x1024\n- 375x667\n- 667x375\n\nIf browser automation is available, use it to verify no slide overflows and that keyboard navigation works.\n\n### 7. Deliver\n\nAt handoff:\n- delete temporary preview files unless the user wants to keep them\n- open the deck with the platform-appropriate opener when useful\n- summarize file path, preset used, slide count, and easy theme customization points\n\nUse the correct opener for the current OS:\n- macOS: `open file.html`\n- Linux: `xdg-open file.html`\n- Windows: `start \"\" file.html`\n\n## PPT \u002F PPTX Conversion\n\nFor PowerPoint conversion:\n1. Prefer `python3` with `python-pptx` to extract text, images, and notes.\n2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual\u002Fexport-based workflow.\n3. Preserve slide order, speaker notes, and extracted assets.\n4. After extraction, run the same style-selection workflow as a new presentation.\n\nKeep conversion cross-platform. Do not rely on macOS-only tools when Python can do the job.\n\n## Implementation Requirements\n\n### HTML \u002F CSS\n\n- Use inline CSS and JS unless the user explicitly wants a multi-file project.\n- Fonts may come from Google Fonts or Fontshare.\n- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.\n- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.\n\n### JavaScript\n\nInclude:\n- keyboard navigation\n- touch \u002F swipe navigation\n- mouse wheel navigation\n- progress indicator or slide index\n- reveal-on-enter animation triggers\n\n### Accessibility\n\n- use semantic structure (`main`, `section`, `nav`)\n- keep contrast readable\n- support keyboard-only navigation\n- respect `prefers-reduced-motion`\n\n## Content Density Limits\n\nUse these maxima unless the user explicitly asks for denser slides and readability still holds:\n\n| Slide type | Limit |\n|------------|-------|\n| Title | 1 heading + 1 subtitle + optional tagline |\n| Content | 1 heading + 4-6 bullets or 2 short paragraphs |\n| Feature grid | 6 cards max |\n| Code | 8-10 lines max |\n| Quote | 1 quote + attribution |\n| Image | 1 image constrained by viewport |\n\n## Anti-Patterns\n\n- generic startup gradients with no visual identity\n- system-font decks unless intentionally editorial\n- long bullet walls\n- code blocks that need scrolling\n- fixed-height content boxes that break on short screens\n- invalid negated CSS functions like `-clamp(...)`\n\n## Related ECC Skills\n\n- `frontend-patterns` for component and interaction patterns around the deck\n- `liquid-glass-design` when a presentation intentionally borrows Apple glass aesthetics\n- `e2e-testing` if you need automated browser verification for the final deck\n\n## Deliverable Checklist\n\n- presentation runs from a local file in a browser\n- every slide fits the viewport without scrolling\n- style is distinctive and intentional\n- animation is meaningful, not noisy\n- reduced motion is respected\n- file paths and customization points are explained at handoff\n",{"name":5,"origin":51,"description":7},"ECC","main","7b610356e36623652299fa2acb477ff821b1d920","upstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ffrontend-slides",0,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fo-abdelmaksoud\u002F","Full-Stack Engineer | AI Systems Architect | Building autonomous multi-agent systems","2026-03-08 21:12:53",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add oabdelmaksoud\u002FSuperClaw --skill frontend-slides",{"tool":67,"command":68},"bunx","bunx skills add oabdelmaksoud\u002FSuperClaw --skill frontend-slides",{"tool":70,"command":71},"pnpm","pnpm dlx skills add oabdelmaksoud\u002FSuperClaw --skill frontend-slides","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ffrontend-slides\u002FSKILL.md",true,[75],{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"STYLE_PRESETS.md","REFERENCE","参考文档",9145,"https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ffrontend-slides\u002FSTYLE_PRESETS.md",[82,100,114,144,170,189],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":91,"publishedAt":46},"01M6D88QCPTBZVCRED0NZ1Y8K8","visa-doc-translate","Translate visa application documents (images) to English and create a bilingual PDF with original and translation","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fvisa-doc-translate\u002FSKILL.md",[88],{"categoryNo":89,"categoryName":90,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",[92,93,94,95,96,42,97,98,99],"translate","doc","visa doc translate","translation","application","images","PDF","documents",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":46},"01M6D88NBM95T3TFM50CYYAP65","verification-loop","A comprehensive verification system for Claude Code sessions.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fverification-loop\u002FSKILL.md",[],[107,108,109,110,111,112,113],"verification","loop","verification loop","sessions","code","claude code sessions","system",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":131,"publishedAt":46},"01M6D88JFZ2P996GVRHJNSZSTM","tdd-workflow","Use this skill when writing new features, fixing bugs, or refactoring code. Enforces test-driven development with 80%+ coverage including unit, integration, and E2E tests.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Ftdd-workflow\u002FSKILL.md",[120,123,126],{"categoryNo":121,"categoryName":122,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":124,"categoryName":125,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":127,"categoryName":128,"taxonomyType":129,"taxonomyTypeDesc":130},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[132,133,134,135,136,137,111,138,38,139,140,141,142,143],"tdd","workflow","tdd workflow","e2e tests","e2e","integration","development","test","refactoring","coverage","tests","writing",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":150,"publishedAt":46},"01M6D88FTHRRSVJMXF2G7MQAK3","swiftui-patterns","SwiftUI architecture patterns, state management with @Observable, view composition, navigation, performance optimization, and modern iOS\u002FmacOS UI best practices.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswiftui-patterns\u002FSKILL.md",[],[151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169],"patterns","swiftui","swiftui patterns","architecture","macos","performance","state management","best practices","state","ui","Optimization","ios","architecture patterns","Composition","performance optimization","view","management","swiftui architecture","navigation",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":177,"publishedAt":46},"01M6D88D527QTQT9DKHTRFN6EA","swift-protocol-di-testing","Protocol-based dependency injection for testable Swift code — mock file system, network, and external APIs using focused protocols and Swift Testing.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-protocol-di-testing\u002FSKILL.md",[176],{"categoryNo":121,"categoryName":122,"taxonomyType":21,"taxonomyTypeDesc":22},[178,179,180,181,111,182,183,184,185,113,186,187,188],"swift protocol di testing","protocol","swift","testing","protocols","file","network","injection","dependency","swift testing","dependency injection",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":195,"publishedAt":46},"01M6D88AJW8H2QNWSW5ZY82R43","swift-concurrency-6-2","Swift 6.2 Approachable Concurrency — single-threaded by default, @concurrent for explicit background offloading, isolated conformances for main actor types.","https:\u002F\u002Fgithub.com\u002Foabdelmaksoud\u002FSuperClaw\u002Fblob\u002Fmain\u002Fupstream-sync\u002Fwork\u002Fecc\u002Fskills\u002Fswift-concurrency-6-2\u002FSKILL.md",[],[196,197,180,198,199,52],"concurrency","swift concurrency","swift concurrency 6 2","default"]