skills/bityoungjae/desmos-graphing/SKILL.md
Create interactive Desmos graphs in Obsidian using desmos-graph code blocks. Use when visualizing functions, parametric curves, inequalities, or mathematical relationships with customizable styling and settings.
npx skillsauth add aiskillstore/marketplace desmos-graphingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
The plugin uses different parsers for different parts:
| Location | Parser | pi | sqrt | Example |
|----------|--------|-----|------|---------|
| Settings | mathjs | pi | - | left=-2*pi+0.5 |
| Equations | Desmos (LaTeX) | \pi | \sqrt{x} | y=\sqrt{x}+\pi |
| Points | Desmos (LaTeX) | \pi | \sqrt{x} | (\pi/2, 1) |
| Restrictions | plain math | numeric | x^0.5 | x>-1.5708 |
✅ CORRECT
left=-0.5; right=2*pi+0.5
---
y=\sqrt{x}|blue
y=x/\sqrt{3}|green|0<=x<=3^0.5
(\pi/2, 0)|label:cos(90°)=0
❌ WRONG (will error)
left=-2*\pi # Error: "Syntax error in part '\pi'"
y=\sin(x+pi/4) # Error: "Too many variables" (p*i)
(pi/2, 0) # Error: "Too many variables" ← Points need LaTeX!
y=x/sqrt(3)|0<=x<=sqrt(3) # Error: "Too many variables" (s*q*r*t)
Key rule: \sqrt{x} in equations, x^0.5 in restrictions!
```desmos-graph
[settings]
---
[equations]
```
---, equations below| to add styling/restrictions to equations```desmos-graph
y=x^2
y=\sin(x)|blue
```
```desmos-graph
left=-2*pi; right=2*pi
bottom=-2; top=2
---
y=\sin(x)|red
y=\cos(x)|blue|dashed
```
```desmos-graph
(0, 0)|label:Origin
(3, 4)|red|label:Point A
(\pi/2, 1)|blue|label:π/2 # Use \pi in coordinates!
y=x|dashed
```
⚠️ Points use LaTeX: (\pi/2, 0) not (pi/2, 0)
| Setting | Default | Description |
|---------|---------|-------------|
| width | 600 | Graph width in pixels |
| height | 400 | Graph height in pixels |
| left | -10 | Left boundary |
| right | 10 | Right boundary |
| bottom | -7 | Bottom boundary |
| top | 7 | Top boundary |
| grid | true | Show grid lines |
| degreeMode | radians | radians or degrees |
| Setting | Default | Description |
|---------|---------|-------------|
| hideAxisNumbers | false | Hide axis number labels |
| xAxisLabel | - | Custom x-axis label |
| yAxisLabel | - | Custom y-axis label |
| xAxisLogarithmic | false | Logarithmic x-axis scale |
| yAxisLogarithmic | false | Logarithmic y-axis scale |
| defaultColor | - | Default color for all equations |
Settings use = for values, separated by ; or newlines.
Bounds accept math expressions: left=-2*pi
Use | (pipe) to add styling after an equation:
equation|color|style|restrictions|label
Segment order is flexible - the parser auto-detects each segment type.
⚠️ CRITICAL: | is RESERVED as delimiter!
The pipe character cannot appear in equations or labels:
(1, 0)|label:|v|=5 # ❌ Error: label parsed as empty
(1, 0)|label:∥v∥=5 # ✅ Use Unicode ∥ (U+2225)
y=|x| # ❌ Error: pipes split the equation
y=abs(x) # ✅ Use abs() function
Supported names: red, green, blue, yellow, orange, purple, cyan, magenta, black, white
Hex codes: #rrggbb or #rgb (e.g., #ff6600, #f60)
⚠️ gray/grey are NOT supported! Use hex instead:
#c0c0c0#808080#404040y=x|gray # ❌ Error: parsed as restriction
y=x|#808080 # ✅ Correct
| Line | Point | Effect |
|------|-------|--------|
| solid | point | Default (solid/filled) |
| dashed | open | Dashed/open circle |
| dotted | cross | Dotted/X mark |
(1, 2)|label shows "(1, 2)", (1, 2)|label:Point A shows custom text
Limit where equations are drawn:
y=x^2|0<x<5 # Only draw for 0 < x < 5
y=\sin(x)|x>0|y>0 # Multiple restrictions
y=2x|0<=x<=1 # <= and >= supported
y=\tan(x)|x>-1.5708|x<1.5708 # Use numeric values (π/2≈1.5708)
⚠️ CRITICAL: Use plain math, NOT LaTeX in restrictions!
| ✅ Correct | ❌ Wrong | Why |
|-----------|---------|-----|
| x/2<y | \frac{x}{2}<y | No LaTeX commands |
| x^0.5<2 | \sqrt{x}<2 | Use ^0.5 not \sqrt |
| 0<x<3^0.5 | 0<x<sqrt(3) | sqrt() → sqrt |
| x>-1.5708 | x>-pi/2 | pi → pi, use numeric |
| 0<x<1 | \{0<x<1\} | No braces needed |
The plugin auto-wraps restrictions with {} - don't add them yourself.
f(x)=x^2|hidden # Define but don't display
y=f(x)+1 # Use the hidden function
y=\sin(x)|noline # Points only, no connecting line
Order doesn't matter:
y=x^2|red|dashed|0<x<5
(1, 2)|open|blue|label:Start
| Type | Example |
|------|---------|
| Explicit | y=x^2 |
| Implicit | x^2+y^2=25 |
| Parametric | (\cos(t), \sin(t)) |
| Polar | r=1+\cos(\theta) |
| Piecewise | y=\{x<0: -x, x\} |
| Point | (3, 4) |
| Function def | f(x)=x^2 |
Desmos only supports polar equations where r appears linearly:
r=1+\cos(\theta) # ✅ Linear in r
r^2=\cos(2\theta) # ❌ Error: "must be linear in r"
Solution: Convert to parametric curve:
# Lemniscate (r² = cos(2θ)) → parametric form
(\cos(t)\sqrt{\cos(2t)}, \sin(t)\sqrt{\cos(2t)})|blue
⚠️ Expand parenthetical expressions to avoid parsing errors:
(2t, 4t(1-t))|blue # ⚠️ May be misinterpreted as piecewise
(2t, 4t-4t^2)|blue # ✅ Expanded form is safer
⚠️ Escape curly braces with backslash:
y={x<0: -x, x} # ❌ Error
y=\{x<0: -x, x\} # ✅ Correct
```desmos-graph
left=-2*pi; right=2*pi
bottom=-2; top=2
---
y=\sin(x)|blue
y=\sin(x+\pi/4)|red
y=\sin(x+\pi/2)|green
y=\sin(x+\pi)|purple|dashed
```
```desmos-graph
left=-0.5; right=2.5
bottom=-0.5; top=2.5
---
(2t, 4t-4t^2)|blue
(0, 0)|black|label:P0
(1, 2)|black|label:P1
(2, 0)|black|label:P2
y=2x|#808080|dashed|0<x<1
y=-2x+4|#808080|dashed|1<x<2
```
```desmos-graph
left=-0.2; right=1.2
bottom=-0.2; top=1.2
---
y=x|dashed|black
y=1-\cos(\pi*x/2)|blue|0<=x<=1
y=\sin(\pi*x/2)|red|0<=x<=1
```
```desmos-graph
left=-0.5; right=2*pi+0.5
bottom=-1.5; top=1.5
---
y=\cos(x)|blue
(0, 1)|red|label:cos(0)=1
(\pi/2, 0)|red|label:cos(π/2)=0
(\pi, -1)|red|label:cos(π)=-1
(3*\pi/2, 0)|red|label:cos(3π/2)=0
```
⚠️ Note: Settings use 2*pi, points use \pi, 3*\pi/2, etc.
For complete documentation, see reference.md:
development
Apple Human Interface Guidelines for content display components. Use this skill when the user asks about charts component, collection view, image view, web view, color well, image well, activity view, lockup, data visualization, content display, displaying images, rendering web content, color pickers, or presenting collections of items in Apple apps. Also use when the user says how should I display charts, what's the best way to show images, should I use a web view, how do I build a grid of items, what component shows media, or how do I present a share sheet. Cross-references: hig-foundations for color/typography/accessibility, hig-patterns for data visualization patterns, hig-components-layout for structural containers, hig-platforms for platform-specific component behavior.
tools
Automate HelpDesk tasks via Rube MCP (Composio): list tickets, manage views, use canned responses, and configure custom fields. Always search tools first for current schemas.
testing
Expert Haskell engineer specializing in advanced type systems, pure functional design, and high-reliability software. Use PROACTIVELY for type-level programming, concurrency, and architecture guidance.
tools
GraphQL gives clients exactly the data they need - no more, no less. One endpoint, typed schema, introspection. But the flexibility that makes it powerful also makes it dangerous. Without proper controls, clients can craft queries that bring down your server. This skill covers schema design, resolvers, DataLoader for N+1 prevention, federation for microservices, and client integration with Apollo/urql. Key insight: GraphQL is a contract. The schema is the API documentation. Design it carefully.