IntelliHelper UI Agent

Official agent plugin for IntelliHelper UI — Liquid Glass React components for coding agents.

This repository is the installable unit for Claude Code, Grok CLI, Codex, Cursor, Gemini CLI, and any client that supports Agent Skills + MCP.

Layer	What you get
MCP	Live registry tools via @intellihelper/cli (search, get_component, get_add_command, …)
Skills	Workflow + Liquid Glass design judgment agents actually follow
Commands	Slash shortcuts: add, search, list, audit, themes
Agent	ui-builder specialist for multi-component screens

Components and the MCP implementation live in the product monorepo / npm package. This repo is the thin distribution surface for agents.

---

Install

Claude Code

# Add this marketplace, then install the plugin
claude plugin marketplace add IntelliHelper/agent-skills
claude plugin install intellihelper-ui@intellihelper

# Or load from a local clone while developing
claude --plugin-dir ./agent-skills

Grok CLI

grok plugin marketplace add IntelliHelper/agent-skills
# or install the repo directly
grok plugin install IntelliHelper/agent-skills --trust

grok plugin validate .
grok plugin details intellihelper-ui

Enable / trust the plugin so hooks and MCP activate. Then open /plugins or /mcps to confirm intellihelper-ui is listed.

Codex

codex plugin marketplace add IntelliHelper/agent-skills
# Then install intellihelper-ui from /plugins

Cursor

1. Install the plugin from the marketplace when listed, or
2. MCP-only fallback:

npx @intellihelper/cli@latest mcp init --client cursor

Optionally install skills via skills.sh:

npx skills add IntelliHelper/agent-skills

Gemini CLI

gemini extensions install https://github.com/IntelliHelper/agent-skills

MCP only (any agent)

You do not need this plugin to use the tools — the plugin packages them for one-click install:

npx @intellihelper/cli@latest mcp init --client cursor   # claude | vscode | opencode | codex

Manual MCP config:

{
  "mcpServers": {
    "intellihelper-ui": {
      "command": "npx",
      "args": ["-y", "@intellihelper/cli@latest", "mcp"]
    }
  }
}

Requirement: Node.js 18+ (for npx + the CLI MCP server).

---

What's inside

.
├── .mcp.json                 # Wires MCP → npx @intellihelper/cli mcp
├── .claude-plugin/           # Claude manifest + marketplace catalog
├── .grok-plugin/             # Grok manifest + marketplace catalog
├── .codex-plugin/            # Codex manifest
├── gemini-extension.json     # Gemini extension entry
├── skills/
│   ├── intellihelper-ui/     # Hub skill: MCP workflow + rules
│   ├── liquid-glass/         # Design system (chrome vs content, themes)
│   ├── add-component/        # Install / init / audit path
│   └── compose-ui/           # Page recipes
├── commands/                 # Slash commands
├── agents/ui-builder.md      # Specialist UI agent
└── assets/logo.png

MCP tools

Tool	Purpose
get_project_config	Read components.json / init guidance
list_components	Browse by category
search_components	Fuzzy search
get_component	Source, variants, dependencies
get_component_examples	Usage snippets
get_add_command	CLI install command (does not write files)
list_themes	mono · aurora · sunset · frost · ocean
get_audit_checklist	Post-install QA

Skills

Skill	Role
intellihelper-ui	Default entry — when/how to use the system
liquid-glass	Visual language + themes
add-component	Safe install pipeline
compose-ui	Multi-component screen recipes

Slash commands

Command	Action
/add	Install components
/search	Search registry
/list	List by category
/audit	Project health check
/themes	Theme guide

(Exact invocation may be namespaced, e.g. /intellihelper-ui:add.)

---

Example prompts

After install + trust:

• “Show me all IntelliHelper glass components”
• “Add button, dialog, and card from IntelliHelper UI”
• “Build a settings page with Liquid Glass”
• “Search IntelliHelper UI for form inputs”
• “Audit this project for IntelliHelper setup”

---

Consumer quick start (app project)

npx @intellihelper/cli@latest init -y
npx @intellihelper/cli@latest add button card dialog -y

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"

export function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello</CardTitle>
      </CardHeader>
      <Button variant="primary">Continue</Button>
    </Card>
  )
}

Docs: ui.intellihelper.in · CLI: @intellihelper/cli · UI monorepo: IntelliHelper-UI

---

Local development

git clone https://github.com/IntelliHelper/agent-skills.git
cd agent-skills
./scripts/validate.sh

# Claude
claude --plugin-dir .

# Grok
grok plugin install . --trust
grok plugin validate .

Versioning

• Bump version in .claude-plugin/plugin.json, .grok-plugin/plugin.json, and .codex-plugin/plugin.json together when skills/commands change.
• MCP tool behavior versions with @intellihelper/cli on npm — no rebuild of this repo required for registry content updates.

---

Architecture

Agent (Claude / Grok / Codex / …)
  └── this plugin
        ├── skills / commands / agents   → judgment & workflows
        └── .mcp.json
              └── npx @intellihelper/cli@latest mcp
                    └── registry https://ui.intellihelper.in/r

Keep this repo thin. Do not vendor the full UI monorepo.

---

License

MIT © IntelliHelper