skills/fund-slides/README.md
wangyitong a65adcc2e5 Initial commit: merged, deduplicated, and vetted skill collection
Sources: extracted from two upstream archives (skill-repo, skills-main),
merged with the following policy:

- 15 broken symlinks (pointing to /Users/jameslee/.cc-switch/skills or
  ../../.agents/skills on a foreign machine) discarded
- 3 real name collisions with identical content (ai-pair, ifind-http-api,
  zhipu-websearch) kept as one copy
- Functional overlaps deduped keeping the strongest variant:
  - docx family: kept docx (official, full toolchain) + docx-cn
    (GB/T 9704 Chinese official-document constants),
    dropped docx_writer (no scripts, name collided with docx)
  - humanizer family: kept humanizer-zh (6 zh reference docs),
    dropped humanizer (en, redundant for CN workflow)
- Skills that only ran in a foreign environment removed:
  ablemind-ops, app-publish, hlb-design-system, openclaw-adj-skill,
  claude-driver
- alphapai excluded from this public repo because its SKILL.md hard-coded
  live credentials

Result: 25 skills, 572 files, ~7.5 MB.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-13 14:47:12 +08:00

6.0 KiB

Fund Slides

Forked from frontend-slides by @zarazhangrui (Zara Zhang). Enhanced by @hanlinlibham with financial chart integration and offline optimizations.

A Claude Code skill for creating animation-rich HTML presentations from any content — with first-class support for financial data visualization.

What This Does

Fund Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a "show, don't tell" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.

Here is a deck about the original skill, made through the skill:

https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478

Key Features

  • Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
  • Offline-Ready — ECharts library (~1MB) is inlined directly into the HTML. No CDN, no network required.
  • Visual Style Discovery — Can't articulate design preferences? No problem. Pick from generated visual previews.
  • PPT Conversion — Convert existing PowerPoint files to web, preserving all images and content.
  • Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics.
  • Production Quality — Accessible, responsive, well-commented code you can customize.

What's New in This Fork

Compared to the original frontend-slides:

  • ECharts Inline Integration — ECharts v5 library pre-bundled in references/echarts.min.js, inlined at generation time for fully offline HTML output. The original used CDN <script src="..."> which requires network access.
  • Financial Chart Library — Added specialized chart references for financial use cases:
    • charts-trend.md — Line/area/bar charts for time series
    • charts-composition.md — Pie/rose/treemap/sunburst for composition analysis
    • charts-matrix.md — Heatmap/radar/scatter for multi-dimensional comparison
    • charts-flow.md — Waterfall/candlestick/funnel/sankey for flow analysis
  • A-Share Color Convention — Red-up/green-down (China stock market standard) built into the base template
  • Financial Layouts — KPI cards, data tables, timelines, comparison cards optimized for investment presentations
  • Content Mapping System — Intelligent content-to-visual mapping that automatically selects optimal chart types based on data characteristics
  • Safe Base Template — Defensive HTML template with built-in viewport fitting, CJK typography, responsive breakpoints, and Chinese number formatting (formatCN)
  • 15 Visual Presets — Expanded from 12 to 15 curated styles including Research Formal, Data Dashboard, and Roadshow Elegance
  • Self-Check Checklist — Phase 3.5 automated quality gate ensuring zero external dependencies, proper clamp() usage, and A-share color compliance

Installation

git clone https://github.com/hanlinlibham/skills.git ~/.claude/skills

Then use it by typing /fund-slides in Claude Code.

Usage

Create a New Presentation

/fund-slides

> "Create a fund analysis presentation for XX Fund"

The skill will:

  1. Ask about your content, length, chart needs, and editing preference
  2. Analyze content and map each block to optimal visual form
  3. Generate 3 visual style previews for you to compare
  4. Create the full presentation with charts inlined
  5. Open it in your browser — works offline

Convert a PowerPoint

/fund-slides

> "Convert my presentation.pptx to a web slideshow"

Included Styles

Dark Themes

  • Bold Signal — Confident, high-impact, vibrant card on dark
  • Electric Studio — Clean, professional, split-panel
  • Creative Voltage — Energetic, retro-modern, electric blue + neon
  • Dark Botanical — Elegant, sophisticated, warm accents

Light Themes

  • Notebook Tabs — Editorial, organized, paper with colorful tabs
  • Pastel Geometry — Friendly, approachable, vertical pills
  • Split Pastel — Playful, modern, two-color vertical split
  • Vintage Editorial — Witty, personality-driven, geometric shapes

Financial / Specialty

  • Research Formal — Institutional, trustworthy, data-heavy layouts
  • Data Dashboard — Clean metrics, KPI cards, chart-forward
  • Roadshow Elegance — Premium, investor-facing, bold confidence
  • Swiss Modern — Minimal, Bauhaus-inspired, geometric
  • Paper & Ink — Literary, drop caps, pull quotes
  • Neon Cyber — Futuristic, particle backgrounds, neon glow
  • Terminal Green — Developer-focused, hacker aesthetic

Architecture

File Purpose Loaded When
SKILL.md Core workflow and rules Always (skill invocation)
content-mapping.md Content type to visual form mapping Phase 1 (content analysis)
STYLE_PRESETS.md 15 curated visual presets Phase 2 (style selection)
references/safe-base-template.html Defensive base HTML template Phase 3 (generation)
references/echarts.min.js ECharts v5 library (~1MB) Phase 3 (inline into HTML)
references/charts-*.md Chart type configurations Phase 3 (per chart type)
references/financial-layouts.md KPI/table/timeline layouts Phase 3 (financial slides)
references/animation-patterns.md CSS/JS animation reference Phase 3 (generation)
references/html-template.md HTML structure and JS features Phase 3 (generation)
scripts/extract-pptx.py PPT content extraction Phase 4 (conversion)

Credits

  • Original author: Zara Zhang — created frontend-slides with Claude Code
  • Fork maintainer: hanlinlibham — financial chart integration, offline ECharts inlining, A-share conventions, and expanded presets

License

MIT — See LICENSE for details.