skills.rest
mrgeoffrich
mrgeoffrichCOMMUNITY
Explore all skills by this author →
GitHub

update-tour-manifest

Regenerate and analyze data-tour attribute manifests in React applications.

3|Updated Aug 28, 2025
Search Tags:#automation#frontend#react#script#ui-guidance#data-tour
One-click install
npx skills add https://github.com/mrgeoffrich/mini-infra --skill update-tour-manifest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-tour-manifest
Source: https://github.com/mrgeoffrich/mini-infra/tree/main/.claude/skills/update-tour-manifest
Command: npx skills add https://github.com/mrgeoffrich/mini-infra --skill update-tour-manifest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill improves the consistency and completeness of UI guidance by regenerating and analyzing data-tour attribute mappings across a codebase.

Core Features & Use Cases

  • Regenerates UI manifests by scanning source code for data-tour attributes and updating the manifest JSON used by the AI sidecar.
  • Identifies coverage gaps on pages lacking proper data-tour attributes, allowing developers to add missing identifiers.
  • Assists in maintenance of the UI tour system by suggesting descriptive IDs aligned with page elements, enhancing AI guidance and user navigation.

Quick Start

Run the script to generate the updated UI element manifest after adding or updating data-tour attributes in the frontend codebase.

Frequently Asked Questions about update-tour-manifest

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

FAQPage Schema
How do I automatically update data-tour attributes in a React application?▼

To update data-tour attributes in a React application, run a script that scans your source code and regenerates the manifest JSON. This ensures your UI element mappings remain consistent across all pages and components.

What is a data-tour manifest and when do I need to regenerate it?▼

A data-tour manifest is a JSON mapping of interactive UI elements used by an AI sidecar for guided tours. You need to regenerate it whenever you add or update data-tour attributes in your frontend codebase to maintain accurate user navigation guidance.

Do I need Node.js to scan source code for UI tour coverage gaps?▼

Yes, you need a Node.js environment to run the script that scans your project source code for data-tour attributes. The script analyzes the codebase to identify pages lacking proper UI tour identifiers.

How can I find missing data-tour attributes on pages in my frontend codebase?▼

You can find missing data-tour attributes by running an analysis script that identifies coverage gaps on pages lacking proper identifiers. This allows developers to add missing elements and enhance AI guidance and user navigation.

What's the best way to maintain a UI tour system for AI-guided navigation?▼

The best way to maintain a UI tour system is to automate the regeneration of data-tour attribute manifests and suggest descriptive IDs aligned with page elements. This enhances AI guidance and ensures comprehensive coverage across your application.

Related Skills

Explore More Software Engineering Skills→
eyadsibaieyadsibai
7

react-artifacts

Initialize React projects with Vite, TypeScript, Tailwind CSS, and shadcn/ui, then bundle them into single HTML artifacts.

Community
Intermediate
Spectaculous-CodeSpectaculous-Code

onboarding-architect

Manage user onboarding tours for the Raamattu Nyt application.

Official
Advanced
iyakiiyaki

frontend-design

Design production-grade frontend interfaces from user requirements.

Community
Advanced
kollaboraikollaborai
1

webapp-testing

Automate local web app testing with Playwright and Python scripts.

Community
Intermediate