!!!###!!!title=VChart Skill Usage——VisActor/VChart tutorial documents!!!###!!!!!!###!!!description=VChart and VTable are core components of VisActor's visualization solution. To improve AI-assisted development efficiency and reduce onboarding cost, VisActor provides a developer skill.!!!###!!!

VChart Skill Usage

VChart and VTable are core components of VisActor's visualization solution. To improve AI-assisted development efficiency and reduce onboarding cost, VisActor provides a developer skill.

Relationship with Quick Start

  • Quick Start covers VChart basics.
  • This guide focuses on using vchart-skill in AI editors.

Installation

Use either command:

npx skills add VisActor/VChart
npx skills add VisActor/VChart --skill vchart-development-assistant

Installation preview:

Editor References

  • Trae docs: https://docs.trae.ai/ide/skills?_lang=zh
  • Cursor docs: https://cursor.com/cn/docs/context/skills

Skill directory preview:

Demo Scenarios

1. Generate a simple chart

Suggested prompt:

Use VChart to generate a basic bar chart with xField, yField, and a minimal runnable example.

Expected result:

  • A runnable minimal spec is generated.
  • The chart can render correctly.

2. Adjust chart styles

Suggested prompt:

Optimize colors, label style, and legend readability for the existing bar chart while preserving the current data structure.

Expected result:

  • Style changes are clearly visible.
  • Existing chart structure and data mapping remain valid.

3. Fix spec/config issues

Suggested prompt:

Review the current VChart spec, identify configuration errors, and provide fixes with explanations.

Expected result:

  • Incorrect config locations are identified.
  • A directly replaceable fixed config is provided.

Notes

  • Make sure the skill is installed in your project editor skill directory.
  • If behavior differs by editor version, follow the latest official docs.