html-ppt-retro-quarterly-review — скилл для Claude Code
Шаблон квартального отчёта в ретро-стилистике: сине-оранжевая гамма, крупная типографика, три «кинематографичных» слайда. Пригодится, когда нужен эффектный HTML-дек без сборщиков.
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-codeЧто делает html-ppt-retro-quarterly-review
Скилл отдаёт готовый HTML-шаблон презентации с тремя экранами: обложка с крупным заголовком, блок из трёх приоритетов в виде сетки и таймлайн роадмапа с KPI-полосой. Визуальный язык — контрастный сине-оранжевый с кремовыми «бумажными» секциями.
Шаблон полностью автономен: один файл, инлайн-CSS и JS, никаких фреймворков. Внутри зашиты клавиши 1/2/3 для переключения слайдов, R для рестарта, индикатор текущей страницы и анимированные переходы. В видеорежиме каждый слайд держится меньше трёх секунд — темп заложен в разметку.
Перед запуском скилл читает активный DESIGN.md, чтобы перенести изменения токенов в CSS-переменные, не ломая ретро-палитру. Затем берёт assets/template.html как основу и проверяет результат по references/checklist.md. Пересобирать с нуля не нужно — это важно, чтобы не потерять встроенную анимацию и иерархию.
Какие задачи решает
- собрать квартальный отчёт в виде HTML-слайдов без фреймворков
- получить готовую ретро-стилистику с сине-оранжевой палитрой
- встроить навигацию клавишами и анимированные переходы
- проверить шаблон по чеклисту перед выдачей
- адаптировать токены из DESIGN.md, сохранив визуальный стиль
Примеры запросов агенту
- Сделай ретро-квартальный отчёт по этому шаблону
- Нужен roadmap-слайд в сине-оранжевой стилистике
- Собери HTML-презентацию с тремя приоритетами и KPI
Как установить html-ppt-retro-quarterly-review
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-code2Вручную: положить файлы
~/.claude/skills/html-ppt-retro-quarterly-review/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/html-ppt-retro-quarterly-review/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a codex2Вручную: положить файлы
.agents/skills/html-ppt-retro-quarterly-review/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a cursor2Вручную: положить файлы
.cursor/skills/html-ppt-retro-quarterly-review/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design html-ppt-retro-quarterly-review2Вручную: положить файлы
.github/skills/html-ppt-retro-quarterly-review/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/html-ppt-retro-quarterly-reviewВручную: положить файлы
.devin/skills/html-ppt-retro-quarterly-review/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора106
Весь набор →Похожие
Вопросы о html-ppt-retro-quarterly-review
Как установить html-ppt-retro-quarterly-review в Claude Code?
Выполните npx skills add nexu-io/open-design --skill html-ppt-retro-quarterly-review -a claude-code. Скилл появится в ~/.claude/skills/html-ppt-retro-quarterly-review/SKILL.md.
Что делает html-ppt-retro-quarterly-review?
Отдаёт шаблон HTML-презентации из трёх слайдов: обложка, сетка приоритетов и таймлайн роадмапа с KPI. Стиль — контрастный сине-оранжевый, ретро-редакционный.
Нужны ли какие-то зависимости для работы?
Нет. Выход — один автономный HTML-файл с инлайн-CSS и JS. Скиллу требуется только возможность записи файлов.
Исходный текст
SKILL.md · Apache-2.0
---
name: html-ppt-retro-quarterly-review
description: |
Retro Quarterly Review presentation template in a bold blue + orange editorial
language. Use when users ask for a high-impact quarterly review / roadmap deck
with heavyweight slab headlines, clean cream paper sections, structured grids,
and fast premium motion pacing (3 slides, each hold under 3s in video mode).
triggers:
- "retro quarterly review"
- "quarterly review template"
- "roadmap slide style"
- "blue orange presentation"
- "vintage business deck"
- "季度复盘复古风"
- "蓝橙复古汇报模板"
od:
mode: template
surface: video
type: hyperframes
platform: desktop
preview:
type: html
entry: index.html
reload: debounce-100
outputs:
primary: index.html
secondary:
- template.html
- example.html
capabilities_required:
- file_write
---
# Retro Quarterly Review Template
A high-contrast, print-inspired quarterly review template with three cinematic
slides:
1. Cover (hero title lockup)
2. Three priorities (triptych grid)
3. Roadmap timeline + KPI strip
## Resource map
```text
html-ppt-retro-quarterly-review/
├── SKILL.md
├── assets/
│ └── template.html
├── references/
│ └── checklist.md
└── example.html
```
## Workflow
1. Read active `DESIGN.md` first and map any requested token changes into CSS
variables while preserving the retro blue/orange/cream visual grammar.
2. Start from `assets/template.html`; do not rebuild from scratch.
3. Preserve the three-slide information architecture and typographic hierarchy.
4. Keep interactions and motion quality:
- keyboard `1/2/3` quick jump
- `R` restart
- page indicator updates per scene
- premium wipe transitions and staggered reveals
5. Keep output self-contained (single HTML, inline CSS + JS, no framework runtime).
6. If adapting copy/data, keep content realistic and internally consistent.
7. Validate against `references/checklist.md` before emitting artifact.
## Output contract
Emit one short orientation sentence and then the artifact:
```xml
<artifact identifier="retro-quarterly-review" type="text/html" title="Retro Quarterly Review">
<!doctype html>
<html>...</html>
</artifact>
```
© nexu-io · Apache-2.0 · nexu-io/open-design
