Yfiles init

Skill yWorks/yfiles-for-html-skills/skills/yfiles-init

Comprehensive Claude Code plugin for yFiles for HTML development - includes skills for initialization, graph building, layouts, custom styling, and interactive features

Install

npx -y skills add yWorks/yfiles-for-html-skills --skill yfiles-init

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

This skill should be used when the user asks to "initialize a yFiles application", "create a new yFiles demo", "scaffold a yFiles project", "set up GraphComponent", or mentions "create app", "new demo", "initialize yFiles", "setup yFiles", or "License.value".

SKILL.md

2.6 KB, as published. Nobody here has run it

Initialize a yFiles Application

Create a complete yFiles application following package conventions.

Quick Start

/yfiles-init [demo-name]

Creates in the current directory if no name is specified.

Setup Checklist

- [ ] Verify GraphComponent API with yFiles MCP
- [ ] Create HTML entry point
- [ ] Create main TypeScript/JavaScript file
- [ ] Adjust import paths for license
- [ ] Configure ESLint with yFiles plugin (recommended)
- [ ] Test in browser

Implementation

Step 1: Verify APIs

Use the yFiles MCP server to confirm the current API:

yfiles:yfiles_get_symbol_details(name="GraphComponent")
yfiles:yfiles_list_members(name="GraphComponent", includeInherited=true)

Step 2: Create files

Essential pattern:

import { GraphComponent, GraphEditorInputMode, License } from '@yfiles/yfiles'
import licenseData from '../../lib/license.json'

License.value = licenseData  // MUST come first

const graphComponent = new GraphComponent('#graphComponent')
graphComponent.inputMode = new GraphEditorInputMode()

See references/examples.md for complete file templates.

Step 3: Adjust import paths

License path depends on demo location:

demos-ts/category/demo/ → ../../../lib/license.json
Adjust ../ depth to match directory nesting

Step 4: Configure ESLint (Recommended)

The official @yfiles/eslint-plugin helps catch common mistakes and ensures yFiles 3.0 best practices:

npm i -D eslint typescript typescript-eslint @yfiles/eslint-plugin

See reference.md for complete ESLint configuration.

Step 5: Test

npm start
# Navigate to http://localhost:4242/demos-ts/your-demo/

Key Rules

License first: Call License.value = licenseData before any other yFiles API
CSS selectors: Use new GraphComponent('#id') or pass a DOM element
Graph access: graphComponent.graph
Set defaults before creating nodes: Configure graph.nodeDefaults.style before createNode()

Additional Resources

references/examples.md — Complete HTML and TypeScript file templates
references/reference.md — API patterns, GraphComponent options, input mode configuration