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:

   bun add -d interface-kit
   

4. Create or update src/components/DevTools.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.