autogen-guide

Generates Craft CMS config editor guides from GitHub repositories.

13|7|Updated Aug 18, 2025

Search Tags:#automation #typescript #code analysis #react #documentation generation #interactive guides

Ready to run

npx skills add https://github.com/grafana/interactive-tutorials --skill autogen-guide

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: autogen-guide
Source: https://github.com/grafana/interactive-tutorials/tree/main/.cursor/skills/autogen-guide
Command: npx skills add https://github.com/grafana/interactive-tutorials --skill autogen-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of interactive guides for software UIs by analyzing source code, reducing manual authoring time and effort.

Core Features & Use Cases

Automated UI Analysis: Scans React/TypeScript code to identify interactive elements like buttons, inputs, and fields.
Guide Structure Generation: Creates a structured guide plan, including sections, steps, and requirements.
Use Case: You have a new feature with a complex configuration UI. Instead of manually documenting each step, use this Skill to generate an interactive walkthrough directly from the component's source code.

Quick Start

Use the autogen-guide skill to generate a Pathfinder guide from the GitHub repository at https://github.com/grafana/grafana-pathfinder-app/tree/main/src/editors/config.

Frequently Asked Questions about autogen-guide

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate interactive guides from source code?▼

Generating interactive guides from source code involves scanning React and TypeScript components to extract interactive elements, selectors, and conditional logic, which orchestrates a multi-phase pipeline to output a structured Pathfinder guide JSON.

How does automated UI analysis work for React and TypeScript components?▼

Automated UI analysis works by scanning React and TypeScript codebases to identify interactive elements like inputs and buttons, extracting field metadata and conditional logic to produce a structured guide plan.

Can I create documentation for configuration UIs without manual authoring?▼

Yes, you can create documentation for configuration UIs without manual authoring by using this Skill to analyze component source code and automatically generate an interactive walkthrough directly from the extracted structure.

Does the documentation generation pipeline support conditional logic extraction?▼

Yes, the documentation generation pipeline supports conditional logic extraction by analyzing React and TypeScript components to capture field metadata and conditional rules, ensuring the generated Pathfinder guide accurately reflects dynamic UI behavior.

What is the best way to document complex configuration UIs?▼

The best way to document complex configuration UIs is to automate the process by analyzing source code directly, extracting structure and field metadata to generate a structured guide plan and reduce manual authoring effort.