a65adcc2e5
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>
121 lines
6.0 KiB
Markdown
121 lines
6.0 KiB
Markdown
# Fund Slides
|
|
|
|
> Forked from [frontend-slides](https://github.com/zarazhangrui/frontend-slides) by [@zarazhangrui](https://github.com/zarazhangrui) (Zara Zhang).
|
|
> Enhanced by [@hanlinlibham](https://github.com/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
|
|
|
|
```bash
|
|
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](https://github.com/zarazhangrui) — created [frontend-slides](https://github.com/zarazhangrui/frontend-slides) with Claude Code
|
|
- **Fork maintainer**: [hanlinlibham](https://github.com/hanlinlibham) — financial chart integration, offline ECharts inlining, A-share conventions, and expanded presets
|
|
|
|
## License
|
|
|
|
MIT — See [LICENSE](LICENSE) for details.
|