skills/define-architecture/SKILL.md
Generates folder structures, module contracts, middleware pipelines, and frontend/backend boundaries for TypeScript full-stack applications, and finds domain-informed deepening opportunities in existing codebases. Use when setting up project structure, organizing a monorepo, defining folder layout, designing backend modules, establishing team conventions, improving the architecture of an existing codebase, or asking "how should I structure this app", "design the folder structure", "set up the architecture", or "find architecture improvements". For scaffolding a new Next.js repo use scaffold-nextjs, for a new TypeScript CLI use scaffold-cli, and for multi-tenant domain or isolation strategy use multi-tenant-architecture.
npx skillsauth add mblode/agent-skills define-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Define durable, easy-to-change architecture defaults for TypeScript full-stack apps, and produce an architecture brief the team can enforce.
scaffold-nextjs for a Next.js turborepo, scaffold-cli for a TypeScript CLI) or multi-tenant domain, isolation, and routing strategy (use multi-tenant-architecture).When two recommendations conflict, the higher-numbered principle yields.
Copy and track this checklist:
Architecture progress:
- [ ] Step 1: Pick the workflow (new codebase: Setup; existing codebase: Adoption)
- [ ] Step 2: Run the chosen workflow end to end
- [ ] Step 3: Write the architecture brief using the Output template
- [ ] Step 4: Run the Validation loop and record results in the brief
- [ ] Step 5: Fix any failed checks and re-run the loop
Load references only when their condition applies:
| Reference | Read when | |-----------|-----------| | references/stack-defaults.md | Choosing libraries, tooling, or deploy targets for the brief | | references/api-design.md | Designing endpoints, defining module contracts, or reviewing API surface changes | | references/deepening-existing.md | Running the Adoption workflow (domain mapping method, opportunity patterns, output template) | | references/craftsmanship.md | Writing the team-conventions or testing sections of the brief | | references/shipping-practices.md | Writing the rollout and rollback section of the brief |
apps/ for deployable surfaces (api, web, admin).packages/ for shared libraries (shared, ui, icons, auth, proto).handler: transport only.service: business orchestration.dao: database access only.mapper: DB/proto/domain transformations.constants and types: module-local contracts.RequestContext:
import { AsyncLocalStorage } from "node:async_hooks";
type RequestContext = { tenantId: string; userId: string; traceId: string };
const store = new AsyncLocalStorage<RequestContext>();
export const getContext = () => store.getStore()!;
export const runWithContext = (ctx: RequestContext, fn: () => void) => store.run(ctx, fn);
getContext() then throws at runtime far from the cause.getContext(); never thread a ctx parameter through business functions."use client" only at the leaf components that need interactivity.The goal is domain-informed deepening, not a rewrite. Load references/deepening-existing.md for the analysis method, opportunity patterns, and output template.
Run before finalizing, and record the results in the brief (Open risks section). Each check must produce evidence; "looks consistent" is not a pass.
npm run lint, npm run check-types, npm run test --workspace=<pkg> or the project equivalents). Evidence: passing output.If any check fails: fix the brief or the conventions, then re-run the loop.
Use this structure for architecture recommendations:
# Architecture brief
## Context and constraints
## Repo shape
## Backend module contracts
## Request context and middleware policy
## Frontend boundaries
## Testing strategy
## Rollout and rollback plan
## Open risks and follow-ups
scaffold-nextjs or scaffold-cli: scaffold the repo once the brief is agreed.multi-tenant-architecture: tenant identification, isolation, and domain strategy.plan-creator: turn an Adoption opportunity into an implementation plan.package.json of a monorepo: hoisting hides missing declarations, so an app builds locally and breaks the moment it deploys alone. Each app owns its deps.dao may not import handler) the day the contract is written."use client" at the page or layout level: it converts the whole subtree to client rendering and forfeits streaming and direct server data access. Push it to leaf components.packages/ early: wait until three or more apps need the same code; a premature shared package couples release cycles for nothing.development
Designs and builds UI end to end, from visual direction (palettes, type scales, design tokens, layout systems, landing-page CRO strategy, brand kits) to Tailwind implementation with the ui.sh design guideline system, including multiple variants with an in-browser picker, semantic markup scaffolds from screenshots, retrofitting dark mode or responsive behavior, and componentizing or canonicalizing Tailwind code. Use when asked to "build a landing page", "create a dashboard", "make this look good", "make this look premium", "pick a visual style", "design the UI for", "show me 3 hero options", "improve conversions", "create a brand kit", "turn this screenshot into markup", "add dark mode", "make a dark version of this image", "make this responsive", "fix this on mobile", "componentize this page", "clean up the Tailwind", or any prompt that designs, creates, or refines UI code. For auditing existing UI use ui-audit; for motion use ui-animation; for landing page copy use copywriting.
development
Collaborative interrogation that produces an implementation plan before any code is written. Explores the codebase and relevant docs first, asks one question at a time with a concrete recommended answer, grills the rationale behind documented decisions, flags fuzzy terminology, and walks a decision tree until shared understanding is reached, then writes a plan file. First step of the shipping pipeline; it creates plans, plan-reviewer stress-tests them, pr-creator opens the PR. Use when asked to "create a plan", "help me think through this", "plan this feature", "I want to build X", "grill me", "grill with docs", "understand the docs", "unpack the decisions", "brainstorm a spec", "what should the plan be", "think this through with me", or before starting any non-trivial implementation.
development
--- name: pr-reviewer description: Reviews the current local diff or branch and returns a read-only, severity-tiered findings report. It never edits files. Four modes: standard bug and compliance review, structural quality, AI slop detection, and whole-codebase security audit. Use when asked to run /pr-reviewer, "review my changes", or "code review" before commit, push, or handoff. "Thermo-nuclear review", "structural review", "deep code quality audit", "harsh maintainability review", and "code
development
--- name: ux-audit description: Feature-level UX audit for React/Next.js code, diff-aware by default. Catches what Lighthouse, axe, ESLint, and Storybook miss: state-coverage gaps (missing loading/empty/error), form data loss on validation, double-submit, broken focus management, optimistic UI without rollback, stale async responses, skeleton-induced layout shift, and vague microcopy. 33 modern failure-mode rules plus 30 Laws of UX rules across 12 feature playbooks. Produces a 3-tier ship-readin