# Send Frontend Slides to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- 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.
## Suggested prompts
### New install

```text
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.
```
### Upgrade existing

```text
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.
```
## Machine-readable fields
```json
{
  "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": {
    "downloadUrl": "/downloads/frontend-slides",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-slides",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "_meta.json",
      "README.md",
      "SKILL.md",
      "REVIEW.md",
      "STYLE_PRESETS.md",
      "reference/viewport-and-base.css"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "slug": "frontend-slides",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-29T23:18:28.229Z",
      "expiresAt": "2026-05-06T23:18:28.229Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-slides",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=frontend-slides",
        "contentDisposition": "attachment; filename=\"frontend-slides-2.0.2.zip\"",
        "redirectLocation": null,
        "bodySnippet": null,
        "slug": "frontend-slides"
      },
      "scope": "item",
      "summary": "Item download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this item.",
      "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."
      ]
    }
  },
  "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"
  }
}
```
## Documentation

### Frontend Slides Skill

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.

Reference 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.

### 1. Visual Style & Material

Principle: Form follows function. All visual decisions (color, layout, material) must serve the user's mental model and business goals.

Style 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

Style Selection Rules:

Solution deck / presales proposal → Trust & Professional (Swiss Modern) or Efficiency & Speed (Bento UI)
Product launch / tech showcase → Future & Depth (Dark Botanical / Electric Studio)
Brand story / humanities content → Care & Resonance (Pastel Geometry / Vintage Editorial)
Creative proposal / marketing campaign → Immersion & Expression (Neon Cyber / Creative Voltage)

### 2. Spatial & Typography Organization

Density Hierarchy: Density is inversely proportional to importance. Core focus areas need low density / large margins. Data lists need high density / small margins.
Typography System:

Prefer modern sans-serif fonts (Clash Display, Satoshi, DM Sans)
Establish significant weight and size contrast between headings and body
Body line-height: leading-[1.5] or leading-[1.6] for visual breathability


Font Size Constraints:

Minimum readable size: 12px (annotations only)
Standard body: 14px/16px
Headings use clamp() for responsive scaling

### 3. Affordance & Resilience

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.

⚠️ 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!
Example: 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

### 4. System Integrity Constraints

All design decisions must map to the following limited variable set (no odd numbers, decimals, or random values allowed):

SystemConstraintsColor 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

### 5. 🌀 Emerging Design Trends 2026

Integrate the following four trends organically into presentation design. Select 1-2 dominant trends based on content theme.

Trend 1: Ghostly Agency

Core: Agentic UX — The interface acts like a translucent butler, preparing everything before the user asks

Design 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

CSS Prompt Examples:

/* Ghostly Float */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ghostly-card { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); animation: float 4s ease-in-out infinite; }

/* Predictive Halo */
@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); } }
.agentic-hint { animation: pulse-glow 2s ease-in-out infinite; }

趋势二：粗砺真实 (The Grain of Truth)

核心：Imperfect & Organic — 反秩序审美，有瑕疵的真实感

设计策略实现方式适用场景数字褶皱SVG 噪点纹理叠加 (background-image: url("data:image/svg+xml,...") 含 <feTurbulence>)创意品牌、独立工作室、手作品牌有机排版轻微旋转 (transform: rotate(-1deg~2deg)), 非严格对齐艺术展览、音乐活动、个人作品集触觉质感颗粒感背景 + 不规则边框 (border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%)生活方式、食品、时尚

CSS Prompt Examples:

/* Grain Texture Background */
.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"); }

/* Organic Shape */
.organic-shape { border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%; transform: rotate(-1.5deg); }

Trend 3: Liminal Multimodality

Core: Multimodal Seamlessness — Experience flows between voice, gesture, eye tracking, and touch

Design 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

CSS Prompt Examples:

/* Voice Wave */
@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 24px; } }
.voice-wave span { display: inline-block; width: 4px; background: #00d4ff; animation: wave 1s ease-in-out infinite; }
.voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; }

/* Spatial Perspective */
.liminal-space { perspective: 1000px; transform-style: preserve-3d; }
.depth-layer { transform: translateZ(50px); }

Trend 4: Emotional Sovereignty

Core: Hyper-Personalized Ethical — Design for "resonance" rather than "retention"

Design 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

CSS Prompt Examples:

/* Explanatory Hint */
.explainable-ui { position: relative; }
.explainable-ui::after {
  content: attr(data-explanation);
  position: absolute; bottom: 100%; left: 0;
  background: rgba(0,0,0,0.9); color: #fff;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; max-width: 280px;
  opacity: 0; transform: translateY(8px); transition: all 0.2s;
}
.explainable-ui:hover::after { opacity: 1; transform: translateY(0); }

/* Personalized Theme Variables */
:root { --user-primary: #00d4ff; --user-secondary: #7b2fff; --user-accent: #00ffa3; }
.personalized-card { border-left: 4px solid var(--user-primary); }

### Trend Application Decision Tree

User Need → Select Dominant Trends

AI / Automation Products → Ghostly Agency + Emotional Sovereignty
Creative / Art Content → Grain of Truth + Immersion & Expression
Tech / Frontier Launches → Ghostly Agency + Liminal Multimodality
Humanities / Lifestyle → Grain of Truth + Care & Resonance
Enterprise / Professional → Emotional Sovereignty + Trust & Professional

⚠️ Notes:

Apply maximum 2 trends per presentation to avoid visual chaos
Trends serve content — never use trends for trends' sake
Explain trend options to users during Style Discovery phase

### CRITICAL: Viewport Fitting Requirements

Mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.

### The Golden Rule

Each slide = exactly one viewport height (100vh / 100dvh).
Content overflows? → Split into multiple slides or reduce content. Never scroll within a slide.

### Content Density Limits (per slide)

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)

Required 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.

### Overflow Prevention Checklist

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.

### When Content Doesn't Fit

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.

### Testing Viewport Fit

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.

### Phase 0: Detect Mode

Mode A — New Presentation: User wants slides from scratch → Phase 1 (Content Discovery).
Mode B — PPT Conversion: User has .ppt/.pptx → Phase 4 (PPT Extraction).
Mode C — Existing HTML Enhancement: Read file, enhance; always maintain viewport fitting.

### Mode C: Modification Rules

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.

### Solution PPT (解决方案 PPT) — 售前/销售专用

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.

### Phase 1: Content Discovery (New Presentations)

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.

### Step 1.1: Context + Images (single form or sequence)

Ask these five in one form (AskUserQuestion) or in sequence:

Purpose: What is this presentation for? — Solution deck (解决方案 PPT) | Pitch deck | Teaching/Tutorial | Conference talk | Internal presentation
Length: Approximately how many slides? — Short (5–10) | Medium (10–20) | Long (20+)
Content: Do you have content ready or need help? — I have all content ready | I have rough notes | I have topic only
Images: No images | ./assets | Other (let user type/paste folder path, e.g. ~/Desktop/screenshots)
Editing: Do you need to edit text in the browser after generation? — Yes (in-browser edit, auto-save, export) | No

Remember the editing choice — it controls whether Phase 3 includes the edit button (see reference/edit-button-implementation.md).

Get 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.

### Step 1.2: Image Evaluation (if user provided images)

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.

### Phase 2: Style Discovery

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.

Presets (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.

### Phase 3: Generate Presentation

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.

File structure: Single: presentation.html + assets/. Multiple: [name].html + [name]-assets/.

HTML 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.

Required 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.

Code 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.

### Phase 4: PPT Conversion

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).
Confirm: Present extracted slide list to user; ask to proceed to style selection.
Style: Phase 2 (Style Discovery) with extracted content in mind.
Generate: 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).

### Phase 5: Delivery

Delete .claude-design/slide-previews/ if present.
Open presentation in browser (e.g. open [filename].html).
Summary: 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".

### Style Reference: Effect → Feeling

Dramatic/Cinematic: Slow fades, scale transitions, dark + spotlight, parallax, full-bleed.
Techy/Futuristic: Neon glow, particles, grid, monospace accents, cyan/magenta palette.
Playful/Friendly: Bouncy easing, rounded, pastel/bright, floating animations.
Professional/Corporate: Subtle fast animations (200–300ms), clean sans, navy/slate, minimal decor.
Calm/Minimal: Slow subtle motion, whitespace, muted palette, serif, content-focused.
Editorial: Strong type hierarchy, pull quotes, image-text interplay, serif headline + sans body.

Animation patterns (entrance, backgrounds, interactive): See reference/animation-patterns.md.

### Troubleshooting

Fonts not loading: Check Fontshare/Google URL; font names in CSS.
Animations not triggering: Intersection Observer; .visible class.
Scroll snap: scroll-snap-type on html; scroll-snap-align on each .slide.
Mobile: Disable heavy effects at 768px; test touch; reduce particles.
Performance: Use will-change sparingly; prefer transform/opacity; throttle scroll/mousemove.

### Example Flows

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.

PPT conversion: User has .pptx → extract with ppt-extract.py → confirm content → style selection → generate HTML with assets.
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: ken0122
- Version: 2.0.2
## Source health
- Status: healthy
- Item download looks usable.
- Yavira can redirect you to the upstream package for this item.
- Health scope: item
- Reason: direct_download_ok
- Checked at: 2026-04-29T23:18:28.229Z
- Expires at: 2026-05-06T23:18:28.229Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/frontend-slides)
- [Send to Agent page](https://openagent3.xyz/skills/frontend-slides/agent)
- [JSON manifest](https://openagent3.xyz/skills/frontend-slides/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/frontend-slides/agent.md)
- [Download page](https://openagent3.xyz/downloads/frontend-slides)