yfiles-init - SKILL.md Agent Skill

name: yfiles-init description: 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".

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