skills.rest
TheBlueBear02
TheBlueBear02COMMUNITY
Explore all skills by this author →
GitHub

hand-drawn

Apply wobble borders, hard shadows, and handwritten typography to React interfaces.

Updated Feb 19, 2026
Search Tags:#hand-drawn#border-radius#wobble-border#dot-grid#kalam#patrick-hand#ui-aesthetic
One-click install
npx skills add https://github.com/TheBlueBear02/drip-skills --skill hand-drawn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hand-drawn
Source: https://github.com/TheBlueBear02/drip-skills/tree/main/drip-skills/hand-drawn
Command: npx skills add https://github.com/TheBlueBear02/drip-skills --skill hand-drawn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Hand-Drawn Skill provides an authentic, hand-crafted UI aesthetic to move away from polished, digital perfection by introducing wobble borders, hard shadows, and tactile typography to React-based interfaces.

Core Features & Use Cases

  • Wobbly border-radius across components for organic shapes that feel drawn by hand.
  • Hard offset shadows with zero blur to simulate paper layering and tactile depth.
  • Typography mandates Kalam for headings and Patrick Hand for body to preserve a human handwritten vibe, plus a dot-grid paper texture background.
  • Use Case: Rapidly apply a cohesive hand-drawn style to dashboards, landing pages, and feature cards without bespoke artwork, enhancing personality and perceived warmth.

Quick Start

Build a hand-drawn landing section in a React project using wobble borders, hard shadows, Kalam headings, Patrick Hand body, and a dot-grid paper texture.

Frequently Asked Questions about hand-drawn

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

FAQPage Schema
How do I create a hand-drawn UI aesthetic in a React application?▼

Yes, you can achieve a cohesive hand-drawn UI across dashboards and landing pages by enforcing wobble borders, hard shadows, and handwritten typography globally across all components and surfaces without needing bespoke artwork.

How do I add wobble borders and hard shadows to React components?▼

You should use Kalam typography for headings and Patrick Hand for body text to preserve a human handwritten vibe, combined with a dot-grid paper texture background to complete the handmade look.

What is the best way to style a React dashboard with a sketch or handmade look?▼

You do not need bespoke artwork to achieve a hand-drawn look; you can rapidly apply wobble borders, hard offset shadows, and mandated handwritten typography across existing components and surfaces to enhance perceived warmth.

Does the hand-drawn UI style work for both landing pages and feature cards?▼

No external dependencies are required to apply the hand-drawn aesthetic; the style is achieved by enforcing specific CSS rules like multi-value border-radius, zero-blur hard shadows, and specific font families within your React project.

Related Skills

Explore More Design & Creative Skills→
FenntasyFenntasy

make-interfaces-feel-better

Apply design principles to polish frontend components, animations, typography, borders, shadows, and micro-interactions.

Community
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
hschnehschne
1

tailwind

Style Rails ERB views and Svelte components with Tailwind CSS and DaisyUI utilities.

Community
Intermediate
efekrbasefekrbas
41

neo-brutalism

Implement neo-brutalist styling with thick borders, hard shadows, and pressed states.

Community
Intermediate