Main Components of the i-have-adhd Frontend: Inside the Markdown-Driven UI

The i-have-adhd frontend consists of three core components—a skill definition that governs response behavior, a plugin manifest that registers the slash command, and a Markdown template that structures the visual output—rendering an action-first interface directly inside Claude Code and Codex assistants.

The ayghri/i-have-adhd repository provides a specialized skill for AI coding assistants that replaces traditional web interfaces with a lightweight, rule-based Markdown UI. Unlike conventional frontends built with React or HTML, this project renders its interface through structured text and behavioral contracts. Understanding the main components of the i-have-adhd frontend reveals how the skill enforces concise, action-first responses without heavy client-side frameworks.

The Three Main Components of the i-have-adhd Frontend

Skill Definition: The Behavioral Contract in SKILL.md

Located at skills/i-have-adhd/SKILL.md, this file contains the 10-rule contract that shapes every interaction. It defines strict guidelines such as "lead with the next action," "number multi-step tasks," and "no preamble." When the assistant generates a response, it consults this file to determine formatting constraints, ensuring the output matches the skill's ADHD-friendly, distraction-minimizing design philosophy.

Plugin Manifest: Registration and Command Routing in plugin.json

The plugin.json file serves as the entry point for the Claude Code and Codex ecosystems. It declares the skill's metadata—including the name, description, and the /i-have-adhd slash command (or $i-have-adhd in Codex). When a user types the command, the host application reads this manifest to locate and initialize the skill, effectively routing the request to the appropriate handler.

Front-End Template: The Markdown Scaffold

Rather than JSX components, the visual interface consists of a Markdown template containing "Before / After" comparison tables, rule lists, and example usage sections. This template lives within the skill's logic, with its static structure visible in the README.md. The assistant injects concrete data—such as code diffs or task lists—into this scaffold, which the host then renders as the visible frontend.

How the Frontend Renders Inside AI Assistants

When a user invokes the skill by typing /i-have-adhd in Claude Code or $i-have-adhd in Codex, the rendering process follows a specific sequence:

1. The host reads the plugin manifest to identify the skill location and entry point
2. It loads the skill definition from skills/i-have-adhd/SKILL.md to apply the 10 formatting rules
3. The assistant populates the Markdown template with specific content and returns the formatted text
4. The host renders this Markdown as the final UI, displaying the action-first, numbered output

This architecture eliminates the need for browser-based rendering engines while maintaining strict consistency in how information is presented.

Installation and Usage Commands

To activate the frontend in your development environment, install the skill through the respective plugin marketplaces.

For Claude Code:

claude plugin marketplace add ayghri/i-have-adhd
claude plugin install i-have-adhd@i-have-adhd

# Invoke with:

/i-have-adhd

For Codex:

codex plugin marketplace add ayghri/i-have-adhd --ref main
codex plugin add i-have-adhd@i-have-adhd

# Invoke with:

$i-have-adhd

Both commands trigger the host to render the Markdown UI, applying the skill's rules to the assistant's subsequent replies.

Summary

• The skill definition (skills/i-have-adhd/SKILL.md) establishes the 10-rule behavioral contract that governs response formatting
• The plugin manifest (plugin.json) registers the skill and defines the /i-have-adhd slash command entry point
• The front-end template provides the Markdown scaffold with "Before / After" comparisons and rule documentation
• Invocation occurs through simple commands (/i-have-adhd or $i-have-adhd) that trigger the Markdown rendering pipeline
• This architecture creates a lightweight, text-based UI optimized for action-first, concise interactions

Frequently Asked Questions

What makes the i-have-adhd frontend different from traditional web UIs?

Unlike React or Vue applications that render in browsers, the i-have-adhd frontend uses a Markdown-driven architecture. It operates entirely within Claude Code or Codex terminals, rendering structured text output according to rules defined in SKILL.md rather than manipulating DOM elements. This approach prioritizes speed and minimal cognitive load over visual richness.

Where are the frontend rules actually defined?

The behavioral rules reside in skills/i-have-adhd/SKILL.md within the repository. This file contains 10 specific guidelines including "lead with the next action" and "number multi-step tasks" that constrain how the assistant formats its responses. The plugin does not use CSS or JavaScript for styling; instead, it relies on these Markdown formatting constraints.

Can I customize the visual appearance of the i-have-adhd frontend?

Customization is limited because the frontend renders through the host application's Markdown parser. You can modify the template structure within the skill's logic and update the static sections in README.md, but the visual presentation ultimately depends on how Claude Code or Codex renders Markdown. The design intentionally prioritizes consistent, rule-based formatting over customizable themes.

How do I trigger the i-have-adhd frontend after installation?

After installing via the plugin marketplace commands, type /i-have-adhd in Claude Code or $i-have-adhd in Codex. These slash commands signal the host to load the skill definition and apply the formatting rules to subsequent assistant responses, effectively activating the specialized frontend behavior.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}