skills.rest
tolitius
tolitiusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

salvador

Automate end-to-end p5.js concept visualizations from bootstrap to launch.

16|3|Updated Dec 28, 2025
Search Tags:#automation#p5.js#UX#agent#visualization#animation
One-click install
npx skills add https://github.com/tolitius/salvador --skill salvador
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: salvador
Source: https://github.com/tolitius/salvador/tree/main/.claude/skills/salvador
Command: npx skills add https://github.com/tolitius/salvador --skill salvador

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires p5, vite, playwright, and includes scripts (resource) components.

What problem does it solve?

Salvador automates the end-to-end creation and refinement of concept visualizations in p5.js, reducing manual iteration and surfacing design critique and corrective fixes within an interactive canvas.

Core Features & Use Cases

  • Autonomous loop: bootstrap, inspect, critique, fix, and launch visualizations.
  • Phase-driven workflow with responsive design, accessibility, and live previews.
  • Use Case: visualize abstract concepts (e.g., physics, UX flows) with high-quality animation and clear design reasoning.

Quick Start

Start Salvador by placing the skill in Claude's skills directory, start claude, and issue a /visualize command or run the bootstrap to initialize the environment.

Frequently Asked Questions about salvador

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate p5.js visualization creation from start to finish?▼

Automating p5.js visualization requires a tool that bootstraps, inspects, critiques UX, refines, and launches the result. Salvador provides an autonomous loop to handle this entire workflow, reducing manual iteration for concept visualization.

What is an autonomous p5.js visualization assistant?▼

An autonomous p5.js visualization assistant applies a phase-driven workflow to implement, inspect, and critique designs iteratively. It uses a SKILL.md brain to handle responsive design, accessibility, and live previews without manual coding.

Do I need Vite and Playwright to run automated p5.js visualizations?▼

Yes, the automated visualization workflow depends on the p5.js ecosystem including Vite and Playwright. These tools provide the necessary development server, bundling, and browser automation required for live previews and inspection.

How do I visualize abstract physics concepts using p5.js?▼

Visualizing abstract concepts like physics or UX flows in p5.js involves iterative animation and design reasoning. An autonomous assistant can bootstrap the environment, apply high-quality animation, and refine the visualization through automated critique.

What's the best way to critique and fix UX in interactive canvas animations?▼

Critiquing and fixing UX in canvas animations is best handled by an autonomous loop that inspects the visualization, identifies design flaws, and applies corrective fixes. This ensures clear design reasoning and responsive accessibility throughout refinement.

How do I start an autonomous p5.js visualization project?▼

To start an autonomous p5.js visualization project, place the skill in the skills directory, start Claude, and issue a /visualize command or run the bootstrap. This initializes the environment and begins the automated visualization workflow.

Related Skills

Explore More Design & Creative Skills→
cookercooker

vite

Configure Vite build tooling, plugins, SSR, and migration for Rolldown.

Community
Intermediate
legoutlegout
3

slidev

Generate and manage web-based slide decks from Markdown with Vue components.

Community
Intermediate
patriotnewsactivismpatriotnewsactivism
2

mockup-sandbox

Create and preview web UI components in an isolated Vite development server.

Community
Advanced
BasedHardwareBasedHardware
4

lottie

Add and manage Lottie animations in React using LottieFiles.

Official
Intermediate