Skill: Framework Expert (Bundle)

Skill ID: framework-expert Version: 1.0.0 Priority: 50 Auto-Invoke: Yes (when framework task detected)

Purpose

Unified entry point for all framework-specific expertise. Lazy-loads only the relevant framework patterns based on detected tech stack, reducing token usage by ~80% compared to loading all 12 individual framework skills.

Triggers

Framework-specific file detected (.tsx, .vue, .dart, .php, etc.)
Framework keyword mentioned (React, Vue, Laravel, etc.)
Project detection identifies framework

Bundles

framework_bundles[5]{bundle,frameworks,detect_by}:
  web-frontend,"react,vue,angular,nextjs,svelte","package.json deps + file extensions"
  web-backend,"nodejs,python,laravel,go","package.json/requirements.txt/composer.json/go.mod"
  mobile,"react-native,flutter","app.json (expo) or pubspec.yaml"
  game,"godot","project.godot or *.gd files"
  typescript,"typescript","tsconfig.json or .ts files"

Lazy Loading Strategy

Step 1: Detect Framework (from cache)

// Use cached detection - no file system scan needed
const detection = getCachedDetection();
// Returns: { framework: "nextjs", packageManager: "pnpm", ... }

Step 2: Load Only Needed Patterns

load_order[4]{priority,load,when}:
  1,Core patterns (all frameworks),Always (~200 tokens)
  2,Detected framework patterns,Framework detected (~300 tokens)
  3,Secondary framework patterns,Full-stack project (~200 tokens)
  4,Advanced patterns,Complex task (~200 tokens)

Total: ~500-900 tokens vs ~6000 tokens (loading all 12 skills)

Core Patterns (Always Loaded)

These apply to ALL frameworks:

core_patterns[8]{pattern,description}:
  File organization,Group by feature not type
  Naming conventions,PascalCase components camelCase functions
  Error handling,Graceful degradation + user feedback
  State management,Minimize global state
  API design,RESTful or GraphQL conventions
  Testing,Unit + integration + e2e coverage
  Performance,Lazy loading + code splitting
  Security,Input validation + sanitization

Framework-Specific Patterns

Web Frontend Bundle

React (when detected):

react_patterns[6]{pattern,rule}:
  Components,Functional with hooks (no class)
  State,useState for local useReducer for complex
  Effects,Cleanup functions + dependency arrays
  Memoization,useMemo/useCallback for expensive ops
  Context,For cross-cutting concerns only
  Error boundaries,Wrap critical UI sections

Vue (when detected):

vue_patterns[6]{pattern,rule}:
  Composition API,setup() with ref/reactive
  Composables,Extract reusable logic to use* functions
  Props,Define with types + validators
  Events,emit() for parent communication
  Stores,Pinia for global state
  Slots,Named slots for flexible components

Angular (when detected):

angular_patterns[6]{pattern,rule}:
  Components,Standalone preferred
  Services,Injectable with providedIn root
  RxJS,Operators + async pipe
  Signals,Modern reactivity (v17+)
  Modules,Lazy loaded feature modules
  Forms,Reactive forms with validators

Next.js (when detected):

nextjs_patterns[6]{pattern,rule}:
  App Router,Server components default
  Data fetching,fetch() in server components
  API routes,Route handlers in app/api/
  Middleware,Edge runtime for auth/redirects
  Caching,revalidate + cache tags
  Metadata,generateMetadata for SEO

Web Backend Bundle

Node.js (when detected):

nodejs_patterns[6]{pattern,rule}:
  Structure,Controllers + services + repos
  Async,async/await (no callbacks)
  Validation,Zod or Joi schemas
  Error handling,Custom error classes
  Middleware,Auth + logging + rate limit
  Database,ORM (Prisma/TypeORM) or query builder

Python (when detected):

python_patterns[6]{pattern,rule}:
  Type hints,All function signatures
  Async,asyncio for I/O bound
  Validation,Pydantic models
  Structure,Domain-driven design
  Testing,pytest with fixtures
  Dependencies,Virtual env + requirements.txt

Laravel (when detected):

laravel_patterns[6]{pattern,rule}:
  Controllers,Single responsibility
  Models,Eloquent with scopes
  Validation,Form requests
  Services,Business logic extraction
  Events,Decouple with event/listener
  Queues,Background job processing

Go (when detected):

go_patterns[6]{pattern,rule}:
  Structure,cmd/ internal/ pkg/
  Error handling,Explicit error returns
  Interfaces,Accept interfaces return structs
  Concurrency,Goroutines + channels
  Testing,Table-driven tests
  Dependencies,Go modules

Mobile Bundle

React Native (when detected):

rn_patterns[6]{pattern,rule}:
  Navigation,React Navigation v6+
  Styling,StyleSheet or NativeWind
  State,Zustand or Redux Toolkit
  Platform,Platform.select() for differences
  Performance,FlatList + memo
  Testing,Detox for e2e

Flutter (when detected):

flutter_patterns[6]{pattern,rule}:
  Widgets,Composition over inheritance
  State,Riverpod or BLoC
  Navigation,go_router
  Styling,Theme extensions
  Testing,Widget + integration tests
  Platform,Platform channels for native

Game Bundle

Godot (when detected):

godot_patterns[6]{pattern,rule}:
  Scenes,Composition with child scenes
  Scripts,GDScript with static typing
  Signals,Decouple with custom signals
  Resources,Custom resource classes
  Autoload,Singletons for global state
  Export,Multi-platform builds

Detection to Pattern Mapping

detection_map[12]{detection,load_patterns,tokens}:
  react,core + react_patterns,~500
  vue,core + vue_patterns,~500
  angular,core + angular_patterns,~500
  nextjs,core + nextjs_patterns + react_patterns,~700
  nodejs,core + nodejs_patterns,~500
  python,core + python_patterns,~500
  laravel,core + laravel_patterns,~500
  go,core + go_patterns,~500
  react-native,core + rn_patterns + react_patterns,~700
  flutter,core + flutter_patterns,~500
  godot,core + godot_patterns,~500
  typescript,core + ts_patterns,~400

Integration with Project Cache

// This skill reads from project cache
const { getCachedDetection } = require('./hooks/lib/af-project-cache.cjs');

const detection = getCachedDetection();
if (detection && detection.framework) {
  // Load only detected framework patterns
  loadPatterns(detection.framework);
}

Full-Stack Projects

For full-stack projects (frontend + backend detected):

fullstack_loading[3]{scenario,loads,tokens}:
  Next.js + API routes,nextjs_patterns + nodejs_patterns,~900
  Vue + Laravel,vue_patterns + laravel_patterns,~900
  React + Django,react_patterns + python_patterns,~900

Related Files

Individual framework skills (legacy, still available):
- skills/react-expert/SKILL.md
- skills/vue-expert/SKILL.md
- skills/nextjs-expert/SKILL.md
- etc.
hooks/lib/af-project-cache.cjs - Project detection cache
rules/context-management.md - Token optimization rules

Migration Note

This bundle skill is an optimization layer on top of existing framework skills. The individual skills (react-expert, vue-expert, etc.) remain available for:

Direct invocation when needed
Detailed reference documentation
Edge cases requiring full skill context

The framework-expert bundle is the default for normal usage.

Version: 1.0.0 | Last Updated: 2026-01-21

framework-expert