yFiles for HTML Skills and Claude Code Plugin

A set of Agent Skills stored as a comprehensive Claude Code plugin with skills for developing yFiles for HTML applications.

Overview

This repository includes specialized skills covering various aspects of yFiles for HTML development. It is bundled as a Claude Code plugin for direct use in Claude Code. These are the skills:

Foundation Skills

• yfiles-init - Initialize yFiles applications with GraphComponent and license registration
• yfiles-graphbuilder - Build graphs from business data using GraphBuilder
• yfiles-layout - Apply automatic layout algorithms (hierarchical, organic, tree, etc.)

Custom Styling Skills

• yfiles-nodestyle-basic - Create custom node styles with SVG rendering
• yfiles-nodestyle-configure - Make styles configurable with constructor params and node.tag
• yfiles-nodestyle-interaction - Implement hit testing and edge cropping
• yfiles-nodestyle-advanced - Viewport culling, custom bounds, and group nodes

Interactivity Skills

• yfiles-interactivity - Add tooltips, context menus, search, overview, and click handlers

Features

✅ Comprehensive Coverage - From initialization to advanced interactions ✅ Best Practices - Follows official yFiles patterns and conventions ✅ Code Examples - Real examples extracted from yFiles demos ✅ API References - Complete documentation for each feature ✅ MCP Integration - Works with yFiles MCP server for up-to-date API info ✅ Progressive Disclosure - Main skill files with detailed reference docs ✅ ESLint Integration - Includes guidance for the official @yfiles/eslint-plugin to catch common mistakes

Installation

Option 1: Install using skills.sh for any agent (Recommended)

npx skills add yworks/yfiles-for-html-skills

Option 2: Install into Claude Code using the marketplace

Add the yWorks marketplace and install the plugin in two steps:

/plugin marketplace add yworks/yfiles-claude-marketplace
/plugin install yfiles-for-html@yfiles

Option 3: Clone and Use Locally

# Clone the repository
git clone https://github.com/yworks/yfiles-for-html-skills.git

# Use with Claude Code
claude --plugin-dir ./yfiles-for-html-skills

Usage

Skills can be invoked explicitly or will be automatically activated by your agent based on context.

Explicit Invocation

E.g. in Claude, use the / command to invoke a specific skill:

/yfiles:init                    # Initialize a new yFiles application
/yfiles:graphbuilder            # Build graph from data
/yfiles:layout                  # Apply layout algorithms
/yfiles:nodestyle-basic         # Create custom node styles
/yfiles:interactivity           # Add interactive features

Automatic Activation

Claude will automatically use these skills when you:

• Mention yFiles-related tasks: "create a yFiles app", "add tooltips", "apply hierarchical layout"
• Ask about specific features: "how to customize node styles", "add graph search"
• Work with yFiles code that needs modification or explanation

Quick Start Examples

Initialize a New yFiles Application

Create a new yFiles application with a hierarchical layout

Claude will use the yfiles-init and yfiles-layout skills automatically.

Build Graph from Data

Load this JSON data into a yFiles graph:
[
  { id: 1, name: "Node 1" },
  { id: 2, name: "Node 2" }
]

Claude will use the yfiles-graphbuilder skill.

Add Interactive Features

Add tooltips showing node details and a context menu with delete action

Claude will use the yfiles-interactivity skill.

Skill Details

yfiles-init

Initializes yFiles applications with proper setup:

• License registration
• GraphComponent creation
• Input mode configuration
• Default styles setup

Triggers: "initialize", "create app", "new demo", "setup yfiles"

yfiles-graphbuilder

Builds graphs from business data:

• GraphBuilder for node/edge data
• TreeBuilder for hierarchical data
• AdjacencyGraphBuilder for adjacency structures
• Data binding and ID mapping

Triggers: "load data", "import JSON", "build graph", "GraphBuilder"

yfiles-layout

Applies automatic layout algorithms:

• HierarchicalLayout for layered structures
• OrganicLayout for force-directed layouts
• TreeLayout for tree structures
• CircularLayout, OrthogonalLayout, RadialLayout

Triggers: "layout", "arrange nodes", "hierarchical", "organic", "tree"

yfiles-nodestyle-basic

Creates custom node visualizations:

• Extend NodeStyleBase
• Implement createVisual/updateVisual
• SVG rendering
• Visual caching for performance

Triggers: "custom node style", "NodeStyleBase", "createVisual", "custom rendering"

yfiles-nodestyle-configure

Makes styles configurable:

• Constructor parameters
• node.tag data binding
• TextRenderSupport for text
• Dynamic styling based on data

Triggers: "configurable style", "node.tag", "data binding", "TextRenderSupport"

yfiles-nodestyle-interaction

Handles user interaction with custom styles:

• isHit() for accurate click detection
• getOutline() for edge cropping
• GeneralPath API
• Custom shape hit testing

Triggers: "isHit", "hit testing", "getOutline", "edge cropping"

yfiles-nodestyle-advanced

Advanced rendering features:

• isVisible() for viewport culling
• getBounds() for custom rendering bounds
• Group node styles
• Performance optimization

Triggers: "isVisible", "getBounds", "group node", "viewport culling"

yfiles-interactivity

Adds interactive features:

• Tooltips with query-item-tool-tip
• Context menus with populate-item-context-menu
• Graph search with highlighting
• GraphOverviewComponent
• Click and selection events

Triggers: "tooltip", "context menu", "search", "overview", "click handler"

Working with yFiles MCP Server

The yFiles MCP server is automatically used by the Claude plugin! When you install the Claude plugin, the yFiles MCP server will be configured and used.

These skills are designed to work seamlessly with the yFiles MCP server, which provides:

• Real-time access to yFiles API documentation
• Symbol details and member lists
• Implementation examples from official demos
• Best practices and patterns

Note: The MCP server will be used automatically when the agent loads the plugin. However, you must be logged into the yFiles dev suite for the MCP server to access the documentation. Run npx --yes yfiles-dev-suite@latest if you haven't already.

The skills will automatically query the MCP server for:

• Current API documentation
• Symbol details and member lists
• Implementation examples
• Best practices

Requirements

• yFiles for HTML - Version 3.0 or later
• Claude Code - Latest version with plugin support
• Node.js - Version 22+ (for yFiles demos and build tools)

Documentation Structure

Each skill includes:

• SKILL.md - Main skill file with overview and quick start
• examples.md - Complete code examples with explanations
• reference.md - Detailed API documentation and patterns

Supporting documentation:

• patterns.md - Common implementation patterns (some skills)
• algorithms.md - Algorithm-specific guides (layout skill)
• advanced.md - Advanced topics (some skills)

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-skill
3. Follow the existing skill structure and style
4. Test your changes with real yFiles projects
5. Submit a pull request

Changelog

See CHANGELOG.md for version history and changes.

License

MIT License - see LICENSE file for details.

Resources

• yFiles for HTML Documentation
• yFiles MCP Server
• Claude Code Documentation
• yFiles Demos

Support

• Issues: Report bugs or request features via GitHub Issues
• yFiles Support: For yFiles-specific questions, contact yWorks support
• Claude Code: For Claude Code questions, see official documentation

Acknowledgments

Skills based on official yFiles for HTML demos and documentation. Examples extracted from:

• yFiles for HTML 3.0.0.4 Complete Evaluation package
• Official yFiles tutorials and demos
• yFiles MCP server documentation

Note: This plugin requires a valid yFiles for HTML license for production use. The evaluation version is suitable for development and testing.