audhd-ui-guide

AuDHD friendly interface guidance

Practical guidance for developers and AI agents building interfaces that are easier to understand, use, pause, resume and correct.

Version: v1.01 · Updated October 19, 2026

What is this? · Use it · Install it · What else?

What is this?

• Guide: Rules for making context, relationships, actions and recovery understandable. Use it to design or review an interface, with or without AI.
• Skill: A workflow for AI development agents: understand your codebase, apply the Guide and verify improvements.
• Examples: An annotated screenshot gallery, worked patterns, runnable React and Svelte interfaces, and 22 skins with chart palettes. Explore the choices, see the rules in action and adapt useful patterns to your own stack.

How do I use it?

Select or name the audhd-ui-guide skill, then choose a prompt below. Paste prompts into your agent’s chat:

• Review an existing interface: “Use the audhd-ui-guide skill. Run an AuDHD audit on this program's UI components. Report the main problems and recommended improvements before changing anything.”
• Build a configuration dashboard: “Use the audhd-ui-guide skill. Here are my configuration files and codebase. Build an AuDHD-friendly settings dashboard using the real defaults, dependencies and save behavior.”
• Add a front end: “Use the audhd-ui-guide skill. Add an AuDHD-friendly front end to this codebase. Use the existing stack, preserve behavior and permissions, and verify complete workflows.”
• Improve a specific difficulty: “Use the audhd-ui-guide skill. Make the selected item and its detail panel clearly connected. Preserve drafts, navigation and keyboard focus, and explain what you verified.”

Start with one task; you do not need to redesign everything. For a manual review, follow Try one small review. For agents without skill discovery, use the attachment-based instructions.

How do I install it?

Choose one platform and one scope: personal installation makes the skill available across your projects; project installation makes it available inside one application project. ~ means your home directory; paths without ~ start at the application project.

• Download with Git: This creates an audhd-ui-guide folder inside your current directory. You can run it from your chosen skills directory to install there directly:

  git clone https://github.com/Greyland-Fireworks/audhd-ui-guide.git
  

• Codex: Put the folder at ~/.agents/skills/audhd-ui-guide/ for personal use across projects, or .agents/skills/audhd-ui-guide/ inside the project being worked on. See Codex skill locations.

• Claude Code: Use ~/.claude/skills/audhd-ui-guide/ for personal use or .claude/skills/audhd-ui-guide/ inside a project. See Claude Code skill locations.

• Cursor: Use ~/.cursor/skills/audhd-ui-guide/ for personal use or .cursor/skills/audhd-ui-guide/ inside a project. Cursor also supports the .agents/skills/ locations used by Codex; choose one location rather than installing duplicate copies. See Cursor skill locations.

• Keep the supporting files together: Keep SKILL.md, GUIDE.md and the other public files in their original relative locations. Exclude ignored research, personal profiles, dependencies and build/test output when copying a working checkout.

• Confirm it is available: Open the application project in your agent and select or name audhd-ui-guide. Check the skill selector; refresh or restart the agent if needed. Local installation does not automatically install the skill in a remote or cloud environment—follow that platform's setup instructions there.

Reading the Guide and using the Skill require no npm installation. Run the examples only if you want to explore the demonstrations.

To clone directly into your current empty directory, name that directory audhd-ui-guide and run:

git clone https://github.com/Greyland-Fireworks/audhd-ui-guide.git .

On Windows, use the corresponding folders under your user home or project. For an agent running in WSL, use its Linux environment's folders.

The platform links above document the installation locations. This project has not tested end-to-end skill installation in each platform.

What else should I know?

• Personal choice matters: Accessible behavior is mandatory; light/dark skins, typography and enjoyable visual variety are selectable. No single appearance suits everyone. See personalization.
• You can set priorities: Choose primary targets and rule emphasis to focus the work without weakening accessibility, authorization or correct behavior.
• Audits start with findings: An audit reviews the interface. Ask explicitly when you want implementation; ordinary use does not authorize publishing, changing permissions or storing personal preferences.
• The examples have clear limits: Demo reviews stay in memory and reset on reload. Export downloads preferences only. Keep personal preference files private; see the preference contract.
• Evidence has boundaries: Automated reference checks have passed; actual browser zoom, screen-reader operation and participant evaluation remain pending. This practitioner guidance is not a clinical intervention or accessibility certification. See the acceptance record.
• Reuse and feedback are welcome: Code and CSS use MIT; documentation uses CC BY 4.0, with separate logo terms. See licensing, contribution guidance and the community.

More detail

Choose the next task that matters to you:

• Try it: Run the examples or review one small workflow.
• Adapt it: Use with an LLM, personalize the interface or browse the resource directory.
• Understand the project: Background, accessibility, community and licensing.

Choose your next step