{
  "schemaVersion": "1.0",
  "item": {
    "slug": "frontend-slides",
    "name": "Frontend Slides",
    "source": "tencent",
    "type": "skill",
    "category": "效率提升",
    "sourceUrl": "https://clawhub.ai/ken0122/frontend-slides",
    "canonicalUrl": "https://clawhub.ai/ken0122/frontend-slides",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/frontend-slides",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-slides",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "_meta.json",
      "README.md",
      "SKILL.md",
      "REVIEW.md",
      "STYLE_PRESETS.md",
      "reference/viewport-and-base.css"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/frontend-slides"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/frontend-slides",
    "agentPageUrl": "https://openagent3.xyz/skills/frontend-slides/agent",
    "manifestUrl": "https://openagent3.xyz/skills/frontend-slides/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/frontend-slides/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Frontend Slides Skill",
        "body": "Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration (\"show, don't tell\"), then generates production-quality slide decks.\n\nReference files: When generating CSS, image processing, PPT extraction, HTML structure, edit button, or animation code, read the corresponding file under reference/ (and STYLE_PRESETS.md for presets and CSS Gotchas) so output is correct and complete."
      },
      {
        "title": "1. Visual Style & Material",
        "body": "Principle: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.\n\nStyle PositionUse CasesCore CharacteristicsFuture & DepthFrontier exploration, tech product launchesFrosted glass + dark mode, halos and transparency for layeringEfficiency & SpeedProfessional tools, data dashboardsClean flat style + Bento UI, clear boundaries, modularTrust & ProfessionalFinance, formal presentations, enterprise solutionsSwiss minimalism, generous whitespace, relies on typography and strict gridsCare & ResonanceHumanities, lifestyle, brand storiesLow-saturation natural colors + extreme rounding, ultra-soft diffuse shadowsImmersion & ExpressionEntertainment, narrative, creative showcasesSkeuomorphic materials + high-contrast emotional colors, breaks conventional grids\n\nStyle Selection Rules:\n\nSolution deck / presales proposal → Trust & Professional (Swiss Modern) or Efficiency & Speed (Bento UI)\nProduct launch / tech showcase → Future & Depth (Dark Botanical / Electric Studio)\nBrand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial)\nCreative proposal / marketing campaign → Immersion & Expression (Neon Cyber / Creative Voltage)"
      },
      {
        "title": "2. Spatial & Typography Organization",
        "body": "Density Hierarchy: Density is inversely proportional to importance. Core focus areas need low density / large margins. Data lists need high density / small margins.\nTypography System:\n\nPrefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans)\nEstablish significant weight and size contrast between headings and body\nBody line-height: leading-[1.5] or leading-[1.6] for visual breathability\n\n\nFont Size Constraints:\n\nMinimum readable size: 12px (annotations only)\nStandard body: 14px/16px\nHeadings use clamp() for responsive scaling"
      },
      {
        "title": "3. Affordance & Resilience",
        "body": "Although the output is static HTML, when handling multiple similar components (lists, navigation, card groups), you must hardcode and render different interaction states within the same container to exhaustively show the component's full lifecycle.\n\n⚠️ Warning: Do not rely solely on Tailwind's hover: pseudo-class for interactions. You must directly change the base class of specific items to make states simultaneously visible in static screenshots!\nExample: In a card group, first card uses default state, second card uses bg-white/10 to simulate hover state, third card uses border-cyan-400 to simulate selected state"
      },
      {
        "title": "4. System Integrity Constraints",
        "body": "All design decisions must map to the following limited variable set (no odd numbers, decimals, or random values allowed):\n\nSystemConstraintsColor SystemPrimary color defines brand; complementary color for strong guidance; analogous colors for soft guidance. No arbitrary colorsSpatial Spacing (8-Point Grid)Spacing and padding limited to: 8 / 12 / 16 / 20 / 24 / 32 / 40 (strictly apply to gap and padding)Corner RadiusChoose based on style, default starts at rounded-[12px]. Care style can use rounded-[24px] or rounded-fullSize MinimumsMinimum click hotspot 44px; minimum readable size 12px; standard body 14px/16pxShadow ControlMust use diffuse lighting like shadow-[0_10px_30px_rgba(0,0,0,0.08)], no harsh shadows"
      },
      {
        "title": "5. 🌀 Emerging Design Trends 2026",
        "body": "Integrate the following four trends organically into presentation design. Select 1-2 dominant trends based on content theme.\n\nTrend 1: Ghostly Agency\n\nCore: Agentic UX — The interface acts like a translucent butler, preparing everything before the user asks\n\nDesign StrategyImplementationUse CasesPredictive PresenceProgressive content reveal (.reveal animations trigger in stages)AI products, automation services, intelligent assistantsInvisible ButlerTranslucent elements + subtle floating animations (opacity: 0.6~0.8, animation: float 3s ease-in-out)Backend systems, data dashboards, settings interfacesIntent VisualizationUse halos/particles to suggest \"thinking\" (box-shadow pulse animations)AI-generated content, smart recommendations\n\nCSS Prompt Examples:\n\n/* Ghostly Float */\n@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }\n.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }\n\n/* Predictive Halo */\n@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); } 50% { box-shadow: 0 0 40px rgba(0,212,255,0.6); } }\n.agentic-hint { animation: pulse-glow 2s ease-in-out infinite; }\n\n趋势二：粗砺真实 (The Grain of Truth)\n\n核心：Imperfect & Organic — 反秩序审美，有瑕疵的真实感\n\n设计策略实现方式适用场景数字褶皱SVG 噪点纹理叠加 (background-image: url(\"data:image/svg+xml,...\") 含 <feTurbulence>)创意品牌、独立工作室、手作品牌有机排版轻微旋转 (transform: rotate(-1deg~2deg)), 非严格对齐艺术展览、音乐活动、个人作品集触觉质感颗粒感背景 + 不规则边框 (border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%)生活方式、食品、时尚\n\nCSS Prompt Examples:\n\n/* Grain Texture Background */\n.grain-overlay { background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E\"); }\n\n/* Organic Shape */\n.organic-shape { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: rotate(-1.5deg); }\n\nTrend 3: Liminal Multimodality\n\nCore: Multimodal Seamlessness — Experience flows between voice, gesture, eye tracking, and touch\n\nDesign StrategyImplementationUse CasesSensory FlowWave animations suggest voice interaction (animation: wave 1.5s ease-in-out)Voice assistants, podcasts, audio productsSpatial Hints3D perspective + parallax scroll hints (perspective: 1000px; transform: translateZ())AR/VR, spatial computing, metaverseMultimodal IconsVisual elements of sound waves, gesture outlines, eye tracking pathsCross-device experiences, seamless collaboration tools\n\nCSS Prompt Examples:\n\n/* Voice Wave */\n@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 24px; } }\n.voice-wave span { display: inline-block; width: 4px; background: #00d4ff; animation: wave 1s ease-in-out infinite; }\n.voice-wave span:nth-child(2) { animation-delay: 0.1s; }\n.voice-wave span:nth-child(3) { animation-delay: 0.2s; }\n\n/* Spatial Perspective */\n.liminal-space { perspective: 1000px; transform-style: preserve-3d; }\n.depth-layer { transform: translateZ(50px); }\n\nTrend 4: Emotional Sovereignty\n\nCore: Hyper-Personalized Ethical — Design for \"resonance\" rather than \"retention\"\n\nDesign StrategyImplementationUse CasesTransparent Explanation\"Why this recommendation\" tooltip (data-explanation shows on hover)Healthcare, education, finance, AI recommendationsUser ConfirmationClear \"Accept/Reject\" options, not default checkboxesPrivacy settings, data collection, personalization optionsPersonalized VisualsDynamic color adjustment based on content theme (--user-theme CSS variables)Personal dashboards, learning platforms, health apps\n\nCSS Prompt Examples:\n\n/* Explanatory Hint */\n.explainable-ui { position: relative; }\n.explainable-ui::after {\n  content: attr(data-explanation);\n  position: absolute; bottom: 100%; left: 0;\n  background: rgba(0,0,0,0.9); color: #fff;\n  padding: 8px 12px; border-radius: 8px;\n  font-size: 12px; max-width: 280px;\n  opacity: 0; transform: translateY(8px); transition: all 0.2s;\n}\n.explainable-ui:hover::after { opacity: 1; transform: translateY(0); }\n\n/* Personalized Theme Variables */\n:root { --user-primary: #00d4ff; --user-secondary: #7b2fff; --user-accent: #00ffa3; }\n.personalized-card { border-left: 4px solid var(--user-primary); }"
      },
      {
        "title": "Trend Application Decision Tree",
        "body": "User Need → Select Dominant Trends\n\nAI / Automation Products → Ghostly Agency + Emotional Sovereignty\nCreative / Art Content → Grain of Truth + Immersion & Expression\nTech / Frontier Launches → Ghostly Agency + Liminal Multimodality\nHumanities / Lifestyle → Grain of Truth + Care & Resonance\nEnterprise / Professional → Emotional Sovereignty + Trust & Professional\n\n⚠️ Notes:\n\nApply maximum 2 trends per presentation to avoid visual chaos\nTrends serve content — never use trends for trends' sake\nExplain trend options to users during Style Discovery phase"
      },
      {
        "title": "CRITICAL: Viewport Fitting Requirements",
        "body": "Mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size."
      },
      {
        "title": "The Golden Rule",
        "body": "Each slide = exactly one viewport height (100vh / 100dvh).\nContent overflows? → Split into multiple slides or reduce content. Never scroll within a slide."
      },
      {
        "title": "Content Density Limits (per slide)",
        "body": "Slide TypeMaximum ContentTitle slide1 heading + 1 subtitle + optional taglineContent slide1 heading + 4–6 bullet points OR 1 heading + 2 paragraphsFeature grid1 heading + 6 cards max (2×3 or 3×2)Code slide1 heading + 8–10 lines of codeQuote slide1 quote (max 3 lines) + attributionImage slide1 heading + 1 image (max 60vh height)\n\nRequired base CSS: Include the full mandatory base styles in every presentation. Copy from reference/viewport-and-base.css (or inline equivalent). It covers: html/body lock, .slide = 100vh/100dvh + overflow hidden, .slide-content, :root clamp() variables, cards/lists/grids/images, responsive breakpoints (700px, 600px, 500px height; 600px width), and reduced-motion."
      },
      {
        "title": "Overflow Prevention Checklist",
        "body": "Before generating: (1) Every .slide has height: 100vh; height: 100dvh; overflow: hidden; (2) All font sizes and spacing use clamp() or viewport units (3) Content containers have max-height (4) Images max-height: min(50vh, 400px) or similar (5) Grids use auto-fit + minmax() (6) Breakpoints for heights 700/600/500 (7) No fixed pixel heights on content (8) Per-slide content within density limits."
      },
      {
        "title": "When Content Doesn't Fit",
        "body": "DO: Split into multiple slides; reduce bullets (max 5–6); shorten text; smaller code snippets; \"continued\" slide; when adding images, move image to new slide or reduce other content first. DON'T: Shrink fonts below readable; remove padding; allow scrolling; cram."
      },
      {
        "title": "Testing Viewport Fit",
        "body": "Recommend testing at: Desktop 1920×1080, 1440×900, 1280×720; Tablet 1024×768, 768×1024; Mobile 375×667, 414×896; Landscape 667×375, 896×414."
      },
      {
        "title": "Phase 0: Detect Mode",
        "body": "Mode A — New Presentation: User wants slides from scratch → Phase 1 (Content Discovery).\nMode B — PPT Conversion: User has .ppt/.pptx → Phase 4 (PPT Extraction).\nMode C — Existing HTML Enhancement: Read file, enhance; always maintain viewport fitting."
      },
      {
        "title": "Mode C: Modification Rules",
        "body": "Before adding content: check current slide against density limits. Images: max min(50vh, 400px); if slide already full → split into two slides (e.g. new slide for image). Text: max 4–6 bullets or 2 paragraphs per slide; if over → split or continuation slide. After any change: verify .slide has overflow: hidden, new elements use clamp(), new images have viewport max-height, density respected. If modifications cause overflow → automatically split and tell user. Test at 1280×720, 768×1024, 375×667."
      },
      {
        "title": "Solution PPT (解决方案 PPT) — 售前/销售专用",
        "body": "When purpose is solution deck / 解决方案汇报 / 售前方案 / 投标演示, use this default outline (10–20 slides): (1) Title (2) Agenda (3) Background & objectives (4) Pain points & challenges (5) Solution overview (6–8) Capabilities / product value (9) Case study (10) Implementation / roadmap (11) Next steps & contact. Adjust as needed; respect content density. Style: Prefer Swiss Modern, Electric Studio, Dark Botanical, Notebook Tabs. Avoid highly playful styles unless asked."
      },
      {
        "title": "Phase 1: Content Discovery (New Presentations)",
        "body": "If AskUserQuestion is available: Collect in one form. If not (e.g. Cursor): Ask the same questions in conversation, in order, and record answers before Phase 2."
      },
      {
        "title": "Step 1.1: Context + Images (single form or sequence)",
        "body": "Ask these five in one form (AskUserQuestion) or in sequence:\n\nPurpose: What is this presentation for? — Solution deck (解决方案 PPT) | Pitch deck | Teaching/Tutorial | Conference talk | Internal presentation\nLength: Approximately how many slides? — Short (5–10) | Medium (10–20) | Long (20+)\nContent: Do you have content ready or need help? — I have all content ready | I have rough notes | I have topic only\nImages: No images | ./assets | Other (let user type/paste folder path, e.g. ~/Desktop/screenshots)\nEditing: Do you need to edit text in the browser after generation? — Yes (in-browser edit, auto-save, export) | No\n\nRemember the editing choice — it controls whether Phase 3 includes the edit button (see reference/edit-button-implementation.md).\n\nGet the content: If user said \"I have all content ready\" → ask them to share it (paste text, bullet points, or path to file). If \"I have rough notes\" or \"I have topic only\" → help structure an outline, then ask for or draft the slide-by-slide content. You need concrete titles and body content before Phase 2."
      },
      {
        "title": "Step 1.2: Image Evaluation (if user provided images)",
        "body": "If \"No images\" → skip image pipeline; use text + CSS visuals. If folder provided: (1) List image files (2) Read/view each (3) Mark USABLE / NOT USABLE with reason; note content signal, shape, dominant colors (4) Propose slide outline with image assignments (5) Confirm outline via AskUserQuestion or conversation: \"Looks good\" | \"Adjust images\" | \"Adjust outline\". Co-design: usable images shape the outline from the start. Logo in previews: if USABLE logo exists, embed (e.g. base64) in the 3 style previews so user sees their brand in each style."
      },
      {
        "title": "Phase 2: Style Discovery",
        "body": "Option A — Guided: Ask mood (Impressed/Confident | Excited/Energized | Calm/Focused | Inspired/Moved; multiSelect up to 2). Create directory .claude-design/slide-previews/ if needed. Generate 3 style previews there (style-a.html, style-b.html, style-c.html): single title slide each, self-contained, ~50–100 lines. Pick 3 presets by mood (e.g. Impressed → Bold Signal, Electric Studio, Dark Botanical). Never use: purple gradients on white, Inter/Roboto, standard blue, predictable hero. Use: distinctive fonts (Clash Display, Satoshi, Cormorant Garamond, DM Sans), cohesive colors, atmospheric backgrounds, signature animation. Present previews; user picks Style A/B/C or \"Mix elements\". Option B — Direct: Ask \"Which preset?\" and show the preset list (below or from STYLE_PRESETS.md). User picks by name → skip to Phase 3.\n\nPresets (see STYLE_PRESETS.md for full list): Bold Signal | Electric Studio | Creative Voltage | Dark Botanical | Notebook Tabs | Pastel Geometry | Split Pastel | Vintage Editorial | Neon Cyber | Terminal Green | Swiss Modern | Paper & Ink. Mood → preset mapping: Impressed/Confident → Bold Signal, Electric Studio, Dark Botanical; Excited/Energized → Creative Voltage, Neon Cyber, Split Pastel; Calm/Focused → Notebook Tabs, Paper & Ink, Swiss Modern; Inspired/Moved → Dark Botanical, Vintage Editorial, Pastel Geometry."
      },
      {
        "title": "Phase 3: Generate Presentation",
        "body": "Use content from Phase 1 and style from Phase 2. If no images, generate text-only with CSS visuals. If images: Image pipeline — process before HTML. Operations: See reference/image-processing.py for crop_circle, resize_max, add_padding. Dependency: pip install Pillow. Never repeat same image (except logo on title+closing); add CSS framing (border/glow) when image clashes with style. Save processed images to a new filename (e.g. logo_round.png, screenshot_processed.png); never overwrite originals. Reference in HTML with relative paths (e.g. assets/logo_round.png). Image CSS: .slide-image max-height min(50vh, 400px); .screenshot border+shadow; .logo max-height min(30vh, 200px). Adapt border/shadow to style accent. Placement: title = logo centered; feature = screenshot one side, text other; full-bleed or inline as needed.\n\nFile structure: Single: presentation.html + assets/. Multiple: [name].html + [name]-assets/.\n\nHTML architecture: Follow reference/html-architecture.md. Include mandatory viewport base CSS, theme variables (clamp() for all typography/spacing), .slide + .slide-content, responsive breakpoints, .reveal + .visible for animations.\n\nRequired JS: Implement SlidePresentation: keyboard (arrows, space), touch/swipe, mouse wheel; progress bar and navigation dots (click dot to jump to slide); Intersection Observer to add .visible when a slide enters the viewport so .reveal animations run. Optional: cursor trail, particles, parallax, tilt, inline editing. Edit button (only if user opted Yes): See reference/edit-button-implementation.md. Use JS hover with delay (no CSS ~ sibling); hotzone + E key + click to toggle.\n\nCode quality: Clear section comments; semantic HTML; keyboard nav; ARIA where needed; reduced motion. CSS negation: Use calc(-1 * clamp(...)), never -clamp(). See STYLE_PRESETS.md \"CSS Gotchas\". Viewport: always respect density and overflow rules above."
      },
      {
        "title": "Phase 4: PPT Conversion",
        "body": "Extract: Run the logic from reference/ppt-extract.py: extract_pptx(user_pptx_path, output_dir). Dependency: pip install python-pptx. Use an output_dir (e.g. current directory or a new folder) so images are saved to output_dir/assets/ and the future HTML can use assets/ as sibling. Returns slides_data (per slide: title, content[], images[], notes).\nConfirm: Present extracted slide list to user; ask to proceed to style selection.\nStyle: Phase 2 (Style Discovery) with extracted content in mind.\nGenerate: Build the HTML presentation in the same output_dir used in step 1 so that assets/ is next to the .html file. Convert to chosen style; preserve text, images (reference from assets/), slide order, speaker notes (as HTML comments or separate file)."
      },
      {
        "title": "Phase 5: Delivery",
        "body": "Delete .claude-design/slide-previews/ if present.\nOpen presentation in browser (e.g. open [filename].html).\nSummary: file, style, slide count; navigation (arrows, space, scroll, dots); customization (:root, fonts, .reveal). If inline editing: hover top-left or E to edit; Ctrl+S or \"Save file\"."
      },
      {
        "title": "Style Reference: Effect → Feeling",
        "body": "Dramatic/Cinematic: Slow fades, scale transitions, dark + spotlight, parallax, full-bleed.\nTechy/Futuristic: Neon glow, particles, grid, monospace accents, cyan/magenta palette.\nPlayful/Friendly: Bouncy easing, rounded, pastel/bright, floating animations.\nProfessional/Corporate: Subtle fast animations (200–300ms), clean sans, navy/slate, minimal decor.\nCalm/Minimal: Slow subtle motion, whitespace, muted palette, serif, content-focused.\nEditorial: Strong type hierarchy, pull quotes, image-text interplay, serif headline + sans body.\n\nAnimation patterns (entrance, backgrounds, interactive): See reference/animation-patterns.md."
      },
      {
        "title": "Troubleshooting",
        "body": "Fonts not loading: Check Fontshare/Google URL; font names in CSS.\nAnimations not triggering: Intersection Observer; .visible class.\nScroll snap: scroll-snap-type on html; scroll-snap-align on each .slide.\nMobile: Disable heavy effects at 768px; test touch; reduce particles.\nPerformance: Use will-change sparingly; prefer transform/opacity; throttle scroll/mousemove."
      },
      {
        "title": "Example Flows",
        "body": "New presentation: User wants pitch/solution deck → ask purpose, length, content, images, editing → (if images) evaluate, outline, confirm → ask vibe → 3 previews → user picks style → (if images) run Pillow ops → generate HTML → open in browser.\n\nPPT conversion: User has .pptx → extract with ppt-extract.py → confirm content → style selection → generate HTML with assets."
      }
    ],
    "body": "Frontend Slides Skill\n\nCreate zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration (\"show, don't tell\"), then generates production-quality slide decks.\n\nReference files: When generating CSS, image processing, PPT extraction, HTML structure, edit button, or animation code, read the corresponding file under reference/ (and STYLE_PRESETS.md for presets and CSS Gotchas) so output is correct and complete.\n\n🧠 Core Design Philosophy\n1. Visual Style & Material\n\nPrinciple: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.\n\nStyle Position\tUse Cases\tCore Characteristics\nFuture & Depth\tFrontier exploration, tech product launches\tFrosted glass + dark mode, halos and transparency for layering\nEfficiency & Speed\tProfessional tools, data dashboards\tClean flat style + Bento UI, clear boundaries, modular\nTrust & Professional\tFinance, formal presentations, enterprise solutions\tSwiss minimalism, generous whitespace, relies on typography and strict grids\nCare & Resonance\tHumanities, lifestyle, brand stories\tLow-saturation natural colors + extreme rounding, ultra-soft diffuse shadows\nImmersion & Expression\tEntertainment, narrative, creative showcases\tSkeuomorphic materials + high-contrast emotional colors, breaks conventional grids\n\nStyle Selection Rules:\n\nSolution deck / presales proposal → Trust & Professional (Swiss Modern) or Efficiency & Speed (Bento UI)\nProduct launch / tech showcase → Future & Depth (Dark Botanical / Electric Studio)\nBrand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial)\nCreative proposal / marketing campaign → Immersion & Expression (Neon Cyber / Creative Voltage)\n2. Spatial & Typography Organization\nDensity Hierarchy: Density is inversely proportional to importance. Core focus areas need low density / large margins. Data lists need high density / small margins.\nTypography System:\nPrefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans)\nEstablish significant weight and size contrast between headings and body\nBody line-height: leading-[1.5] or leading-[1.6] for visual breathability\nFont Size Constraints:\nMinimum readable size: 12px (annotations only)\nStandard body: 14px/16px\nHeadings use clamp() for responsive scaling\n3. Affordance & Resilience\n\nAlthough the output is static HTML, when handling multiple similar components (lists, navigation, card groups), you must hardcode and render different interaction states within the same container to exhaustively show the component's full lifecycle.\n\n⚠️ Warning: Do not rely solely on Tailwind's hover: pseudo-class for interactions. You must directly change the base class of specific items to make states simultaneously visible in static screenshots!\nExample: In a card group, first card uses default state, second card uses bg-white/10 to simulate hover state, third card uses border-cyan-400 to simulate selected state\n4. System Integrity Constraints\n\nAll design decisions must map to the following limited variable set (no odd numbers, decimals, or random values allowed):\n\nSystem\tConstraints\nColor System\tPrimary color defines brand; complementary color for strong guidance; analogous colors for soft guidance. No arbitrary colors\nSpatial Spacing (8-Point Grid)\tSpacing and padding limited to: 8 / 12 / 16 / 20 / 24 / 32 / 40 (strictly apply to gap and padding)\nCorner Radius\tChoose based on style, default starts at rounded-[12px]. Care style can use rounded-[24px] or rounded-full\nSize Minimums\tMinimum click hotspot 44px; minimum readable size 12px; standard body 14px/16px\nShadow Control\tMust use diffuse lighting like shadow-[0_10px_30px_rgba(0,0,0,0.08)], no harsh shadows\n5. 🌀 Emerging Design Trends 2026\n\nIntegrate the following four trends organically into presentation design. Select 1-2 dominant trends based on content theme.\n\nTrend 1: Ghostly Agency\n\nCore: Agentic UX — The interface acts like a translucent butler, preparing everything before the user asks\n\nDesign Strategy\tImplementation\tUse Cases\nPredictive Presence\tProgressive content reveal (.reveal animations trigger in stages)\tAI products, automation services, intelligent assistants\nInvisible Butler\tTranslucent elements + subtle floating animations (opacity: 0.6~0.8, animation: float 3s ease-in-out)\tBackend systems, data dashboards, settings interfaces\nIntent Visualization\tUse halos/particles to suggest \"thinking\" (box-shadow pulse animations)\tAI-generated content, smart recommendations\n\nCSS Prompt Examples:\n\n/* Ghostly Float */\n@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }\n.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }\n\n/* Predictive Halo */\n@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); } 50% { box-shadow: 0 0 40px rgba(0,212,255,0.6); } }\n.agentic-hint { animation: pulse-glow 2s ease-in-out infinite; }\n\n趋势二：粗砺真实 (The Grain of Truth)\n\n核心：Imperfect & Organic — 反秩序审美，有瑕疵的真实感\n\n设计策略\t实现方式\t适用场景\n数字褶皱\tSVG 噪点纹理叠加 (background-image: url(\"data:image/svg+xml,...\") 含 <feTurbulence>)\t创意品牌、独立工作室、手作品牌\n有机排版\t轻微旋转 (transform: rotate(-1deg~2deg)), 非严格对齐\t艺术展览、音乐活动、个人作品集\n触觉质感\t颗粒感背景 + 不规则边框 (border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%)\t生活方式、食品、时尚\n\nCSS Prompt Examples:\n\n/* Grain Texture Background */\n.grain-overlay { background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E\"); }\n\n/* Organic Shape */\n.organic-shape { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: rotate(-1.5deg); }\n\nTrend 3: Liminal Multimodality\n\nCore: Multimodal Seamlessness — Experience flows between voice, gesture, eye tracking, and touch\n\nDesign Strategy\tImplementation\tUse Cases\nSensory Flow\tWave animations suggest voice interaction (animation: wave 1.5s ease-in-out)\tVoice assistants, podcasts, audio products\nSpatial Hints\t3D perspective + parallax scroll hints (perspective: 1000px; transform: translateZ())\tAR/VR, spatial computing, metaverse\nMultimodal Icons\tVisual elements of sound waves, gesture outlines, eye tracking paths\tCross-device experiences, seamless collaboration tools\n\nCSS Prompt Examples:\n\n/* Voice Wave */\n@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 24px; } }\n.voice-wave span { display: inline-block; width: 4px; background: #00d4ff; animation: wave 1s ease-in-out infinite; }\n.voice-wave span:nth-child(2) { animation-delay: 0.1s; }\n.voice-wave span:nth-child(3) { animation-delay: 0.2s; }\n\n/* Spatial Perspective */\n.liminal-space { perspective: 1000px; transform-style: preserve-3d; }\n.depth-layer { transform: translateZ(50px); }\n\nTrend 4: Emotional Sovereignty\n\nCore: Hyper-Personalized Ethical — Design for \"resonance\" rather than \"retention\"\n\nDesign Strategy\tImplementation\tUse Cases\nTransparent Explanation\t\"Why this recommendation\" tooltip (data-explanation shows on hover)\tHealthcare, education, finance, AI recommendations\nUser Confirmation\tClear \"Accept/Reject\" options, not default checkboxes\tPrivacy settings, data collection, personalization options\nPersonalized Visuals\tDynamic color adjustment based on content theme (--user-theme CSS variables)\tPersonal dashboards, learning platforms, health apps\n\nCSS Prompt Examples:\n\n/* Explanatory Hint */\n.explainable-ui { position: relative; }\n.explainable-ui::after {\n  content: attr(data-explanation);\n  position: absolute; bottom: 100%; left: 0;\n  background: rgba(0,0,0,0.9); color: #fff;\n  padding: 8px 12px; border-radius: 8px;\n  font-size: 12px; max-width: 280px;\n  opacity: 0; transform: translateY(8px); transition: all 0.2s;\n}\n.explainable-ui:hover::after { opacity: 1; transform: translateY(0); }\n\n/* Personalized Theme Variables */\n:root { --user-primary: #00d4ff; --user-secondary: #7b2fff; --user-accent: #00ffa3; }\n.personalized-card { border-left: 4px solid var(--user-primary); }\n\nTrend Application Decision Tree\nUser Need → Select Dominant Trends\n\nAI / Automation Products → Ghostly Agency + Emotional Sovereignty\nCreative / Art Content → Grain of Truth + Immersion & Expression\nTech / Frontier Launches → Ghostly Agency + Liminal Multimodality\nHumanities / Lifestyle → Grain of Truth + Care & Resonance\nEnterprise / Professional → Emotional Sovereignty + Trust & Professional\n\n\n⚠️ Notes:\n\nApply maximum 2 trends per presentation to avoid visual chaos\nTrends serve content — never use trends for trends' sake\nExplain trend options to users during Style Discovery phase\nCRITICAL: Viewport Fitting Requirements\n\nMandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.\n\nThe Golden Rule\nEach slide = exactly one viewport height (100vh / 100dvh).\nContent overflows? → Split into multiple slides or reduce content. Never scroll within a slide.\nContent Density Limits (per slide)\nSlide Type\tMaximum Content\nTitle slide\t1 heading + 1 subtitle + optional tagline\nContent slide\t1 heading + 4–6 bullet points OR 1 heading + 2 paragraphs\nFeature grid\t1 heading + 6 cards max (2×3 or 3×2)\nCode slide\t1 heading + 8–10 lines of code\nQuote slide\t1 quote (max 3 lines) + attribution\nImage slide\t1 heading + 1 image (max 60vh height)\n\nRequired base CSS: Include the full mandatory base styles in every presentation. Copy from reference/viewport-and-base.css (or inline equivalent). It covers: html/body lock, .slide = 100vh/100dvh + overflow hidden, .slide-content, :root clamp() variables, cards/lists/grids/images, responsive breakpoints (700px, 600px, 500px height; 600px width), and reduced-motion.\n\nOverflow Prevention Checklist\n\nBefore generating: (1) Every .slide has height: 100vh; height: 100dvh; overflow: hidden; (2) All font sizes and spacing use clamp() or viewport units (3) Content containers have max-height (4) Images max-height: min(50vh, 400px) or similar (5) Grids use auto-fit + minmax() (6) Breakpoints for heights 700/600/500 (7) No fixed pixel heights on content (8) Per-slide content within density limits.\n\nWhen Content Doesn't Fit\n\nDO: Split into multiple slides; reduce bullets (max 5–6); shorten text; smaller code snippets; \"continued\" slide; when adding images, move image to new slide or reduce other content first. DON'T: Shrink fonts below readable; remove padding; allow scrolling; cram.\n\nTesting Viewport Fit\n\nRecommend testing at: Desktop 1920×1080, 1440×900, 1280×720; Tablet 1024×768, 768×1024; Mobile 375×667, 414×896; Landscape 667×375, 896×414.\n\nPhase 0: Detect Mode\nMode A — New Presentation: User wants slides from scratch → Phase 1 (Content Discovery).\nMode B — PPT Conversion: User has .ppt/.pptx → Phase 4 (PPT Extraction).\nMode C — Existing HTML Enhancement: Read file, enhance; always maintain viewport fitting.\nMode C: Modification Rules\n\nBefore adding content: check current slide against density limits. Images: max min(50vh, 400px); if slide already full → split into two slides (e.g. new slide for image). Text: max 4–6 bullets or 2 paragraphs per slide; if over → split or continuation slide. After any change: verify .slide has overflow: hidden, new elements use clamp(), new images have viewport max-height, density respected. If modifications cause overflow → automatically split and tell user. Test at 1280×720, 768×1024, 375×667.\n\nSolution PPT (解决方案 PPT) — 售前/销售专用\n\nWhen purpose is solution deck / 解决方案汇报 / 售前方案 / 投标演示, use this default outline (10–20 slides): (1) Title (2) Agenda (3) Background & objectives (4) Pain points & challenges (5) Solution overview (6–8) Capabilities / product value (9) Case study (10) Implementation / roadmap (11) Next steps & contact. Adjust as needed; respect content density. Style: Prefer Swiss Modern, Electric Studio, Dark Botanical, Notebook Tabs. Avoid highly playful styles unless asked.\n\nPhase 1: Content Discovery (New Presentations)\n\nIf AskUserQuestion is available: Collect in one form. If not (e.g. Cursor): Ask the same questions in conversation, in order, and record answers before Phase 2.\n\nStep 1.1: Context + Images (single form or sequence)\n\nAsk these five in one form (AskUserQuestion) or in sequence:\n\nPurpose: What is this presentation for? — Solution deck (解决方案 PPT) | Pitch deck | Teaching/Tutorial | Conference talk | Internal presentation\nLength: Approximately how many slides? — Short (5–10) | Medium (10–20) | Long (20+)\nContent: Do you have content ready or need help? — I have all content ready | I have rough notes | I have topic only\nImages: No images | ./assets | Other (let user type/paste folder path, e.g. ~/Desktop/screenshots)\nEditing: Do you need to edit text in the browser after generation? — Yes (in-browser edit, auto-save, export) | No\n\nRemember the editing choice — it controls whether Phase 3 includes the edit button (see reference/edit-button-implementation.md).\n\nGet the content: If user said \"I have all content ready\" → ask them to share it (paste text, bullet points, or path to file). If \"I have rough notes\" or \"I have topic only\" → help structure an outline, then ask for or draft the slide-by-slide content. You need concrete titles and body content before Phase 2.\n\nStep 1.2: Image Evaluation (if user provided images)\n\nIf \"No images\" → skip image pipeline; use text + CSS visuals. If folder provided: (1) List image files (2) Read/view each (3) Mark USABLE / NOT USABLE with reason; note content signal, shape, dominant colors (4) Propose slide outline with image assignments (5) Confirm outline via AskUserQuestion or conversation: \"Looks good\" | \"Adjust images\" | \"Adjust outline\". Co-design: usable images shape the outline from the start. Logo in previews: if USABLE logo exists, embed (e.g. base64) in the 3 style previews so user sees their brand in each style.\n\nPhase 2: Style Discovery\n\nOption A — Guided: Ask mood (Impressed/Confident | Excited/Energized | Calm/Focused | Inspired/Moved; multiSelect up to 2). Create directory .claude-design/slide-previews/ if needed. Generate 3 style previews there (style-a.html, style-b.html, style-c.html): single title slide each, self-contained, ~50–100 lines. Pick 3 presets by mood (e.g. Impressed → Bold Signal, Electric Studio, Dark Botanical). Never use: purple gradients on white, Inter/Roboto, standard blue, predictable hero. Use: distinctive fonts (Clash Display, Satoshi, Cormorant Garamond, DM Sans), cohesive colors, atmospheric backgrounds, signature animation. Present previews; user picks Style A/B/C or \"Mix elements\". Option B — Direct: Ask \"Which preset?\" and show the preset list (below or from STYLE_PRESETS.md). User picks by name → skip to Phase 3.\n\nPresets (see STYLE_PRESETS.md for full list): Bold Signal | Electric Studio | Creative Voltage | Dark Botanical | Notebook Tabs | Pastel Geometry | Split Pastel | Vintage Editorial | Neon Cyber | Terminal Green | Swiss Modern | Paper & Ink. Mood → preset mapping: Impressed/Confident → Bold Signal, Electric Studio, Dark Botanical; Excited/Energized → Creative Voltage, Neon Cyber, Split Pastel; Calm/Focused → Notebook Tabs, Paper & Ink, Swiss Modern; Inspired/Moved → Dark Botanical, Vintage Editorial, Pastel Geometry.\n\nPhase 3: Generate Presentation\n\nUse content from Phase 1 and style from Phase 2. If no images, generate text-only with CSS visuals. If images: Image pipeline — process before HTML. Operations: See reference/image-processing.py for crop_circle, resize_max, add_padding. Dependency: pip install Pillow. Never repeat same image (except logo on title+closing); add CSS framing (border/glow) when image clashes with style. Save processed images to a new filename (e.g. logo_round.png, screenshot_processed.png); never overwrite originals. Reference in HTML with relative paths (e.g. assets/logo_round.png). Image CSS: .slide-image max-height min(50vh, 400px); .screenshot border+shadow; .logo max-height min(30vh, 200px). Adapt border/shadow to style accent. Placement: title = logo centered; feature = screenshot one side, text other; full-bleed or inline as needed.\n\nFile structure: Single: presentation.html + assets/. Multiple: [name].html + [name]-assets/.\n\nHTML architecture: Follow reference/html-architecture.md. Include mandatory viewport base CSS, theme variables (clamp() for all typography/spacing), .slide + .slide-content, responsive breakpoints, .reveal + .visible for animations.\n\nRequired JS: Implement SlidePresentation: keyboard (arrows, space), touch/swipe, mouse wheel; progress bar and navigation dots (click dot to jump to slide); Intersection Observer to add .visible when a slide enters the viewport so .reveal animations run. Optional: cursor trail, particles, parallax, tilt, inline editing. Edit button (only if user opted Yes): See reference/edit-button-implementation.md. Use JS hover with delay (no CSS ~ sibling); hotzone + E key + click to toggle.\n\nCode quality: Clear section comments; semantic HTML; keyboard nav; ARIA where needed; reduced motion. CSS negation: Use calc(-1 * clamp(...)), never -clamp(). See STYLE_PRESETS.md \"CSS Gotchas\". Viewport: always respect density and overflow rules above.\n\nPhase 4: PPT Conversion\nExtract: Run the logic from reference/ppt-extract.py: extract_pptx(user_pptx_path, output_dir). Dependency: pip install python-pptx. Use an output_dir (e.g. current directory or a new folder) so images are saved to output_dir/assets/ and the future HTML can use assets/ as sibling. Returns slides_data (per slide: title, content[], images[], notes).\nConfirm: Present extracted slide list to user; ask to proceed to style selection.\nStyle: Phase 2 (Style Discovery) with extracted content in mind.\nGenerate: Build the HTML presentation in the same output_dir used in step 1 so that assets/ is next to the .html file. Convert to chosen style; preserve text, images (reference from assets/), slide order, speaker notes (as HTML comments or separate file).\nPhase 5: Delivery\nDelete .claude-design/slide-previews/ if present.\nOpen presentation in browser (e.g. open [filename].html).\nSummary: file, style, slide count; navigation (arrows, space, scroll, dots); customization (:root, fonts, .reveal). If inline editing: hover top-left or E to edit; Ctrl+S or \"Save file\".\nStyle Reference: Effect → Feeling\nDramatic/Cinematic: Slow fades, scale transitions, dark + spotlight, parallax, full-bleed.\nTechy/Futuristic: Neon glow, particles, grid, monospace accents, cyan/magenta palette.\nPlayful/Friendly: Bouncy easing, rounded, pastel/bright, floating animations.\nProfessional/Corporate: Subtle fast animations (200–300ms), clean sans, navy/slate, minimal decor.\nCalm/Minimal: Slow subtle motion, whitespace, muted palette, serif, content-focused.\nEditorial: Strong type hierarchy, pull quotes, image-text interplay, serif headline + sans body.\n\nAnimation patterns (entrance, backgrounds, interactive): See reference/animation-patterns.md.\n\nTroubleshooting\nFonts not loading: Check Fontshare/Google URL; font names in CSS.\nAnimations not triggering: Intersection Observer; .visible class.\nScroll snap: scroll-snap-type on html; scroll-snap-align on each .slide.\nMobile: Disable heavy effects at 768px; test touch; reduce particles.\nPerformance: Use will-change sparingly; prefer transform/opacity; throttle scroll/mousemove.\nExample Flows\n\nNew presentation: User wants pitch/solution deck → ask purpose, length, content, images, editing → (if images) evaluate, outline, confirm → ask vibe → 3 previews → user picks style → (if images) run Pillow ops → generate HTML → open in browser.\n\nPPT conversion: User has .pptx → extract with ppt-extract.py → confirm content → style selection → generate HTML with assets."
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/ken0122/frontend-slides",
    "publisherUrl": "https://clawhub.ai/ken0122/frontend-slides",
    "owner": "ken0122",
    "version": "2.0.2",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/frontend-slides",
    "downloadUrl": "https://openagent3.xyz/downloads/frontend-slides",
    "agentUrl": "https://openagent3.xyz/skills/frontend-slides/agent",
    "manifestUrl": "https://openagent3.xyz/skills/frontend-slides/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/frontend-slides/agent.md"
  }
}