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.