skills.rest
LZY2333
LZY2333COMMUNITY
Explore all skills by this author →
GitHub

variable-flow

Trace variable flow across components and hooks into a three-layer summary.

Updated Mar 3, 2025
Search Tags:#documentation#frontend#code-analysis#variable-flow#field-inheritance#component-tracing
One-click install
npx skills add https://github.com/LZY2333/LZY-FE-JumpTrack --skill variable-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: variable-flow
Source: https://github.com/LZY2333/LZY-FE-JumpTrack/tree/main/agent-configs/skills/custom-variable-flow
Command: npx skills add https://github.com/LZY2333/LZY-FE-JumpTrack --skill variable-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Traces how data and variables flow across a feature, from sources through components and hooks, and documents field evolution for easier onboarding and maintenance.

Core Features & Use Cases

  • Generate a three-layer flow summary: 起点到页面链路, 组件内传递链路, and 对象字段演进.
  • Produce a single JavaScript block with inline comments that annotate object fields and their evolution across layers.
  • Supports documenting fields across VO/type definitions, API/SSR results, Page props, Component props, Local state, and derived data.

Quick Start

Provide a complete three-layer variable flow documentation for a given feature by tracing variables across components and hooks.

Frequently Asked Questions about variable-flow

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

FAQPage Schema
How do I document variable flow and field evolution across frontend components?▼

To document variable flow, you can trace how fields evolve through components and hooks, capturing transitions from API results to local state. This produces a three-layer summary with inline comments detailing object field evolution.

What is the best way to trace data flow from API results to page props?▼

Tracing data flow from API results to page props involves mapping the path across VO/type definitions and SSR results. It generates a summary with clickable path links and precise tags for each architectural layer.

How do I generate inline code comments for object field inheritance and component tracing?▼

You can generate inline comments for object field inheritance by analyzing the variable flow across hooks. The output is a single JavaScript code block with annotations showing how each field mutates across layers.

Does this variable flow documentation approach work with SSR results and local state?▼

Yes, this approach works with SSR results and local state by explicitly mapping field evolution across these boundaries. It ensures all derived data and component props are included in the three-layer flow summary.

How to map component props and local state transitions for frontend onboarding?▼

Mapping component props and local state transitions involves documenting the internal passing chain within components. This creates a clear inheritance log that accelerates onboarding and simplifies maintenance.

Related Skills

Explore More Software Engineering Skills→
gitgoodordietryinggitgoodordietrying
1

data-validation

Validate data structures and API payloads against JSON Schema, Zod, and Pydantic schemas.

Community
Advanced
microsoftmicrosoft
2.9k

wiki-vitepress

Package wiki Markdown into a VitePress static site with dark theme and Mermaid diagrams.

Official
Advanced
xuyannan0321xuyannan0321

test-and-review

Run linting and building checks to verify code quality before deployment.

Community
Basic
nq-rdlnq-rdl

zod

Validate runtime data and infer TypeScript types with Zod schemas.

Official
Intermediate