freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.2

package/dist/assets/uiux/data/stacks/laravel.csv

@@ -0,0 +1,51 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Blade Templates,Use Blade components for reusable UI,Extract repeated markup into named Blade components,Use x-* components with @props for all reusable UI,Duplicate HTML blocks across views,"<x-card :title=""$title"">{{ $slot }}</x-card>",@include('card' ['title' => $title]),High,https://laravel.com/docs/blade#components,laravel 13.x,active,2026-08-13
+2,Blade Templates,Use layouts with @extends and @section,Define one master layout and extend it per page,@extends layout with named @section blocks,Duplicate header/footer HTML in every view,@extends('layouts.app') @section('content'),Full HTML in every view file,High,https://laravel.com/docs/blade#layouts-using-template-inheritance,laravel 13.x,active,2026-08-13
+3,Blade Templates,Use @props for component type-safety,Declare accepted props inside components with @props,@props with defaults to document component API,Pass arbitrary variables without declaration,@props(['title' => '' 'variant' => 'primary']),No @props declaration in component,Medium,https://laravel.com/docs/blade#component-data-and-attributes,laravel 13.x,active,2026-08-13
+4,Blade Templates,Use conditional CSS classes with @class,Build class strings conditionally without ternary noise,@class directive for conditional class binding,String concatenation or nested ternaries,@class(['btn' 'btn-primary' => $primary 'btn-disabled' => $disabled]),"class=""btn {{ $primary ? 'btn-primary' : '' }}""",Medium,https://laravel.com/docs/blade#conditional-classes-and-styles,laravel 13.x,active,2026-08-13
+5,Blade Templates,Use named slots for flexible layouts,Named slots let callers inject content into specific regions,@slot('header') and $slot for flexible component APIs,Hard-code all sub-sections inside components,<x-modal><x-slot:header>Title</x-slot>Body</x-modal>,"<x-modal title=""Title"">Body with no slot control</x-modal>",Medium,https://laravel.com/docs/blade#slots,laravel 13.x,active,2026-08-13
+6,Blade Templates,Use Blade directives instead of raw PHP,Blade directives are readable and IDE-supported,@if @foreach @forelse @empty instead of <?php ?>,Raw PHP tags inside Blade templates,@forelse($items as $item) ... @empty <p>None</p> @endforelse,<?php foreach($items as $item): ?>,High,https://laravel.com/docs/blade#blade-directives,laravel 13.x,active,2026-08-13
+7,Blade Templates,Escape output with {{ }},Use double curly braces for XSS-safe output,{{ }} for all user-supplied or dynamic text,{!! !!} for untrusted data,{{ $user->name }},{!! $user->name !!},High,https://laravel.com/docs/blade#displaying-data,laravel 13.x,active,2026-08-13
+8,Blade Templates,Use @vite for asset loading,Vite integration handles cache busting and HMR automatically,@vite(['resources/css/app.css' 'resources/js/app.js']),Manual script/link tags with hardcoded paths,@vite(['resources/css/app.css' 'resources/js/app.js']),"<link href=""/css/app.css?v=123"">",High,https://laravel.com/docs/vite,laravel 13.x,active,2026-08-13
+9,Livewire,Bind inputs with wire:model,Two-way data binding keeps component state in sync,wire:model for all form inputs managed by Livewire,Manual JavaScript listeners syncing to component,"<input wire:model=""email"">","<input @change=""$wire.email = $event.target.value"">",High,https://laravel.com/docs/13.x/starter-kits#livewire,laravel 13.x,active,2026-08-13
+10,Livewire,Use wire:model.live for real-time validation,Validate on input rather than only on submit,wire:model.live + #[Validate] for instant feedback,Only validate on form submit,"<input wire:model.live=""email""> with #[Validate('email')]","<input wire:model=""email""> with validate() on submit only",Medium,https://livewire.laravel.com/docs/validation,laravel 13.x,active,2026-08-13
+11,Livewire,Use wire:click for actions,Bind UI events to component methods cleanly,wire:click for buttons and interactive elements,JavaScript fetch calls replicating Livewire actions,"<button wire:click=""save"">Save</button>","<button onclick=""fetch('/save')"">Save</button>",High,https://laravel.com/docs/13.x/starter-kits#livewire,laravel 13.x,active,2026-08-13
+12,Livewire,Use lifecycle hooks appropriately,mount() for init; updated() for reactive side effects,mount() for initialization updatedFoo() for property changes,Heavy logic in render() or __construct(),public function mount(): void { $this->items = Item::all(); },public function render(): View { $this->items = Item::all(); },Medium,https://livewire.laravel.com/docs/lifecycle-hooks,laravel 13.x,active,2026-08-13
+13,Livewire,Use lazy loading for heavy components,Defer render of expensive components until visible,wire:init or lazy attribute on components,Load all Livewire components on page load,<livewire:analytics-chart lazy />,<livewire:analytics-chart /> with heavy DB queries on mount,Medium,https://livewire.laravel.com/docs/lazy,laravel 13.x,active,2026-08-13
+14,Livewire,Integrate Alpine.js for local UI state,Use Alpine.js for UI-only state that doesn't need server round-trips,x-data / x-show / x-transition for tooltips dropdowns,Livewire server calls for purely visual toggle state,"<div x-data=""{ open: false }""><button @click=""open = !open"">","<button wire:click=""toggleDropdown""> for a local dropdown",Medium,https://livewire.laravel.com/docs/alpine,laravel 13.x,active,2026-08-13
+15,Livewire,Use wire:loading for feedback,Always indicate to users when a server action is in progress,"wire:loading.attr=""disabled"" and wire:loading elements",Provide no feedback while Livewire request is in flight,"<button wire:click=""save"" wire:loading.attr=""disabled"">Save</button>","<button wire:click=""save"">Save</button> with no loading state",High,https://laravel.com/docs/13.x/starter-kits#livewire,laravel 13.x,active,2026-08-13
+16,Livewire,Handle file uploads with WithFileUploads,Livewire's trait manages chunked upload and temp storage,WithFileUploads trait + wire:model for file inputs,Manual multipart form submissions for Livewire pages,"use WithFileUploads; public $photo; <input wire:model=""photo"" type=""file"">","<form action=""/upload"" method=""POST"" enctype=""multipart/form-data"">",Medium,https://livewire.laravel.com/docs/uploads,laravel 13.x,active,2026-08-13
+17,Inertia.js,Use Inertia page components as route endpoints,Each page is a Vue/React component rendered server-side via Inertia::render(),Inertia::render('Dashboard' ['data' => $data]) in controllers,Return JSON and fetch from JavaScript,return Inertia::render('Users/Index' ['users' => $users]);,return response()->json($users); with client-side fetch,High,https://laravel.com/docs/13.x/starter-kits#inertia,laravel 13.x,active,2026-08-13
+18,Inertia.js,Share global data via HandleInertiaRequests,Middleware share() provides auth user and flash to every page,Share auth/flash in HandleInertiaRequests middleware,Pass auth to every Inertia::render() call,public function share(Request $r): array { return ['auth' => ['user' => $r->user()]]; },Inertia::render('Page' ['auth' => auth()->user()]) every controller,High,https://laravel.com/docs/13.x/starter-kits#inertia,laravel 13.x,active,2026-08-13
+19,Inertia.js,Use <Link> for client-side navigation,Inertia Link intercepts clicks for SPA-like transitions,"<Link href=""/dashboard""> instead of <a href>",Regular <a> tags for internal navigation,<Link href={route('dashboard')}>Dashboard</Link>,"<a href=""/dashboard"">Dashboard</a>",High,https://laravel.com/docs/13.x/starter-kits#inertia,laravel 13.x,active,2026-08-13
+20,Inertia.js,Use useForm for form state and submission,Inertia's useForm manages progress errors and transforms,"useForm for all page-level forms, form.post() for submit",Axios/fetch for form submissions on Inertia pages,const form = useForm({ name: '' }); form.post('/users');,"axios.post('/users', { name });",High,https://laravel.com/docs/13.x/starter-kits#inertia,laravel 13.x,active,2026-08-13
+21,Inertia.js,Use persistent layouts to preserve state,Wrap pages in a persistent layout so header/sidebar don't remount,layout property on page component for persistent UI,Re-render full layout on every page visit,MyPage.layout = (page) => <AppLayout>{page}</AppLayout>,No layout — full page reload feel on navigation,Medium,https://inertiajs.com/pages#persistent-layouts,laravel 13.x,active,2026-08-13
+22,Inertia.js,Enable SSR for public pages,Server-side rendering improves SEO and first paint,Enable Inertia SSR for marketing and public pages,Client-only rendering for all pages including public,php artisan inertia:start-ssr with @inertiaHead,No SSR on pages requiring good SEO,Medium,https://inertiajs.com/server-side-rendering,laravel 13.x,active,2026-08-13
+23,Styling,Set up Tailwind CSS via Vite,Use Vite + tailwindcss plugin for fast HMR and optimized builds,Install tailwindcss @tailwindcss/vite and configure vite.config.js,Laravel Mix or manual PostCSS pipeline for new projects,plugins: [tailwindcss()] in vite.config.js + @import 'tailwindcss' in app.css,Laravel Mix with require('tailwindcss') in webpack,High,https://laravel.com/docs/13.x/vite,laravel 13.x,active,2026-08-13
+24,Styling,Purge unused styles via content config,Tailwind scans Blade and JS files to tree-shake unused classes,"content: ['./resources/views/**/*.blade.php', './resources/js/**/*.{js,vue}']",No content config — ship all 3MB of CSS,"content: ['./resources/**/*.blade.php', './resources/**/*.js']",content: [],High,https://laravel.com/docs/13.x/vite,laravel 13.x,active,2026-08-13
+25,Styling,Use dark mode class strategy,class-based dark mode integrates with server-rendered preference,darkMode: 'class' with a toggle that sets class on <html>,Media query only — no user override possible,darkMode: 'class'; document.documentElement.classList.toggle('dark'),darkMode: 'media' — no programmatic control,Medium,https://tailwindcss.com/docs/dark-mode,laravel 13.x,active,2026-08-13
+26,Styling,Use @apply sparingly in component CSS,Extract only truly repeated multi-class patterns,@apply for BEM base classes shared across many components,@apply for every single element — defeats Tailwind's purpose,@apply flex items-center gap-2 (shared button base),@apply text-sm for a single use,Low,https://tailwindcss.com/docs/functions-and-directives#apply,laravel 13.x,active,2026-08-13
+27,Styling,Configure custom design tokens in CSS,Define brand colors spacing fonts as CSS variables consumed by Tailwind,Custom @theme tokens matched to brand guidelines,Magic color hex codes scattered across Blade templates,@theme { --color-brand: oklch(0.6 0.2 250); },bg-[#1a2b3c] inline throughout templates,Medium,https://tailwindcss.com/docs/theme,laravel 13.x,active,2026-08-13
+28,Components,Use anonymous Blade components for UI primitives,Blade files in resources/views/components/ auto-register as x-* components,Anonymous components for buttons alerts badges cards,Blade @includes for anything reusable,"<x-badge variant=""success"">Active</x-badge>",@include('partials.badge' ['variant' => 'success']),Medium,https://laravel.com/docs/blade#anonymous-components,laravel 13.x,active,2026-08-13
+29,Components,Use class-based components for complex logic,PHP class components can inject services and pre-process data,app/View/Components/ class when component needs PHP logic,Blade @php blocks for business logic inside templates,class AlertComponent { public function __construct(public string $type) {} },@php $color = $type === 'error' ? 'red' : 'green'; @endphp,Medium,https://laravel.com/docs/blade#components,laravel 13.x,active,2026-08-13
+30,Components,Forward extra attributes with $attributes,Pass through HTML attributes like class id aria to root element,$attributes->merge() on root element of components,Ignore caller-provided HTML attributes silently,<div {{ $attributes->merge(['class' => 'btn']) }}>,"<div class=""btn""> — drops extra class/id from caller",High,https://laravel.com/docs/blade#component-attributes,laravel 13.x,active,2026-08-13
+31,Components,Separate variant logic from templates,Keep variant/size/color logic in a PHP class or helper not in Blade,Variant class or match() expression in component class,Long @if chains for variants inside Blade templates,"public function classes(): string { return match($this->variant) { 'primary' => 'bg-blue-600', } }",@if($variant === 'primary') bg-blue-600 @elseif($variant === 'secondary')...,Medium,https://laravel.com/docs/blade#components,laravel 13.x,active,2026-08-13
+32,Components,Provide default slot content,Use {{ $slot ?? '' }} or named slot defaults so components are usable empty,Default content in slots for optional regions,Require every slot to be filled — throws errors on empty usage,{{ $icon ?? '' }} in component Blade file,{{ $icon }} — fatal if caller omits slot,Low,https://laravel.com/docs/blade#slots,laravel 13.x,active,2026-08-13
+33,Components,Use component namespacing for packages,Prefix third-party or module components to avoid collisions,Register custom prefix via Blade::componentNamespace(),Mix first-party and package component names with no prefix,Blade::componentNamespace('Modules\\Shop\\Views' 'shop'); <x-shop::product-card />,<x-product-card /> colliding with first-party card,Low,https://laravel.com/docs/blade#manually-registering-components,laravel 13.x,active,2026-08-13
+34,Forms,Validate with Form Request classes,Move validation rules out of controllers into dedicated FormRequest classes,php artisan make:request and define rules() + authorize(),Inline validate() in controller actions,class StorePostRequest extends FormRequest { public function rules() { return ['title' => 'required|max:255']; } },public function store(Request $r) { $r->validate(['title' => 'required']); },High,https://laravel.com/docs/validation#form-request-validation,laravel 13.x,active,2026-08-13
+35,Forms,Preserve old input on validation failure,Use old() to repopulate form fields after server-side error redirect,old('field') as default value on all form inputs,Empty form fields when validation fails,"<input name=""email"" value=""{{ old('email') }}"">","<input name=""email"">",High,https://laravel.com/docs/validation#repopulating-forms,laravel 13.x,active,2026-08-13
+36,Forms,Display validation errors with @error,Use the @error directive for inline field-level error messages,@error('field') to show per-field messages,Dump $errors->all() in one block at top of form,"@error('email') <p class=""text-red-500"">{{ $message }}</p> @enderror",@foreach($errors->all() as $e) {{ $e }} @endforeach,Medium,https://laravel.com/docs/validation#quick-displaying-the-validation-errors,laravel 13.x,active,2026-08-13
+37,Forms,Use CSRF token on all forms,CSRF protection is enabled by default — include @csrf in every form,@csrf in every POST/PUT/PATCH/DELETE form,Disable VerifyCsrfToken middleware for convenience,"<form method=""POST"">@csrf ...","<form method=""POST""> without @csrf",High,https://laravel.com/docs/csrf,laravel 13.x,active,2026-08-13
+38,Forms,Use method spoofing for PUT/PATCH/DELETE,HTML forms only support GET/POST — use @method for REST actions,@method('PUT') inside form for update/delete routes,Route::post for all mutations including updates,"<form method=""POST"">@csrf @method('PUT')","<form method=""POST"" action=""/users/update"">",Medium,https://laravel.com/docs/routing#form-method-spoofing,laravel 13.x,active,2026-08-13
+39,Forms,Display flash messages consistently,Flash success/error in controller; read in layout with session(),session('status') in layout for global flash display,Re-query DB or pass flash from every controller individually,"@if(session('success')) <div class=""alert"">{{ session('success') }}</div> @endif",if($user) return back()->with(['user' => $user]);,Medium,https://laravel.com/docs/session#flash-data,laravel 13.x,active,2026-08-13
+40,Performance,Eager load relationships to prevent N+1,Always eager load related models used in views with with(),with() in queries before passing collections to views,Lazy-load relations inside Blade loops,User::with('posts' 'avatar')->get(),User::all() then @foreach $user->posts in Blade,High,https://laravel.com/docs/eloquent-relationships#eager-loading,laravel 13.x,active,2026-08-13
+41,Performance,Cache rendered Blade fragments,Use cache() helper to wrap expensive rendered partials,cache() around slow partials that change infrequently,Re-render identical content on every request,@php echo cache()->remember('sidebar' 3600 fn() => view('sidebar')->render()); @endphp,{{ view('sidebar')->render() }} on every page load,Medium,https://laravel.com/docs/cache,laravel 13.x,active,2026-08-13
+42,Performance,Paginate large data sets,Always paginate collections in list views,->paginate() or ->simplePaginate() with {{ $items->links() }},->get() for large tables in views,"User::paginate(20) with <x-pagination :links=""$users"" />",User::all() passed to Blade,High,https://laravel.com/docs/pagination,laravel 13.x,active,2026-08-13
+43,Performance,Queue slow background tasks,Offload emails notifications and heavy processing to queues,Dispatch jobs for anything taking >200ms,Block HTTP request with slow operations,ProcessImage::dispatch($file); return back();,Storage::put(); Mail::send(); Image::resize(); in controller,High,https://laravel.com/docs/queues,laravel 13.x,active,2026-08-13
+44,Performance,Use route model binding,Laravel resolves models automatically — avoids manual find(),Type-hint model in controller method,Manual User::findOrFail($id) in every method,public function show(User $user): View { return view('users.show' compact('user')); },public function show($id) { $user = User::findOrFail($id); },Medium,https://laravel.com/docs/routing#route-model-binding,laravel 13.x,active,2026-08-13
+45,Performance,Enable HTTP response caching for static content,Cache control headers for pages that rarely change,Cache-Control headers via middleware for public pages,No caching — serve every response fresh,"response()->view('home')->header('Cache-Control', 'public, max-age=3600')",No cache headers on marketing pages,Medium,https://laravel.com/docs/responses#response-headers,laravel 13.x,active,2026-08-13
+46,Security,Escape all output in Blade,{{ }} auto-escapes HTML — never use {!! !!} on user data,{{ }} for all untrusted or dynamic content,{!! !!} for user-controlled strings,{{ $comment->body }},{!! $comment->body !!},High,https://laravel.com/docs/blade#displaying-data,laravel 13.x,active,2026-08-13
+47,Security,Protect routes with Gate and Policy,Use policies for authorization — never inline permission checks in views,@can / Gate::allows() for UI visibility; policy()->authorize() for actions,Hardcode role checks inline across templates,"@can('update' $post) <a href=""{{ route('posts.edit' $post) }}"">Edit</a> @endcan","@if(auth()->user()->role === 'admin') <a href=""/edit"">",High,https://laravel.com/docs/authorization#policies,laravel 13.x,active,2026-08-13
+48,Security,Validate and authorize file uploads,Check MIME type size and store outside public root,Store in storage/app/private + validate mimes and max,Store raw upload in public/ without validation,"'avatar' => ['required' 'image' 'mimes:jpg,png' 'max:2048']",'avatar' => 'required' with no MIME or size check,High,https://laravel.com/docs/filesystem#file-uploads,laravel 13.x,active,2026-08-13
+49,Security,Use signed URLs for temporary links,Generate expiring URLs for private downloads or email confirmations,URL::signedRoute() or temporarySignedRoute(),Expose sequential IDs in download URLs without auth,URL::temporarySignedRoute('file.download' now()->addMinutes(30) ['file' => $id]),route('file.download' $id) with no expiry or signature,High,https://laravel.com/docs/urls#signed-urls,laravel 13.x,active,2026-08-13
+50,Security,Set a strict Content Security Policy,CSP headers prevent XSS injection of external scripts,spatie/laravel-csp or custom middleware to emit CSP header,No CSP — browser runs any injected script,Header: Content-Security-Policy: default-src 'self'; script-src 'self',No Content-Security-Policy header on responses,Medium,https://laravel.com/docs/middleware,laravel 13.x,active,2026-08-13

package/dist/assets/uiux/data/stacks/nextjs.csv

@@ -0,0 +1,62 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 14+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app,nextjs 16.2,active,2026-08-13
+2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing,nextjs 16.2,active,2026-08-13
+3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,,nextjs 16.2,active,2026-08-13
+4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups,nextjs 16.2,active,2026-08-13
+5,Routing,Handle loading states,Use loading.tsx for route loading UI,loading.tsx alongside page.tsx,Manual loading state management,app/dashboard/loading.tsx,useState for loading in page,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming,nextjs 16.2,active,2026-08-13
+6,Routing,Handle errors with error.tsx,Catch errors at route level,error.tsx with reset function,try/catch in every component,app/dashboard/error.tsx,try/catch in page component,High,https://nextjs.org/docs/app/building-your-application/routing/error-handling,nextjs 16.2,active,2026-08-13
+7,Rendering,Use Server Components by default,Server Components reduce client JS bundle,Keep components server by default,Add 'use client' unnecessarily,export default function Page(),('use client') for static content,High,https://nextjs.org/docs/app/building-your-application/rendering/server-components,nextjs 16.2,active,2026-08-13
+8,Rendering,Mark Client Components explicitly,'use client' for interactive components,Add 'use client' only when needed,Server Component with hooks/events,('use client') for onClick useState,No directive with useState,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components,nextjs 16.2,active,2026-08-13
+9,Rendering,Push Client Components down,Keep Client Components as leaf nodes,Client wrapper for interactive parts only,Mark page as Client Component,<InteractiveButton/> in Server Page,('use client') on page.tsx,High,https://nextjs.org/docs/app/building-your-application/rendering/client-components,nextjs 16.2,active,2026-08-13
+10,Rendering,Use streaming for better UX,Stream content with Suspense boundaries,Suspense for slow data fetches,Wait for all data before render,<Suspense><SlowComponent/></Suspense>,await allData then render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming,nextjs 16.2,active,2026-08-13
+11,Rendering,Choose correct rendering strategy,SSG for static SSR for dynamic ISR for semi-static,generateStaticParams for known paths,SSR for static content,export const revalidate = 3600,fetch without cache config,Medium,,nextjs 16.2,active,2026-08-13
+12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for initial data,const data = await fetch(url),useEffect(() => fetch(url)),High,https://nextjs.org/docs/app/building-your-application/data-fetching,nextjs 16.2,active,2026-08-13
+13,DataFetching,Configure caching explicitly (Next.js 16.2+),Next.js 16 uses Cache Components and explicit cache directives instead of assuming fetch is the cache model.,Set cache semantics explicitly for static and dynamic data,Assume fetch defaults alone define the cache model,"fetch(url, { cache: 'force-cache' })",fetch(url) // Uncached in v15,High,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs 16.2,active,2026-08-13
+14,DataFetching,Deduplicate fetch requests,React and Next.js dedupe same requests,Same fetch call in multiple components,Manual request deduplication,Multiple components fetch same URL,Custom cache layer,Low,,nextjs 16.2,active,2026-08-13
+15,DataFetching,Use Server Actions for mutations,Server Actions for form submissions,action={serverAction} in forms,API route for every mutation,<form action={createPost}>,<form onSubmit={callApiRoute}>,Medium,https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations,nextjs 16.2,active,2026-08-13
+16,DataFetching,Revalidate or update data appropriately,"Use updateTag for immediate read-your-own-writes and revalidateTag(..., ""max"") for SWR invalidation.",Use updateTag after mutations that should be visible immediately,Rely on router.refresh() as the default mutation strategy,revalidatePath('/posts'),router.refresh() everywhere,Medium,https://nextjs.org/docs/app/api-reference/functions/updateTag,nextjs 16.2,active,2026-08-13
+17,Images,Use next/image for optimization,Automatic image optimization and lazy loading,<Image> component for all images,<img> tags directly,<Image src={} alt={} width={} height={}>,<img src={}/>,High,https://nextjs.org/docs/app/building-your-application/optimizing/images,nextjs 16.2,active,2026-08-13
+18,Images,Provide width and height,Prevent layout shift with dimensions,width and height props or fill,Missing dimensions,<Image width={400} height={300}/>,<Image src={url}/>,High,https://nextjs.org/docs/app/api-reference/components/image,nextjs 16.2,active,2026-08-13
+19,Images,Use fill for responsive images,Fill container with object-fit,fill prop with relative parent,Fixed dimensions for responsive,"<Image fill className=""object-cover""/>",<Image width={window.width}/>,Medium,,nextjs 16.2,active,2026-08-13
+20,Images,Configure remote image domains,Whitelist external image sources,remotePatterns in next.config.js,Allow all domains,remotePatterns: [{ hostname: 'cdn.example.com' }],domains: ['*'],High,https://nextjs.org/docs/app/api-reference/components/image#remotepatterns,nextjs 16.2,active,2026-08-13
+21,Images,Use priority for LCP images,Mark above-fold images as priority,priority prop on hero images,All images with priority,<Image priority src={hero}/>,<Image priority/> on every image,Medium,,nextjs 16.2,active,2026-08-13
+22,Fonts,Use next/font for fonts,Self-hosted fonts with zero layout shift,next/font/google or next/font/local,External font links,import { Inter } from 'next/font/google',"<link href=""fonts.googleapis.com""/>",Medium,https://nextjs.org/docs/app/building-your-application/optimizing/fonts,nextjs 16.2,active,2026-08-13
+23,Fonts,Apply font to layout,Set font in root layout for consistency,className on body in layout.tsx,Font in individual pages,<body className={inter.className}>,Each page imports font,Low,,nextjs 16.2,active,2026-08-13
+24,Fonts,Use variable fonts,Variable fonts reduce bundle size,Single variable font file,Multiple font weights as files,Inter({ subsets: ['latin'] }),Inter_400 Inter_500 Inter_700,Low,,nextjs 16.2,active,2026-08-13
+25,Metadata,Use generateMetadata for dynamic,Generate metadata based on params,export async function generateMetadata(),Hardcoded metadata everywhere,generateMetadata({ params }),export const metadata = {},Medium,https://nextjs.org/docs/app/building-your-application/optimizing/metadata,nextjs 16.2,active,2026-08-13
+26,Metadata,Include OpenGraph images,Add OG images for social sharing,opengraph-image.tsx or og property,Missing social preview images,opengraph: { images: ['/og.png'] },No OG configuration,Medium,,nextjs 16.2,active,2026-08-13
+27,Metadata,Use metadata API,Export metadata object for static metadata,export const metadata = {},Manual head tags,export const metadata = { title: 'Page' },<head><title>Page</title></head>,Medium,,nextjs 16.2,active,2026-08-13
+28,API,Use Route Handlers for APIs,app/api routes for API endpoints,app/api/users/route.ts,pages/api for new projects,export async function GET(request),export default function handler,Medium,https://nextjs.org/docs/app/building-your-application/routing/route-handlers,nextjs 16.2,active,2026-08-13
+29,API,Return proper Response objects,Use NextResponse for API responses,NextResponse.json() for JSON,Plain objects or res.json(),return NextResponse.json({ data }),return { data },Medium,,nextjs 16.2,active,2026-08-13
+30,API,Handle HTTP methods explicitly,Export named functions for methods,Export GET POST PUT DELETE,Single handler for all methods,export async function POST(),switch(req.method),Low,,nextjs 16.2,active,2026-08-13
+31,API,Validate request body,Validate input before processing,Zod or similar for validation,Trust client input,const body = schema.parse(await req.json()),const body = await req.json(),High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
+32,Middleware,Use proxy.ts for auth and request guards,Next.js 16 renamed middleware to proxy to reflect its network-boundary role.,"Use proxy.ts for redirects, rewrites, and lightweight request guards",Keep new auth logic in middleware.ts,export function proxy(request),if (!session) redirect in page,Medium,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs 16.2,active,2026-08-13
+33,Middleware,Match specific proxy paths,Configure the proxy matcher,config.matcher for specific routes,Run proxy on all routes,matcher: ['/dashboard/:path*'],No matcher config,Medium,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
+34,Middleware,Keep proxy runtime-safe,Proxy runs in nodejs runtime and fetch cache options do not apply there.,Keep proxy logic lightweight and nodejs-compatible,Use Node-incompatible code or rely on fetch cache options in proxy,Edge-compatible auth check,fs.readFile in middleware,High,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
+35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables,nextjs 16.2,active,2026-08-13
+36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
+37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
+38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer,nextjs 16.2,active,2026-08-13
+39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading,nextjs 16.2,active,2026-08-13
+40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"<Skeleton className=""h-48""/>",No placeholder for async content,High,https://nextjs.org/docs/app/api-reference/components/image,nextjs 16.2,active,2026-08-13
+41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering,nextjs 16.2,active,2026-08-13
+42,Link,Use next/link for navigation,Client-side navigation with prefetching,"<Link href=""""> for internal links",<a> for internal navigation,"<Link href=""/about"">About</Link>","<a href=""/about"">About</a>",High,https://nextjs.org/docs/app/api-reference/components/link,nextjs 16.2,active,2026-08-13
+43,Link,Prefetch strategically,Control prefetching behavior,prefetch={false} for low-priority,Prefetch all links,<Link prefetch={false}>,Default prefetch on every link,Low,,nextjs 16.2,active,2026-08-13
+44,Link,Use scroll option appropriately,Control scroll behavior on navigation,scroll={false} for tabs pagination,Always scroll to top,<Link scroll={false}>,Manual scroll management,Low,,nextjs 16.2,active,2026-08-13
+45,Config,Use next.config.ts correctly,Use current Next.js 16 config names such as cacheComponents and skipProxyUrlNormalize.,Proper config options,Deprecated or wrong options,images: { remotePatterns: [] },images: { domains: [] },Medium,https://nextjs.org/docs/app/api-reference/next-config-js,nextjs 16.2,active,2026-08-13
+46,Config,Enable strict mode,Catch potential issues early,reactStrictMode: true,Strict mode disabled,reactStrictMode: true,reactStrictMode: false,Medium,,nextjs 16.2,active,2026-08-13
+47,Config,Configure redirects and rewrites,Use config for URL management,redirects() rewrites() in config,Manual redirect handling,redirects: async () => [...],res.redirect in pages,Medium,https://nextjs.org/docs/app/api-reference/next-config-js/redirects,nextjs 16.2,active,2026-08-13
+48,Deployment,Use Vercel for easiest deploy,Vercel optimized for Next.js,Deploy to Vercel,Self-host without knowledge,vercel deploy,Complex Docker setup for simple app,Low,https://nextjs.org/docs/app/building-your-application/deploying,nextjs 16.2,active,2026-08-13
+49,Deployment,Configure output for self-hosting,Set output option for deployment target,output: 'standalone' for Docker,Default output for containers,output: 'standalone',No output config for Docker,Medium,https://nextjs.org/docs/app/building-your-application/deploying#self-hosting,nextjs 16.2,active,2026-08-13
+50,Security,Sanitize user input,Sanitize and validate any user-controlled data before rendering or mutating.,Escape sanitize validate all input,Direct interpolation of user data,DOMPurify.sanitize(userInput),dangerouslySetInnerHTML={{ __html: userInput }},High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
+51,Security,Use CSP headers,Content Security Policy for XSS protection,Configure CSP in next.config.js,No security headers,headers() with CSP,No CSP configuration,High,https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy,nextjs 16.2,active,2026-08-13
+52,Security,Validate Server Action input,"Server Actions are public endpoints, so they need validation and authorization.",Validate and authorize in Server Action,Trust Server Action input,Auth check + validation in action,Direct database call without check,High,https://nextjs.org/docs/app/guides/data-security,nextjs 16.2,active,2026-08-13
+53,Caching,Use Cache Components as the current cache model,"Cache Components is the current Next.js 16 cache model and the foundation for use cache, cacheLife, cacheTag, and updateTag.",Enable cacheComponents for routes that should use the new cache model,Treat the old fetch-only mental model as the primary cache contract,const nextConfig = { cacheComponents: true },const nextConfig = { experimental: { ppr: true } },High,https://nextjs.org/blog/next-16,nextjs 16.2,active,2026-08-13
+54,Caching,Use use cache for cacheable functions and components,"The use cache directive marks a route, component, or function as cacheable under Cache Components.","Place use cache at file, component, or function scope where the result is cacheable",Cache runtime-sensitive data without passing it in as arguments,"'use cache'
+export default async function Page() { }",export default async function Page() { /* uncached by accident */ },High,https://nextjs.org/docs/app/api-reference/directives/use-cache,nextjs 16.2,active,2026-08-13
+55,Caching,Set cache lifetime with cacheLife,Use cacheLife with use cache to make cache freshness explicit and readable.,Choose a cacheLife profile that matches update frequency,Leave cache behavior implicit when the data has a known freshness window,cacheLife('days'),/* implicit default */,Medium,https://nextjs.org/docs/app/api-reference/functions/cacheLife,nextjs 16.2,active,2026-08-13
+56,Caching,Tag cache entries with cacheTag,Use cacheTag inside cached scopes to support targeted invalidation.,Assign stable tags to cacheable data,Use broad invalidation when a specific tag is enough,cacheTag('posts'),"/* no tag, broad invalidation later */",Medium,https://nextjs.org/docs/app/api-reference/functions/cacheTag,nextjs 16.2,active,2026-08-13
+57,Caching,Use updateTag for read-your-own-writes,Use updateTag from Server Actions when the UI must reflect a mutation immediately.,Call updateTag after a successful mutation in a Server Action,Use updateTag outside Server Actions,updateTag('cart'),revalidateTag('cart') // when immediate refresh is required,High,https://nextjs.org/docs/app/api-reference/functions/updateTag,nextjs 16.2,active,2026-08-13
+58,Caching,"Use revalidateTag(..., ""max"") for SWR invalidation","The one-argument revalidateTag form is deprecated; profile=""max"" is the current stale-while-revalidate contract.","Use revalidateTag(tag, ""max"") for background refresh semantics",Rely on the deprecated single-argument revalidateTag(tag),"revalidateTag('posts', 'max')",revalidateTag('posts'),High,https://nextjs.org/docs/app/api-reference/functions/revalidateTag,nextjs 16.2,active,2026-08-13
+59,Middleware,Use proxy.ts for request interception,Next.js 16 renamed middleware to proxy; the proxy runtime is nodejs and fetch cache options have no effect there.,"Use proxy.ts for redirects, rewrites, and lightweight guards",Assume proxy is edge runtime or use fetch cache semantics there,export function proxy(request) { return NextResponse.next() },export function middleware(request) { return NextResponse.next() },High,https://nextjs.org/docs/app/getting-started/proxy,nextjs 16.2,active,2026-08-13
+60,Middleware,Treat middleware.ts and export function middleware as legacy,The middleware filename and named export are deprecated in Next.js 16; use proxy.ts and export function proxy instead.,Rename middleware.ts to proxy.ts during migration,Introduce new middleware.ts code,proxy.ts,middleware.ts,High,https://nextjs.org/docs/app/guides/upgrading/version-16,nextjs legacy,deprecated,2026-08-13

package/dist/assets/uiux/data/stacks/nuxt-ui.csv

@@ -0,0 +1,77 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Installation,Add Nuxt UI module,"Install Nuxt UI and Tailwind CSS, then register the Nuxt module",pnpm add @nuxt/ui tailwindcss and add @nuxt/ui to modules,Manual component imports,modules: ['@nuxt/ui'] // after pnpm add @nuxt/ui tailwindcss,import { UButton } from '@nuxt/ui',High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+2,Installation,Import Tailwind and Nuxt UI CSS,Required CSS imports in main.css file,@import tailwindcss and @import @nuxt/ui,Skip CSS imports,"@import ""tailwindcss""; @import ""@nuxt/ui"";",No CSS imports,High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+3,Installation,Wrap app with UApp component,"UApp provides toast, tooltip, overlay, and locale context",Wrap NuxtPage or RouterView once at the app root,Mount pages outside UApp,<UApp><NuxtPage/></UApp>,<NuxtPage/> without wrapper,High,https://ui.nuxt.com/docs/components/app,nuxt-ui 4.11.1,active,2026-09-21
+4,Components,Use U prefix for components,All Nuxt UI components use U prefix by default,UButton UInput UModal,Button Input Modal,<UButton>Click</UButton>,<Button>Click</Button>,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+5,Components,Use semantic color props,"Style Nuxt UI components with meaning-based colors such as primary, success, and error","Use color props such as color=""primary"" or color=""error""",Hardcoded palette colors,"<UButton color=""primary"">","<UButton class=""bg-green-500"">",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
+6,Components,Use variant prop for styling,Nuxt UI provides solid outline soft subtle ghost link variants,Choose a built-in variant before adding custom classes,Recreate a built-in variant with custom classes,"<UButton variant=""soft"">","<UButton class=""border bg-transparent"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
+7,Components,Use size prop consistently,Components support xs sm md lg xl sizes,"size=""sm"" size=""lg""",Arbitrary sizing classes,"<UButton size=""lg"">","<UButton class=""text-xl px-6"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
+8,Icons,Use i-{collection}-{name} format for icons,Nuxt UI v4 uses Iconify i-prefix format — lucide:home is v3 legacy,i-lucide-home i-heroicons-user format,lucide:home format (v3 syntax),"<UButton icon=""i-lucide-home"">","<UButton icon=""lucide:home"">",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+9,Icons,Use leadingIcon and trailingIcon props,Position icons with dedicated props for clarity,Use leadingIcon or trailingIcon for standard button icons,Build a custom icon slot when a standard icon prop is enough,"<UButton leadingIcon=""i-lucide-plus"" label=""Add"">","<UButton><UIcon name=""i-lucide-plus""/>Add</UButton>",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
+10,Theming,Configure colors in app.config.ts,Runtime color configuration without restart,ui.colors.primary in app.config.ts,Hardcoded colors in components,defineAppConfig({ ui: { colors: { primary: 'blue' } } }),"<UButton class=""bg-blue-500"">",High,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
+11,Theming,Define complete custom palettes with @theme static,Nuxt UI custom colors require shades 50 through 950,Define every --color-brand-* shade in @theme static,Define only one shade for a custom palette,@theme static { --color-brand-50: #fff1f2; ... --color-brand-950: #4c0519; },@theme { --color-brand-500: #ef4444; },Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
+12,Theming,Register and map semantic colors,Register extra semantic color names at build time then map them to a palette in app.config,nuxt.config ui.theme.colors plus app.config ui.colors,Use an unregistered semantic color,"ui: { theme: { colors: ['primary', 'tertiary'] } } then ui.colors.tertiary = 'violet'","<UButton color=""tertiary""> without config",Medium,https://ui.nuxt.com/docs/getting-started/theme/design-system,nuxt-ui 4.11.1,active,2026-09-21
+13,Forms,Use UForm with schema validation,"UForm accepts Standard Schema libraries such as Zod, Valibot, Yup, and Joi",Pass a Standard Schema with :schema and reactive state with :state,Manual form validation,"<UForm :schema=""schema"" :state=""state"">",Manual @blur validation,High,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
+14,Forms,Use UFormField for field wrapper,Provides label error message and validation display,UFormField with name prop,Manual error handling,"<UFormField name=""email"" label=""Email"">",<div><label>Email</label><UInput/><span>error</span></div>,Medium,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
+15,Forms,Handle form submit with @submit,UForm emits submit event with validated data,@submit handler on UForm,@click on submit button,"<UForm @submit=""onSubmit"">","<UButton @click=""onSubmit"">",Medium,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
+16,Forms,Choose validation timing deliberately,UForm validates on input blur and change by default; input is delayed and begins after blur unless eager,Set validateOn and eager to match the interaction,Assume the default validates every keystroke immediately,"<UForm :validateOn=""['blur', 'change']"">",Describe default UForm as eager input-only validation,Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
+17,Overlays,Use v-model:open for overlay control,Modal Slideover Drawer use v-model:open,v-model:open for controlled state,Manual show/hide logic,"<UModal v-model:open=""isOpen"">","<UModal v-if=""isOpen"">",Medium,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
+18,Overlays,Use useOverlay composable for programmatic overlays,Open overlays programmatically — v4 API is create().open() not open(Component),"Create the overlay once, then pass component props directly to open()",v3 overlay.open(Component) pattern (removed in v4),const modal = overlay.create(MyModal); const { result } = modal.open({ title: 'Confirm' }),"overlay.open(MyModal, { props: { title: 'Confirm' } })",High,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
+19,Overlays,Use title and description props,Built-in header support for overlays,Use title and description props for a standard overlay header,Rebuild a simple title and description with a custom header slot,"<UModal title=""Confirm"" description=""Are you sure?"">",<UModal><template #header><h2>Confirm</h2></template>,Low,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
+20,Dashboard,Use UDashboardSidebar for navigation,Provides collapsible resizable sidebar with mobile support,UDashboardSidebar with header default footer slots,Custom sidebar implementation,<UDashboardSidebar><template #header>...</template></UDashboardSidebar>,"<aside class=""w-64 border-r"">",Medium,https://ui.nuxt.com/docs/components/dashboard-sidebar,nuxt-ui 4.11.1,active,2026-09-21
+21,Dashboard,Use UDashboardGroup for layout,Wraps dashboard components with sidebar state management,UDashboardGroup > UDashboardSidebar + UDashboardPanel,Manual layout flex containers,<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>,"<div class=""flex""><aside/><main/></div>",Medium,https://ui.nuxt.com/docs/components/dashboard-group,nuxt-ui 4.11.1,active,2026-09-21
+22,Dashboard,Use UDashboardNavbar for top navigation,Responsive dashboard header with sidebar toggle and layout slots,Place UDashboardNavbar in a UDashboardPanel header and use its slots for actions,Pass unsupported links props or rebuild the responsive toggle,"<UDashboardNavbar title=""Dashboard""><template #right><UButton label=""Add""/></template></UDashboardNavbar>","<UDashboardNavbar :links=""navLinks""/>",Low,https://ui.nuxt.com/docs/components/dashboard-navbar,nuxt-ui 4.11.1,active,2026-09-21
+23,Tables,Use UTable with data and columns props,Powered by TanStack Table with built-in features,:data and :columns props,Manual table markup,"<UTable :data=""users"" :columns=""columns""/>","<table><tr v-for=""user in users"">",High,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
+24,Tables,Define columns with accessorKey,Column definitions use accessorKey for data binding,accessorKey: 'email' in column def,String column names only,"{ accessorKey: 'email', header: 'Email' }","['name', 'email']",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
+25,Tables,Use column cell slots,Customize cell content with the documented column-id slot pattern,#status-cell for a status column,Use the obsolete #cell-status name,"<template #status-cell=""{ row }"">","<template #cell-status=""{ row }"">",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
+26,Tables,Enable sorting with TanStack column APIs,Render a header control that calls column.toggleSorting,Use getCanSort and toggleSorting,Invent a sortable property not in the column contract,"header: ({ column }) => h(UButton, { onClick: () => column.toggleSorting() })","{ accessorKey: 'name', sortable: true }",Low,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
+27,Navigation,Use UNavigationMenu for nav links,Horizontal or vertical navigation with dropdown support,UNavigationMenu with items array,Manual nav with v-for,"<UNavigationMenu :items=""navItems""/>","<nav><a v-for=""item in items"">",Medium,https://ui.nuxt.com/docs/components/navigation-menu,nuxt-ui 4.11.1,active,2026-09-21
+28,Navigation,Use UBreadcrumb for page hierarchy,Render accessible page hierarchy from an items array with NuxtLink support,:items array with label and to,Manual breadcrumb links,"<UBreadcrumb :items=""breadcrumbs""/>","<nav><span v-for=""crumb in crumbs"">",Low,https://ui.nuxt.com/docs/components/breadcrumb,nuxt-ui 4.11.1,active,2026-09-21
+29,Navigation,Use UTabs for tabbed content,Tab navigation with content panels,UTabs with items containing slot content,Manual tab state,"<UTabs :items=""tabs""/>","<div><button @click=""tab=1"">",Medium,https://ui.nuxt.com/docs/components/tabs,nuxt-ui 4.11.1,active,2026-09-21
+30,Feedback,Use useToast for notifications,Composable notifications rendered by the UApp toast provider,Wrap the app in UApp and call useToast().add(),Alert components for toasts,const toast = useToast(); toast.add({ title: 'Saved' }),"<UAlert v-if=""showSuccess"">",High,https://ui.nuxt.com/docs/components/toast,nuxt-ui 4.11.1,active,2026-09-21
+31,Feedback,Use UAlert for inline messages,Static alert messages with icon and actions,UAlert with title description color,Toast for static messages,"<UAlert title=""Warning"" color=""warning""/>",useToast for inline alerts,Medium,https://ui.nuxt.com/docs/components/alert,nuxt-ui 4.11.1,active,2026-09-21
+32,Feedback,Use USkeleton for loading states,Placeholder content during data loading,USkeleton with appropriate size,Spinner for content loading,"<USkeleton class=""h-4 w-32""/>","<UIcon name=""i-lucide-loader-circle"" class=""animate-spin""/>",Low,https://ui.nuxt.com/docs/components/skeleton,nuxt-ui 4.11.1,active,2026-09-21
+33,Color Mode,Use UColorModeButton for theme toggle,Built-in light/dark mode toggle button,UColorModeButton component,Manual color mode logic,<UColorModeButton/>,"<button @click=""toggleColorMode"">",Low,https://ui.nuxt.com/docs/components/color-mode-button,nuxt-ui 4.11.1,active,2026-09-21
+34,Color Mode,Use UColorModeSelect for theme picker,Dropdown to select system light or dark mode,UColorModeSelect component,Custom select for theme,<UColorModeSelect/>,"<USelect v-model=""colorMode"" :items=""modes""/>",Low,https://ui.nuxt.com/docs/components/color-mode-select,nuxt-ui 4.11.1,active,2026-09-21
+35,Customization,Use class for the root and ui for named slots,class customizes the root slot; ui targets component slots,Use class for root-only changes and ui after checking generated slot names,Use !important or guess undocumented slot names,"<UButton class=""rounded-full"" :ui=""{ trailingIcon: 'size-3' }""/>","<UButton class=""!rounded-full""/>",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
+36,Customization,Configure default variants in app.config,Set component default variants under ui component keys,app.config ui.button.defaultVariants,Put button-specific defaults under global ui.theme.defaultVariants,defineAppConfig({ ui: { button: { defaultVariants: { color: 'neutral' } } } }),ui: { theme: { defaultVariants: { variant: 'outline' } } } // affects every component,Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
+37,Customization,Use app.config.ts for theme overrides,Runtime theme customization,defineAppConfig with ui key,nuxt.config for runtime values,defineAppConfig({ ui: { button: { defaultVariants: { size: 'sm' } } } }),nuxt.config ui.button.size: 'sm',Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
+38,Performance,Enable component detection for Nuxt,Generate CSS only for detected Nuxt UI components and their dependencies,Use true for static usage or include dynamic component names in an array,Enable detection and omit components rendered through dynamic :is values,ui: { experimental: { componentDetection: ['Modal'] } },"componentDetection: true with <component :is=""name""/> only",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+39,Performance,Use UTable virtualize for large data,Enable row virtualization when rendering large datasets,Use the virtualize prop after row rendering becomes a measured bottleneck,Render a large dataset without pagination or virtualization,"<UTable :data=""largeData"" virtualize/>","<UTable :data=""largeData""/>",Medium,https://ui.nuxt.com/docs/components/table,nuxt-ui 4.11.1,active,2026-09-21
+40,Accessibility,Give overlays an accessible name and description,Overlay title and description props provide dialog labeling,Provide title and description unless custom slots supply equivalent semantics,Open an unlabeled modal,"<UModal title=""Settings"" description=""Update your preferences"">",<UModal><template #body>...</template></UModal>,High,https://ui.nuxt.com/docs/components/modal,nuxt-ui 4.11.1,active,2026-09-21
+41,Accessibility,Associate labels with controls,Use UFormField or correct native id and for attributes,UFormField for convenience or explicit label association,Use placeholders as labels,"<UFormField label=""Email""><UInput/></UFormField>","<UInput placeholder=""Email""/>",High,https://ui.nuxt.com/docs/components/form-field,nuxt-ui 4.11.1,active,2026-09-21
+42,Content,Use UContentToc for table of contents,Automatic TOC with active heading highlight,UContentToc with :links,Manual TOC implementation,"<UContentToc :links=""toc""/>","<nav><a v-for=""heading in headings"">",Low,https://ui.nuxt.com/docs/components/content-toc,nuxt-ui 4.11.1,active,2026-09-21
+43,Content,Use UContentSearch for docs search,Command palette for documentation search,UContentSearch with Nuxt Content,Custom search implementation,<UContentSearch/>,"<UCommandPalette :groups=""searchResults""/>",Low,https://ui.nuxt.com/docs/components/content-search,nuxt-ui 4.11.1,active,2026-09-21
+44,AI/Chat,Use UChatMessages for chat UI,Designed for Vercel AI SDK integration,UChatMessages with messages array,Custom chat message list,"<UChatMessages :messages=""messages""/>","<div v-for=""msg in messages"">",Medium,https://ui.nuxt.com/docs/components/chat-messages,nuxt-ui 4.11.1,active,2026-09-21
+45,AI/Chat,Use UChatPrompt for input,Enhanced textarea for AI prompts,UChatPrompt with v-model,Basic textarea,"<UChatPrompt v-model=""prompt""/>","<UTextarea v-model=""prompt""/>",Medium,https://ui.nuxt.com/docs/components/chat-prompt,nuxt-ui 4.11.1,active,2026-09-21
+46,Editor,Use UEditor for rich text,TipTap-based editor binds its document with v-model,UEditor with v-model,Use the undocumented v-model:content binding,"<UEditor v-model=""content""/>","<UEditor v-model:content=""content""/>",Medium,https://ui.nuxt.com/docs/components/editor,nuxt-ui 4.11.1,active,2026-09-21
+47,Links,Use to prop for navigation,UButton and ULink support NuxtLink to prop,"to=""/dashboard"" for internal links",href for internal navigation,"<UButton to=""/dashboard"">","<UButton href=""/dashboard"">",Medium,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
+48,Links,Use to for external URLs,ULink and link-enabled components detect absolute URLs and support target when a new tab is intended,"to=""https://example.com"" target=""_blank""",Use href inconsistently or claim an external prop is required,"<UButton to=""https://example.com"" target=""_blank"">","<UButton href=""https://..."">",Low,https://ui.nuxt.com/docs/components/link,nuxt-ui 4.11.1,active,2026-09-21
+49,Loading,Use loadingAuto on buttons,Automatic loading state from @click promise,loadingAuto prop on UButton,Manual loading state,"<UButton loadingAuto @click=""async () => await save()"">","<UButton :loading=""isLoading"" @click=""save"">",Low,https://ui.nuxt.com/docs/components/button,nuxt-ui 4.11.1,active,2026-09-21
+50,Loading,Use UForm loadingAuto,Auto-disable form during submit,loadingAuto on UForm (default true),Manual form disabled state,"<UForm @submit=""handleSubmit"">","<UForm :disabled=""isSubmitting"">",Low,https://ui.nuxt.com/docs/components/form,nuxt-ui 4.11.1,active,2026-09-21
+51,Installation,Let Nuxt UI declare module dependencies,Nuxt UI uses Nuxt moduleDependencies for Icon Fonts and Color Mode ordering and registration,Configure dependency options at their root keys,Add duplicate module entries without a documented need,icon: { /* opts */ } in nuxt.config,"modules: ['@nuxt/ui', '@nuxt/icon']",High,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+52,Installation,Use official templates to bootstrap projects,Create a Nuxt project from an official Nuxt UI template,npm create nuxt@latest -- -t ui/dashboard,Manually reconstruct a template,npm create nuxt@latest -- -t ui/dashboard,pnpm create nuxt app then copy dashboard files,Medium,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+53,Icons,Install required icon collections locally,Install the Iconify JSON collections used by the app for reliable SSR and bundling,pnpm i @iconify-json/lucide for lucide icons,Rely on an unavailable collection at runtime,pnpm i @iconify-json/lucide,Use i-custom-* without installing its collection,Medium,https://ui.nuxt.com/docs/getting-started/icons/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+54,Icons,Override default component icons centrally when needed,appConfig.ui.icons keeps intentional icon overrides consistent,Set a global icon key when the product needs a different default,Repeat the same icon override on every component instance,"defineAppConfig({ ui: { icons: { loading: 'i-lucide-refresh-cw', close: 'i-lucide-x' } } })","<UModal close-icon=""i-lucide-circle-x""/> repeated everywhere",Low,https://ui.nuxt.com/docs/getting-started/installation/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+55,Forms,Use UFileUpload for file input,Built-in drag-drop and preview support,UFileUpload with v-model and accept prop,Custom input type=file,"<UFileUpload v-model=""files"" accept=""image/*"" multiple/>","<input type=""file"" @change=""handleFiles"">",Medium,https://ui.nuxt.com/docs/components/file-upload,nuxt-ui 4.11.1,active,2026-09-21
+56,Forms,Use UInputDate for date selection,Date input supports single dates and ranges with locale inherited from UApp,Use range when needed and configure locale on UApp,Third-party date picker libraries,"<UApp :locale=""fr""><UInputDate v-model=""range"" range/></UApp>","<UInputDate locale=""fr""/>",Medium,https://ui.nuxt.com/docs/components/input-date,nuxt-ui 4.11.1,active,2026-09-21
+57,Forms,Use UInputTags for tag input,Multi-value tag input with keyboard support,UInputTags with v-model and max prop,Custom chip input implementation,"<UInputTags v-model=""tags"" :max=""5"" />","<UInput @keydown.enter=""addTag"">",Low,https://ui.nuxt.com/docs/components/input-tags,nuxt-ui 4.11.1,active,2026-09-21
+58,Forms,Use UColorPicker for color selection,Full-featured color picker with multiple format support,UColorPicker with v-model and format prop,Native input type=color,"<UColorPicker v-model=""color"" format=""hex"" />","<input type=""color"" v-model=""color"">",Low,https://ui.nuxt.com/docs/components/color-picker,nuxt-ui 4.11.1,active,2026-09-21
+59,Data,Use UTree for hierarchical data,Built-in tree component with expand/collapse,UTree with items prop containing nested children,Custom recursive component,"<UTree :items=""treeItems"" />","<TreeNode v-for=""item in items"" :key=""item.id"">",Low,https://ui.nuxt.com/docs/components/tree,nuxt-ui 4.11.1,active,2026-09-21
+60,Data,Use UMarquee for infinite scroll content,Animated infinite scroll band for logos or testimonials,UMarquee with repeat and pauseOnHover props,CSS animation keyframes loop,"<UMarquee :repeat=""3"" pause-on-hover>","<div class=""animate-marquee"">",Low,https://ui.nuxt.com/docs/components/marquee,nuxt-ui 4.11.1,active,2026-09-21
+61,Overlays,Use UContextMenu for right-click menus,Context menu triggered by right-click on children,UContextMenu wrapping target element,Browser default context menu,"<UContextMenu :items=""menuItems""><div>Right-click me</div></UContextMenu>","<div @contextmenu.prevent=""showMenu"">",Medium,https://ui.nuxt.com/docs/components/context-menu,nuxt-ui 4.11.1,active,2026-09-21
+62,Overlays,Await overlay result for confirmation dialogs,open() returns a Promise that resolves when the overlay component emits close,Emit a close value from the overlay component and await modal.open(),Expect a result from a component that never emits close,if (await modal.open()) { deleteItem() },modal.open(); deleteItem(),Medium,https://ui.nuxt.com/docs/composables/use-overlay,nuxt-ui 4.11.1,active,2026-09-21
+63,Navigation,Use UCommandPalette with identified groups,"Command palette accepts groups with an id, label, and items",Give every group a stable id and its own items,Pass a flat items prop that is not part of the component API,"<UCommandPalette :groups=""[{ id: 'actions', label: 'Actions', items }]""/>","<UCommandPalette :items=""flatList""/>",Medium,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21
+64,Navigation,Use defineShortcuts with extractShortcuts,Wire keyboard shortcuts from menu item kbds automatically,extractShortcuts(items) + defineShortcuts to sync keybindings,Manually duplicate shortcuts from menu items,defineShortcuts(extractShortcuts(items)),defineShortcuts({ meta_n: () => newFile() }) // duplicated from items,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
+65,Layout,Use UHeader and UFooter for page layout,Responsive header/footer with built-in mobile menu,UHeader with #default slot for nav UFooter with columns,Custom header/footer from scratch,<UHeader><template #right><UNavigationMenu/></template></UHeader>,"<header class=""sticky top-0"">",Low,https://ui.nuxt.com/docs/components/header,nuxt-ui 4.11.1,active,2026-09-21
+66,Layout,Use UPageAside for sidebar content,Sidebar that hides below lg breakpoint automatically,UPageAside for docs and landing page sidebars,Manual hidden lg: classes,"<UPageAside><UNavigationMenu orientation=""vertical""/></UPageAside>","<aside class=""hidden lg:block"">",Low,https://ui.nuxt.com/docs/components/page-aside,nuxt-ui 4.11.1,active,2026-09-21
+67,Color Mode,Wrap custom color mode toggles in ClientOnly,Prevents hydration mismatch on server-rendered color mode,ClientOnly with fallback placeholder,Direct useColorMode in template without ClientOnly,"<ClientOnly><USwitch v-model=""isDark""/><template #fallback><div class=""size-8""/></template></ClientOnly>","<USwitch v-model=""isDark""/> directly in template",Medium,https://ui.nuxt.com/docs/getting-started/integrations/color-mode/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+68,Theming,Read generated theme file to find slot names,"Generated theme files list current slots, variants, and default classes",Check .nuxt/ui in Nuxt or node_modules/.nuxt-ui/ui in Vue before overriding slots,Guess slot names or use trial-and-error,.nuxt/ui/button.ts or node_modules/.nuxt-ui/ui/button.ts,"<UButton :ui=""{ base: 'rounded-full' }""/> without checking slots",Medium,https://ui.nuxt.com/docs/getting-started/theme/components,nuxt-ui 4.11.1,active,2026-09-21
+69,Composables,Use defineShortcuts whenever keyword shortcut,whenever array condition prevents shortcut firing when inactive,whenever: [isFormValid] to guard shortcut execution,Always-on shortcuts that fire in wrong context,"defineShortcuts({ meta_enter: { handler: submit, whenever: [isFormValid] } })",defineShortcuts({ meta_enter: () => submit() }) // fires even when invalid,Low,https://ui.nuxt.com/docs/composables/define-shortcuts,nuxt-ui 4.11.1,active,2026-09-21
+70,i18n,Use UApp locale prop for internationalization,"UApp locale configures component messages, formatting, and direction",Pass a locale object to UApp and propagate lang and dir to html,Translate built-in component strings instance by instance,"import { fr } from '@nuxt/ui/locale'; // <UApp :locale=""fr"">","<UModal title=""Fermer""> manually for each component",Low,https://ui.nuxt.com/docs/getting-started/integrations/i18n/nuxt,nuxt-ui 4.11.1,active,2026-09-21
+71,Layout,Use USplitter for resizable panel layouts,"Splitter provides horizontal, vertical, nested, and collapsible resizable panels",Define panel items with stable slots and size constraints,Reimplement drag resizing and keyboard behavior,"<USplitter id=""layout"" :items=""items"" class=""h-96"">","<div @mousemove=""resizePanels"">",Medium,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
+72,Layout,Stabilize server-rendered splitter layouts,Generated ids and mixed default sizes can cause hydration mismatches or panel jumps,Set id and give defaultSize to every item or to none; use auto-save-id for persistence,Mix items with and without defaultSize during SSR,"<USplitter id=""layout"" auto-save-id=""layout"" :items=""sizedItems"">","<USplitter :items=""mixedDefaultSizes"">",High,https://ui.nuxt.com/docs/components/splitter,nuxt-ui 4.11.1,active,2026-09-21
+73,Data,Use UProgressGroup for segmented totals,ProgressGroup displays multiple values as segments of one total with a legend,Pass labeled items and an explicit max when the total is not 100,Build a segmented progress bar from unrelated div widths,"<UProgressGroup :items=""usage"" :max=""128"" status/>","<div v-for=""item in usage"" :style=""{ width: item.value + '%' }"">",Low,https://ui.nuxt.com/docs/components/progress-group,nuxt-ui 4.11.1,active,2026-09-21
+74,Motion,Retune library motion with theme easing tokens,"Nuxt UI 4.11 uses --ease-out for enter, exit, and movement transitions",Override --ease-out in @theme to retime motion consistently,Override transition timing independently on every component,"@theme { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }",.modal { transition-timing-function: ... } repeated per component,Low,https://ui.nuxt.com/docs/getting-started/theme/design-system#motion,nuxt-ui 4.11.1,active,2026-09-21
+75,Performance,Enable component detection in Vue and Vite,The Nuxt UI Vite plugin can generate CSS only for detected components,Set experimental.componentDetection in the @nuxt/ui/vite plugin and restart after adding components,Expect newly detected component styles without restarting the dev server,ui({ experimental: { componentDetection: true } }),ui({}) // generates theme CSS for every component,Low,https://ui.nuxt.com/docs/getting-started/installation/vue#experimentalcomponentdetection,nuxt-ui 4.11.1,active,2026-09-21
+76,Security,Use Nuxt UI 4.11+ for CommandPalette search,Nuxt UI 4.11 escapes CommandPalette search highlights to prevent XSS,Upgrade @nuxt/ui to 4.11.1 or newer when rendering untrusted command labels,Render untrusted CommandPalette labels with a pre-4.11 release,pnpm add @nuxt/ui@^4.11.1,@nuxt/ui@4.10 with user-controlled command labels,High,https://ui.nuxt.com/docs/components/command-palette,nuxt-ui 4.11.1,active,2026-09-21

package/dist/assets/uiux/data/stacks/nuxtjs.csv

@@ -0,0 +1,68 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Routing,Use file-based routing,Create routes under the Nuxt 4 app pages directory,app/pages with index.vue,Configure ordinary routes manually,app/pages/dashboard/index.vue,Custom router setup,Medium,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
+2,Routing,Use dynamic route parameters,Create dynamic routes with bracket syntax under app/pages,[id].vue for dynamic params,Hardcode routes for dynamic content,app/pages/posts/[id].vue,app/pages/posts/post1.vue,Medium,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
+3,Routing,Use catch-all routes,Handle multiple path segments with [...slug] under app/pages,[...slug].vue for catch-all,Multiply nested dynamic files unnecessarily,app/pages/[...slug].vue,app/pages/[a]/[b]/[c].vue,Low,https://nuxt.com/docs/4.x/getting-started/routing,nuxtjs 4.5,active,2026-08-13
+4,Routing,Define page metadata with definePageMeta,Set page-level configuration and middleware,definePageMeta for layout middleware title,Manual route meta configuration,"definePageMeta({ layout: 'admin', middleware: 'auth' })",router.beforeEach for page config,High,https://nuxt.com/docs/4.x/api/utils/define-page-meta,nuxtjs 4.5,active,2026-08-13
+5,Routing,Use validate for route params,Validate dynamic route parameters before rendering,validate function in definePageMeta,Manual validation in setup,definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) }),if (!valid) navigateTo('/404'),Medium,https://nuxt.com/docs/4.x/api/utils/define-page-meta,nuxtjs 4.5,active,2026-08-13
+6,Rendering,Use SSR by default,Server-side rendering is enabled by default,Keep ssr: true (default),Disable SSR unnecessarily,ssr: true (default),ssr: false for all pages,High,https://nuxt.com/docs/4.x/guide/concepts/rendering,nuxtjs 4.5,active,2026-08-13
+7,Rendering,Use .client suffix for client-only components,Mark components to render only on client,ComponentName.client.vue suffix,v-if with process.client check,Comments.client.vue,"<div v-if=""process.client""><Comments/></div>",Medium,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
+8,Rendering,Use .server suffix for server-only components,Mark components to render only on server,ComponentName.server.vue suffix,Manual server check,HeavyMarkdown.server.vue,"v-if=""process.server""",Low,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
+9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,const { data } = await useFetch('/api/posts'),onMounted(async () => { data.value = await $fetch('/api/posts') }),High,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
+10,DataFetching,Use useAsyncData for complex fetching,Fine-grained control over async data,useAsyncData for CMS or custom fetching,useFetch for non-URL data sources,"const { data } = await useAsyncData('posts', () => cms.getPosts())",const { data } = await useFetch(() => cms.getPosts()),Medium,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
+11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in click handlers,"async function submit() { await $fetch('/api/submit', { method: 'POST' }) }",async function submit() { await useFetch('/api/submit') },High,https://nuxt.com/docs/4.x/api/utils/dollarfetch,nuxtjs 4.5,active,2026-08-13
+12,DataFetching,Use lazy option for non-blocking fetch,Defer data fetching for better initial load,lazy: true for below-fold content,Blocking fetch for non-critical data,"useFetch('/api/comments', { lazy: true })",await useFetch('/api/comments') for footer,Medium,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
+13,DataFetching,Use server option intentionally,Use server:false only when data depends on browser-only state,server:false for localStorage or browser APIs,Disable SSR merely because data is user-specific,"useFetch('/api/preferences', { server: false }) for browser-only input",server:false for any authenticated request,Medium,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
+14,DataFetching,Use pick to reduce payload size,Select only needed fields from response,pick option for large responses,Fetching entire objects when few fields needed,"useFetch('/api/user', { pick: ['id', 'name'] })",useFetch('/api/user') then destructure,Low,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
+15,DataFetching,Use transform for data manipulation,Transform data before storing in state,transform option for data shaping,Manual transformation after fetch,"useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })",const titles = data.value.map(p => p.title),Low,https://nuxt.com/docs/4.x/api/composables/use-fetch,nuxtjs 4.5,active,2026-08-13
+16,DataFetching,Handle loading and error states,Always handle pending and error states,Check status pending error refs,Ignoring loading states,"<div v-if=""status === 'pending'"">Loading...</div>",No loading indicator,High,https://nuxt.com/docs/4.x/getting-started/data-fetching,nuxtjs 4.5,active,2026-08-13
+17,Lifecycle,Avoid side effects in script setup root,Move side effects to lifecycle hooks,Side effects in onMounted,setInterval in root script setup,onMounted(() => { interval = setInterval(...) }),<script setup>setInterval(...)</script>,High,https://nuxt.com/docs/4.x/guide/concepts/nuxt-lifecycle,nuxtjs 4.5,active,2026-08-13
+18,Lifecycle,Use onMounted for DOM access,Access DOM only after component is mounted,onMounted for DOM manipulation,Direct DOM access in setup,onMounted(() => { document.getElementById('el') }),<script setup>document.getElementById('el')</script>,High,https://nuxt.com/docs/4.x/api/composables/on-mounted,nuxtjs 4.5,active,2026-08-13
+19,Lifecycle,Use nextTick for post-render access,Wait for DOM updates before accessing elements,await nextTick() after state changes,Immediate DOM access after state change,count.value++; await nextTick(); el.value.focus(),count.value++; el.value.focus(),Medium,https://nuxt.com/docs/4.x/api/utils/next-tick,nuxtjs 4.5,active,2026-08-13
+20,Lifecycle,Use onPrehydrate for pre-hydration logic,Run code before Nuxt hydrates the page,onPrehydrate for client setup,onMounted for hydration-critical code,onPrehydrate(() => { console.log(window) }),onMounted for pre-hydration needs,Low,https://nuxt.com/docs/4.x/api/composables/on-prehydrate,nuxtjs 4.5,active,2026-08-13
+21,Server,Use server/api for API routes,Create API endpoints in server/api directory,server/api/users.ts for /api/users,Manual Express setup,server/api/hello.ts -> /api/hello,app.get('/api/hello'),High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
+22,Server,Use defineEventHandler for handlers,Define server route handlers,defineEventHandler for all handlers,export default function,export default defineEventHandler((event) => { return { hello: 'world' } }),"export default function(req, res) {}",High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
+23,Server,Use server/routes for non-api routes,Routes without /api prefix,server/routes for custom paths,server/api for non-api routes,server/routes/sitemap.xml.ts,server/api/sitemap.xml.ts,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
+24,Server,Use getQuery and readBody for input,Access query params and request body,getQuery(event) readBody(event),Direct event access,const { id } = getQuery(event),event.node.req.query,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
+25,Server,Validate server input,Always validate input in server handlers,Zod or similar for validation,Trust client input,const body = await readBody(event); schema.parse(body),const body = await readBody(event),High,https://nuxt.com/docs/4.x/guide/directory-structure/server,nuxtjs 4.5,active,2026-08-13
+26,State,Use useState for serializable shared state,Share SSR-safe values whose contents can be serialized,useState for JSON-serializable cross-component state,Store classes functions or symbols,"const count = useState('count', () => 0)",useState('service' () => new Service()),High,https://nuxt.com/docs/4.x/api/composables/use-state,nuxtjs 4.5,active,2026-08-13
+27,State,Use unique keys for useState,Prevent state conflicts with unique keys,Descriptive unique keys for each state,Generic or duplicate keys,"useState('user-preferences', () => ({}))",useState('data') in multiple places,Medium,https://nuxt.com/docs/4.x/api/composables/use-state,nuxtjs 4.5,active,2026-08-13
+28,State,Use Pinia for complex state,Pinia for advanced state management,@pinia/nuxt for complex apps,Custom state management,useMainStore() with Pinia,Custom reactive store implementation,Medium,https://nuxt.com/docs/4.x/getting-started/state-management,nuxtjs 4.5,active,2026-08-13
+29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,await callOnce(store.fetch),await store.fetch() on every render,Medium,https://nuxt.com/docs/4.x/api/utils/call-once,nuxtjs 4.5,active,2026-08-13
+30,SEO,Use useSeoMeta for SEO tags,Type-safe SEO meta tag management,useSeoMeta for meta tags,useHead for simple meta,"useSeoMeta({ title: 'Home', ogTitle: 'Home', description: '...' })","useHead({ meta: [{ name: 'description', content: '...' }] })",High,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
+31,SEO,Use reactive values in useSeoMeta,Dynamic SEO tags with refs or getters,Computed getters for dynamic values,Static values for dynamic content,useSeoMeta({ title: () => post.value.title }),useSeoMeta({ title: post.value.title }),Medium,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
+32,SEO,Use useHead for non-meta head elements,Scripts styles links in head,useHead for scripts and links,useSeoMeta for scripts,useHead({ script: [{ src: '/analytics.js' }] }),useSeoMeta({ script: '...' }),Medium,https://nuxt.com/docs/4.x/api/composables/use-head,nuxtjs 4.5,active,2026-08-13
+33,SEO,Include OpenGraph tags,Add OG tags for social sharing,ogTitle ogDescription ogImage,Missing social preview,"useSeoMeta({ ogImage: '/og.png', twitterCard: 'summary_large_image' })",No OG configuration,Medium,https://nuxt.com/docs/4.x/api/composables/use-seo-meta,nuxtjs 4.5,active,2026-08-13
+34,Middleware,Use defineNuxtRouteMiddleware,Define route middleware under app/middleware,defineNuxtRouteMiddleware wrapper in app/middleware,Put route middleware in server/middleware,"export default defineNuxtRouteMiddleware((to, from) => {})","export default function(to, from) {}",High,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
+35,Middleware,Use navigateTo for redirects,Redirect in middleware with navigateTo,return navigateTo('/login'),router.push in middleware,if (!auth) return navigateTo('/login'),if (!auth) router.push('/login'),High,https://nuxt.com/docs/4.x/api/utils/navigate-to,nuxtjs 4.5,active,2026-08-13
+36,Middleware,Reference middleware in definePageMeta,Apply app/middleware entries to specific pages,middleware array in definePageMeta,Use global middleware for a page-specific concern,definePageMeta({ middleware: ['auth'] }),Global auth check for one page,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
+37,Middleware,Use .global suffix for global middleware,Apply named route middleware globally with .global and keep it idempotent because initial SSR middleware can run again during hydration,app/middleware/auth.global.ts with repeat-safe logic,Assume it runs exactly once,app/middleware/auth.global.ts,Increment state unconditionally on every middleware run,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware,nuxtjs 4.5,active,2026-08-13
+38,ErrorHandling,Use createError for errors,Create errors with proper status codes,createError with statusCode,throw new Error,"throw createError({ statusCode: 404, statusMessage: 'Not Found' })",throw new Error('Not Found'),High,https://nuxt.com/docs/4.x/api/utils/create-error,nuxtjs 4.5,active,2026-08-13
+39,ErrorHandling,Use NuxtErrorBoundary for local errors,Handle errors within component subtree,NuxtErrorBoundary for component errors,Global error page for local errors,"<NuxtErrorBoundary @error=""log""><template #error=""{ error }"">",error.vue for component errors,Medium,https://nuxt.com/docs/4.x/getting-started/error-handling,nuxtjs 4.5,active,2026-08-13
+40,ErrorHandling,Use clearError to recover from errors,Clear error state and optionally redirect,clearError({ redirect: '/' }),Manual error state reset,clearError({ redirect: '/home' }),error.value = null,Medium,https://nuxt.com/docs/4.x/api/utils/clear-error,nuxtjs 4.5,active,2026-08-13
+41,ErrorHandling,Use short statusMessage,Keep statusMessage brief for security,Short generic messages,Detailed error info in statusMessage,"createError({ statusCode: 400, statusMessage: 'Bad Request' })",createError({ statusMessage: 'Invalid user ID: 123' }),High,https://nuxt.com/docs/4.x/getting-started/error-handling,nuxtjs 4.5,active,2026-08-13
+42,Link,Use NuxtLink for internal navigation,Client-side navigation with prefetching,<NuxtLink to> for internal links,<a href> for internal links,"<NuxtLink to=""/about"">About</NuxtLink>","<a href=""/about"">About</a>",High,https://nuxt.com/docs/4.x/api/components/nuxt-link,nuxtjs 4.5,active,2026-08-13
+43,Link,Configure prefetch behavior,Control when prefetching occurs,prefetchOn for interaction-based,Default prefetch for low-priority,"<NuxtLink prefetch-on=""interaction"">",Always default prefetch,Low,https://nuxt.com/docs/4.x/api/components/nuxt-link,nuxtjs 4.5,active,2026-08-13
+44,Link,Use useRouter for programmatic navigation,Navigate programmatically,useRouter().push() for navigation,Direct window.location,const router = useRouter(); router.push('/dashboard'),window.location.href = '/dashboard',Medium,https://nuxt.com/docs/4.x/api/composables/use-router,nuxtjs 4.5,active,2026-08-13
+45,Link,Use navigateTo in composables,Navigate outside components,navigateTo() in middleware or plugins,useRouter in non-component code,return navigateTo('/login'),router.push in middleware,Medium,https://nuxt.com/docs/4.x/api/utils/navigate-to,nuxtjs 4.5,active,2026-08-13
+46,AutoImports,Use Nuxt auto-imports intentionally,Use auto-imported Nuxt composables and Vue APIs or explicit imports consistently,Direct use of useFetch and ref where auto-imports are enabled,Treat valid explicit Vue imports as an error,const count = ref(0),Mix unresolved globals after disabling imports,Medium,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
+47,AutoImports,Use #imports for explicit Nuxt imports,Import Nuxt-provided composables from #imports when an explicit import is useful,import useRuntimeConfig from #imports,Import Nuxt virtual composables from arbitrary package paths,import { useRuntimeConfig } from '#imports',import { useRuntimeConfig } from 'nuxt',Low,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
+48,AutoImports,Configure third-party auto-imports,Add external package auto-imports,imports.presets in nuxt.config,Manual imports everywhere,"imports: { presets: [{ from: 'vue-i18n', imports: ['useI18n'] }] }",import { useI18n } everywhere,Low,https://nuxt.com/docs/4.x/guide/concepts/auto-imports,nuxtjs 4.5,active,2026-08-13
+49,Plugins,Use defineNuxtPlugin,Define plugins properly,defineNuxtPlugin wrapper,export default function,export default defineNuxtPlugin((nuxtApp) => {}),export default function(ctx) {},High,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
+50,Plugins,Use provide for injection,Provide helpers across app,return { provide: {} } for type safety,nuxtApp.provide without types,return { provide: { hello: (name) => `Hello ${name}!` } },"nuxtApp.provide('hello', fn)",Medium,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
+51,Plugins,Use .client or .server suffix,Control plugin execution environment,plugin.client.ts for client-only,if (process.client) checks,analytics.client.ts,if (process.client) { // analytics },Medium,https://nuxt.com/docs/4.x/guide/directory-structure/plugins,nuxtjs 4.5,active,2026-08-13
+52,Environment,Use runtimeConfig for env vars,Access environment variables safely,runtimeConfig in nuxt.config,process.env directly,"runtimeConfig: { apiSecret: '', public: { apiBase: '' } }",process.env.API_SECRET in components,High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
+53,Environment,Declare keys before NUXT_ overrides,Declare every runtimeConfig key in nuxt.config before overriding it with a matching NUXT_ environment variable,Declared apiSecret and public.apiBase keys plus NUXT_API_SECRET or NUXT_PUBLIC_API_BASE,Expect an undeclared environment variable to create config,NUXT_PUBLIC_API_BASE=https://api.example.com after declaring public.apiBase,API_BASE=https://api.example.com,High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
+54,Environment,Access public config with useRuntimeConfig,Get public config in components,useRuntimeConfig().public,Direct process.env access,const config = useRuntimeConfig(); config.public.apiBase,process.env.NUXT_PUBLIC_API_BASE,High,https://nuxt.com/docs/4.x/api/composables/use-runtime-config,nuxtjs 4.5,active,2026-08-13
+55,Environment,Keep secrets in private config,Server-only secrets in runtimeConfig root,runtimeConfig.apiSecret (server only),Secrets in public config,runtimeConfig: { dbPassword: '' },runtimeConfig: { public: { dbPassword: '' } },High,https://nuxt.com/docs/4.x/guide/going-further/runtime-config,nuxtjs 4.5,active,2026-08-13
+56,Performance,Use Lazy prefix for code splitting,Lazy load components with Lazy prefix,<LazyComponent> for below-fold,Eager load all components,"<LazyMountainsList v-if=""show""/>",<MountainsList/> for hidden content,Medium,https://nuxt.com/docs/4.x/guide/directory-structure/components,nuxtjs 4.5,active,2026-08-13
+57,Performance,Use useLazyFetch for non-blocking data,Alias for useFetch with lazy: true,useLazyFetch for secondary data,useFetch for all requests,const { data } = useLazyFetch('/api/comments'),await useFetch for comments section,Medium,https://nuxt.com/docs/4.x/api/composables/use-lazy-fetch,nuxtjs 4.5,active,2026-08-13
+58,Performance,Use lazy hydration for interactivity,Delay component hydration until needed,LazyComponent with hydration strategy,Immediate hydration for all,<LazyModal hydrate-on-visible/>,<Modal/> in footer,Low,https://nuxt.com/docs/4.x/guide/going-further/experimental-features,nuxtjs 4.5,active,2026-08-13
+59,DataFetching,Use enabled for conditional async data,Gate execution reactively with the enabled option instead of branching around the composable,"enabled: computed(() => Boolean(userId.value))",Call useFetch conditionally after setup,"useFetch('/api/user', { enabled: () => Boolean(userId.value) })",if (userId.value) await useFetch('/api/user'),Medium,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
+60,DataFetching,Keep async-data handlers pure,Keep useAsyncData handlers side-effect free and use stable explicit keys,Return a value from a pure handler with consistent options,Mutate shared state or vary options for one key,"useAsyncData('posts', () => $fetch('/api/posts'))","useAsyncData('posts', async () => { store.count++; })",High,https://nuxt.com/docs/4.x/api/composables/use-async-data,nuxtjs 4.5,active,2026-08-13
+61,DataFetching,Respect SSR request boundaries,Use relative useFetch URLs to proxy safe request headers and cookies; forward only an explicit allowlist to external origins,useFetch for an internal relative URL,Assume raw $fetch forwards request context or forward every incoming header,const { data } = await useFetch('/api/profile'),"$fetch(externalUrl, { headers: useRequestHeaders() })",High,https://nuxt.com/docs/4.x/api/utils/dollarfetch,nuxtjs 4.5,active,2026-08-13
+62,State,Use useCookie for SSR-safe cookies,Read and write cookies through the SSR-aware useCookie ref with explicit security options,useCookie with sameSite secure and httpOnly where server-only,Read document.cookie during SSR,"useCookie('session', { sameSite: 'lax', secure: true })",document.cookie,High,https://nuxt.com/docs/4.x/api/composables/use-cookie,nuxtjs 4.5,active,2026-08-13
+63,Rendering,Use routeRules for per-route rendering,Configure prerender SSR SPA redirects headers or cache behavior per route in nuxt.config,routeRules with explicit path patterns,Scatter rendering decisions through components,"routeRules: { '/blog/**': { isr: 3600 } }",process.client checks for route rendering,High,https://nuxt.com/docs/4.x/guide/concepts/rendering#route-rules,nuxtjs 4.5,active,2026-08-13
+64,Configuration,Separate app config from runtime config,Use app.config for public reactive build-time app values and runtimeConfig for environment or secrets,defineAppConfig for theme and runtimeConfig for API secrets,Put secrets in app.config,"defineAppConfig({ theme: { primary: 'blue' } })","defineAppConfig({ apiSecret: process.env.API_SECRET })",High,https://nuxt.com/docs/4.x/guide/directory-structure/app/app-config,nuxtjs 4.5,active,2026-08-13
+65,State,Refresh externally changed cookies,Call refreshCookie when a cookie changes outside the useCookie ref,refreshCookie after an external auth refresh,Assume the ref observes every external change,await refreshCookie('session'),Keep stale session.value after external refresh,Medium,https://nuxt.com/docs/4.x/api/utils/refresh-cookie,nuxtjs 4.5,active,2026-08-13
+66,State,Replace shallow-watched cookie values,When cookie watch is shallow replace the top-level value to trigger serialization,Assign a new object or array,Mutate a nested property in place with watch:'shallow',"prefs.value = { ...prefs.value, theme: 'dark' }",prefs.value.theme = 'dark',Medium,https://nuxt.com/docs/4.x/api/composables/use-cookie,nuxtjs 4.5,active,2026-08-13
+67,Migration,Migrate Nuxt 3 before adding Nuxt 4 features,Nuxt 3 is end-of-life; use Nuxt 4 compatibility mode to surface directory app-config runtime-config and API changes,Enable compatibilityVersion 4 and resolve migration warnings,Keep an unmaintained Nuxt 3 app while adopting Nuxt 4-only guidance,"future: { compatibilityVersion: 4 }","// Nuxt 3 retained without an upgrade plan",High,https://nuxt.com/blog/v4-5,nuxtjs legacy 3.x,deprecated,2026-08-13

package/dist/assets/uiux/data/stacks/react-native.csv

@@ -0,0 +1,52 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Components,Use functional components,Hooks-based components are standard,Functional components with hooks,Class components,const App = () => { },class App extends Component,Medium,https://reactnative.dev/docs/intro-react,react-native 0.86.x (official active line),active,2026-08-13
+2,Components,Keep components small,Single responsibility principle,Split into smaller components,Large monolithic components,<Header /><Content /><Footer />,500+ line component,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+3,Components,Use TypeScript,Type safety for props and state,TypeScript for new projects,JavaScript without types,const Button: FC<Props> = () => { },const Button = (props) => { },Medium,,react-native 0.86.x (official active line),active,2026-08-13
+4,Components,Colocate component files,Keep related files together,Component folder with styles,Flat structure,components/Button/index.tsx styles.ts,components/Button.tsx styles/button.ts,Low,,react-native 0.86.x (official active line),active,2026-08-13
+5,Styling,Use StyleSheet.create,Optimized style objects,StyleSheet for all styles,Inline style objects,StyleSheet.create({ container: {} }),style={{ margin: 10 }},High,https://reactnative.dev/docs/stylesheet,react-native 0.86.x (official active line),active,2026-08-13
+6,Styling,Avoid inline styles,Prevent object recreation,Styles in StyleSheet,Inline style objects in render,style={styles.container},"style={{ margin: 10, padding: 5 }}",Medium,,react-native 0.86.x (official active line),active,2026-08-13
+7,Styling,Use flexbox for layout,React Native uses flexbox,flexDirection alignItems justifyContent,Absolute positioning everywhere,flexDirection: 'row',position: 'absolute' everywhere,Medium,https://reactnative.dev/docs/flexbox,react-native 0.86.x (official active line),active,2026-08-13
+8,Styling,Handle platform differences,Platform-specific styles,Platform.select or .ios/.android files,Same styles for both platforms,"Platform.select({ ios: {}, android: {} })",Hardcoded iOS values,Medium,https://reactnative.dev/docs/platform-specific-code,react-native 0.86.x (official active line),active,2026-08-13
+9,Styling,Use responsive dimensions,Scale for different screens,Dimensions or useWindowDimensions,Fixed pixel values,useWindowDimensions(),width: 375,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+10,Navigation,Use React Navigation,Standard navigation library,React Navigation for routing,Manual navigation management,createStackNavigator(),Custom navigation state,Medium,https://reactnavigation.org/,react-native 0.86.x (official active line),active,2026-08-13
+11,Navigation,Type navigation params,Type-safe navigation,Typed navigation props,Untyped navigation,"navigation.navigate<RootStackParamList>('Home', { id })","navigation.navigate('Home', { id })",Medium,,react-native 0.86.x (official active line),active,2026-08-13
+12,Navigation,Use deep linking,Support URL-based navigation,Configure linking prop,No deep link support,linking: { prefixes: [] },No linking configuration,Medium,https://reactnavigation.org/docs/deep-linking/,react-native 0.86.x (official active line),active,2026-08-13
+13,Navigation,Handle back button,Android back button handling,useFocusEffect with BackHandler,Ignore back button,BackHandler.addEventListener,No back handler,High,https://reactnative.dev/docs/backhandler,react-native 0.86.x (official active line),active,2026-08-13
+14,State,Use useState for local state,Simple component state,useState for UI state,Class component state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,,react-native 0.86.x (official active line),active,2026-08-13
+15,State,Use useReducer for complex state,Complex state logic,useReducer for related state,Multiple useState for related values,useReducer(reducer initialState),5+ useState calls,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+16,State,Use context sparingly,Context for global state,Context for theme auth locale,Context for frequently changing data,ThemeContext for app theme,Context for list item data,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+17,State,Consider Zustand or Redux,External state management,Zustand for simple Redux for complex,useState for global state,create((set) => ({ })),Prop drilling global state,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+18,Lists,Use FlatList for long lists,Virtualized list rendering,FlatList for 50+ items,ScrollView with map,<FlatList data={items} />,<ScrollView>{items.map()}</ScrollView>,High,https://reactnative.dev/docs/flatlist,react-native 0.86.x (official active line),active,2026-08-13
+19,Lists,Provide keyExtractor,Unique keys for list items,keyExtractor with stable ID,Index as key,keyExtractor={(item) => item.id},"keyExtractor={(_, index) => index}",High,https://reactnative.dev/docs/flatlist#keyextractor,react-native 0.86.x (official active line),active,2026-08-13
+20,Lists,Optimize renderItem,Memoize list item components,React.memo for list items,Inline render function,renderItem={({ item }) => <MemoizedItem item={item} />},renderItem={({ item }) => <View>...</View>},High,https://reactnative.dev/docs/optimizing-flatlist-configuration,react-native 0.86.x (official active line),active,2026-08-13
+21,Lists,Use getItemLayout for fixed height,Skip measurement for performance,getItemLayout when height known,Dynamic measurement for fixed items,"getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}",No getItemLayout for fixed height,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+22,Lists,Implement windowSize,Control render window,Smaller windowSize for memory,Default windowSize for large lists,windowSize={5},windowSize={21} for huge lists,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+23,Performance,Use React.memo,Prevent unnecessary re-renders,memo for pure components,No memoization,export default memo(MyComponent),export default MyComponent,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+24,Performance,Use useCallback for handlers,Stable function references,useCallback for props,New function on every render,"useCallback(() => {}, [deps])",() => handlePress(),Medium,,react-native 0.86.x (official active line),active,2026-08-13
+25,Performance,Use useMemo for expensive ops,Cache expensive calculations,useMemo for heavy computations,Recalculate every render,"useMemo(() => expensive(), [deps])",const result = expensive(),Medium,,react-native 0.86.x (official active line),active,2026-08-13
+26,Performance,Avoid anonymous functions in JSX,Prevent re-renders,Named handlers or useCallback,Inline arrow functions,onPress={handlePress},onPress={() => doSomething()},Medium,,react-native 0.86.x (official active line),active,2026-08-13
+27,Performance,Use bundled Hermes by default,Hermes is bundled with React Native and enabled by default,Keep the bundled Hermes default unless an explicit compatibility need requires opt-out,Opt out of Hermes by default,Use the Hermes version bundled with React Native,Override the JavaScript engine without a verified requirement,Medium,https://reactnative.dev/architecture/bundled-hermes,react-native 0.86.x (official active line),active,2026-08-13
+28,Images,Use expo-image,Modern performant image component for React Native,"Use expo-image for caching, blurring, and performance",Use default Image for heavy lists or unmaintained libraries,<Image source={url} cachePolicy='memory-disk' /> (expo-image),<FastImage source={url} />,Medium,https://docs.expo.dev/versions/latest/sdk/image/,react-native 0.86.x (official active line),active,2026-08-13
+29,Images,Specify image dimensions,Prevent layout shifts,width and height for remote images,No dimensions for network images,<Image style={{ width: 100 height: 100 }} />,<Image source={{ uri }} /> no size,High,https://reactnative.dev/docs/images#network-images,react-native 0.86.x (official active line),active,2026-08-13
+30,Images,Use resizeMode,Control image scaling,resizeMode cover contain,Stretch images,"resizeMode=""cover""",No resizeMode,Low,,react-native 0.86.x (official active line),active,2026-08-13
+31,Forms,Use controlled inputs,State-controlled form fields,value + onChangeText,Uncontrolled inputs,<TextInput value={text} onChangeText={setText} />,<TextInput defaultValue={text} />,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+32,Forms,Handle keyboard,Manage keyboard visibility,KeyboardAvoidingView,Content hidden by keyboard,"<KeyboardAvoidingView behavior=""padding"">",No keyboard handling,High,https://reactnative.dev/docs/keyboardavoidingview,react-native 0.86.x (official active line),active,2026-08-13
+33,Forms,Use proper keyboard types,Appropriate keyboard for input,keyboardType for input type,Default keyboard for all,"keyboardType=""email-address""","keyboardType=""default"" for email",Low,,react-native 0.86.x (official active line),active,2026-08-13
+34,Touch,Use Pressable,Modern touch handling,Pressable for touch interactions,TouchableOpacity for new code,<Pressable onPress={} />,<TouchableOpacity onPress={} />,Low,https://reactnative.dev/docs/pressable,react-native 0.86.x (official active line),active,2026-08-13
+35,Touch,Provide touch feedback,Visual feedback on press,Ripple or opacity change,No feedback on press,android_ripple={{ color: 'gray' }},No press feedback,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+36,Touch,Set hitSlop for small targets,Increase touch area,hitSlop for icons and small buttons,Tiny touch targets,hitSlop={{ top: 10 bottom: 10 }},44x44 with no hitSlop,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+37,Animation,Use Reanimated,High-performance animations,react-native-reanimated,Animated API for complex,useSharedValue useAnimatedStyle,Animated.timing for gesture,Medium,https://docs.swmansion.com/react-native-reanimated/,react-native 0.86.x (official active line),active,2026-08-13
+38,Animation,Run on UI thread,worklets for smooth animation,Run animations on UI thread,JS thread animations,runOnUI(() => {}),Animated on JS thread,High,https://reactnative.dev/docs/performance,react-native 0.86.x (official active line),active,2026-08-13
+39,Animation,Use gesture handler,Native gesture recognition,react-native-gesture-handler,JS-based gesture handling,<GestureDetector>,<View onTouchMove={} />,Medium,https://docs.swmansion.com/react-native-gesture-handler/,react-native 0.86.x (official active line),active,2026-08-13
+40,Async,Handle loading states,Show loading indicators,ActivityIndicator during load,Empty screen during load,{isLoading ? <ActivityIndicator /> : <Content />},No loading state,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+41,Async,Use an error boundary for rendering failures,React error boundaries replace a crashed subtree with fallback UI,Catch rendering errors at a feature boundary and provide recovery,Let a render error unmount the whole app,<ErrorBoundary fallback={<ErrorView />}><Content /></ErrorBoundary>,Render the feature tree with no error boundary,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary,react-native 0.86.x (official active line),active,2026-08-13
+42,Async,Cancel async operations,Cleanup on unmount,AbortController or cleanup,Memory leaks from async,useEffect cleanup,No cleanup for subscriptions,High,https://reactnative.dev/docs/global-AbortController,react-native 0.86.x (official active line),active,2026-08-13
+43,Accessibility,Add accessibility labels,Describe UI elements,accessibilityLabel for all interactive,Missing labels,"accessibilityLabel=""Submit form""",<Pressable> without label,High,https://reactnative.dev/docs/accessibility,react-native 0.86.x (official active line),active,2026-08-13
+44,Accessibility,Use accessibility roles,Semantic meaning,accessibilityRole for elements,Wrong roles,"accessibilityRole=""button""",No role for button,Medium,,react-native 0.86.x (official active line),active,2026-08-13
+45,Accessibility,Support screen readers,Test with TalkBack/VoiceOver,Test with screen readers,Skip accessibility testing,Regular TalkBack testing,No screen reader testing,High,https://reactnative.dev/docs/accessibility#testing-talkback-support,react-native 0.86.x (official active line),active,2026-08-13
+46,Testing,Use React Native Testing Library,Component testing,render and fireEvent,Enzyme or manual testing,render(<Component />),shallow(<Component />),Medium,https://callstack.github.io/react-native-testing-library/,react-native 0.86.x (official active line),active,2026-08-13
+47,Testing,Test on real devices,Real device behavior,Test on iOS and Android devices,Simulator only,Device testing in CI,Simulator only testing,High,https://reactnative.dev/docs/running-on-device,react-native 0.86.x (official active line),active,2026-08-13
+48,Testing,Use Detox for E2E,End-to-end testing,Detox for critical flows,Manual E2E testing,detox test,Manual testing only,Medium,https://wix.github.io/Detox/,react-native 0.86.x (official active line),active,2026-08-13
+49,Native,Use native modules carefully,Bridge has overhead,Batch native calls,Frequent bridge crossing,Batch updates,Call native on every keystroke,High,https://reactnative.dev/docs/turbo-native-modules-introduction,react-native 0.86.x (official active line),active,2026-08-13
+50,Native,Use Expo when possible,Simplified development,Expo for standard features,Bare RN for simple apps,expo install package,react-native link package,Low,https://docs.expo.dev/,react-native 0.86.x (official active line),active,2026-08-13
+51,Native,Handle permissions,Request permissions properly,Check and request permissions,Assume permissions granted,PermissionsAndroid.request(),Access without permission check,High,https://reactnative.dev/docs/permissionsandroid,react-native 0.86.x (official active line),active,2026-08-13