# Prototype Sketching Skill > Use when a working Angular, React, Vue, or static web app must look hand-sketched (Balsamiq wireframe, Sharpie marker, pencil, doodle, or blueprint) for a client demo, so clients read it as a draft and understand it is not production. Applies a reversible, non-destructive visual skin with an adjustable sketchiness level (0-100%) without touching components, markup, routing, state, or any logic. - Skill: `jovd83/prototype-sketching-skill` (Agent Skill, multi-file: 5 files) - Install (CLI): `npx skillmds@latest add jovd83/prototype-sketching-skill` - Raw SKILL.md: https://api.skillmd.com/api/skills/jovd83/prototype-sketching-skill/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: jovd83 (https://skillmd.com/u/jovd83) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jovd83/prototype-sketching-skill --- # Prototype Sketching Skill Make a *working* web app **look** hand-drawn so clients see it is a prototype, not a finished product. This is a **look-and-feel skin only**. It is purely additive and fully reversible. ## Scope guardrails (read first, never violate) 1. **Only touch styling entry points and `index.html`.** Append a stylesheet, paste one SVG block, set two attributes. Nothing else. 2. **Never edit** components, templates, `.ts/.tsx/.jsx/.vue` logic, routing, state, services, or tests. 3. **Never swap components** for sketchy component libraries (e.g. wired-elements) — that rewrites markup. Forbidden. 4. **Never recolor or distort** logos, photos, charts, or icons that must stay crisp — use the opt-out class. 5. **Reverting must stay trivial**: removing the two `` attributes turns the whole skin off. ## How it works (one mental model) - One stylesheet `assets/sketch-skin.css` defines all 5 styles + the sketchiness ramp. - One SVG block `assets/sketch-filters.html` defines the wobble filters (`#sketch-25` … `#sketch-100`). - Activation is **two attributes on ``**: `data-sketch="