codebase-design

Restructures React and Next.js modules into deep interfaces with clean seams and testable adapters.

1|Updated Jul 13, 2026
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill codebase-design-dineshrevunuru
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: codebase-design
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/codebase-design
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill codebase-design-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Shallow wrappers and pass-through modules leak complexity across every call site, making shipped React/Next/TypeScript code hard to navigate, test, and safely edit — especially for AI agents that must load the interface as context before making changes. ## Core Features & Use Cases - Deep-module vocabulary and tests: Applies a shared glossary (module, interface, depth, seam, adapter, leverage, locality) plus the deletion test and two-adapter rule to decide whether to deepen, split, or delete a module. - Dependency-driven test strategy: Classifies dependencies (in-process, local-substitutable, remote-but-owned, true external) and maps each to a concrete testing approach using ports, in-memory adapters, and Testing Library. - Divergent interface exploration: Compares multiple interface shapes under different constraints before committing, then replaces old unit tests with tests at the new interface. - Use Case: A hook like useBookings calls fetch directly and every caller rebuilds URLs, auth headers, and error handling. This Skill reshapes it into a BookingsPort interface with HTTP and in-memory adapters, so one edit updates every screen. ## Quick Start Ask the AI to apply codebase-design to reshape a shallow wrapper or hook in your shipped Next.js app into a deep module with a small interface and injected dependencies.

Frequently Asked Questions about codebase-design

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

FAQPage Schema
How do I tell if a module or wrapper is too shallow?

Run the deletion test: imagine deleting the module and check whether complexity vanishes or reappears across callers. If deleting it removes almost nothing, it is a pass-through and should be deleted or deepened by hiding real logic behind a smaller interface.

How do I make a React hook testable without mocking fetch?

Have the hook accept its data source as an injected port parameter instead of calling fetch internally. Tests then supply an in-memory adapter, while production uses an HTTP adapter, satisfying the two-adapter rule for a real seam.

When should I introduce a port or adapter in TypeScript code?

Introduce a port only when at least two adapters justify the seam, typically a production adapter plus a test adapter. A seam with a single adapter is hypothetical indirection and adds navigation cost without leverage.

Should I keep old unit tests after refactoring to a deep module?

No, replace rather than layer. Delete tests that asserted on internals of the old shallow parts and write new tests through the deep module's interface, asserting observable outcomes so tests survive internal refactors.

When should I not apply deep-module design?

Skip it for throwaway prototypes, which need no seams, and for hunting a specific bug, which is a diagnosis task. It also does not replace diff review or whole-app architecture scans; it reshapes the one cluster those skills hand off.