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

> Discover the three main components of the i-have-adhd frontend: skill definition, plugin manifest, and Markdown template. Learn how they create an action-first UI in Claude and Codex.

- Repository: [Ayoub Ghriss/i-have-adhd](https://github.com/ayghri/i-have-adhd)
- Tags: architecture
- Published: 2026-07-30

---

**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`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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:

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

# Invoke with:

/i-have-adhd

```

For Codex:

```bash
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`](https://github.com/ayghri/i-have-adhd/blob/main/skills/i-have-adhd/SKILL.md)) establishes the 10-rule behavioral contract that governs response formatting
- The **plugin manifest** ([`plugin.json`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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`](https://github.com/ayghri/i-have-adhd/blob/main/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.