playbooks

home / skills / feiwanghub / playground / canvas-design-skill

canvas-design-skill skill

/skills/.trae/skills/canvas-design-skill

This skill generates HTML5 Canvas templates with pre-defined drawing logic for shapes like rectangles, circles, grids, and stars.

npx playbooks add skill feiwanghub/playground --skill canvas-design-skill

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
505 B
---
name: canvas-design-skill
description: "Generate HTML5 Canvas code for basic design patterns (rect, circle, grid, star)."
---

# Canvas Design Skill

This skill allows you to generate HTML5 Canvas templates with pre-defined drawing logic.

## Capabilities

- Generate HTML files with embedded Canvas and JavaScript.
- Supports basic shapes: Rectangle, Circle, Grid, Star.

## Usage

Generate a star pattern:

```bash
python3 .shared/canvas-design-skill/scripts/generate_canvas.py star output.html
```

Overview

This skill generates ready-to-run HTML5 Canvas templates for common design patterns. It produces self-contained HTML files with embedded JavaScript that draw rectangles, circles, grids, and star shapes. The output is useful for prototyping visuals, teaching Canvas basics, or seeding creative experiments.

How this skill works

You specify a pattern type and the skill outputs an HTML file that creates a canvas element and runs drawing logic on load. Each template includes configurable parameters (size, color, spacing, repeats) in the script so you can quickly tweak the results. Generated files are standard HTML and JavaScript, so they run in any modern browser without additional tooling.

When to use it

  • Prototyping simple UI backgrounds or decorative patterns quickly.
  • Teaching or learning HTML5 Canvas drawing primitives and composition.
  • Generating starter code for a creative coding project or demo.
  • Creating assets or raster previews for UI mockups.
  • Automating batch generation of examples for documentation or tutorials.

Best practices

  • Open the generated HTML in a modern browser and inspect the <canvas> element with dev tools for quick tweaks.
  • Adjust parameters at the top of the script (dimensions, stroke/fill styles, density) for iteration without rewriting code.
  • Use requestAnimationFrame if you convert static templates into animations to keep rendering smooth.
  • Scale the canvas via CSS and set the internal canvas width/height for crisp, high-DPI output.
  • Keep drawing functions small and reusable so you can combine shapes into more complex patterns.

Example use cases

  • Create a tiled grid background for a web prototype and export as PNG via canvas.toDataURL().
  • Generate a starfield illustration for a landing page hero section.
  • Produce repeated rectangle and circle motifs for a pattern library or design system.
  • Teach students how to compute positions and draw shapes using a visual, runnable example.
  • Seed a generative art experiment by modifying color and randomness in the template.

FAQ

What shapes are supported?

Rectangles, circles, grids, and star shapes are included as built-in templates.

Do I need extra libraries to run the output?

No. The generated files use plain HTML and vanilla JavaScript and run in any modern browser.

Can I customize size and colors?

Yes. Each template exposes simple parameters in the script so you can change dimensions, fills, strokes, spacing, and repetition.