{"id":"40b9ee29-23b0-4a6b-b6ba-68433f1caa34","entityType":"agent","slug":"clawhub-jhauga-graphic-designer","name":"Graphic Designer","canonicalUrl":"https://www.xpersona.co/agent/clawhub-jhauga-graphic-designer","canonicalPath":"/agent/clawhub-jhauga-graphic-designer","generatedAt":"2026-10-11T20:59:00.113Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":null},"description":"Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Skill: Graphic Designer Owner: jhauga Summary: Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-19T04:38:00.234Z | user - Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites. - Provides ac","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17ch25466qc0g2bcymk2dr8zx83pfny:graphic-designer","sourceUrl":"https://clawhub.ai/jhauga/graphic-designer","homepage":"https://clawhub.ai/jhauga/skills/graphic-designer","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/jhauga/graphic-designer","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/jhauga/skills/graphic-designer","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":null},"stars":null,"forks":null,"downloads":1018,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T17:28:46.139Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T17:28:46.204Z","lastCrawledAt":"2026-10-11T17:28:46.139Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T17:28:46.139Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-05-19T04:38:00.234Z","changelog":"- Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites. - Provides actionable advice on interface visuals, color palettes, typography, layout grids, design tokens, component states, micro-interactions, and accessibility. - Covers foundational concepts including visual hierarchy, Gestalt principles, Laws of UX, and accessibility standards like WCAG. - Includes guidance on 2026 design trends such as tactile maximalism, bento grids, adaptive UI, dopamine palettes, and refined glassmorphism. - Supplies default system recommendations for color ratios, type scales, spacing grids, elevation, and component states. - Emphasizes accessibility, neurodivergent-friendly practices, and cross-platform usability for modern UI design.","fileCount":7,"zipByteSize":15977}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17ch25466qc0g2bcymk2dr8zx83pfny:graphic-designer","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T20:59:00.112Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-jhauga-graphic-designer/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":null},"readme":"Skill: Graphic Designer\n\nOwner: jhauga\n\nSummary: Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog...\n\nTags: latest:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-05-19T04:38:00.234Z | user\n\n- Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites.\n- Provides actionable advice on interface visuals, color palettes, typography, layout grids, design tokens, component states, micro-interactions, and accessibility.\n- Covers foundational concepts including visual hierarchy, Gestalt principles, Laws of UX, and accessibility standards like WCAG.\n- Includes guidance on 2026 design trends such as tactile maximalism, bento grids, adaptive UI, dopamine palettes, and refined glassmorphism.\n- Supplies default system recommendations for color ratios, type scales, spacing grids, elevation, and component states.\n- Emphasizes accessibility, neurodivergent-friendly practices, and cross-platform usability for modern UI design.\n\nArchive index:\n\nArchive v1.0.0: 7 files, 15977 bytes\n\nFiles: references/accessibility.md (4141b), references/design-systems.md (3466b), references/principles.md (4157b), references/trends-2026.md (5427b), skill-card.md (1845b), SKILL.md (10766b), _meta.json (135b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: graphic-designer\ndescription: 'Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typography, layout grids, design tokens, component states, micro-interactions, or accessibility of screens. Covers visual hierarchy, Gestalt principles, Laws of UX (Fitts, Hick, aesthetic-usability), the 60-30-10 color rule, bento grids, glassmorphism, dopamine palettes, WCAG contrast, motion easing, and 2026 trends like tactile maximalism and adaptive UI.'\n---\n\n# Graphic Designer\n\nApply professional UI/UX visual design judgment to mockups, components, screens, and full interfaces. Translate vague aesthetic requests (\"make it pop\", \"looks dated\", \"feels cluttered\") into concrete, defensible design decisions grounded in perception research and current platform conventions.\n\n## When to Use This Skill\n\n- Designing or reviewing screens, components, landing pages, dashboards, or mobile app UI\n- Picking color palettes, type scales, spacing, or grid systems\n- Defining design tokens or component variants for a design system\n- Improving visual hierarchy, scannability, or conversion on an existing layout\n- Adding or auditing micro-interactions, state transitions, and motion\n- Making a UI accessible (WCAG contrast, neurodivergent-friendly patterns, dynamic type)\n- Modernizing a \"flat 2018\" interface against current 2026 expectations\n\n## Core Decision Framework\n\nEvery visual decision should answer three questions in order:\n\n1. **Where does the eye land first?** — primary action must win the contrast/size/position battle. Run a 5-second squint test; if the CTA disappears at 30% opacity, hierarchy is broken.\n2. **What does the user need to perceive as related?** — apply Gestalt proximity and similarity *before* adding borders, dividers, or boxes. Whitespace groups more cleanly than lines.\n3. **What can be hidden until needed?** — progressive disclosure beats density. Every visible element pays rent in cognitive load.\n\n## Visual System Defaults\n\nUse these as starting points, then deviate with reason:\n\n| System | Default | Notes |\n|---|---|---|\n| Color ratio | **60-30-10** (dominant / secondary / accent) | Accent is reserved for primary CTAs and critical state |\n| Type scale | 1.250 (major third) or 1.333 (perfect fourth) | Tighter scales feel editorial; wider scales feel marketing |\n| Base unit | 4px or 8px spacing grid | Every padding/margin is a multiple — no `padding: 13px` |\n| Body text | 16px minimum on web, 17pt on iOS, 14sp on Android | Below 16px on web fails most accessibility audits |\n| Line length | 45–75 characters | Long-form prose; UI labels can be shorter |\n| Line height | 1.4–1.6 for body, 1.1–1.25 for display | Tight headings, generous body |\n| Corner radius | One scale (e.g., 4 / 8 / 16 / full) | Mixing arbitrary radii ages a UI fast |\n| Elevation | 3–5 shadow tiers max | Use them semantically (resting / raised / overlay / modal) |\n\n## Color & Contrast\n\n- **WCAG minimums**: 4.5:1 for body text, 3:1 for large text (≥18pt or 14pt bold) and UI components. AAA is 7:1 / 4.5:1. Glass/blur backgrounds usually fail — test against worst-case content behind them.\n- **Dopamine palettes** (saturated neons, Y2K) need a desaturated 60% dominant to remain usable; pure saturation everywhere reads as a children's toy.\n- **Dark mode is not \"invert\"** — pure white text on pure black causes halation. Use `#E6E6E6` on `#121212` style off-blacks.\n- **Never encode information by hue alone.** Pair color with icon, label, or shape (red error + ⚠ + \"Error:\").\n- State colors live on a separate axis from brand: success/warning/error/info should survive a brand refresh.\n\n## Typography\n\n- **Two families maximum.** One display, one text. A third for monospace if the product shows code or numerics that need alignment.\n- **Optical sizing matters at scale.** Display weights at body size look bloated; text weights at hero size look weak. Use variable fonts with optical-size axes (`opsz`) when available.\n- **Numerals**: tabular figures (`font-variant-numeric: tabular-nums`) for tables, dashboards, and any column of numbers. Proportional figures everywhere else.\n- **Kinetic / oversized type** is the dominant 2026 hero pattern, but it eats accessibility if it animates without a `prefers-reduced-motion` fallback.\n\n## Layout Patterns Worth Knowing\n\n- **Bento grid** — modular tiles of varying sizes; ideal for feature showcases, dashboards, and portfolios. Each tile must be self-contained (one idea, one CTA).\n- **F-pattern** for text-heavy pages; **Z-pattern** for sparse landing pages. Place primary CTA at the terminus of the expected scan path.\n- **Asymmetric / broken-grid** is back in 2026 marketing UI, but production app UI still rewards strict grids.\n- **Scroll-driven storytelling** is the default long-form pattern; budget for IntersectionObserver-based reveals, not scroll-jacking.\n\n## Motion & Micro-interactions\n\n- **Durations**: 100–200ms for state changes (hover, press), 200–400ms for transitions (open/close), 400–800ms only for narrative reveals. Anything over 800ms feels broken.\n- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (Material \"standard\") is a safe default. Linear easing should only appear on indeterminate spinners.\n- **Always respect `prefers-reduced-motion`** — replace transforms with opacity fades, never remove feedback entirely.\n- Every interactive element needs four visual states minimum: rest, hover, active/pressed, focus-visible. Disabled is a fifth when applicable.\n- **Tactile maximalism** (\"squishy UI\") — buttons that compress 2–4% on press with a brief overshoot on release. Reads as premium on touch devices, gimmicky if every element does it.\n\n## Design Tokens & Systems\n\n- Tokens are tiered: **primitive** (`color-blue-500`) → **semantic** (`color-action-primary`) → **component** (`button-primary-bg`). Components reference semantic, never primitive.\n- Spacing, radius, elevation, motion duration, and z-index all deserve token sets — not just color and type.\n- **One source of truth** between design tool and code. Hand-off without sync drift means using Style Dictionary, Tokens Studio, or platform-native variables — not screenshots.\n\n## Accessibility (Non-Negotiable Floor)\n\n- Contrast ratios per WCAG 2.2 AA (above).\n- Hit targets ≥44×44 pt (iOS) / 48×48 dp (Android) / 24×24 CSS px minimum on web with adequate spacing.\n- Focus indicators must be visible against every background they cross — a 2px ring in brand color often fails on brand-colored sections; use a contrasting outline + offset.\n- Support OS-level dynamic type up to 200%. Test that no text clips, truncates without affordance, or breaks layout.\n- **Neurodivergent-friendly defaults**: avoid auto-playing motion, allow disabling parallax, keep cognitive load chunked, never rely on time-limited interactions without a pause control.\n\n## 2026 Trend Cheat Sheet\n\nApply selectively — trendy ≠ correct for every product.\n\n- **Tactile maximalism** — glossy, clay, jelly textures with realistic depth. Strong for consumer/creative tools, wrong for finance/enterprise.\n- **Dopamine + Y2K palettes** — saturated neons, chrome, gradients. Balance with desaturated dominant per 60-30-10.\n- **Glassmorphism (refined)** — translucent surfaces with backdrop-blur. Always verify text contrast against the *worst-case* content behind the glass.\n- **Bento grids** — feature showcases, settings screens, dashboards.\n- **Adaptive / \"vibe\" UI** — theme shifts by mood, time, or focus state. Requires a deterministic fallback theme.\n- **Controlled imperfection** — hand-drawn marks, collage textures, scribbles. Reads human; do not mix with hyper-precise grids unless deliberately contrasted.\n- **Multimodal affordances** — even click/tap apps should expose voice and keyboard paths; design icons that work across input methods.\n\n## Gotchas\n\n- **Never** ship a glass/blur surface without testing text contrast against the darkest *and* brightest content that can scroll behind it. Designers reliably forget the bright case.\n- **Never** apply Y2K saturation across an entire palette — keep one accent saturated and desaturate the rest, or the UI becomes illegible.\n- **Never** specify pixel values without a token. `margin-top: 13px` is the canary for a design system in collapse.\n- **Never** rely on hover for critical information or actions — touch users have no hover, and keyboard users need focus parity.\n- **Never** animate `width`/`height`/`top`/`left` for transitions — animate `transform` and `opacity` to stay on the compositor thread.\n- **Never** use placeholder text as the only label. It vanishes on focus and fails screen readers.\n- The **aesthetic-usability effect** is real but cuts both ways: a beautiful UI hides usability flaws *during testing*, then surfaces them as churn. Test with real tasks, not first impressions.\n- Trendy ≠ timeless. Default the long-lived parts of a system (type scale, spacing, accessibility) to conservative choices, and confine trends to surface treatments that can be swapped.\n\n## Troubleshooting\n\n| Symptom | Likely Cause | Fix |\n|---|---|---|\n| \"Feels cluttered\" | Weak hierarchy, no whitespace, equal-weight elements competing | Demote secondary elements, increase spacing, raise contrast on the one primary action |\n| \"Looks dated\" | Tight radii + flat fills + 2018 sans-serif + heavy borders | Soften radii to one scale, replace borders with spacing or subtle elevation, refresh type |\n| \"Feels cheap\" | Inconsistent spacing, mixed corner radii, low-quality imagery, default OS shadows | Enforce spacing scale, unify radii, audit photography/iconography, design custom shadows |\n| \"CTA gets lost\" | Accent color used everywhere; CTA blends in | Reserve accent for CTA only; demote other accent uses to secondary palette |\n| \"Brand doesn't pop\" | Brand color used as background everywhere, not as accent | Move brand to accent role; pick a neutral dominant |\n| \"Inaccessible per audit\" | Insufficient contrast, missing focus rings, hover-only affordances | Run automated audit (axe), then manual keyboard + screen reader pass |\n| \"Animations feel janky\" | Animating layout properties or running on main thread | Switch to `transform`/`opacity`; throttle non-essential motion; respect `prefers-reduced-motion` |\n\n## References\n\n- [Principles deep-dive](./references/principles.md) — visual hierarchy, Gestalt, Laws of UX\n- [Design systems & tokens](./references/design-systems.md) — tiered tokens, variants, hand-off\n- [Accessibility checklist](./references/accessibility.md) — WCAG 2.2 AA practical pass\n- [2026 trends with caveats](./references/trends-2026.md) — when to adopt, when to skip\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn71kvdba3t2jfkk6nbgnytg0s81617g\",\n  \"slug\": \"graphic-designer\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1779165480234\n}\n\nFile v1.0.0:references/accessibility.md\n\n# Accessibility Checklist (WCAG 2.2 AA, Practical)\n\nA pragmatic pass. Automated audits catch ~30% of issues; the rest needs manual review.\n\n## Color & Contrast\n\n- Body text against background: **≥ 4.5:1**.\n- Large text (≥ 18pt or 14pt bold / ~24px or 19px bold): **≥ 3:1**.\n- UI components and graphical objects (icons, form borders, focus rings): **≥ 3:1** against adjacent colors.\n- **Test glass/blur surfaces against the worst-case content** that can scroll behind. Bright photos defeat dark text on glass even when the glass blur is heavy.\n- Never encode information by color alone — pair with text, icon, or pattern.\n\n## Text & Type\n\n- Minimum body size: 16px on web, 17pt iOS, 14sp Android.\n- Support OS dynamic type up to **200% zoom** with no clipping, horizontal scroll, or overlap.\n- Line height ≥ 1.5 for body prose. Paragraph spacing ≥ 1.5× line height. Letter spacing ≥ 0.12× and word spacing ≥ 0.16× must remain visually acceptable when user-adjusted.\n- No text in images for content. SVG with text or live HTML, always.\n\n## Interactive Elements\n\n- Hit target minimums: **24×24 CSS px** (WCAG 2.2 AA), with sufficient surrounding space. Practical floors: **44×44 pt** iOS, **48×48 dp** Android.\n- **Focus indicator** must be visible against every background it crosses. A 2px brand-colored ring on a brand-colored section is invisible — add offset and contrasting outline.\n- All hover states have a focus equivalent. All click handlers work via Enter/Space (or arrow keys, where appropriate).\n- Drag-only interactions must have a non-drag fallback (WCAG 2.2 SC 2.5.7).\n- Don't trap focus except in modals; always provide an escape (Esc key + close button + clicking the scrim).\n\n## Forms\n\n- Every input has a visible label. Placeholder is not a label.\n- Errors are programmatically associated with their field (`aria-describedby`) and explain how to fix, not just what went wrong.\n- Required fields marked with both text and a symbol; never asterisk-only.\n- Autocomplete attributes on common fields (name, email, address, payment).\n- Don't validate on blur of the first field before the user has finished typing the rest.\n\n## Motion & Animation\n\n- Respect `prefers-reduced-motion: reduce`. Replace motion with opacity fades or no transition; do not remove feedback entirely.\n- No flashing content above 3Hz (seizure risk).\n- Auto-playing motion longer than 5 seconds must be pausable.\n- Parallax and scroll-jacking are accessibility hazards; provide an off switch or skip them.\n\n## Structure & Semantics\n\n- Heading hierarchy is meaningful and sequential (`h1` once, then `h2`, then `h3`; no skipping for size).\n- Landmarks (`<header>`, `<main>`, `<nav>`, `<footer>`, `<aside>`) make screen reader navigation possible.\n- Lists are real lists (`<ul>`, `<ol>`), not styled divs.\n- Tables for tabular data, with `<th>` and `scope`. Not for layout.\n- Icons that convey meaning need an accessible name (`aria-label` or visually-hidden text). Decorative icons get `aria-hidden=\"true\"`.\n\n## Cognitive & Neurodivergent-Friendly\n\n- Plain language. Sentences under ~20 words for general audiences.\n- Predictable patterns — same component behaves the same way everywhere.\n- Allow users to disable non-essential animation, sound, and notifications.\n- Avoid time limits; if unavoidable, allow extension or pause.\n- Provide undo for destructive actions instead of confirmation dialogs where possible.\n\n## Manual Test Pass (Per Screen)\n\n1. Tab through every interactive element. Order makes sense; focus is always visible.\n2. Operate the screen with the keyboard only. Every action reachable.\n3. Zoom browser to 200%. No clipping, no horizontal scroll on a 1280px viewport.\n4. Toggle `prefers-reduced-motion`. Verify motion is muted but feedback persists.\n5. Run a screen reader through one critical flow (VoiceOver on macOS/iOS, NVDA on Windows, TalkBack on Android). Listen for unlabeled buttons, \"graphic\" announcements, and reading order issues.\n6. Simulate color-vision deficiency (browser devtools). No information should be lost.\n7. Run automated audit (axe, Lighthouse, WAVE). Triage critical issues first.\n\nFile v1.0.0:references/design-systems.md\n\n# Design Systems & Tokens\n\nHow to structure a scalable visual system that survives growth, theming, and hand-off.\n\n## Token Tiers\n\nTokens are referenced in three layers. Each layer references the one below it; no layer skips.\n\n| Tier | Example | Who consumes it |\n|---|---|---|\n| **Primitive** (raw values) | `color-blue-500: #2563EB`, `space-4: 16px` | Only semantic tokens — never components directly |\n| **Semantic** (intent) | `color-action-primary`, `color-text-default`, `space-stack-md` | Component tokens; sometimes app code |\n| **Component** (scoped) | `button-primary-bg`, `input-border-focus` | The component implementation |\n\n**Why**: rebranding swaps primitives; restyling swaps semantic mappings; component-specific tweaks never leak into the global palette.\n\n## Token Categories Worth Defining\n\nBeyond color and type, every mature system tokenizes:\n\n- **Spacing scale** — usually 4px or 8px base, exponential or linear (e.g., 4, 8, 12, 16, 24, 32, 48, 64).\n- **Radius scale** — `none / sm / md / lg / full`. Four to five steps is plenty.\n- **Elevation / shadow** — semantic tiers: `resting / raised / overlay / modal / popover`. Define both shadow and z-index per tier.\n- **Motion** — duration (`fast / base / slow`), easing (`standard / decelerate / accelerate / emphasized`).\n- **Type** — family, weight, size, line-height, letter-spacing, optical-size axis if variable.\n- **Border width** — `hairline / thin / thick`. Three values.\n- **Opacity** — `disabled`, `subtle`, `overlay-scrim`.\n\n## Component Variants\n\nUse design-tool variants (Figma component properties, Storybook args) to express the matrix:\n\n- **Hierarchy**: primary / secondary / tertiary / ghost / destructive\n- **Size**: sm / md / lg (sometimes xs / xl)\n- **State**: rest / hover / pressed / focus-visible / disabled / loading\n- **Optional decorations**: leading icon, trailing icon, caret, badge\n- **Width**: hugging / filling\n\nA button component without focus-visible and loading variants is incomplete.\n\n## Cross-Platform Drift\n\nSame design token, different rendering rules:\n\n- **iOS**: respects Dynamic Type by default — type sizes must be relative, not fixed.\n- **Android**: Material's elevation system maps shadow + tonal overlay; pure shadow tokens may need a tonal companion.\n- **Web**: rem-based type scaling for user font-size preferences; px is acceptable for spacing and borders.\n- **Email**: most tokens are inert. Inline styles, table layouts, web-safe stacks.\n\n## Hand-off Without Drift\n\n- Single source of truth. Either design tool exports → code (Tokens Studio, Style Dictionary, Figma Variables → JSON) or code is the source and the design tool subscribes.\n- Never copy hex values from design into code by hand for production work — that is how drift starts.\n- Diff token changes in PRs; a token rename is a breaking change.\n- Visual regression testing (Chromatic, Percy, Playwright snapshot) catches token-level regressions that unit tests miss.\n\n## When to Build a Design System\n\n- **One product, small team**: don't build a system. Use tokens informally; converge as patterns repeat.\n- **One product, growing team**: formalize tokens and primitive components; skip a full system.\n- **Multiple products / platforms**: build the system. The cost is real but the alternative is N copies drifting.\n\nA premature design system rots faster than ad-hoc components, because it carries the weight of \"official\" without the patterns to back it up.\n\nFile v1.0.0:references/principles.md\n\n# Visual Principles Reference\n\nFoundational principles applied in UI/UX graphic design. Use as a checklist when reviewing or producing a screen.\n\n## Visual Hierarchy\n\nThe order in which the eye discovers elements. Controlled by, in roughly descending power:\n\n1. **Position** — top-left in LTR cultures wins by default; optical center (slightly above true center) for hero focal points.\n2. **Size** — larger elements dominate, but only if surrounded by enough whitespace to register as singular.\n3. **Contrast** — luminance contrast against background outranks hue contrast.\n4. **Color saturation** — one saturated element among desaturated peers will win every time.\n5. **Weight** — bold type, thick strokes.\n6. **Whitespace isolation** — an element with breathing room beats a larger element in a crowd.\n\n**Test**: blur or squint at the design. The intended primary element should still dominate.\n\n## Gestalt Principles (Applied)\n\n- **Proximity** — items close together are read as a group. Prefer spacing over borders to group form fields, list items, or related metadata.\n- **Similarity** — items sharing color, shape, size, or type are read as the same kind. Use to reinforce category without labels.\n- **Continuity** — the eye follows lines and curves. Align elements along implicit lines to create scan paths.\n- **Closure** — the mind completes shapes. You can imply a card with three corners or a divider with whitespace alone.\n- **Figure/ground** — the foreground/background relationship must be unambiguous. Glassmorphism violates this when contrast is too low.\n- **Common region** — a shared container (card, panel) overrides proximity. Use sparingly; cards-within-cards becomes Russian-doll UI.\n\n## Laws of UX (Applied)\n\n- **Fitts's Law** — target acquisition time scales with distance and inversely with target size. Make primary actions large and place them near where attention already is (corners on desktop, thumb zones on mobile).\n- **Hick's Law** — decision time scales with number/complexity of choices. Use progressive disclosure, sensible defaults, and grouping to reduce visible options.\n- **Miller's Law** — humans hold ~7 (±2) items in working memory; chunk longer lists into groups of 3–5.\n- **Aesthetic-Usability Effect** — attractive interfaces are *perceived* as more usable. Useful for first impressions; do not let it substitute for real usability testing.\n- **Jakob's Law** — users spend most of their time on other products and expect yours to work the same. Deviate from platform conventions only with clear payoff.\n- **Doherty Threshold** — productivity climbs when system response is under ~400ms. Optimistic UI, skeletons, and immediate feedback hide latency.\n- **Peak-End Rule** — users remember the peak emotional moment and the ending. Invest disproportionately in onboarding peaks, success states, and clean exit/empty states.\n- **Serial Position Effect** — first and last items in a list are remembered best. Put important nav items at the ends.\n- **Zeigarnik Effect** — incomplete tasks linger in memory. Progress indicators and partial states motivate completion.\n\n## The Whitespace Discipline\n\nWhitespace is not empty — it is structural. Categories:\n\n- **Macro whitespace** — between major sections; controls page rhythm.\n- **Micro whitespace** — between related elements (label and input, icon and text); controls scanability.\n- **Active whitespace** — deliberately placed to direct attention.\n- **Passive whitespace** — natural margins and padding.\n\nReducing whitespace to fit more content almost always loses comprehension faster than it gains density.\n\n## Composition Rules of Thumb\n\n- **Rule of thirds** for hero imagery and key focal placement.\n- **Golden ratio (≈1.618)** is useful as a sanity check on proportions but rarely worth chasing precisely.\n- **Optical alignment** beats mathematical alignment — circles, triangles, and asymmetric glyphs often need to be nudged 1–2px off true center to *look* centered.\n- **Optical sizing** — a circle of the same height as a square reads as smaller; bump it ~5–10% larger to match visual weight.\n\nFile v1.0.0:references/trends-2026.md\n\n# 2026 Trends With Caveats\n\nTrends are a vocabulary, not a mandate. Each entry below pairs the trend with when it works, when it backfires, and how to apply it without aging the product overnight.\n\n## Tactile Maximalism (\"Squishy UI\")\n\n**What**: Glossy, jelly, clay, or chrome surfaces with realistic depth. Buttons compress on press; cards have soft inner highlights.\n\n- **Use for**: consumer apps, creative tools, games, kids' products, premium hardware companion apps.\n- **Avoid for**: finance, healthcare records, enterprise dashboards, government services — depth reads as unserious.\n- **Pitfall**: applying it to every component. Reserve for hero CTAs and signature interactions; keep utility chrome flat.\n- **Performance**: heavy filters and gradients on every element kill scroll perf on mid-tier Android. Test on a real low-end device.\n\n## Dopamine Palettes & Y2K Saturation\n\n**What**: Saturated neons, chrome metallics, gradients, candy colors.\n\n- **Use for**: brand-led marketing, consumer launches, creative SaaS.\n- **Avoid for**: data-dense UI where color carries meaning (charts, status, severity).\n- **Pitfall**: full saturation everywhere — eyes fatigue in seconds. Apply 60-30-10: desaturated dominant, mid-saturation secondary, one neon accent.\n- **Accessibility**: neon-on-neon almost always fails WCAG. Anchor with deep neutrals.\n\n## Glassmorphism (Refined)\n\n**What**: Translucent surfaces with backdrop blur, fine borders, soft inner light.\n\n- **Use for**: floating overlays, nav bars over rich content, lock screens, hero overlays.\n- **Avoid for**: dense forms, settings panels, primary content surfaces.\n- **Pitfall**: text contrast collapses over bright content. Always test against the brightest and darkest possible content behind.\n- **Fallback**: provide a solid-surface variant for low-end GPUs and `prefers-reduced-transparency`.\n\n## Bento Grids\n\n**What**: Modular tiles of varying sizes packed like a bento box.\n\n- **Use for**: feature showcases, dashboard landing screens, portfolio grids, settings hubs.\n- **Avoid for**: linear content flows, forms, narrative pages.\n- **Pitfall**: tiles competing for attention; nothing is primary. Establish one anchor tile (largest, highest contrast) and demote the rest.\n- **Responsive**: bento grids collapse poorly on narrow screens. Plan a single-column or two-column fallback at the start.\n\n## Adaptive / \"Vibe\" UI\n\n**What**: Theme, density, or layout shifts based on mood, time, focus state, or user-declared preference.\n\n- **Use for**: long-session apps (reading, music, productivity).\n- **Avoid for**: utility apps with infrequent, transactional use.\n- **Pitfall**: unpredictability. Always offer a \"lock current theme\" escape hatch. Test every adaptive state for accessibility independently.\n- **Privacy**: mood/biometric inputs require explicit consent and a non-biometric fallback.\n\n## Controlled Imperfection\n\n**What**: Hand-drawn marks, scribbles, collage textures, off-grid placement.\n\n- **Use for**: brand-led marketing, creative tools, children's products, lifestyle.\n- **Avoid for**: data and enterprise UI — imperfection reads as bugs.\n- **Pitfall**: mixing hand-drawn with hyper-precise grid without deliberate contrast. Either commit or separate.\n- **Asset weight**: hand-drawn SVG/PNG can balloon page weight. Optimize ruthlessly.\n\n## Kinetic & Oversized Typography\n\n**What**: Display type at hero scale, often animated on scroll or load.\n\n- **Use for**: marketing hero sections, splash screens, transitions.\n- **Avoid for**: app body content.\n- **Pitfall**: animation without `prefers-reduced-motion` fallback. Variable-weight oscillation can induce motion sickness in some users.\n- **Performance**: variable fonts are larger; subset and lazy-load non-critical weights.\n\n## Multimodal Affordances\n\n**What**: Designing screens that work via touch, click, keyboard, voice, and increasingly gesture / spatial input.\n\n- **Use for**: any product targeting accessibility, multitasking, or future spatial platforms.\n- **Pitfall**: designing primarily for touch then bolting on keyboard — focus order, hover parity, and voice intent all collapse.\n- **Implementation**: design the keyboard path first; touch and voice usually fall out cleanly.\n\n## Calm Interfaces\n\n**What**: Heavy whitespace, restrained palette, single focus per screen, scroll-driven storytelling.\n\n- **Use for**: reading, journaling, meditation, premium content, enterprise dashboards that want to look high-trust.\n- **Avoid for**: high-engagement consumer apps competing for attention.\n- **Pitfall**: calm becomes empty. Whitespace must frame *something*; otherwise the screen looks unfinished.\n\n## What to Skip\n\n- **Neumorphism** — accessibility-hostile and visually fragile. Effectively obsolete outside niche aesthetics.\n- **Pure flat 2018 Material** — reads as dated. Modern flat needs at least subtle elevation or tonal layering.\n- **Dark patterns** — illegal in many jurisdictions (EU DSA, US state-level), and reputationally toxic regardless.\n\n## Trend Application Rule\n\nDefault the long-lived parts of the system — type scale, spacing, accessibility floors, semantic tokens — to conservative choices. Confine trends to the **surface layer** (color treatments, motion, hero typography, illustration style) that can be swapped without rebuilding the system. That way, when 2027's aesthetic arrives, you refresh the surface and the foundation survives.\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nProvides practical visual design guidance for designing, critiquing, and improving website and app interfaces.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[jhauga](https://clawhub.ai/user/jhauga)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDesigners, developers, and other interface builders use this skill to plan or review visual hierarchy, color, typography, layout, design systems, motion, and accessibility for websites and apps.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Unreviewed design recommendations may create accessibility or usability problems in production interfaces.\n\nMitigation: Review proposed UI changes in context and test contrast, keyboard access, reduced motion, and critical user flows before release.\n\n## Reference(s):\n\n- [Graphic Designer release on ClawHub](https://clawhub.ai/jhauga/skills/graphic-designer)\n- [Visual principles](artifact/references/principles.md)\n- [Design systems and tokens](artifact/references/design-systems.md)\n- [Accessibility checklist](artifact/references/accessibility.md)\n- [2026 design trends and caveats](artifact/references/trends-2026.md)\n\n## Skill Output:\n\n**Output Type(s):** [Design guidance, Markdown, Configuration guidance]\n\n**Output Format:** [Text or Markdown with actionable UI recommendations]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May include suggested design tokens, layout specifications, and accessibility checks.]\n\n## Skill Version(s):\n\n1.0.0 (source: ClawHub release metadata)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.","readmeExcerpt":"Skill: Graphic Designer Owner: jhauga Summary: Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-19T04:38:00.234Z | user - Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites. - Provides ac","codeSnippets":[],"executableExamples":[],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: graphic-designer\ndescription: 'Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typography, layout grids, design tokens, component states, micro-interactions, or accessibility of screens. Covers visual hierarchy, Gestalt principles, Laws of UX (Fitts, Hick, aesthetic-usability), the 60-30-10 color rule, bento grids, glassmorphism, dopamine palettes, WCAG contrast, motion easing, and 2026 trends like tactile maximalism and adaptive UI.'\n---\n\n# Graphic Designer\n\nApply professional UI/UX visual design judgment to mockups, components, screens, and full interfaces. Translate vague aesthetic requests (\"make it pop\", \"looks dated\", \"feels cluttered\") into concrete, defensible design decisions grounded in perception research and current platform conventions.\n\n## When to Use This Skill\n\n- Designing or reviewing screens, components, landing pages, dashboards, or mobile app UI\n- Picking color palettes, type scales, spacing, or grid systems\n- Defining design tokens or component variants for a design system\n- Improving visual hierarchy, scannability, or conversion on an existing layout\n- Adding or auditing micro-interactions, state transitions, and motion\n- Making a UI accessible (WCAG contrast, neurodivergent-friendly patterns, dynamic type)\n- Modernizing a \"flat 2018\" interface against current 2026 expectations\n\n## Core Decision Framework\n\nEvery visual decision should answer three questions in order:\n\n1. **Where does the eye land first?** — primary action must win the contrast/size/position battle. Run a 5-second squint test; if the CTA disappears at 30% opacity, hierarchy is broken.\n2. **What does the user need to perceive as related?** — apply Gestalt proximity and similarity *before* adding borders, dividers, or boxes. Whitespace groups more cleanly than lines.\n3. **What can be hidden until needed?** — progressive disclosure beats density. Every visible element pays rent in cognitive load.\n\n## Visual System Defaults\n\nUse these as starting points, then deviate with reason:\n\n| System | Default | Notes |\n|---|---|---|\n| Color ratio | **60-30-10** (dominant / secondary / accent) | Accent is reserved for primary CTAs and critical state |\n| Type scale | 1.250 (major third) or 1.333 (perfect fourth) | Tighter scales feel editorial; wider scales feel marketing |\n| Base unit | 4px or 8px spacing grid | Every padding/margin is a multiple — no `padding: 13px` |\n| Body text | 16px minimum on web, 17pt on iOS, 14sp on Android | Below 16px on web fails most accessibility audits |\n| Line length | 45–75 characters | Long-form prose; UI labels can be shorter |\n| Line height | 1.4–1.6 for body, 1.1–1.25 for display | Tight headings, generous body |\n| Corner radius | One scale (e.g., 4 / 8 / 16 / full) | Mixing arbitrary radii ages a UI fast |\n| Elevation | 3–5 shadow tiers max | Use them semantically (resting / raised / overlay / modal) |\n\n## Color & Contrast\n\n"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn71kvdba3t2jfkk6nbgnytg0s81617g\",\n  \"slug\": \"graphic-designer\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1779165480234\n}"},{"path":"references/accessibility.md","content":"# Accessibility Checklist (WCAG 2.2 AA, Practical)\n\nA pragmatic pass. Automated audits catch ~30% of issues; the rest needs manual review.\n\n## Color & Contrast\n\n- Body text against background: **≥ 4.5:1**.\n- Large text (≥ 18pt or 14pt bold / ~24px or 19px bold): **≥ 3:1**.\n- UI components and graphical objects (icons, form borders, focus rings): **≥ 3:1** against adjacent colors.\n- **Test glass/blur surfaces against the worst-case content** that can scroll behind. Bright photos defeat dark text on glass even when the glass blur is heavy.\n- Never encode information by color alone — pair with text, icon, or pattern.\n\n## Text & Type\n\n- Minimum body size: 16px on web, 17pt iOS, 14sp Android.\n- Support OS dynamic type up to **200% zoom** with no clipping, horizontal scroll, or overlap.\n- Line height ≥ 1.5 for body prose. Paragraph spacing ≥ 1.5× line height. Letter spacing ≥ 0.12× and word spacing ≥ 0.16× must remain visually acceptable when user-adjusted.\n- No text in images for content. SVG with text or live HTML, always.\n\n## Interactive Elements\n\n- Hit target minimums: **24×24 CSS px** (WCAG 2.2 AA), with sufficient surrounding space. Practical floors: **44×44 pt** iOS, **48×48 dp** Android.\n- **Focus indicator** must be visible against every background it crosses. A 2px brand-colored ring on a brand-colored section is invisible — add offset and contrasting outline.\n- All hover states have a focus equivalent. All click handlers work via Enter/Space (or arrow keys, where appropriate).\n- Drag-only interactions must have a non-drag fallback (WCAG 2.2 SC 2.5.7).\n- Don't trap focus except in modals; always provide an escape (Esc key + close button + clicking the scrim).\n\n## Forms\n\n- Every input has a visible label. Placeholder is not a label.\n- Errors are programmatically associated with their field (`aria-describedby`) and explain how to fix, not just what went wrong.\n- Required fields marked with both text and a symbol; never asterisk-only.\n- Autocomplete attributes on common fields (name, email, address, payment).\n- Don't validate on blur of the first field before the user has finished typing the rest.\n\n## Motion & Animation\n\n- Respect `prefers-reduced-motion: reduce`. Replace motion with opacity fades or no transition; do not remove feedback entirely.\n- No flashing content above 3Hz (seizure risk).\n- Auto-playing motion longer than 5 seconds must be pausable.\n- Parallax and scroll-jacking are accessibility hazards; provide an off switch or skip them.\n\n## Structure & Semantics\n\n- Heading hierarchy is meaningful and sequential (`h1` once, then `h2`, then `h3`; no skipping for size).\n- Landmarks (`<header>`, `<main>`, `<nav>`, `<footer>`, `<aside>`) make screen reader navigation possible.\n- Lists are real lists (`<ul>`, `<ol>`), not styled divs.\n- Tables for tabular data, with `<th>` and `scope`. Not for layout.\n- Icons that convey meaning need an accessible name (`aria-label` or visually-hidden text). Decorative icons get `aria-hidden=\"true\"`.\n\n## Cog"},{"path":"references/design-systems.md","content":"# Design Systems & Tokens\n\nHow to structure a scalable visual system that survives growth, theming, and hand-off.\n\n## Token Tiers\n\nTokens are referenced in three layers. Each layer references the one below it; no layer skips.\n\n| Tier | Example | Who consumes it |\n|---|---|---|\n| **Primitive** (raw values) | `color-blue-500: #2563EB`, `space-4: 16px` | Only semantic tokens — never components directly |\n| **Semantic** (intent) | `color-action-primary`, `color-text-default`, `space-stack-md` | Component tokens; sometimes app code |\n| **Component** (scoped) | `button-primary-bg`, `input-border-focus` | The component implementation |\n\n**Why**: rebranding swaps primitives; restyling swaps semantic mappings; component-specific tweaks never leak into the global palette.\n\n## Token Categories Worth Defining\n\nBeyond color and type, every mature system tokenizes:\n\n- **Spacing scale** — usually 4px or 8px base, exponential or linear (e.g., 4, 8, 12, 16, 24, 32, 48, 64).\n- **Radius scale** — `none / sm / md / lg / full`. Four to five steps is plenty.\n- **Elevation / shadow** — semantic tiers: `resting / raised / overlay / modal / popover`. Define both shadow and z-index per tier.\n- **Motion** — duration (`fast / base / slow`), easing (`standard / decelerate / accelerate / emphasized`).\n- **Type** — family, weight, size, line-height, letter-spacing, optical-size axis if variable.\n- **Border width** — `hairline / thin / thick`. Three values.\n- **Opacity** — `disabled`, `subtle`, `overlay-scrim`.\n\n## Component Variants\n\nUse design-tool variants (Figma component properties, Storybook args) to express the matrix:\n\n- **Hierarchy**: primary / secondary / tertiary / ghost / destructive\n- **Size**: sm / md / lg (sometimes xs / xl)\n- **State**: rest / hover / pressed / focus-visible / disabled / loading\n- **Optional decorations**: leading icon, trailing icon, caret, badge\n- **Width**: hugging / filling\n\nA button component without focus-visible and loading variants is incomplete.\n\n## Cross-Platform Drift\n\nSame design token, different rendering rules:\n\n- **iOS**: respects Dynamic Type by default — type sizes must be relative, not fixed.\n- **Android**: Material's elevation system maps shadow + tonal overlay; pure shadow tokens may need a tonal companion.\n- **Web**: rem-based type scaling for user font-size preferences; px is acceptable for spacing and borders.\n- **Email**: most tokens are inert. Inline styles, table layouts, web-safe stacks.\n\n## Hand-off Without Drift\n\n- Single source of truth. Either design tool exports → code (Tokens Studio, Style Dictionary, Figma Variables → JSON) or code is the source and the design tool subscribes.\n- Never copy hex values from design into code by hand for production work — that is how drift starts.\n- Diff token changes in PRs; a token rename is a breaking change.\n- Visual regression testing (Chromatic, Percy, Playwright snapshot) catches token-level regressions that unit tests miss.\n\n## When to Build a Design System\n\n- **One product,"},{"path":"references/principles.md","content":"# Visual Principles Reference\n\nFoundational principles applied in UI/UX graphic design. Use as a checklist when reviewing or producing a screen.\n\n## Visual Hierarchy\n\nThe order in which the eye discovers elements. Controlled by, in roughly descending power:\n\n1. **Position** — top-left in LTR cultures wins by default; optical center (slightly above true center) for hero focal points.\n2. **Size** — larger elements dominate, but only if surrounded by enough whitespace to register as singular.\n3. **Contrast** — luminance contrast against background outranks hue contrast.\n4. **Color saturation** — one saturated element among desaturated peers will win every time.\n5. **Weight** — bold type, thick strokes.\n6. **Whitespace isolation** — an element with breathing room beats a larger element in a crowd.\n\n**Test**: blur or squint at the design. The intended primary element should still dominate.\n\n## Gestalt Principles (Applied)\n\n- **Proximity** — items close together are read as a group. Prefer spacing over borders to group form fields, list items, or related metadata.\n- **Similarity** — items sharing color, shape, size, or type are read as the same kind. Use to reinforce category without labels.\n- **Continuity** — the eye follows lines and curves. Align elements along implicit lines to create scan paths.\n- **Closure** — the mind completes shapes. You can imply a card with three corners or a divider with whitespace alone.\n- **Figure/ground** — the foreground/background relationship must be unambiguous. Glassmorphism violates this when contrast is too low.\n- **Common region** — a shared container (card, panel) overrides proximity. Use sparingly; cards-within-cards becomes Russian-doll UI.\n\n## Laws of UX (Applied)\n\n- **Fitts's Law** — target acquisition time scales with distance and inversely with target size. Make primary actions large and place them near where attention already is (corners on desktop, thumb zones on mobile).\n- **Hick's Law** — decision time scales with number/complexity of choices. Use progressive disclosure, sensible defaults, and grouping to reduce visible options.\n- **Miller's Law** — humans hold ~7 (±2) items in working memory; chunk longer lists into groups of 3–5.\n- **Aesthetic-Usability Effect** — attractive interfaces are *perceived* as more usable. Useful for first impressions; do not let it substitute for real usability testing.\n- **Jakob's Law** — users spend most of their time on other products and expect yours to work the same. Deviate from platform conventions only with clear payoff.\n- **Doherty Threshold** — productivity climbs when system response is under ~400ms. Optimistic UI, skeletons, and immediate feedback hide latency.\n- **Peak-End Rule** — users remember the peak emotional moment and the ending. Invest disproportionately in onboarding peaks, success states, and clean exit/empty states.\n- **Serial Position Effect** — first and last items in a list are remembered best. Put important nav items at the ends.\n- **Zeigarnik"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Skill: Graphic Designer Owner: jhauga Summary: Expert visual design guidance for UI and UX of GUI apps and websites. Use when asked to design, critique, or improve interface visuals, color palettes, typog... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-19T04:38:00.234Z | user - Initial release of the graphic-designer skill for expert visual design guidance in UI and UX for GUI apps and websites. - Provides ac","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":2151,"uniquenessScore":55,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T17:28:46.204Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:59:00.113Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}