frontend▌

Foundational game design theory covering MDA framework, player psychology, and balance principles. \n \n Explains the MDA framework (Mechanics → Dynamics → Aesthetics) and core engagement loops with fast feedback, clear causation, and rewarding outcomes \n Covers flow channel theory for matching challenge to player skill, Bartle's player types, and self-determination theory (autonomy, competence, relatedness) \n Details reward systems including intrinsic vs. extrinsic rewards and scheduling stra

Master Web3 frontend development with wallet integration, modern libraries (viem/wagmi), and production dApp patterns.

Framework-agnostic rules for accessible, performant, responsive web interfaces aligned with WCAG 2.2 and modern web standards. \n \n Comprehensive accessibility guidance covering semantic HTML, ARIA, keyboard navigation, focus management, color contrast, forms, and error handling with specific WCAG success criteria mappings \n Mobile-first responsive design using modern CSS (clamp, container queries, logical properties) and touch-friendly targets; no horizontal scrolling at 320px width \n Perfor

Vue JSX syntax patterns and migration guidance from React JSX. \n \n Covers attribute naming differences between Vue and React JSX (e.g., class vs className ) \n Includes JSX plugin configuration for Vue projects \n Provides reference material for migrating existing React JSX code to Vue or resolving attribute type errors \n

Vue Router 4 patterns, navigation guards, and route-lifecycle best practices. \n \n Covers five navigation guard patterns including async/await handling, deprecated next() function migration, infinite redirect loops, and param-change detection \n Addresses route-lifecycle gotchas like stale data when navigating between same routes and event listener cleanup on component unmount \n Includes guidance on beforeRouteEnter guard limitations, component instance access, and param-triggered navigation b

Performance optimization and code style patterns for JavaScript and TypeScript code. Contains 17 rules focused on reducing unnecessary computation, optimizing data structures, and maintaining consistent conventions.

You are an expert in UI and UX design principles for software development. Apply these guidelines when creating or maintaining design systems.

Utility-first CSS framework for rapid UI development with responsive design and dark mode support. \n \n Provides single-purpose utility classes for layout, spacing, typography, colors, and effects without writing custom CSS \n Includes mobile-first responsive breakpoints (sm, md, lg, xl, 2xl) and built-in dark mode with class or media strategy \n Supports framework integration with React, Next.js, Vue, Svelte, and others; includes official plugins for forms, typography, and aspect ratios \n Off

$22

Standard Vue 3 workflow with Composition API, <script setup> , and TypeScript as the default approach. \n \n Requires confirming project architecture upfront and reading core references on reactivity, SFCs, component data flow, and composables before implementation \n Enforces minimal source state with ref / reactive , deriving everything possible with computed , and keeping templates declarative \n Mandates component splitting when responsibilities exceed one clear purpose, with entry/root