skills.rest
tommylower
tommylowerCOMMUNITY
Explore all skills by this author →
Website𝕏@tommylowerGitHub

interface-kit

Installs and configures the Interface Kit visual design overlay in Next.js projects.

2|Updated Apr 15, 2026
Search Tags:#react#styling#next.js#devtools#visual editing#dev overlay#interface-kit
One-click install
npx skills add https://github.com/tommylower/cortex --skill interface-kit-tommylower
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: interface-kit
Source: https://github.com/tommylower/cortex/tree/main/design/tools/interface-kit
Command: npx skills add https://github.com/tommylower/cortex --skill interface-kit-tommylower

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires interface-kit.

What problem does it solve? Setting up a browser-based visual style editor in a Next.js app requires correct dev-only installation, dynamic imports, and careful mounting so the tool never ships to production. This Skill walks an agent through that exact setup so the overlay works in development without leaking into production builds. ## Core Features & Use Cases - Guided Installation: Checks package.json and existing imports, then installs interface-kit as a dev dependency. - DevTools Component Setup: Creates or updates src/components/DevTools.tsx with a dynamic, SSR-disabled InterfaceKit import gated on NODE_ENV. - Production Safety Verification: Confirms the overlay appears in development and is excluded from production builds. - Use Case: A developer wants to tweak React app styles visually in the browser during development. The agent installs Interface Kit, wires it into the app shell as a sibling of {children}, and verifies it never ships to production. ## Quick Start Add the Interface Kit visual design overlay to my Next.js project so I can edit styles in the browser during development.

Frequently Asked Questions about interface-kit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Interface Kit to a Next.js project?▼

Install it as a dev dependency with bun add -d interface-kit, create a DevTools client component that dynamically imports InterfaceKit with ssr disabled, and mount it as a sibling of {children} in the app shell.

How do I edit React styles visually in the browser?▼

Interface Kit provides a development-only overlay for editing React app styles directly in the browser. Once mounted through a DevTools component gated on NODE_ENV, the overlay appears only when running the development server.

Does Interface Kit ship to production builds?▼

No. The DevTools component returns null when NODE_ENV is not development, and the skill instructs verifying with a production build that Interface Kit is excluded. It is installed as a dev dependency only.

Can Interface Kit work alongside other dev overlay tools?▼

Yes. It works alongside Agentation and DialKit inside the same DevTools.tsx component. Use Interface Kit for browser-side visual style editing and DialKit for explicit control panels and spring tuning.

Why should Interface Kit be a sibling rather than a wrapper of children?▼

Mounting as a sibling of {children} in the app shell keeps the overlay outside the app's component tree, avoiding layout or hydration interference. The skill explicitly instructs never to use it as a wrapper.

Related Skills

Explore More Design & Creative Skills→
AdrienenjalbertAdrienenjalbert

page-generator

Generate Next.js App Router route files and page shells under src/app and src/features.

Community
Intermediate
brandonarbinibrandonarbini

verify-in-browser

Verifies visible UI changes by driving the running app in a browser before reporting completion.

Community
Basic
astrum-forgeastrum-forge

devtools

Inspects and debugs running ignifx games through a DOM overlay with nine diagnostic panels.

Official
Intermediate
HermeticOrmusHermeticOrmus
89

browser-devtools-mcp

Inspect CSS, computed styles, and element properties via Chrome DevTools MCP.

Community
Advanced