Tencent SkillHub · Productivity

Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a...

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a...

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: _meta.json, README.md, SKILL.md, REVIEW.md, STYLE_PRESETS.md, reference/viewport-and-base.css

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

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.

New install

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

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.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 2.0.2

Provenance

Publisher: ken0122
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 26 sections Open source page

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.

Category context

Workflow acceleration for inboxes, docs, calendars, planning, and execution loops.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

4 Docs1 Config1 Files

SKILL.md Primary doc
README.md Docs
REVIEW.md Docs
STYLE_PRESETS.md Docs
_meta.json Config
reference/viewport-and-base.css Files