comment

Insert Chinese comments into JavaScript/TypeScript and JSX source code.

Updated Mar 3, 2025
One-click install
npx skills add https://github.com/LZY2333/LZY-FE-JumpTrack --skill comment-lzy2333
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: comment
Source: https://github.com/LZY2333/LZY-FE-JumpTrack/tree/main/agent-configs/skills/custom-comment
Command: npx skills add https://github.com/LZY2333/LZY-FE-JumpTrack --skill comment-lzy2333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

此技能自动为源码添加中文注释,覆盖自定义函数、变量、解构变量、自定义 Hook 以及 JSX 组件,并在文件末尾生成组件结构图,提升代码可读性与维护效率。

Core Features & Use Cases

  • 自动在代码元素前插入简要中文注释,覆盖函数、变量、解构字段与自定义 Hooks,且不改变原有逻辑。
  • 对 JSX 自定义组件在适当位置添加注释,并在文件末尾附加完整的组件结构图,便于快速理解结构。
  • 保留现有注释、避免重复添加,并使用 JS/TS 的 // 注释与 JSX 的 {/* ... */} 注释风格。

Quick Start

将目标源码文件交给该技能,它将自动添加中文注释并在文件底部生成组件结构图。

Frequently Asked Questions about comment

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

FAQPage Schema
How do I automatically add Chinese comments to JavaScript and TypeScript source code?

To automatically add Chinese comments to JavaScript and TypeScript source code, you can use an automated annotation tool. It inserts comments before functions, variables, and custom Hooks without altering code behavior.

How do I generate a component structure diagram for React JSX files?

To generate a component structure diagram for React JSX files, apply automated annotation to your codebase. It appends a complete visual component structure diagram at the bottom of the file for quick reference.

Can I automatically annotate destructured variables and custom Hooks in React?

Yes, you can automatically annotate destructured variables and custom Hooks in React. The annotation process covers destructuring fields and custom Hooks, inserting brief Chinese comments before each code element.

Does the automated code annotation process preserve existing comments in TypeScript files?

Yes, the automated code annotation process preserves existing comments in TypeScript files. It detects existing annotations and avoids duplicate additions while applying standard syntax like // and JSX {/* ... */}.

What is the best way to standardize in-file documentation for a React codebase?

The best way to standardize in-file documentation for a React codebase is through automated Chinese comment insertion. It systematically explains functions, variables, and JSX components while generating a structural diagram at the file end.

Do I need external tooling to annotate JSX components with standard syntax?

No, you do not need external tooling to annotate JSX components with standard syntax. The annotation process uses native JavaScript, TypeScript, and JSX comment styles without requiring additional dependencies or tools.