From frontend-skills
Scans codebase for architectural friction: shallow modules, tight coupling, untestable seams. Produces an HTML report with before/after diagrams and refactoring candidates.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-skills:improve-codebase-architectureThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Surface architectural friction and propose **deepening opportunities**: refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
Surface architectural friction and propose deepening opportunities: refactors that turn shallow modules into deep ones. The aim is testability and AI-navigability.
This skill is informed by the project's domain model. The domain glossary names good seams; ADRs in the area record decisions the skill should not re-litigate. Read both before exploring.
Use LANGUAGE.md vocabulary exactly: module, interface, implementation, depth, deep, shallow, seam, adapter, leverage, locality. Do not drift into "component," "service," "API," or "boundary."
Key principles:
Read the project's domain glossary and any ADRs in the area you're touching first.
Use Agent(subagent_type=Explore) when available. Otherwise explore with rg, find, tests, and call graph reading. Look for:
Apply the deletion test to anything that looks shallow.
Write a self-contained HTML file to the OS temp directory so nothing lands in the repo. Resolve temp dir from $TMPDIR, falling back to /tmp (or %TEMP% on Windows), and write to <tmpdir>/architecture-review-<timestamp>.html so each run gets a fresh file. Open it for the user (open, xdg-open, or start) and tell them the absolute path.
Use Tailwind via CDN and Mermaid via CDN. Mix Mermaid with hand-crafted CSS/SVG visuals. Each candidate gets a before/after visualization. See HTML-REPORT.md for scaffold, diagram patterns, styling, and tone.
For each candidate card:
Strong, Worth exploring, or SpeculativeUse LANGUAGE.md vocabulary for architecture and the project's CONTEXT.md vocabulary for the domain. If a candidate contradicts an existing ADR, only surface it when friction is real enough to warrant revisiting the ADR. Mark it clearly.
Do not propose interfaces yet. After writing the report, ask: "Which of these would you like to explore?"
Once the user picks a candidate, drop into a grilling conversation. Walk the design tree: constraints, dependencies, shape of the deepened module, what sits behind the seam, what tests survive.
Side effects happen inline as decisions crystallize:
CONTEXT.md? Add the term to CONTEXT.md. Create the file lazily if missing. See ../domain-model/CONTEXT-FORMAT.md.CONTEXT.md right there.Refactor RFC. See REFERENCE.md for template and dependency categories.
npx claudepluginhub redpanda-data/ui-harness --plugin frontend-skillsScans a codebase for architectural deepening opportunities, generates an interactive HTML report, and guides developers through ranked refactoring candidates.
Scans a codebase for architectural friction, presents candidates as a visual HTML report with before/after diagrams, and guides you through deepening refactors.
Finds architectural friction and proposes refactoring opportunities that make a codebase more testable and AI-navigable. Informed by domain language in CONTEXT.md and ADRs.