mrdalvik/demo-animation
.claude/skills/demo-animation/SKILL.md
Работа с анимированной демонстрацией пайплайна Davai в стилизованном VSCode-терминале. Используй при изменении сценария демо, добавлении/редактировании фаз анимации, настройке typewriter-эффекта, навигации по фазам или стилизации терминала.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add mrdalvik/davai-landing demo-animationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 5:51 PM52.1s1 file scanned
SKILL.md
- name:
- demo-animation
- description:
- Работа с анимированной демонстрацией пайплайна Davai в стилизованном VSCode-терминале. Используй при изменении сценария демо, добавлении/редактировании фаз анимации, настройке typewriter-эффекта, навигации по фазам или стилизации терминала.
Demo Animation
Секция демо — ключевой элемент лендинга. Это стилизованный VSCode/терминал, показывающий 5 фаз пайплайна Davai.
Архитектура
- HTML: div с классом терминала, моноширинный шрифт (JetBrains Mono), цветные span-ы для подсветки
- CSS: стилизация окна терминала (заголовок с кнопками, тёмный фон, скруглённые углы), анимации
@keyframes - JS (
demo.js): оркестрация анимации, typewriter-эффект, навигация по фазам
Сценарий демо — URL Shortener
Демо показывает создание сервиса коротких ссылок с аналитикой:
Фаза 1 — Product Spec:
- User: "Хочу сервис коротких ссылок с аналитикой"
- CEO спрашивает: "Для кого? Нужны ли кастомные алиасы?"
- User: "Для маркетологов, да, кастомные алиасы"
- Результат: спека готова, 4 must-have фичи
Фаза 2 — Tech Stack:
- CEO: "Рекомендую: Bun + Hono + PostgreSQL + Redis"
- Стек подобран с обоснованием
Фаза 3 — Tools & Skills:
- Подобраны скиллы: webapp-testing, API-design
- Настроен MCP для базы данных
Фаза 4 — Architecture:
- 10 задач: от схемы БД до деплоя
- Каждая с definition of done
Фаза 5 — Security:
- Защита от open redirect, rate limiting, валидация URL
- Davai сам продумал то, о чём пользователь бы не подумал
Структура данных фаз
Массив из 5 объектов фаз:
const phases = [
{
id: 1,
titleKey: "demo.phase1.title", // i18n-ключ
lines: [
{ text: "CEO: Расскажите вашу идею...", type: "prompt", delay: 50 },
{ text: "User: Хочу сделать...", type: "user-input", delay: 30 },
{ text: "✓ Product spec ready", type: "success", delay: 0 }
],
duration: 5000 // мс
},
// ... фазы 2-5
];
Typewriter-эффект
Посимвольный вывод через setTimeout с настраиваемой задержкой (delay в мс на символ). Типы строк (type) определяют CSS-класс для цвета.
Навигация по фазам
- Индикатор над демо показывает текущую фазу (1-5)
- Клик по индикатору фазы — переключает на неё (пропуск/перемотка)
- Автопереход на следующую фазу после завершения текущей
- Пауза при ручном переключении
Изменение сценария
- Отредактируй массив
phasesвdemo.js - Строки переводов (
titleKey) должны быть вlocales/*.json - Тестируй каждую фазу отдельно — убедись, что тайминги комфортные
- На мобильных — текст может быть сокращён, проверяй адаптивность
Related Skills
mrdalvik/webapp-testing
tools
VerifiedTrustedCommunity
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
SKILL.mdUpdated Apr 16, 2026
mrdalvik/i18n-workflow
development
VerifiedTrustedCommunity
Управление интернационализацией статического сайта с JSON-переводами. Используй этот скилл при добавлении новых строк, создании переводов на новые языки, проверке полноты переводов или изменении i18n-логики. Также используй при работе с data-i18n атрибутами в HTML.
SKILL.mdUpdated Apr 16, 2026
mrdalvik/github-pages-deploy
testing
VerifiedTrustedCommunity
Настройка и деплой статического сайта на GitHub Pages через GitHub Actions. Используй при создании/изменении CI/CD пайплайна, настройке минификации, проблемах с деплоем или конфигурации кастомного домена.
SKILL.mdUpdated Apr 16, 2026
mrdalvik/frontend-design
development
VerifiedTrustedCommunity
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
SKILL.mdUpdated Apr 16, 2026