# Interface Kit

> Add Interface Kit visual design overlay to a Next.js project. Use when the user explicitly asks for Interface Kit, browser visual editing, or a style-editing overlay.

- Skill: `tommylower/interface-kit` (Agent Skill)
- Install (CLI): `npx skillmds@latest add tommylower/interface-kit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tommylower/interface-kit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tommylower (https://skillmd.com/u/tommylower)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tommylower/interface-kit

---


# Interface Kit

Interface Kit is a development-only visual design overlay for editing React app styles directly in the browser.

Before editing, read the shared dev-overlay rules in `../dev-overlays.md`.

## Steps

1. Check `package.json` for `interface-kit`.
2. Search `src/`, `app/`, and `pages/` for existing `InterfaceKit` imports or `<InterfaceKit` usage. If already configured, report that and stop.
3. Install as a dev dependency:

   ```bash
   bun add -d interface-kit
   ```

4. Create or update `src/components/DevTools.tsx`:

   ```tsx
   "use client";

   import dynamic from "next/dynamic";

   const InterfaceKit = dynamic(
     () => import("interface-kit/react").then((mod) => ({ default: mod.InterfaceKit })),
     { ssr: false },
   );

   export function DevTools() {
     if (process.env.NODE_ENV !== "development") return null;
     return <InterfaceKit />;
   }
   ```

5. Mount `<DevTools />` as a sibling of `{children}` in the app shell.
6. Run the development app and confirm the overlay appears.
7. Run the production build and confirm Interface Kit does not ship.

## Notes

- Add as a sibling to children, never as a wrapper.
- Works alongside Agentation and DialKit in `DevTools.tsx`.
- Use for browser-side visual style editing; use `dialkit` for explicit control panels and spring tuning.