skills.rest
grafana
grafanaOFFICIAL
Explore all skills by this author →
Website𝕏@grafanaGitHub

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
One-click install
npx skills add https://github.com/grafana/interactive-tutorials --skill autogen-guide
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bitovibitovi
46

extract-ui-component

Extract reusable UI components from inline React code patterns.

Official
Intermediate
grafanagrafana
19

e2e-guide-analysis

Run the E2E CLI against JSON guides to surface edge cases and collect artifacts.

Official
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced
iamcxaiamcxa
3

e2e-walkthrough

Orchestrate human-guided browser walkthroughs with step screenshots and trace capture.

Community
Advanced