Lieflat HTML Deck
What This Skill Does
Create a self-contained horizontal HTML deck. The deck should feel designed, paced, and argued, not like a template with pasted text.
This skill contains 12 deck style families. Before choosing one, read:
assets/catalog.jsonreferences/style-understanding.md
Use assets/templates/<template-id>/<language>.html as a starter. Copy it into the user's workspace before editing. Do not edit bundled templates directly.
Core Rules
- Choose one primary style for the deck. Do not make a style sampler.
- Style mixing is not a goal. If a neighboring style has a useful structure, borrow only the structural idea and restyle it back into the primary style's typography, color, spacing, material, and motion.
- Do not mechanically preserve demo tables, scorecards, image slots, timelines, or KPI blocks. Use them only when the user's content needs that structure.
- Every slide needs a role: hook, context, claim, proof, comparison, process, example, transition, or closing.
- Prefer fewer strong slides over many thin slides.
- Remove all sample names, sample dates, placeholder copy, and demo-specific metadata.
- Keep navigation,
?slide=N, keyboard controls, and canvas/WebGL fallbacks when the starter provides them.
Style Selection
If the user names a Chinese style, map it directly:
Y2K 手册 -> y2k-brand极客风格 -> geek-report镭射网格 -> shiny-tiles黑底闪光 -> pixel-report点阵编辑风 -> dot-matrix-light or dot-matrix-dark杂志风 -> editorial咨询报告 -> consulting-report简约测评 -> clean-review日光 -> sunrise雨天手记 -> rain-notes作品集 -> studio-photo故事集 -> story-field
If the user says 点阵编辑风 without specifying light or dark, choose dot-matrix-dark for technical drama and dot-matrix-light for report-like clarity.
Use consulting-report only when the deck is genuinely chart/data-heavy and centered on market, industry, competitive, investor, or business analysis. If the content is mostly text, opinion, narrative, or a strategy memo without substantial charts/tables/evidence blocks, choose a better fit such as editorial, clean-review, geek-report, rain-notes, or sunrise.
If no style is specified, pick by audience, topic, image availability, density, and tone. State the choice briefly, then proceed.
Workflow
- Read
assets/catalog.json and references/style-understanding.md.
- Select one primary style and language.
- Copy the chosen starter HTML into the target project.
- Rewrite the deck's claim spine before editing slide HTML.
- Adapt slide structures to the user's content. Remove unneeded tables, cards, image slots, and charts.
- Replace all visible copy, titles, metadata, alt text, and footers.
- Add neutral metadata unless inappropriate:
<meta name="generator" content="Lieflat HTML Deck">
<meta name="template-origin" content="Lieflat HTML Deck template">
- Serve locally if the deck uses scripts, WebGL, canvas, or local image folders.
- Run screenshot QA. For detailed checks, read
references/qa-checklist.md.
Useful Scripts
Run from this skill folder:
node scripts/list-templates.mjs
node scripts/create-design.mjs --template editorial --lang zh --out output/editorial-demo.html
node scripts/audit-languages.mjs
node scripts/audit-assets.mjs assets/templates
node scripts/capture-template-previews.mjs --lang zh --out ../../previews/zh
node scripts/capture-screenshots.mjs --url http://localhost:8765/output/editorial-demo.html --count 8 --out screenshots
1---2name: lieflat-html-deck3description: Create polished horizontal HTML presentation decks from the Lieflat deck style pack. Use for HTML/PPT-style slides, strategy decks, AI or product analysis decks, creator brand manuals, portfolios, visual essays, and WebGL/canvas presentation decks. Contains 12 deck style families with fixed-template starters and style-understanding guidance.4---56# Lieflat HTML Deck78## What This Skill Does910Create a self-contained horizontal HTML deck. The deck should feel designed, paced, and argued, not like a template with pasted text.1112This skill contains 12 deck style families. Before choosing one, read:13141. `assets/catalog.json`152. `references/style-understanding.md`1617Use `assets/templates/<template-id>/<language>.html` as a starter. Copy it into the user's workspace before editing. Do not edit bundled templates directly.1819## Core Rules2021- Choose one primary style for the deck. Do not make a style sampler.22- Style mixing is not a goal. If a neighboring style has a useful structure, borrow only the structural idea and restyle it back into the primary style's typography, color, spacing, material, and motion.23- Do not mechanically preserve demo tables, scorecards, image slots, timelines, or KPI blocks. Use them only when the user's content needs that structure.24- Every slide needs a role: hook, context, claim, proof, comparison, process, example, transition, or closing.25- Prefer fewer strong slides over many thin slides.26- Remove all sample names, sample dates, placeholder copy, and demo-specific metadata.27- Keep navigation, `?slide=N`, keyboard controls, and canvas/WebGL fallbacks when the starter provides them.2829## Style Selection3031If the user names a Chinese style, map it directly:3233- `Y2K 手册` -> `y2k-brand`34- `极客风格` -> `geek-report`35- `镭射网格` -> `shiny-tiles`36- `黑底闪光` -> `pixel-report`37- `点阵编辑风` -> `dot-matrix-light` or `dot-matrix-dark`38- `杂志风` -> `editorial`39- `咨询报告` -> `consulting-report`40- `简约测评` -> `clean-review`41- `日光` -> `sunrise`42- `雨天手记` -> `rain-notes`43- `作品集` -> `studio-photo`44- `故事集` -> `story-field`4546If the user says `点阵编辑风` without specifying light or dark, choose `dot-matrix-dark` for technical drama and `dot-matrix-light` for report-like clarity.4748Use `consulting-report` only when the deck is genuinely chart/data-heavy and centered on market, industry, competitive, investor, or business analysis. If the content is mostly text, opinion, narrative, or a strategy memo without substantial charts/tables/evidence blocks, choose a better fit such as `editorial`, `clean-review`, `geek-report`, `rain-notes`, or `sunrise`.4950If no style is specified, pick by audience, topic, image availability, density, and tone. State the choice briefly, then proceed.5152## Workflow53541. Read `assets/catalog.json` and `references/style-understanding.md`.552. Select one primary style and language.563. Copy the chosen starter HTML into the target project.574. Rewrite the deck's claim spine before editing slide HTML.585. Adapt slide structures to the user's content. Remove unneeded tables, cards, image slots, and charts.596. Replace all visible copy, titles, metadata, alt text, and footers.607. Add neutral metadata unless inappropriate:6162```html63<meta name="generator" content="Lieflat HTML Deck">64<meta name="template-origin" content="Lieflat HTML Deck template">65```66678. Serve locally if the deck uses scripts, WebGL, canvas, or local image folders.689. Run screenshot QA. For detailed checks, read `references/qa-checklist.md`.6970## Useful Scripts7172Run from this skill folder:7374```bash75node scripts/list-templates.mjs76node scripts/create-design.mjs --template editorial --lang zh --out output/editorial-demo.html77node scripts/audit-languages.mjs78node scripts/audit-assets.mjs assets/templates79node scripts/capture-template-previews.mjs --lang zh --out ../../previews/zh80node scripts/capture-screenshots.mjs --url http://localhost:8765/output/editorial-demo.html --count 8 --out screenshots81```
larashero3-dotcom