AgentStack
Sign in Publish
MCP servers Skills Toolkits Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Interface Kit

skill-tommylower-cortex-interface-kit · by tommylower

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.

↗ Repository
— No reviews yet
0 installs
0 views
— view→install

Install

$ agentstack add skill-tommylower-cortex-interface-kit

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ● Environment & secrets Used
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Interface Kit? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

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 ` import("interface-kit/react").then((mod) => ({ default: mod.InterfaceKit })),

{ ssr: false }, );

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

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Web & Browser