---
name: "roughjs-hand-drawn-graphics"
description: "Render charming, hand-drawn sketchy 2D vector shapes and charts with Rough.js."
metadata:
  author: "Preet Shihn"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "draw sketchy rectangle roughjs"
  - "create hand drawn chart"
  - "use hachure fill rough.js"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Rough.js Hand-Drawn Sketchy Vector Graphics

Draws sketchy, hand-drawn graphics using Rough.js: rough.canvas(), rough.svg(), sketchy rectangles, circles, bezier curves, hachure fills, and sketchiness roughness parameters.

## When to Invoke
Invoke this skill whenever you need to:
- draw sketchy rectangle roughjs
- create hand drawn chart
- use hachure fill rough.js

## Execution SOP & Rules
1. Initialize instances with const rc = rough.canvas(canvasElement) or rough.svg(svgElement).
2. Draw shapes using rc.rectangle(x, y, w, h, { roughness: 1.5, fill: 'red', fillStyle: 'hachure' }).
3. Append generated DOM nodes to the SVG container when using the SVG renderer.
4. Combine with custom handwriting fonts for a complete sketchbook aesthetic.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.