Audhd UI Guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

15 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Greyland-Fireworks/audhd-ui-guide --skill audhd-ui-guide

Manual install

git clone --depth 1 https://github.com/Greyland-Fireworks/audhd-ui-guide.git /tmp/audhd-ui-guide
mkdir -p ~/.claude/skills
cp -r /tmp/audhd-ui-guide/. ~/.claude/skills/audhd-ui-guide

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# AuDHD-friendly UI and UX guidance

Use [GUIDE.md](GUIDE.md) as the authoritative rulebook and visual standard; keep rule definitions in the guide. Load supporting references through the mechanism provided by the host:

- **Filesystem installation:** Resolve relative links from the installed directory containing this `SKILL.md`, not the current working directory.
- **Skill-resource API:** Discover the matching installed skill through the host's skill listing and use its returned canonical package, authority and resource identifiers. Read supporting files under that canonical skill root using the complete identifiers required by the reader, not bare filenames. Do not assume a cloud-facing `SKILL.md` identifier also addresses its supporting files. If cloud addressing fails and an executor skill listing is available, discover the matching executor installation and retry with its canonical identifiers. Never hard-code another installation's package ID or root.

If the guide still cannot be read, report the attempted resource, access mechanism and returned error (or that no read mechanism is available). Distinguish failed access from confirmed absence; a read error alone does not establish an installation problem. Continue only within the evidence available and do not claim to have applied unread guide rules.

## Execution checklist

1. Establish the requested deliverable, bounded task and completion criteria below.

Read the full skill on GitHub

Details

Skill name: audhd-ui-guide
Repository: Greyland-Fireworks/audhd-ui-guide
License: CC-BY-4.0
Repo updated: 21 October 2026

FAQ

What does the Audhd UI Guide skill do?

How do I install the Audhd UI Guide skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Greyland-Fireworks/audhd-ui-guide --skill audhd-ui-guide. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Audhd UI Guide popular?

It lives in Greyland-Fireworks/audhd-ui-guide, which has 15 GitHub stars and 1 forks.

Related skills

Arabic UI

JKc66/arabic-ui

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical syntactic flow, eliminates translationese (العرنجية), applies Al-Jahiz's density principle, and handles Arabic pluralization and bidirectional layout.

Frontend & Design

Pixel Perfect Web Replica

Core-Mate/Pixel-Perfect-Web-Replica

Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare screenshots; and list replaceable resources for rebranding or customization.

Frontend & Design

Design Feel Like Your Own Product

Tiannanzhao/design-feel-like-your-own-product

Learn and replicate a designer's style from Figma files to create new components that feel authentic to their design system. Use this skill whenever a user shares a Figma file and wants to create new components, plugins, or UI elements that match an existing design style — even if they don't explicitly say "learn my style". Trigger when users mention Figma files, design systems, "make it look like my design", "match the style", or ask to extend an existing UI.

Frontend & Design

Itqan

saleh-alhaddad/itqan-engineering

The full software-engineering lifecycle as one suite — DISCOVER, DEFINE, PLAN, BUILD, VERIFY, REVIEW, SHIP — with approval gates before code, test-first builds, evidence before "done", and resumable multi-session work. Routes to 12 sub-skills covering any stack, plus feature discovery, security audit, UI/UX craft, and learning roadmaps.

Frontend & DesignIn 1 list

Design Tokens

ilikescience/design-tokens-skill

Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

Frontend & Design

CSS Animation

neonwatty/css-animation-skill

Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.