К основному содержанию
команда

interactive-documentation — команда для Claude Code: живая

Слэш-команда собирает документацию с живыми примерами кода, песочницами и API-тестированием. Пригодится, когда README уже не хватает.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓
npx claude-code-templates@latest --command documentation/interactive-documentation
Открыть на GitHub

Что делает interactive-documentation

Команда проводит агента по восьми блокам: выбор платформы, встроенный редактор кода с выполнением примеров, интерактивные API-запросы, пошаговые туториалы с прогрессом, витрина компонентов, сбор отзывов, публикация и расширенный поиск. Перед началом агент сам осматривает проект: ищет конфиги вроде docusaurus.config.js, gatsby-config.js и _config.yml, файлы *.stories.* для Storybook, ноутбуки *.ipynb и настройки хостинга vercel.json, netlify.toml или .github/workflows/. Так что на пустом репозитории он просто не найдёт, от чего отталкиваться.

Платформу задают аргументом: --docusaurus, --gitbook, --notion, --storybook, --jupyter или --comprehensive. Без аргумента команда ждёт название платформы в свободной форме. Из инструментов разрешены только Read, Write, Edit и Bash — внешних сервисов и MCP-серверов в списке нет.

Внутри описаны требования к результату: адаптивная вёрстка, доступность по WCAG 2.1 AA, поддержка React, Vue, Angular и обычного JS, интеграция с системами аналитики и поиска. Это скорее каркас для большого проекта, чем быстрый скрипт: если нужна одна страница документации, объём работы окажется несоразмерным.

Какие задачи решает

  • поднять документацию с выполняемыми примерами кода
  • добавить к API-справочнику живое тестирование запросов
  • собрать витрину компонентов с управлением пропсами
  • встроить сбор отзывов и аналитику в документацию
  • настроить автопубликацию контента из репозитория

Примеры запросов агенту

  • /interactive-documentation --docusaurus
  • /interactive-documentation --storybook
  • /interactive-documentation --comprehensive

Как установить interactive-documentation

1Через claude-code-templates

npx claude-code-templates@latest --command documentation/interactive-documentation

2Вручную: положить файлы

.claude/commands/interactive-documentation.md

Вызов — /interactive-documentation. Для всех проектов — ~/.claude/commands/

Вопросы о interactive-documentation

Как установить interactive-documentation в Claude?

Выполните npx claude-code-templates@latest --command documentation/interactive-documentation, затем проверьте, что файл появился по пути .claude/commands/interactive-documentation.md.

Что делает interactive-documentation?

Строит документацию с живыми примерами: редактор кода с выполнением, интерактивные API-запросы, туториалы с отслеживанием прогресса, витрину компонентов и системы обратной связи.

Какие платформы поддерживаются?

Аргументом передаётся --docusaurus, --gitbook, --notion, --storybook, --jupyter или --comprehensive.

Исходный текст

interactive-documentation.md · MIT
---
allowed-tools: Read, Write, Edit, Bash
argument-hint: "[platform] | --docusaurus | --gitbook | --notion | --storybook | --jupyter | --comprehensive"
description: Use PROACTIVELY to create interactive documentation platforms with live examples, code playgrounds, and user engagement features
---

# Interactive Documentation Platform

Create interactive documentation with live examples: $ARGUMENTS

## Current Documentation Infrastructure

- Static site generators: !`find . -name "docusaurus.config.js" -o -name "gatsby-config.js" -o -name "_config.yml" | head -3`
- Documentation framework: @docs/ or @website/ (detect existing setup)
- Component libraries: !`find . -name "*.stories.*" | head -5` (Storybook detection)
- Interactive examples: !`find . -name "*.ipynb" -o -name "*playground*" | head -3`
- Hosting setup: @vercel.json or @netlify.toml or @.github/workflows/ (if exists)

## Task

Build comprehensive interactive documentation platform with live code examples, user engagement features, and multi-platform integration capabilities.

## Interactive Documentation Architecture

### 1. Platform Foundation and Configuration
- Documentation platform selection and optimization setup
- Theme customization and branding configuration
- Navigation structure and content organization
- Multi-language support and internationalization
- Search integration with advanced filtering and indexing

### 2. Live Code Playground Integration
- Interactive code editor with syntax highlighting
- Real-time code execution and preview capabilities
- Multi-language support and framework integration
- Error handling and debugging assistance
- Code sharing and collaboration features

### 3. API Documentation and Testing
- Interactive API endpoint exploration
- Live request/response testing capabilities
- Parameter validation and example generation
- Authentication flow integration
- Response schema visualization and validation

### 4. Interactive Tutorial System
- Step-by-step guided learning experiences
- Progress tracking and completion validation
- Hands-on coding exercises with instant feedback
- Adaptive learning paths based on user progress
- Gamification elements and achievement systems

### 5. Component Documentation Integration
- Live component playground with property controls
- Visual component gallery with interactive examples
- Design system integration and style guide generation
- Accessibility testing and compliance validation
- Cross-browser compatibility testing

### 6. User Engagement and Feedback Systems
- Rating and review collection mechanisms
- User feedback aggregation and analysis
- Community discussion and Q&A integration
- Usage analytics and behavior tracking
- Personalization and recommendation systems

### 7. Content Management and Publishing
- Version control integration with automated publishing
- Content review and approval workflows
- Multi-author collaboration and editing
- Content scheduling and automated updates
- SEO optimization and metadata management

### 8. Advanced Interactive Features
- Advanced search with faceted filtering and suggestions
- Interactive diagrams and visualization tools
- Embedded video content and multimedia integration
- Mobile-responsive design and offline capabilities
- Progressive web app features and notifications

## Implementation Requirements

### Platform Integration
- Multi-framework support (React, Vue, Angular, vanilla JS)
- Build system integration with automated deployment
- Content management system compatibility
- Third-party service integration (analytics, feedback, search)
- Performance optimization and bundle splitting

### User Experience Design
- Responsive design across all device types
- Accessibility compliance (WCAG 2.1 AA standards)
- Progressive enhancement for feature degradation
- Fast loading times and optimal Core Web Vitals
- Intuitive navigation and content discovery

### Technical Infrastructure
- Scalable hosting and CDN configuration
- Database integration for user data and analytics
- API design for external integrations
- Security implementation and user authentication
- Monitoring and error tracking systems

## Deliverables

1. **Interactive Platform Architecture**
   - Complete documentation platform setup and configuration
   - Live code playground and API testing integration
   - Interactive tutorial system with progress tracking
   - Component documentation with visual examples

2. **User Engagement Systems**
   - Feedback collection and analysis mechanisms
   - User analytics and behavior tracking implementation
   - Community features and discussion integration
   - Personalization and recommendation engines

3. **Content Management Framework**
   - Automated publishing and deployment pipelines
   - Multi-author collaboration and review workflows
   - Version control integration with change tracking
   - SEO optimization and metadata management

4. **Performance and Optimization**
   - Mobile-responsive design with offline capabilities
   - Performance monitoring and optimization implementation
   - Accessibility compliance and testing frameworks
   - Progressive web app features and service workers

## Integration Guidelines

Implement with modern documentation platforms and development workflows. Ensure scalability for large content repositories and team collaboration while maintaining optimal performance and user experience across all devices and platforms.

© davila7 · MIT · davila7/claude-code-templates

Похожие слэш-команды

Все слэш-команды по теме «Тексты и документация» →
code-documenter https://github.com/Jeffallan Скилл для написания докстрингов, спецификаций OpenAPI и сайтов документации. Пригодится, когда код есть, а описаний к нему нет. CX Codex +1 ★ 4 676звёзд репо documentation официальный anthropics Скилл для технического письма: собирает README, справочник по API, ранбук, архитектурный документ или гайд для новичков. Пригодится, когда код есть, а описания к нему нет. CX Codex +1 10 300установок indexion-documentation trkbt10 Скилл оценивает покрытие документации, ищет расхождения между кодом и доками и рисует граф зависимостей. CX Codex +1 5 000установок code-documentation bytedance Скилл автоматически создаёт README, API-референс, архитектурную документацию и гайды разработчика прямо из кода. Пригодится, если нужно документировать проект, библиотеку или API без ручной писанины. CX Codex +1 1 900установок documentation-update geoffjay Пересобирает файлы документации маркетплейса из данных каталога по Jinja2-шаблонам. Пригодится, когда плагин добавили, обновили или удалили. CX Codex +1 1 800установок technical-documentation wondelai Скилл проверяет и переписывает документацию по гайдлайну Google: README, how-to, справочники API, changelog. Пригодится, когда доки расползлись по тону и структуре. CX Codex +1 1 400установок

Из того же набора205

Весь набор →
python-pro Скилл для Claude, который ведёт разработку на Python 3.12+: async, типизация, профилирование, uv, ruff, pydantic и FastAPI. 399установок troubleshooting-guide Собирает документ с диагностическими процедурами, частыми сбоями и командами для проверки системы. Пригодится, когда нужно описать, как чинить сервис. 397установок performance-budget-guard Хук для Claude проверяет размер JS-бандла после сборки Next.js и не даёт выкатить сборку, которая вылезла за бюджет. 393установок memory-spring-cleaning Разбирает CLAUDE.md и файлы документации, сверяет записанные правила с реальным кодом и убирает устаревшее. 391установок agents-crewai Скилл для сборки команд автономных агентов с ролями, памятью и последовательным или иерархическим выполнением задач. 371установок testing-patterns Скилл для Claude с готовыми паттернами тестирования на Jest: фабрики данных, моки и цикл red-green-refactor. 365установок code-review-checklist Скилл ведёт ревьюера по шагам: контекст, функциональность, качество, безопасность, производительность и тесты. Пригодится на пул-реквестах и аудитах. 365установок vercel-environment-sync Хук проверяет переменные окружения после правки .env и подсказывает, как перенести их в Vercel. Пригодится, если локальные и деплойные значения расходятся. 363установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой