---

name: sketchy-ui-skill description: "Hand-drawn / sketchy UI component system built on Rough.js + Wired Elements + Rough Notation. Use when user mentions: hand-drawn style, sketchy, doodle style, wired elements, rough.js, hand-drawn icons, sketch style, wireframe style, 手绘风格, 素描风格, 手绘图标, 涂鸦风格."

Sketchy UI Skill

A complete hand-drawn / sketchy style UI component system for React + TypeScript projects. Provides 7 ready-to-use components, 30+ built-in icons, and 3 methods to create custom icons -- all without any drawing ability.

When to Use

Activate this skill when the user:

• Asks for hand-drawn, sketchy, doodle, or wireframe-style UI
• Mentions Rough.js, Wired Elements, or Rough Notation
• Wants icons or components with a hand-drawn aesthetic
• Says "手绘风格", "素描风格", "手绘图标", "涂鸦风格"

Quick Start (3 Steps)

Step 1: Install dependencies

npm install roughjs rough-notation wired-elements
# Optional: for 1500+ icon conversion
npm install lucide-react

Step 2: Copy component files

Copy all files from the templates/ directory in this skill into the user's project:

• templates/components/*.tsx -> src/components/sketchy/
• templates/icons/paths.ts -> src/components/sketchy/icons/

Step 3: Import and use

import { SketchyIcon, SketchyCard, LucideToSketchy } from './components/sketchy';

---

Component API Reference

1. SketchyIcon -- SVG Path to Hand-Drawn Icon

Renders any SVG path data as a hand-drawn icon using Rough.js.

import { SketchyIcon } from './components/sketchy';

// Use built-in icon by name
<SketchyIcon name="rocket" size={48} stroke="#D4735E" fill="#D4735E" />

// Use custom SVG path
<SketchyIcon path="M12 2l3.09 6.26L22 9.27..." size={48} stroke="#333" />

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | name | IconName | - | Built-in icon name (see icon list below) | | path | string | - | Custom SVG path data (overrides name) | | size | number | 48 | Icon size in px | | stroke | string | '#333333' | Line color | | strokeWidth | number | 1.5 | Line thickness | | fill | string | 'none' | Fill color | | fillStyle | string | 'solid' | Fill pattern: hachure, solid, zigzag, cross-hatch, dots, sunburst, dashed | | roughness | number | 1 | Hand-drawn intensity (0=smooth, 3=very rough) | | bowing | number | 1 | Line curvature | | viewBox | number | 24 | SVG viewBox size |

2. SketchyShape -- Basic Hand-Drawn Shapes

import { SketchyShape } from './components/sketchy';

<SketchyShape shape="circle" width={100} height={100} fill="#D4735E" fillStyle="solid" />
<SketchyShape shape="rectangle" width={120} height={80} fill="#6366f1" />

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | shape | 'circle' | 'rectangle' | 'ellipse' | 'line' | - | Shape type | | width | number | 100 | Canvas width | | height | number | 100 | Canvas height | | stroke | string | '#333333' | Line color | | fill | string | - | Fill color | | fillStyle | string | 'hachure' | Fill pattern (7 options) | | roughness | number | 1.5 | Hand-drawn intensity |

3. SketchyCard -- Hand-Drawn Border Card

import { SketchyCard } from './components/sketchy';

<SketchyCard width={240} height={200} stroke="#333" roughness={1.5}>
  <SketchyIcon name="star" size={40} fill="#eab308" />
  <h3>Card Title</h3>
  <p>Card description</p>
</SketchyCard>

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | Card content | | width | number | 280 | Card width | | height | number | 200 | Card height | | stroke | string | '#333' | Border color | | fill | string | '#fff' | Background fill | | roughness | number | 1.2 | Hand-drawn intensity | | padding | number | 24 | Content padding |

4. SketchyDivider -- Hand-Drawn Horizontal Line

<SketchyDivider width={600} stroke="#ddd" roughness={1.5} />

5. SketchyAnnotation -- Hand-Drawn Text Annotations

7 annotation types powered by Rough Notation.

import { SketchyAnnotation } from './components/sketchy';

<SketchyAnnotation type="highlight" color="#fde68a">Highlighted text</SketchyAnnotation>
<SketchyAnnotation type="underline" color="#D4735E">Underlined text</SketchyAnnotation>
<SketchyAnnotation type="circle" color="#10b981">Circled text</SketchyAnnotation>
<SketchyAnnotation type="box" color="#6366f1">Boxed text</SketchyAnnotation>
<SketchyAnnotation type="strike-through" color="#ef4444">Struck text</SketchyAnnotation>
<SketchyAnnotation type="crossed-off" color="#ef4444">Crossed text</SketchyAnnotation>
<SketchyAnnotation type="bracket" color="#D4735E">Bracketed text</SketchyAnnotation>

6. LucideToSketchy -- Convert Any Lucide Icon to Hand-Drawn

Converts any of 1500+ Lucide React icons to hand-drawn style. Requires lucide-react.

import { Rocket, Heart, Globe } from 'lucide-react';
import { LucideToSketchy } from './components/sketchy';

<LucideToSketchy icon={Rocket} size={48} stroke="#D4735E" />
<LucideToSketchy icon={Heart} size={48} stroke="#ef4444" fill="#fecaca" roughness={1.5} />

How it works: Renders the Lucide icon in a hidden container, extracts all SVG elements (path, circle, rect, line, polyline, polygon, ellipse), and re-draws them with Rough.js.

7. SketchyCompose -- Build Custom Icons from Shapes

Compose icons from drawing commands like building blocks.

import { SketchyCompose } from './components/sketchy';

<SketchyCompose
  width={80}
  height={80}
  commands={[
    { type: 'circle', cx: 40, cy: 40, diameter: 60, options: { stroke: '#333' } },
    { type: 'circle', cx: 40, cy: 40, diameter: 18, options: { fill: '#D4735E', fillStyle: 'solid' } },
  ]}
/>

Available command types:

• circle: { cx, cy, diameter }
• rectangle: { x, y, w, h }
• ellipse: { cx, cy, w, h }
• line: { x1, y1, x2, y2 }
• arc: { x, y, w, h, start, stop, closed? }
• polygon: { points: [number, number][] }
• path: { d: string } (SVG path data)
• linearPath: { points: [number, number][] }

Each command accepts an options object to override stroke, fill, roughness, etc.

7 preset composed icons available: wifi, target, battery, chatBubble, mapPin, sun, trophy.

import { SketchyCompose, presetIcons } from './components/sketchy';
<SketchyCompose commands={presetIcons.wifi} width={80} height={80} />

---

Built-in Icon Names (30+)

Available icon names for <SketchyIcon name="...">:

Common: search, settings, lightbulb, document Actions: home, user, heart, star, mail, phone Media: image, camera, music Tools: code, terminal, database, cloud, lock, rocket Arrows: arrowRight, arrowLeft, arrowUp, arrowDown Status: check, x, alertCircle, info, bell Business: shoppingCart, dollarSign, barChart, trendingUp, zap, gift

---

3 Ways to Create Custom Icons

Method 1: LucideToSketchy (Easiest -- 1500+ icons)

import { Wifi } from 'lucide-react';
<LucideToSketchy icon={Wifi} size={48} stroke="#333" />

Just import any icon from lucide-react and pass it in. All 1500+ Lucide icons work.

Method 2: SketchyCompose (No drawing needed)

Combine basic shapes with code:

const myIcon = [
  { type: 'circle', cx: 40, cy: 40, diameter: 50, options: { stroke: '#333' } },
  { type: 'line', x1: 25, y1: 40, x2: 55, y2: 40, options: { stroke: '#D4735E', strokeWidth: 3 } },
  { type: 'line', x1: 40, y1: 25, x2: 40, y2: 55, options: { stroke: '#D4735E', strokeWidth: 3 } },
];
<SketchyCompose commands={myIcon} width={80} height={80} />

Method 3: Paste SVG Path (Universal)

Copy the d attribute from any SVG icon (Heroicons, Tabler, Feather, etc.) and pass it to SketchyIcon:

// From https://heroicons.com or https://lucide.dev, copy the path's d attribute
<SketchyIcon
  path="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
  size={48}
  stroke="#D4735E"
  fill="#D4735E"
/>

---

Design Guidelines

Recommended Accent Color

• Primary accent: #D4735E (warm coral / terracotta)
• Ink/line color: #333333
• Good secondary colors: #6366f1 (indigo), #10b981 (emerald), #f59e0b (amber), #ec4899 (pink)

Roughness Guide

| Value | Effect | Use Case | |-------|--------|----------| | 0 | Perfectly smooth | Subtle hand-drawn hint | | 0.5-1 | Slight wobble | Clean hand-drawn look | | 1-1.5 | Noticeably hand-drawn | Default recommended | | 2-3 | Very rough/sketchy | Bold doodle aesthetic |

Fill Styles

7 fill styles available: hachure (default diagonal lines), solid, zigzag, cross-hatch, dots, sunburst, dashed.

Wired Elements (Web Components)

For hand-drawn form controls, use Wired Elements directly:

npm install wired-elements

import 'wired-elements';

<wired-button>Click me</wired-button>
<wired-input placeholder="Type here..." />
<wired-card elevation={2}>Content</wired-card>
<wired-checkbox>Option</wired-checkbox>
<wired-toggle />
<wired-slider value={50} />

Available: wired-button, wired-input, wired-textarea, wired-checkbox, wired-radio, wired-slider, wired-toggle, wired-card, wired-divider, wired-search-input, wired-link, wired-dialog, wired-calendar, wired-image, wired-video.

---

Dependencies

Required:

• roughjs -- Core hand-drawn rendering engine
• rough-notation -- Text annotation effects

Optional:

• wired-elements -- Hand-drawn form controls (buttons, inputs, etc.)
• lucide-react -- 1500+ icons for LucideToSketchy conversion

Key Behavior

• Every render produces slightly different hand-drawn lines (intentional randomness)
• All components are pure React + TypeScript, no build-time dependencies
• Components work with any React framework (Next.js, Vite, CRA, Remix, etc.)
• Wired Elements are framework-agnostic Web Components