sketch

Name: sketch
Availability: InStock
Author: Bergside

Generate WCAG 2.2 AA keyboard-first design-system instructions for hand-drawn sketch UI themes.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #tokens #ui theming #component states #hand-drawn style

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill sketch-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/sketch
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill sketch-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams consistently implement a hand-drawn sketch aesthetic while maintaining usability and accessibility.

Core Features & Use Cases

Accessible sketch styling: Defines tokenized color, typography, spacing, rounded surfaces, and focus-visible interaction requirements so UI remains readable and keyboard-friendly.
Implementation-ready guidance: Provides concrete do/don’t rules, expected behaviors, and quality gates to reduce design drift across engineers and designers.
Use case: Use it to design a marketing landing page or product settings screens where you want tactile, dashed, pencil-shadow cards and pill-like controls without sacrificing contrast or interaction clarity.

Quick Start

Use the sketch skill to generate UI guidance for your app’s sketch-themed components, ensuring tokens, states, and WCAG AA keyboard interactions are followed.

Frequently Asked Questions about sketch

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

FAQPage Schema

How do I create an accessible hand-drawn UI without failing WCAG 2.2 AA contrast requirements?▼

To create an accessible hand-drawn UI, apply tokenized color and typography rules with explicit focus-visible interaction states. This ensures tactile, pencil-shadow sketch aesthetics maintain readable contrast and keyboard-first behavior compliant with WCAG 2.2 AA standards.

What is the best way to maintain consistent design tokens across sketch-themed component families?▼

The best way to maintain consistent design tokens across sketch-themed components is to use token-first rules with predefined warm paper and teal accent definitions. This prevents visual drift across buttons, inputs, cards, and modals during frontend implementation.

How do I implement interaction states for dashed sketch UI components?▼

Implement interaction states for dashed sketch UI components by applying explicit do/don't behavior rules and testable quality gates. This defines clear hover, active, and focus-visible states for pill-like controls while preserving the hand-drawn aesthetic.

Can I use a hand-drawn sketch aesthetic for complex product settings screens?▼

Yes, you can use a hand-drawn sketch aesthetic for product settings screens. The styling provides tokenized spacing, rounded surfaces, and dashed borders that remain readable and keyboard-friendly for complex navigation and input forms.

Why does my hand-drawn UI design drift across different frontend components?▼

Hand-drawn UI design drifts across components when engineers lack concrete do/don't rules and expected behaviors. Applying implementation-ready guidance with testable quality gates standardizes the tactile styling and interaction clarity across the team.

Do I need predefined UI tokens to build a sketch-themed design system?▼

Yes, you need predefined UI tokens to build a sketch-themed design system. Token-first rules for color, typography, spacing, and rounded surfaces are required to systematically generate consistent, accessible hand-drawn components.