npm - @templmf/temp-solf-lmf - Versions diffs - 0.0.104 → 0.0.105 - Mend

@templmf/temp-solf-lmf 0.0.104 → 0.0.105

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/skill.md DELETED Viewed

@@ -1,1368 +0,0 @@
-# G6 v5 Expert Skill（Production Edition）
-````md
----
-name: g6-v5-expert
-description: |
-  Production-grade expert skill for AntV G6 v5.
-  Purpose:
-  Prevent LLMs from mixing G6 v3/v4/v5 APIs and enforce
-  correct G6 v5 architecture, runtime APIs, extension APIs,
-  layout usage, behaviors, data structures, rendering lifecycle,
-  and performance patterns.
-  MUST:
-  - Generate ONLY G6 v5 code
-  - Prefer @antv/g6 modern APIs
-  - Use extension-driven architecture
-  - Use async render()
-  - Use updateNodeData/updateEdgeData
-  - Use register + ExtensionCategory
-  - Use behaviors instead of legacy modes
-  - Use Graph options schema
-  NEVER:
-  - Generate v3/v4 legacy APIs
-  - Use Net / TreeGraph constructors
-  - Use Item APIs
-  - Use graph.data(data)
-  - Use graph.changeData(data)
-  - Use graph.refresh()
-  - Use graph.updateItem()
-  - Use graph.findById()
-  - Use graph.getNodes()
-  - Use graph.getEdges()
-  - Use graph.addItem()
-  - Use graph.removeItem()
-  - Use graph.setMode()
-  This skill acts as:
-  - API correctness layer
-  - version guardrail
-  - architecture guideline
-  - runtime update handbook
-  - layout decision engine
-  - graph rendering best practice guide
-version: g6-v5-only
-framework: "@antv/g6"
-priority: critical
-triggers:
-  - g6
-  - antv
-  - graph visualization
-  - topology
-  - relationship graph
-  - knowledge graph
-  - dag
-  - tree graph
-  - flow graph
-  - combo
-  - graph editor
-  - node edge
-  - layout
-  - graph canvas
----
-# =========================================================
-# CORE VERSION RULES
-# =========================================================
-CRITICAL:
-This skill ONLY targets:
-- @antv/g6 v5+
-Never generate:
-- v3 APIs
-- v4 APIs
-- deprecated APIs
-Do NOT mix versions.
-If user code contains legacy APIs:
-- migrate them to v5 APIs
-- explain migration when necessary
----
-# =========================================================
-# G6 v5 ARCHITECTURE
-# =========================================================
-G6 v5 is:
-- extension-driven
-- declarative
-- runtime-update-oriented
-- async-render-based
-Everything is an Extension:
-- Node
-- Edge
-- Combo
-- Layout
-- Behavior
-- Plugin
-- Theme
-- Transform
-- Animation
-Modern G6 architecture revolves around:
-- Graph
-- extensions
-- behaviors
-- layouts
-- runtime updates
-NOT:
-- Items
-- Modes
-- ShapeFactory
-- imperative item manipulation
----
-# =========================================================
-# CORRECT IMPORTS
-# =========================================================
-ALWAYS:
-```ts
-import { Graph } from '@antv/g6';
-````
-OR:
-```ts
-import {
-  Graph,
-  register,
-  ExtensionCategory,
-} from '@antv/g6';
-```
-NEVER:
-```ts
-import G6 from '@antv/g6';
-```
-NEVER:
-```ts
-const net = new G6.Net();
-```
-NEVER:
-```ts
-new G6.TreeGraph()
-```
----
-# =========================================================
-# GRAPH INITIALIZATION
-# =========================================================
-STANDARD:
-```ts
-const graph = new Graph({
-  container: 'container',
-  width: 1200,
-  height: 800,
-  data,
-  node: {},
-  edge: {},
-  combo: {},
-  layout: {},
-  behaviors: [],
-  plugins: [],
-});
-await graph.render();
-```
-MUST:
-* use async render()
-* pass data inside constructor or setData()
-PREFER:
-* declarative config
----
-# =========================================================
-# DATA STRUCTURE
-# =========================================================
-ONLY use:
-```ts
-{
-  nodes: [],
-  edges: [],
-  combos: [],
-}
-```
-Example:
-```ts
-const data = {
-  nodes: [
-    {
-      id: 'node-1',
-      type: 'circle',
-      style: {
-        labelText: 'Node A',
-      },
-      data: {
-        category: 'service',
-      },
-    },
-  ],
-  edges: [
-    {
-      source: 'node-1',
-      target: 'node-2',
-      type: 'line',
-    },
-  ],
-  combos: [],
-};
-```
-MUST:
-* every node has unique id
-* edges use source + target
-* style goes into style field
-* business fields go into data field
-NEVER:
-* mix style fields at root level
-* omit ids
----
-# =========================================================
-# RENDERING LIFECYCLE
-# =========================================================
-INITIAL RENDER:
-```ts
-await graph.render();
-```
-INCREMENTAL UPDATE:
-```ts
-graph.updateNodeData([...]);
-graph.updateEdgeData([...]);
-graph.draw();
-```
-FULL DATA REPLACEMENT:
-```ts
-graph.setData(data);
-await graph.render();
-```
-NEVER:
-```ts
-graph.refresh()
-```
-NEVER:
-```ts
-graph.changeData()
-```
-NEVER:
-```ts
-graph.paint()
-```
-NEVER:
-```ts
-graph.data(data)
-```
----
-# =========================================================
-# NODE CONFIGURATION
-# =========================================================
-GLOBAL NODE CONFIG:
-```ts
-node: {
-  type: 'rect',
-  style: {
-    size: [120, 40],
-    fill: '#1677ff',
-    radius: 8,
-    labelText: 'Node',
-  },
-},
-```
-PER NODE OVERRIDE:
-```ts
-nodes: [
-  {
-    id: '1',
-    type: 'circle',
-    style: {
-      fill: 'red',
-    },
-  },
-]
-```
-COMMON NODE TYPES:
-* circle
-* rect
-* ellipse
-* diamond
-* triangle
-* image
-* html
-PREFER:
-* rect for topology
-* circle for relationships
-* image for avatars
-* html only for complex UI nodes
-AVOID:
-* massive html nodes
----
-# =========================================================
-# EDGE CONFIGURATION
-# =========================================================
-COMMON EDGE TYPES:
-* line
-* polyline
-* quadratic
-* cubic
-* cubic-horizontal
-* cubic-vertical
-FLOWCHARTS:
-* polyline
-RELATIONSHIPS:
-* cubic
-Example:
-```ts
-edge: {
-  type: 'polyline',
-  style: {
-    endArrow: true,
-    stroke: '#999',
-  },
-},
-```
----
-# =========================================================
-# COMBO SYSTEM
-# =========================================================
-Combos are grouping containers.
-Use combos for:
-* service domains
-* departments
-* clusters
-* grouping
-* bounded contexts
-Example:
-```ts
-{
-  id: 'node-1',
-  combo: 'backend-group',
-}
-```
-Combo definition:
-```ts
-combos: [
-  {
-    id: 'backend-group',
-    style: {
-      labelText: 'Backend',
-    },
-  },
-]
-```
----
-# =========================================================
-# LAYOUT RULES
-# =========================================================
-# DAG / FLOWCHART
-USE:
-```ts
-layout: {
-  type: 'dagre',
-}
-```
-Best for:
-* workflow
-* pipeline
-* dependency graph
-* architecture graph
----
-# RELATIONSHIP GRAPH
-USE:
-```ts
-layout: {
-  type: 'force',
-}
-```
-Best for:
-* knowledge graph
-* social graph
-* entity relation
----
-# TREE GRAPH
-USE:
-* compact-box
-* indented
-* mindmap
-NEVER:
-* force layout for trees
----
-# RADIAL GRAPH
-USE:
-```ts
-layout: {
-  type: 'radial',
-}
-```
-Best for:
-* center relationship graph
----
-# CLUSTER GRAPH
-USE:
-```ts
-layout: {
-  type: 'combo-combined',
-}
-```
----
-# GRID GRAPH
-USE:
-```ts
-layout: {
-  type: 'grid',
-}
-```
----
-# CONCENTRIC GRAPH
-USE:
-```ts
-layout: {
-  type: 'concentric',
-}
-```
----
-# IMPORTANT LAYOUT RULE
-Do NOT rerun expensive layouts frequently.
-Prefer:
-* incremental updates
-* stable positioning
-* partial updates
----
-# =========================================================
-# BEHAVIORS
-# =========================================================
-G6 v5 uses:
-```ts
-behaviors: []
-```
-NOT:
-```ts
-modes: {}
-```
-DEFAULT RECOMMENDED:
-```ts
-behaviors: [
-  'drag-canvas',
-  'zoom-canvas',
-  'drag-element',
-]
-```
-COMMON BEHAVIORS:
-* drag-canvas
-* zoom-canvas
-* drag-element
-* click-select
-* brush-select
-* hover-activate
-* focus-element
-* collapse-expand
----
-# INTERACTIVE GRAPH
-Recommended:
-```ts
-behaviors: [
-  'drag-canvas',
-  'zoom-canvas',
-  'drag-element',
-  'hover-activate',
-  'click-select',
-]
-```
----
-# TREE GRAPH
-Recommended:
-```ts
-behaviors: [
-  'collapse-expand',
-  'drag-canvas',
-  'zoom-canvas',
-]
-```
----
-# =========================================================
-# STATES
-# =========================================================
-Use state APIs.
-Example:
-```ts
-graph.setElementState(
-  'node-1',
-  ['selected'],
-);
-```
-COMMON STATES:
-* selected
-* active
-* inactive
-* highlighted
-* disabled
-Example:
-```ts
-node: {
-  state: {
-    selected: {
-      stroke: '#ff4d4f',
-      lineWidth: 3,
-    },
-  },
-},
-```
----
-# =========================================================
-# CUSTOM EXTENSIONS
-# =========================================================
-Register custom extensions via:
-```ts
-register(
-  ExtensionCategory.NODE,
-  'server-node',
-  ServerNode,
-);
-```
-Categories:
-* NODE
-* EDGE
-* COMBO
-* BEHAVIOR
-* PLUGIN
-* TRANSFORM
-NEVER use:
-* old registerNode
-* old registerEdge
-* old registerBehavior
----
-# CUSTOM NODE
-# =========================================================
-Use custom node for:
-* topology card
-* service card
-* monitoring node
-* server card
-* status panel
-* React/Vue node
-Example:
-```ts
-register(
-  ExtensionCategory.NODE,
-  'service-node',
-  ServiceNode,
-);
-```
-Usage:
-```ts
-node: {
-  type: 'service-node',
-}
-```
----
-# =========================================================
-# PLUGINS
-# =========================================================
-Plugins go into:
-```ts
-plugins: []
-```
-COMMON PLUGINS:
-* minimap
-* toolbar
-* contextmenu
-* tooltip
-* grid-line
-* fullscreen
-Example:
-```ts
-plugins: [
-  {
-    type: 'minimap',
-  },
-]
-```
----
-# =========================================================
-# TRANSFORMS
-# =========================================================
-Use transforms for:
-* filtering
-* clustering
-* simplifying large graphs
-Transforms are preferred over:
-* manual data mutation loops
----
-# =========================================================
-# EVENT SYSTEM
-# =========================================================
-Example:
-```ts
-graph.on('node:click', (event) => {
-  console.log(event);
-});
-```
-COMMON EVENTS:
-* node:click
-* edge:click
-* canvas:click
-* node:mouseenter
-* node:mouseleave
-NEVER:
-* use legacy event APIs
----
-# =========================================================
-# VIEW CONTROL
-# =========================================================
-Fit view:
-```ts
-graph.fitView();
-```
-Center:
-```ts
-graph.focusElement('node-1');
-```
-Zoom:
-```ts
-graph.zoomTo(1.5);
-```
-Translate:
-```ts
-graph.translateBy([100, 0]);
-```
----
-# =========================================================
-# RUNTIME UPDATE PATTERNS
-# =========================================================
-PREFERRED:
-```ts
-graph.updateNodeData([
-  {
-    id: 'node-1',
-    style: {
-      fill: 'red',
-    },
-  },
-]);
-graph.draw();
-```
-AVOID:
-```ts
-graph.render();
-```
-for minor updates.
----
-# ADDING DATA
-# =========================================================
-Preferred:
-```ts
-const current = graph.getData();
-graph.setData({
-  ...current,
-  nodes: [...current.nodes, newNode],
-});
-await graph.render();
-```
-NEVER:
-```ts
-graph.addItem()
-```
----
-# REMOVING DATA
-# =========================================================
-Preferred:
-```ts
-const data = graph.getData();
-graph.setData({
-  ...data,
-  nodes: data.nodes.filter(...),
-});
-await graph.render();
-```
-NEVER:
-```ts
-graph.removeItem()
-```
----
-# =========================================================
-# PERFORMANCE RULES
-# =========================================================
-For large graphs:
-MUST:
-* reduce labels
-* reduce animations
-* use transforms
-* use clustering
-* paginate
-* lazy load
-* virtualize when possible
-AVOID:
-* thousands of html nodes
-* repeated render()
-* repeated force layout
-* heavy shadows
-* massive animations
-PREFER:
-* updateNodeData
-* updateEdgeData
-* draw()
----
-# LARGE KNOWLEDGE GRAPH
-# =========================================================
-Recommended:
-* force layout
-* hover-activate
-* focus-element
-* clustering
-* lazy expansion
-* dynamic neighbor loading
-Avoid:
-* rendering all relationships initially
----
-# TOPOLOGY GRAPH
-# =========================================================
-Recommended:
-* dagre
-* rect nodes
-* polyline edges
-* combos
-* minimap
-* grid-line
----
-# TREE GRAPH
-# =========================================================
-Recommended layouts:
-* compact-box
-* indented
-* mindmap
-Recommended behaviors:
-* collapse-expand
-* zoom-canvas
-* drag-canvas
----
-# =========================================================
-# HTML NODE RULES
-# =========================================================
-HTML nodes are expensive.
-Use ONLY when:
-* embedded UI
-* buttons
-* forms
-* Vue/React components
-Avoid for:
-* large graphs
-* thousands of nodes
-Prefer:
-* canvas nodes
----
-# =========================================================
-# ANIMATION RULES
-# =========================================================
-Prefer:
-* fade
-* translate
-* lightweight animations
-Avoid:
-* massive path animations
-* continuous animations
-* expensive particle effects
----
-# =========================================================
-# REACT INTEGRATION
-# =========================================================
-Recommended:
-```ts
-useEffect(() => {
-  const graph = new Graph({...});
-  graph.render();
-  return () => {
-    graph.destroy();
-  };
-}, []);
-```
-MUST:
-* destroy graph on unmount
-AVOID:
-* recreating graph repeatedly
----
-# =========================================================
-# VUE INTEGRATION
-# =========================================================
-Recommended:
-```ts
-onMounted(async () => {
-  graph = new Graph({...});
-  await graph.render();
-});
-onBeforeUnmount(() => {
-  graph.destroy();
-});
-```
----
-# =========================================================
-# COMMON MIGRATIONS
-# =========================================================
-OLD:
-```ts
-graph.changeData(data)
-```
-NEW:
-```ts
-graph.setData(data);
-await graph.render();
-```
----
-OLD:
-```ts
-graph.refresh()
-```
-NEW:
-```ts
-graph.draw()
-```
----
-OLD:
-```ts
-graph.updateItem()
-```
-NEW:
-```ts
-graph.updateNodeData()
-graph.updateEdgeData()
-```
----
-OLD:
-```ts
-modes: {
-  default: ['drag-node']
-}
-```
-NEW:
-```ts
-behaviors: ['drag-element']
-```
----
-OLD:
-```ts
-G6.registerNode()
-```
-NEW:
-```ts
-register(
-  ExtensionCategory.NODE,
-  ...
-)
-```
----
-# =========================================================
-# ABSOLUTE FORBIDDEN APIs
-# =========================================================
-NEVER GENERATE:
-```ts
-graph.changeData()
-graph.refresh()
-graph.paint()
-graph.updateItem()
-graph.findById()
-graph.getNodes()
-graph.getEdges()
-graph.addItem()
-graph.removeItem()
-graph.setMode()
-G6.registerNode()
-G6.registerEdge()
-G6.registerBehavior()
-new G6.TreeGraph()
-new G6.Net()
-```
-These are legacy APIs.
----
-# =========================================================
-# AI DECISION RULES
-# =========================================================
-IF:
-* workflow
-* DAG
-* architecture
-THEN:
-* dagre
-* rect
-* polyline
----
-IF:
-* knowledge graph
-* relationship graph
-THEN:
-* force
-* circle
-* cubic
----
-IF:
-* org chart
-* tree
-THEN:
-* compact-box
-* collapse-expand
----
-IF:
-* large graph
-THEN:
-* clustering
-* transforms
-* lazy load
-* avoid html nodes
----
-IF:
-* business grouping exists
-THEN:
-* combos
----
-# =========================================================
-# OUTPUT REQUIREMENTS
-# =========================================================
-Generated code MUST:
-* use TypeScript when possible
-* use async render()
-* use Graph from @antv/g6
-* follow v5 APIs only
-* avoid deprecated APIs
-* prefer declarative configs
-* support runtime updates
-Generated examples SHOULD:
-* include behaviors
-* include layout
-* include proper node styles
-* include cleanup logic
----
-# =========================================================
-# OFFICIAL REFERENCES
-# =========================================================
-Official site:
-[https://g6.antv.antgroup.com/](https://g6.antv.antgroup.com/)
-GitHub:
-[https://github.com/antvis/G6](https://github.com/antvis/G6)
-API docs:
-[https://github.com/antvis/G6/tree/v5/packages/site/docs/api](https://github.com/antvis/G6/tree/v5/packages/site/docs/api)
-Architecture:
-* Extension system
-* Runtime graph updates
-* Layout system
-* Behavior system
----
-```