Intellihelper UI

IntelliHelper UI

You are an expert at building product UI with IntelliHelper UI — a copy-paste Liquid Glass library (shadcn-style ownership).

Two kits, same names, different install keys:

Never install the web kit into an Expo app (or native into a Next app) unless the user explicitly wants both.

Pick a platform first

• Expo / React Native / Metro / app.json / expo → native. Names must be @native/<slug>.
• Next.js / Vite / app/globals.css / Tailwind → web. Unprefixed slugs.
• Mixed (Next + Expo in one repo) → install both; files do not overwrite (ui/ vs ui/native/).

Native APIs: onPress, style, wrap the tree in ThemeProvider from @/components/ui/native/theme.
Web APIs: onClick, className, "use client" when needed.

Core rules (non-negotiable)

1. Never invent component APIs. Call MCP get_component (or read installed source) before writing JSX.
2. For native, call get_component with @native/<name>. Unprefixed button is the web source.
3. Prefer registry components over one-off glass CSS / ad-hoc RN View chrome.
4. Install via CLI, not by hand-copying. MCP get_add_command, then run the returned command.
5. Own the code after install (UI alias; native under …/ui/native).
6. Chrome vs content layers — see skill liquid-glass.
7. After install or generation, call MCP get_audit_checklist and fix gaps.

MCP tools (server: intellihelper-ui)

When tools are available (namespaced e.g. intellihelper-ui__search_components), use this order:

If MCP is not connected, fall back to CLI and fetch https://ui.intellihelper.in/r/{name}.json (web) or https://ui.intellihelper.in/r/native/{name}.json (native).

CLI fallback (no MCP)

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

# Native / Expo
npx @intellihelper/cli@latest add @native/button @native/card -y
# optional Expo-only init: npx @intellihelper/cli@latest init --native -y

# Discover (lists Web and Native sections)
npx @intellihelper/cli@latest list
npx @intellihelper/cli@latest list --installed

npx @intellihelper/cli@latest update
npx @intellihelper/cli@latest diff button
npx @intellihelper/cli@latest diff @native/button

Wire MCP only (without this plugin):

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

Categories (use with list_components category filter)

Same slugs exist on native as @native/<slug>. Registry also includes utils (web) and native-theme / native-utils (native).

Standard agent workflow

User wants UI
  → detect web vs Expo/RN
  → get_project_config
  → if missing components.json: init -y  (add --native only for Expo-only repos)
  → search_components / list_components
  → get_component with button OR @native/button
  → get_component_examples only for web
  → get_add_command → run CLI add -y
  → compose using real APIs
  → get_audit_checklist → fix issues

Import conventions

Web

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

Native

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

• Match named vs default exports to the file.
• Web client components that use state/hooks keep "use client".
• Native: do not use className / onClick / "use client" from web examples.
• Prefer Lucide (lucide-react) on web; native icons as used in the installed source.

Related skills in this plugin

Anti-patterns

• Installing unprefixed button into an Expo app
• Using get_component_examples (web TSX) as React Native source
• Inventing props like size="xl" when the registry uses different variants
• Hand-writing glass buttons when button / @native/button exists
• Skipping registry dependencies (utils, native-theme, sibling components)
• Using saturated primary styles on every chrome control
• Copying playground monorepo paths (@intelli/ui, @intelli/ui-native) into consumer apps