version: "1.0.0" description: Stack detection rules and pattern adaptations for framework-native idioms # Stack Detection Rules stack_detection: sources: - file: "package.json" check: "dependencies + devDependencies" priority: 1 - file: "tsconfig.json" check: "compilerOptions, paths, lib" priority: 2 - files: ["angular.json", "next.config.*", "nest-cli.json", "vite.config.*", "nuxt.config.*"] check: "presence" priority: 1 - pattern: "*.jsx, *.tsx, *.vue, *.svelte" check: "file extensions" priority: 3 confidence_scoring: high: "Primary framework found in package.json + config file present" medium: "Framework in package.json OR config file present" low: "Only file extensions or indirect evidence" # Supported Stacks stacks: react: detection: package_json: required: ["react"] optional: ["react-dom", "next", "@types/react"] files: optional: ["next.config.js", "next.config.ts", "vite.config.ts"] extensions: [".jsx", ".tsx"] version_detection: hooks_era: ">=16.8.0" # useState, useEffect introduced concurrent: ">=18.0.0" # Concurrent features native_patterns: singleton: replacement: "Context API + Provider" example: | // Instead of Singleton const MyContext = createContext(defaultValue); export const MyProvider = ({ children }) => ( {children} ); rationale: "Context provides dependency injection without global state" confidence: 0.95 observer: replacement: "useState + useEffect" example: | const [value, setValue] = useState(initial); useEffect(() => { // React auto-notifies subscribers }, [value]); rationale: "React's reactivity system is built-in observer pattern" confidence: 0.98 strategy: replacement: "Custom hooks" example: | const usePaymentStrategy = (type: PaymentType) => { const strategies = { credit: useCreditPayment(), paypal: usePaypalPayment(), }; return strategies[type]; }; rationale: "Hooks encapsulate behavior and are composable" confidence: 0.90 decorator: replacement: "Higher-Order Components (HOC)" example: | const withAuth =

(Component: React.ComponentType

) => { return (props: P) => { const { user } = useAuth(); if (!user) return ; return ; }; }; rationale: "HOCs wrap components to add behavior" confidence: 0.85 mediator: replacement: "Context API" example: | // Centralized state management const AppContext = createContext(initialState); // Components communicate through context rationale: "Context mediates communication between components" confidence: 0.80 recommendations: - "Prefer hooks over class-based patterns" - "Use Context for shared state, not Singleton" - "Leverage built-in reactivity instead of manual observer" - "Consider React Query/SWR for data fetching patterns" angular: detection: package_json: required: ["@angular/core"] optional: ["@angular/common", "@angular/platform-browser"] files: required: ["angular.json"] extensions: [".ts"] version_detection: standalone: ">=14.0.0" # Standalone components signals: ">=16.0.0" # Signals API native_patterns: singleton: replacement: "@Injectable() services" example: | @Injectable({ providedIn: 'root' }) export class ConfigService { // Automatically singleton via DI } rationale: "Angular's DI container manages singleton lifecycle" confidence: 0.98 observer: replacement: "RxJS Observables" example: | import { BehaviorSubject } from 'rxjs'; private data$ = new BehaviorSubject(initial); getData() { return this.data$.asObservable(); } rationale: "RxJS is Angular's standard reactive programming library" confidence: 0.98 decorator: replacement: "Directives and Pipes" example: | @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { // Adds behavior to DOM elements } rationale: "Angular decorators are first-class pattern" confidence: 0.95 facade: replacement: "Service with injected dependencies" example: | @Injectable() export class UserFacade { constructor( private userService: UserService, private authService: AuthService, private profileService: ProfileService ) {} } rationale: "Services naturally encapsulate subsystems" confidence: 0.90 recommendations: - "Use DI instead of manual singleton patterns" - "Leverage RxJS for all reactive patterns" - "Use Angular decorators (@Component, @Directive, @Pipe)" - "Services should be injected, not manually instantiated" nestjs: detection: package_json: required: ["@nestjs/core"] optional: ["@nestjs/common", "@nestjs/platform-express"] files: required: ["nest-cli.json"] extensions: [".ts"] native_patterns: singleton: replacement: "@Injectable() with default scope" example: | @Injectable() // Default scope is SINGLETON export class AppService {} rationale: "NestJS DI uses singleton scope by default" confidence: 0.98 chain-of-responsibility: replacement: "Guards, Interceptors, Pipes, Middleware" example: | @Injectable() export class AuthGuard implements CanActivate { canActivate(context: ExecutionContext): boolean { // Guard chain } } rationale: "NestJS request pipeline is built-in chain pattern" confidence: 0.95 decorator: replacement: "Interceptors" example: | @Injectable() export class LoggingInterceptor implements NestInterceptor { intercept(context: ExecutionContext, next: CallHandler) { // Wraps request handling } } rationale: "Interceptors add behavior to route handlers" confidence: 0.95 facade: replacement: "Modules" example: | @Module({ providers: [ServiceA, ServiceB], exports: [FacadeService] }) export class FeatureModule {} rationale: "Modules encapsulate and export simplified interfaces" confidence: 0.85 factory: replacement: "useFactory provider" example: | { provide: 'CONFIG', useFactory: (env: EnvService) => createConfig(env), inject: [EnvService] } rationale: "DI supports factory pattern natively" confidence: 0.90 recommendations: - "Use built-in DI, never manual singleton" - "Leverage Guards/Interceptors/Pipes for cross-cutting concerns" - "Modules should export facades to subsystems" - "Use dynamic modules for configurable features" vue: detection: package_json: required: ["vue"] version: ">=3.0.0" files: optional: ["vite.config.ts", "nuxt.config.ts"] extensions: [".vue"] version_detection: composition_api: ">=3.0.0" # Composition API default script_setup: ">=3.2.0" #