Interface kit

Skill tommylower/cortex/design/tools/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.From its SKILL.md

Install

npx -y skills add tommylower/cortex --skill interface-kit

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

1.6 KB, 320 tokens by cl100k_base, as published. Nobody here has run it

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

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

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 />;
}

Mount <DevTools /> as a sibling of {children} in the app shell.
Run the development app and confirm the overlay appears.
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.

What ships with it

Read from the repository