What problem does it solve?
This Skill solves the challenge of building an interactive, touch-friendly ontology graph UI that visually distinguishes classes, instances, literals, and different edge types while supporting inference animations and user-driven graph editing.
Core Features & Use Cases
- Cytoscape.js graph initialization: Create a graph from node/edge slices with layout hints and zoom constraints for responsive rendering.
- Node and edge styling by ontology semantics: Apply distinct visual styles for class/instance/literal nodes and for object/is-a/data edges, including highlighted and selected states.
- Interactive editing tools: Add nodes, draw edges via Cytoscape edgehandles, delete selected elements, and extract current user edges for validation.
- Inference animation workflow: Stepwise emphasize matched rule edges, fade in derived triples, and convert inferred styling into confirmed styles.
- Mobile touch support: Enable zoom/pan, add double-tap to create nodes, and long-press context menus, with resizing/fit handling.
Quick Start
Use this skill to generate the Cytoscape.js graph-renderer implementation for your ontology learning chapter, then wire it into your UI so users can drag, connect, and animate inferred triples on desktop and mobile.
