skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

sketch

Generates implementation-ready design-system guidelines for a hand-drawn sketch interface style.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#design system#design tokens#hand-drawn#UI guidelines#component rules
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill sketch-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sketch
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/sketch
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill sketch-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces with a hand-drawn, pencil-sketch aesthetic often lack consistent, documented rules, leading to inconsistent spacing, colors, and component states across the product. ## Core Features & Use Cases - Design Token Foundations: Defines the Sketch palette (teal primary #1DAD97, cream secondary #F4EDE0), typography (Delicious Handrawn, JetBrains Mono), and spacing scale (4/8/12/16/24/32). - Component Rule Authoring: Produces component anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior guidance. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review QA checklist. - Use Case: A designer asks for button guidelines in the Sketch style and receives token-anchored rules covering states, keyboard interaction, and migration notes for legacy components. ## Quick Start Use the sketch skill to write design-system guidelines for a card component following the hand-drawn Sketch style.

Frequently Asked Questions about sketch

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

FAQPage Schema
How do I create design-system guidelines for a hand-drawn UI style?▼

Define tokens first (colors, typography, spacing), then specify component anatomy, states, and variants. This skill generates that structure using the Sketch palette, Delicious Handrawn typography, and a 4/8/12/16/24/32 spacing scale.

What color palette does the Sketch design style use?▼

The Sketch style uses a soft teal primary (#1DAD97), warm cream secondary (#F4EDE0), plus standard success, warning, and danger tokens on white surfaces with dark text (#111827).

Does the generated guidance include accessibility requirements?▼

Yes, every guideline targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Accessibility statements must be testable in implementation, and conflicts with aesthetics are resolved in favor of accessibility.

What output structure do the design guidelines follow?▼

Guidelines include context and goals, design tokens, component-level rules with states and responsive behavior, accessibility acceptance criteria, content tone standards, anti-patterns, and a QA checklist for code review.

When should I not use a hand-drawn sketch aesthetic?▼

Avoid it for dense data interfaces, formal enterprise dashboards, or contexts requiring strict visual neutrality, where illustrated shadows and hand-written headings reduce clarity and perceived professionalism.

Related Skills

Explore More Design & Creative Skills→
howellshowells
2

brand

Generate five brand directions and convert the selected option into design tokens and UI examples.

Community
Advanced
Pixel-Process-UGPixel-Process-UG
1

ui-design-system

Create scalable design systems with token-first architecture and Tailwind CSS v4.

Official
Advanced
dudqks0319-cpududqks0319-cpu

ui-testing

Validates UI components against accessibility standards using contrast, visibility, and touch-target checklists.

Community
Basic
matt-fell-aimatt-fell-ai
1

art

Create editorial diagrams and visual content with a hand-drawn aesthetic.

Community
Intermediate