page-behavior-indexer

Extract page-level business interactions from React frontend source into YAML/Markdown.

Updated Nov 8, 2025
One-click install
npx skills add https://github.com/10knamesmore/dotfiles --skill page-behavior-indexer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: page-behavior-indexer
Source: https://github.com/10knamesmore/dotfiles/tree/main/general/skills/page-behavior-indexer
Command: npx skills add https://github.com/10knamesmore/dotfiles --skill page-behavior-indexer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill extracts page-level business interaction units from React/React-like frontend source code and outputs discardable structured page behavior descriptions in YAML/Markdown to facilitate analysis and test generation.

Core Features & Use Cases

  • Identify and extract interaction units from a specified page or directory, including triggers, parameters, observable results, and confidence.
  • Output structured YAML/Markdown descriptions suitable for DSL/Playwright test input or post-change re-generation of page behavior.
  • Use cases include analyzing large frontend apps to document key business actions, generating test inputs, and maintaining behavior-focused documentation.

Quick Start

Use this Skill by selecting the page-behavior-indexer skill in the repository and follow the workflow described in SKILL.md to produce outputs that conform to references/output-schema.md.

Frequently Asked Questions about page-behavior-indexer

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

FAQPage Schema
How do I extract page interactions from frontend source code?

To extract page interactions from frontend source code, analyze React or React-like components to identify triggers, parameters, observable results, and confidence levels, then output structured YAML or Markdown descriptions capturing these business interaction units.

Can I generate Playwright test inputs from React source code automatically?

Yes, you can generate Playwright test inputs by extracting structured YAML or Markdown page behavior descriptions from React source code, capturing business interaction units like triggers and observable results suitable for DSL or Playwright test generation.

What is the best way to document frontend business actions for test generation?

The best way to document frontend business actions is extracting page-level interaction units into structured YAML or Markdown formats that capture triggers, parameters, observable results, and confidence for direct use in DSL or Playwright test generation.

Does page behavior extraction work with large frontend applications?

Yes, page behavior extraction works with large frontend applications by analyzing specified pages or directories to identify key business actions and output discardable structured descriptions for behavior-focused documentation and test generation.

How do I format extracted page behavior for DSL generation?

To format extracted page behavior for DSL generation, output structured YAML or Markdown descriptions that conform to a defined output schema, capturing interaction triggers, parameters, observable results, and confidence scores from the frontend source code.

What triggers and parameters can be extracted from React page interactions?

Extractable triggers and parameters from React page interactions include user event triggers, input parameters, observable UI results, and confidence scores, all structured into YAML or Markdown descriptions for downstream DSL or Playwright test generation.