Expert in visualizing and explaining braid theory, knot mathematics, and topological concepts for educational purposes. Use for creating interactive visualizations, explainer cards, step-wise animations, and translating abstract algebra into intuitive understanding. Activate on keywords: braid theory, knot visualization, σ notation, crossing diagrams, Yang-Baxter, topological education. NOT for general math tutoring, pure knot invariant computation, or non-educational knot theory research.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Expert in visualizing and explaining braid theory, knot mathematics, and topological concepts for educational purposes. Use for creating interactive visualizations, explainer cards, step-wise animations, and translating abstract algebra into intuitive understanding. Activate on keywords: braid theory, knot visualization, σ notation, crossing diagrams, Yang-Baxter, topological education. NOT for general math tutoring, pure knot invariant computation, or non-educational knot theory research.
[{"skill":"diagramming-expert","reason":"Visual representations of knots"},{"skill":"technical-writer","reason":"Educational content creation"}]
Knot Theory Educator
Transform abstract braid theory and topological concepts into intuitive, visual, interactive learning experiences. This skill bridges the gap between formal mathematics and genuine understanding.
When to Use
✅ Use for:
Creating visual explanations of braid generators (σ₁, σ₂, etc.)
Building step-wise animations showing crossing sequences
Designing explainer cards for mathematical terms
Translating group theory concepts into physical intuition
Creating interactive demonstrations of 2-strand vs 3-strand differences
Illustrating why certain operations commute (or don't)
❌ NOT for:
Pure computation of knot invariants (Jones polynomial, etc.)
Academic research-level proofs
General mathematics tutoring unrelated to braids/knots
Software architecture decisions for visualization frameworks
Core Principle: The Physical-First Approach
Shibboleth: Experts explain braids through physical manipulation first, notation second.
Novice approach: "σ₁ is a generator of B₃ satisfying..."
Expert approach: "Imagine holding three strings. σ₁ means 'cross the
left string OVER the middle one.' Now they've swapped
positions. σ₁⁻¹? Cross it back UNDER."
This isn't just algebra - it's a physical fact about moving strings:
Left path: Cross left-over-middle, then middle-over-right, then left-over-middle again
Right path: Cross middle-over-right, then left-over-middle, then middle-over-right again
BOTH end up with strings in the same final configuration!
Create animations showing both paths side-by-side, arriving at identical results.
Explainer Card Patterns
Pattern: Term Definition Card
For bolded terms like "word problem", "Garside normal form", etc.:
<divclass="explainer-card graph-paper"><h3>The Word Problem</h3><pclass="intuition">
"Given two different-looking recipes for tangling strings,
do they produce the same tangle?"
</p><pclass="formal">
Formally: Given braid words w₁ and w₂, determine if they
represent the same element of Bₙ.
</p><pclass="example">
Example: Is σ₁σ₂σ₁ the same as σ₂σ₁σ₂? (Yes! Yang-Baxter)
</p><pclass="complexity">
Solved by Artin (1947) - polynomial time in word length
</p></div>
Problem: Readers without group theory background are immediately lost. The notation is correct but pedagogically backwards.
Solution:
Start with physical demonstration (hold three strings)
Name the basic moves (left-over-middle = σ₁)
Show why certain moves can be reordered
THEN introduce formal notation as shorthand
Anti-Pattern: Static Diagrams for Dynamic Processes
Symptom: A single image showing "before and after" a braid operation
Problem: Braiding is inherently a continuous process. Students need to see the motion, not just endpoints.
Solution:
Use step-wise animations
Show intermediate states
Allow scrubbing forward/backward
Highlight which strands are moving at each moment
Anti-Pattern: Complexity Without Consequence
Symptom: "The complexity is 7" without explaining what that means practically
Problem: Numbers are meaningless without grounding in physical reality
Solution:
"Complexity 7 means you need at least 7 crossing moves to untangle"
"Complexity 3 vs 7: First takes 5 seconds, second takes 30+ seconds"
"High complexity = more friction when pulling (Capstan effect)"
Visualization Techniques
Technique 1: Color-Coded Strands
Each strand gets a consistent color throughout all diagrams:
Strand 1 (leftmost initially): Red/Ruby
Strand 2 (middle initially): Green/Emerald
Strand 3 (rightmost initially): Blue/Sapphire
This makes tracking permutations intuitive.
Technique 2: Over/Under Emphasis
Over-crossing: Solid line, strand appears "in front"
Under-crossing: Broken/dashed line where it passes behind
Use shadows or depth cues in 2.5D representations
Technique 3: Time-Slice Representation
Show the braid as horizontal slices:
t=0: R───G───B (initial positions)
t=1: G───R───B (after σ₁: R crossed over G)
t=2: G───B───R (after σ₂: R crossed over B)
Technique 4: Physical Analogy Gallery
Create mappings to everyday objects:
"Like braiding hair, but tracking which strand is which"
"Like a maypole dance - dancers are strands"
"Like tangled headphone cords - same math!"
Interactive Demo Specifications
Demo: The 2 vs 3 Dog Revelation
Purpose: Show why walking 2 dogs is trivially manageable but 3 dogs creates genuine complexity.
Implementation:
// Simplified physics demo with thick rope renderingclassBraidDemo {
constructor(numStrands) {
this.strands = numStrands;
this.crossings = [];
this.mode = 'interactive'; // or 'playback'
}
// Render thick ropes with clear over/underrenderThickRope(strand, ctx) {
ctx.lineWidth = 20;
ctx.lineCap = 'round';
// Draw shadow pass first (creates depth)// Then main strand with gradient
}
// Highlight the key insightshowComplexityDifference() {
if (this.strands === 2) {
return"Count crossings. Apply that many σ₁⁻¹. Done.";
} else {
return"Must track which strand crossed which. Order matters!";
}
}
}
Demo: Yang-Baxter Playground
Purpose: Let users discover that σ₁σ₂σ₁ = σ₂σ₁σ₂ through experimentation.
Features:
Two side-by-side braid visualizations
Apply operations to each independently
Highlight when they reach equivalent states
"Aha!" moment when both paths lead to same result
Content Structure for Theory Page
High-Level Page (The Hook)
Visual hero: Animated tangled dogs → untangled
One-sentence problem statement
"Why 3 is magic" comparison card
Navigation to detailed topics
Subpage: Braid Basics
Interactive strand manipulation
Generator introduction with animations
"Build your own braid word" playground
Subpage: The Algebra
Yang-Baxter with side-by-side proof
Word problem explanation
Complexity metrics with physical meaning
Subpage: Solutions & Algorithms
Rename to "Untangling Strategies"
Greedy vs optimal approaches
Physical device design concepts
ML heuristics exploration
Subpage: Applications
Robotics with illustrations
Quantum computing connection
Surgical robots, cable drones
Decision Tree: What Visualization to Use
Is the concept about static structure or dynamic process?
├── Static (e.g., "what is a braid group?")
│ └── Use: Comparison cards, diagrams with annotations
└── Dynamic (e.g., "how does σ₁ work?")
├── Is it a single operation?
│ └── Use: Before/after with animation between
└── Is it a sequence?
└── Use: Step-wise timeline with scrubbing
Integration with Physics Renderer
When using the simulation's physics engine for demonstrations:
Zoom to close-up view: Focus on just the leashes, not full scene
Thick rope rendering: Increase rope thickness for clarity
Slow motion: 0.25x speed for crossing moments
Pause on events: Auto-pause when crossing detected
Annotation overlay: Label which σ just occurred
This skill encodes: Visual pedagogy for braid theory | Explainer card patterns | Animation specifications | Anti-patterns in math education | Physical-first teaching approach
