{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-rule-front-end",
  "title": "Cursor Rule: Front End",
  "description": "Cursor rule file for front-end development guidelines.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/optics/cursor/rules/front-end.mdc",
      "content": "---\ndescription: Rules for front-end development\nglobs: *\nalwaysApply: false\n---\n# Frontend Development Rules\n\n## Languages and Frameworks\n\nExpert in React, Next.js, JavaScript, TypeScript, HTML, CSS, TailwindCSS, Shadcn, Base UI.\n\nUse JavaScript by default. Use TypeScript when explicitly requested or when the project already uses it.\n\nPrioritize TailwindCSS utility classes for styling. Avoid separate CSS files for component-specific styles. Use CSS modules or global styles only for truly global definitions.\n\n## Next.js 16 Core Features\n\nNext.js 16 is the current stable version. Key features include:\n\nTurbopack is now the default bundler (2-5x faster builds, up to 10x faster Fast Refresh). No need to specify --turbopack flag anymore.\n\nCache Components with \"use cache\" directive for explicit, opt-in caching. All dynamic code executes at request time by default.\n\nReact Compiler (stable) for automatic memoization. Enable with reactCompiler: true in next.config.js.\n\nProxy.ts replaces middleware.ts for network boundary handling (edge runtime deprecated in proxy, use nodejs runtime).\n\nEnhanced routing with layout deduplication and incremental prefetching for faster navigations.\n\nReact 19.2 features: View Transitions, useEffectEvent, and Activity component.\n\n## Code Structure and Functions\n\nUse function declarations for React components. Use arrow functions for callbacks and inline functions.\n\nGood:\n```javascript\nfunction UserProfile({ user }) {\n  return <div>...</div>\n}\n```\n\nAvoid:\n```javascript\nconst UserProfile = ({ user }) => {...}\n```\n\nName functions based on what they do, not the event they respond to. Be specific and semantic.\n\nGood: `submitForm`, `deleteUser`, `closeModal`, `toggleSidebar`\nAvoid: `handleClick`, `handleSubmit`, `handleChange`\n\nException: Generic event handlers in reusable components can use `onEvent` pattern for props (onSelect, onClick, onChange) to match React conventions.\n\nUse descriptive names that reveal intent. Prefer clarity over brevity.\n\n## State Management\n\nMinimize useState by deriving values when possible. Don't store what you can calculate.\n\nGroup related state together. Use objects for related values or useReducer for complex state logic.\n\nKeep state as local as possible. Lift state only when multiple components need to share it.\n\nUse state updater functions when new state depends on previous state:\n```javascript\nsetCount(prev => prev + 1)\n```\n\n## Server Components and Client Components\n\nDefault to Server Components in Next.js. Use Client Components only when needed:\n- User interactivity (onClick, onChange, etc.)\n- Browser-only APIs (localStorage, window, document)\n- React hooks (useState, useEffect, useContext)\n- Event listeners\n\nMark Client Components with \"use client\" directive at the top of the file.\n\nCheck for `typeof window !== 'undefined'` before accessing browser APIs in components that might render on server.\n\n## Caching in Next.js 16\n\nUse \"use cache\" directive for explicit caching of pages, components, or functions:\n```javascript\n'use cache'\nexport async function getProducts() {\n  // This will be cached\n}\n```\n\nAll dynamic code runs at request time by default. Opt into caching where it makes sense.\n\nUse updateTag() for immediate cache updates after mutations (read-your-writes semantics).\n\nUse revalidateTag() to invalidate cached data for future requests.\n\nUse refresh() to refresh client router from Server Actions.\n\n## Data Fetching\n\nFetch data at the server level using Server Components, Server Actions, or Route Handlers.\n\nUse Server Actions for mutations instead of API routes when possible.\n\nImplement proper loading states and error boundaries for async operations.\n\n## Effects and Side Effects\n\nUse useEffect sparingly. Most data fetching should happen server-side in Next.js.\n\nAlways include all dependencies in useEffect arrays. Fix warnings, don't suppress them.\n\nClean up side effects properly (event listeners, subscriptions, timers).\n\nAvoid useEffect for derived state. Calculate during render or use useMemo for expensive computations.\n\nConsider using useEffectEvent (React 19.2) for extracting non-reactive logic from effects.\n\n## Error Handling and User Feedback\n\nUse async/await with try-catch blocks for asynchronous operations.\n\nAlways handle errors gracefully. Show user-friendly messages, never expose technical details.\n\nUse toast notifications (Sonner, react-hot-toast) for transient feedback. Use modals for errors requiring user action.\n\nImplement loading states for async operations. Never leave users wondering if something is happening.\n\nValidate input on both client and server. Provide immediate feedback on validation errors.\n\n## Component Design\n\nKeep components focused and single-purpose. If a component does more than one thing, split it.\n\nUse early returns to handle edge cases and reduce nesting:\n```javascript\nif (!user) return <LoginPrompt />\nif (isLoading) return <Spinner />\nreturn <UserDashboard user={user} />\n```\n\nExtract complex JSX into separate components or variables for readability.\n\nAvoid prop drilling. Use composition, context, or state management libraries for deeply nested props.\n\n## Conditional Rendering and Styling\n\nUse logical AND (&&) for simple conditionals:\n```javascript\n{isVisible && <Component />}\n```\n\nUse ternary operators for if-else rendering:\n```javascript\n{isLoading ? <Spinner /> : <Content />}\n```\n\nFor conditional Tailwind classes, use clsx or cn utility:\n```javascript\nimport { cn } from '@/lib/utils'\nclassName={cn(\"base-classes\", isActive && \"active-classes\")}\n```\n\n## Performance Optimization\n\nUse React.lazy and dynamic imports for code splitting:\n```javascript\nconst HeavyComponent = lazy(() => import('./HeavyComponent'))\n```\n\nEnable React Compiler for automatic memoization (optional in Next.js 16).\n\nMemoize expensive calculations with useMemo, not simple operations.\n\nUse React.memo for components that re-render frequently with same props.\n\nOptimize images: use Next.js Image component with appropriate sizes and formats.\n\nLeverage Turbopack's speed and filesystem caching for faster development.\n\n## Accessibility\n\nUse semantic HTML (button, nav, main, article) over generic divs.\n\nEnsure all interactive elements are keyboard accessible.\n\nProvide alt text for images and aria-labels for icon-only buttons.\n\nMaintain sufficient color contrast and support reduced motion preferences.\n\nUse Base UI and Shadcn components for accessible primitives.\n\n## UI/UX Best Practices\n\nDesign mobile-first, enhance for larger screens.\n\nProvide clear visual feedback for all user actions (hover states, loading, success).\n\nMake error states helpful. Tell users what went wrong and how to fix it.\n\nUse consistent spacing, typography, and colors throughout the app.\n\nAnticipate and prevent user errors through good UX design.\n\nKeep forms simple and progressively disclose complexity.\n\n## Code Quality\n\nWrite self-documenting code. Use clear names over comments when possible.\n\nKeep functions small and focused. If over 20-30 lines, consider refactoring.\n\nAvoid magic numbers and strings. Use named constants.\n\nRemove unused code, imports, and console.logs before committing.\n\nUse ESLint and Prettier for consistent code style.\n\n## File Organization\n\nGroup related files by feature or module, not by file type.\n\nKeep components, hooks, and utilities close to where they're used.\n\nUse index files sparingly. Explicit imports are clearer than barrel exports.\n\nName files consistently: PascalCase for components, camelCase for utilities and hooks.\n\n## React 19.2 Features\n\nView Transitions for smooth animations between navigations.\n\nuseEffectEvent for extracting non-reactive logic from effects.\n\nActivity component for rendering background UI while maintaining state.\n\n## Migration and Compatibility\n\nMinimum Node.js version: 20.9.0\n\nParams and searchParams are now async in Next.js 16\n\nUse proxy.ts instead of middleware.ts (middleware is deprecated)\n\nTurbopack is default, webpack requires explicit flag (--webpack)",
      "type": "registry:file",
      "target": "~/.cursor/rules/front-end.mdc"
    }
  ],
  "type": "registry:file"
}