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

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

@@ -0,0 +1,67 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,State,Use useState for local state,Simple component state should use useState hook in current React apps.,useState for form inputs toggles counters,Class components this.state,"const [count, setCount] = useState(0)",this.state = { count: 0 },Medium,https://react.dev/reference/react/useState,react 19.2.x,active,2026-08-13
+2,State,Lift state up when needed,Share state between siblings by lifting to parent,Lift shared state to common ancestor,Prop drilling through many levels,Parent holds state passes down,Deep prop chains,Medium,https://react.dev/learn/sharing-state-between-components,react 19.2.x,active,2026-08-13
+3,State,Use useReducer for complex state,Complex state logic benefits from reducer pattern,useReducer for state with multiple sub-values,Multiple useState for related values,useReducer with action types,5+ useState calls that update together,Medium,https://react.dev/reference/react/useReducer,react 19.2.x,active,2026-08-13
+4,State,Avoid unnecessary state,Derive values from existing state when possible,Compute derived values in render,Store derivable values in state,const total = items.reduce(...),"const [total, setTotal] = useState(0)",High,https://react.dev/learn/choosing-the-state-structure,react 19.2.x,active,2026-08-13
+5,State,Initialize state lazily,Use function form for expensive initial state,useState(() => computeExpensive()),useState(computeExpensive()),useState(() => JSON.parse(data)),useState(JSON.parse(data)),Medium,https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state,react 19.2.x,active,2026-08-13
+6,Effects,Clean up effects,Return cleanup for subscriptions and timers so effects stay predictable.,Return cleanup function in useEffect,No cleanup for subscriptions,useEffect(() => { sub(); return unsub; }),useEffect(() => { subscribe(); }),High,https://react.dev/reference/react/useEffect#connecting-to-an-external-system,react 19.2.x,active,2026-08-13
+7,Effects,Specify dependencies correctly,Include every reactive value used inside an Effect dependency array.,All referenced values in dependency array,Empty deps with external references,[value] when using value in effect,[] when using props/state in effect,High,https://react.dev/reference/react/useEffect#specifying-reactive-dependencies,react 19.2.x,active,2026-08-13
+8,Effects,Avoid unnecessary effects,Avoid Effects for derived data or event handling.,Transform data during render handle events directly,useEffect for derived state or event handling,const filtered = items.filter(...),useEffect(() => setFiltered(items.filter(...))),High,https://react.dev/learn/you-might-not-need-an-effect,react 19.2.x,active,2026-08-13
+9,Effects,Use refs for non-reactive values,Store values that don't trigger re-renders in refs,useRef for interval IDs DOM elements,useState for values that don't need render,const intervalRef = useRef(null),"const [intervalId, setIntervalId] = useState()",Medium,https://react.dev/reference/react/useRef,react 19.2.x,active,2026-08-13
+10,Rendering,Use keys properly,Stable unique keys for list items,Use stable IDs as keys,Array index as key for dynamic lists,key={item.id},key={index},High,https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key,react 19.2.x,active,2026-08-13
+11,Rendering,Memoize expensive calculations,Prefer compiler-first memoization; use useMemo only for measured hotspots or explicit cache boundaries.,Use useMemo for expensive computations when profiling shows a real bottleneck,Use useMemo everywhere by default,"useMemo(() => expensive(), [deps])",const result = expensiveCalc(),Medium,https://react.dev/reference/react/useMemo,react 19.2.x,active,2026-08-13
+12,Rendering,Memoize callbacks passed to children,Use useCallback only when callback identity matters for measured child renders.,Use useCallback for handlers passed to memoized children when identity is a bottleneck,Wrap every function in useCallback by default,"useCallback(() => {}, [deps])",const handler = () => {},Medium,https://react.dev/reference/react/useCallback,react 19.2.x,active,2026-08-13
+13,Rendering,Use React.memo wisely,"Keep React.memo as a measured optimization, not a blanket default.",Use React.memo for pure components with stable props and real render cost,Memoize every component or use it as a guess,memo(ExpensiveList),memo(SimpleButton),Low,https://react.dev/reference/react/memo,react 19.2.x,active,2026-08-13
+14,Rendering,Avoid inline object/array creation in JSX,Create objects outside render or memoize,Define style objects outside component,Inline objects in props,<div style={styles.container}>,<div style={{ margin: 10 }}>,Medium,,react 19.2.x,active,2026-08-13
+15,Components,Keep components small and focused,Single responsibility for each component,One concern per component,Large multi-purpose components,<UserAvatar /><UserName />,<UserCard /> with 500 lines,Medium,,react 19.2.x,active,2026-08-13
+16,Components,Use composition over inheritance,Compose components using children and props,Use children prop for flexibility,Inheritance hierarchies,<Card>{content}</Card>,class SpecialCard extends Card,Medium,https://react.dev/learn/thinking-in-react,react 19.2.x,active,2026-08-13
+17,Components,Colocate related code,Keep related components and hooks together,Related files in same directory,Flat structure with many files,components/User/UserCard.tsx,components/UserCard.tsx + hooks/useUser.ts,Low,,react 19.2.x,active,2026-08-13
+18,Components,Use fragments to avoid extra DOM,Fragment or <> for multiple elements without wrapper,<> for grouping without DOM node,Extra div wrappers,<>{items.map(...)}</>,<div>{items.map(...)}</div>,Low,https://react.dev/reference/react/Fragment,react 19.2.x,active,2026-08-13
+19,Props,Destructure props,Destructure props for cleaner component code,Destructure in function signature,props.name props.value throughout,"function User({ name, age })",function User(props),Low,,react 19.2.x,active,2026-08-13
+20,Props,Provide default props values,Use default parameters or defaultProps,Default values in destructuring,Undefined checks throughout,function Button({ size = 'md' }),if (size === undefined) size = 'md',Low,,react 19.2.x,active,2026-08-13
+21,Props,Avoid prop drilling,Use context or composition for deeply nested data,Context for global data composition for UI,Passing props through 5+ levels,<UserContext.Provider>,<A user={u}><B user={u}><C user={u}>,Medium,https://react.dev/learn/passing-data-deeply-with-context,react 19.2.x,active,2026-08-13
+22,Props,Validate props with TypeScript,Use TypeScript interfaces for prop types,interface Props { name: string },PropTypes or no validation,interface ButtonProps { onClick: () => void },Button.propTypes = {},Medium,,react 19.2.x,active,2026-08-13
+23,Events,Use synthetic events correctly,React normalizes events across browsers,e.preventDefault() e.stopPropagation(),Access native event unnecessarily,onClick={(e) => e.preventDefault()},onClick={(e) => e.nativeEvent.preventDefault()},Low,https://react.dev/reference/react-dom/components/common#react-event-object,react 19.2.x,active,2026-08-13
+24,Events,Avoid binding in render,Use arrow functions in class or hooks,Arrow functions in functional components,bind in render or constructor,const handleClick = () => {},this.handleClick.bind(this),Medium,,react 19.2.x,active,2026-08-13
+25,Events,Pass event handlers not call results,Pass function reference not invocation,onClick={handleClick},onClick={handleClick()} causing immediate call,onClick={handleClick},onClick={handleClick()},High,https://react.dev/learn/responding-to-events,react 19.2.x,active,2026-08-13
+26,Forms,Controlled components for forms,Use state to control form inputs,value + onChange for inputs,Uncontrolled inputs with refs,<input value={val} onChange={setVal}>,<input ref={inputRef}>,Medium,https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable,react 19.2.x,active,2026-08-13
+27,Forms,Handle form submission properly,Prevent default and handle in submit handler,onSubmit with preventDefault,onClick on submit button only,<form onSubmit={handleSubmit}>,<button onClick={handleSubmit}>,Medium,,react 19.2.x,active,2026-08-13
+28,Forms,Debounce rapid input changes,Debounce search/filter inputs,useDeferredValue or debounce for search,Filter on every keystroke,useDeferredValue(searchTerm),useEffect filtering on every change,Medium,https://react.dev/reference/react/useDeferredValue,react 19.2.x,active,2026-08-13
+29,Hooks,Follow rules of hooks,Only call hooks at the top level of React components or custom hooks.,Hooks at component top level,Hooks in conditions loops or callbacks,"const [x, setX] = useState()","if (cond) { const [x, setX] = useState() }",High,https://react.dev/reference/rules/rules-of-hooks,react 19.2.x,active,2026-08-13
+30,Hooks,Custom hooks for reusable logic,Extract shared stateful logic to custom hooks,useCustomHook for reusable patterns,Duplicate hook logic across components,const { data } = useFetch(url),Duplicate useEffect/useState in components,Medium,https://react.dev/learn/reusing-logic-with-custom-hooks,react 19.2.x,active,2026-08-13
+31,Hooks,Name custom hooks with use prefix,Custom hooks must start with use,useFetch useForm useAuth,fetchData or getData for hook,function useFetch(url),function fetchData(url),High,https://react.dev/learn/reusing-logic-with-custom-hooks,react 19.2.x,active,2026-08-13
+32,Context,Use context for global data,Context for theme auth locale,Context for app-wide state,Context for frequently changing data,<ThemeContext.Provider>,Context for form field values,Medium,https://react.dev/learn/passing-data-deeply-with-context,react 19.2.x,active,2026-08-13
+33,Context,Split contexts by concern,Separate contexts for different domains,ThemeContext + AuthContext,One giant AppContext,<ThemeProvider><AuthProvider>,<AppProvider value={{theme user...}}>,Medium,,react 19.2.x,active,2026-08-13
+34,Context,Memoize context values,Prevent unnecessary re-renders with useMemo,useMemo for context value object,New object reference every render,"value={useMemo(() => ({...}), [])}","value={{ user, theme }}",High,https://react.dev/reference/react/useMemo,react 19.2.x,active,2026-08-13
+35,Performance,Use React DevTools Profiler,Profile to identify performance bottlenecks,Profile before optimizing,Optimize without measuring,React DevTools Profiler,Guessing at bottlenecks,Medium,https://react.dev/learn/react-developer-tools,react 19.2.x,active,2026-08-13
+36,Performance,Lazy load components,Use React.lazy for code splitting,lazy() for routes and heavy components,Import everything upfront,const Page = lazy(() => import('./Page')),import Page from './Page',Medium,https://react.dev/reference/react/lazy,react 19.2.x,active,2026-08-13
+37,Performance,Virtualize long lists,Use windowing for lists over 100 items,react-window or react-virtual,Render thousands of DOM nodes,<VirtualizedList items={items}/>,{items.map(i => <Item />)},High,https://react.dev/learn/rendering-lists,react 19.2.x,active,2026-08-13
+38,Performance,Batch state updates,flushSync is a rare escape hatch for synchronous DOM reads/writes.,Let React batch related updates; use flushSync only when synchronous DOM work is required,Use flushSync as a normal batching tool,setA(1); setB(2); // batched,flushSync(() => setA(1)),Low,https://react.dev/learn/queueing-a-series-of-state-updates,react 19.2.x,active,2026-08-13
+39,ErrorHandling,Use error boundaries,Catch JavaScript errors in component tree,ErrorBoundary wrapping sections,Let errors crash entire app,<ErrorBoundary><App/></ErrorBoundary>,No error handling,High,https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary,react 19.2.x,active,2026-08-13
+40,ErrorHandling,Handle async errors,Catch errors in async operations and surface failures,Handle or report caught errors,Unhandled or silently swallowed promise rejections,try { await save() } catch (error) { setError(error) },await save() // no catch,High,https://react.dev/reference/react/useEffect,react 19.2.x,active,2026-08-13
+41,Testing,Test behavior not implementation,Test what user sees and does,Test renders and interactions,Test internal state or methods,expect(screen.getByText('Hello')),expect(component.state.name),Medium,https://testing-library.com/docs/react-testing-library/intro/,react 19.2.x,active,2026-08-13
+42,Testing,Use testing-library queries,Use accessible queries,getByRole getByLabelText,getByTestId for everything,getByRole('button'),getByTestId('submit-btn'),Medium,https://testing-library.com/docs/queries/about#priority,react 19.2.x,active,2026-08-13
+43,Accessibility,Use semantic HTML,Use semantic HTML elements for their intended behavior.,button for clicks nav for navigation,div with onClick for buttons,<button onClick={...}>,<div onClick={...}>,High,https://react.dev/reference/react-dom/components#all-html-components,react 19.2.x,active,2026-08-13
+44,Accessibility,Manage focus properly,Handle focus for modals dialogs,Focus trap in modals return focus on close,No focus management,useEffect to focus input,Modal without focus trap,High,https://react.dev/reference/react/useRef,react 19.2.x,active,2026-08-13
+45,Accessibility,Announce dynamic content,Use ARIA live regions for updates,aria-live for dynamic updates,Silent updates to screen readers,"<div aria-live=""polite"">{msg}</div>",<div>{msg}</div>,Medium,,react 19.2.x,active,2026-08-13
+46,Accessibility,Label form controls,Associate labels with inputs,htmlFor matching input id,Placeholder as only label,"<label htmlFor=""email"">Email</label>","<input placeholder=""Email""/>",High,https://react.dev/reference/react-dom/components/input,react 19.2.x,active,2026-08-13
+47,TypeScript,Type component props,Define interfaces for all props,interface Props with all prop types,any or missing types,interface Props { name: string },function Component(props: any),High,https://react.dev/learn/passing-props-to-a-component,react 19.2.x,active,2026-08-13
+48,TypeScript,Type state properly,Provide types for useState,useState<Type>() for complex state,Inferred any types,useState<User | null>(null),useState(null),Medium,,react 19.2.x,active,2026-08-13
+49,TypeScript,Type event handlers,Use React event types,React.ChangeEvent<HTMLInputElement>,Generic Event type,onChange: React.ChangeEvent<HTMLInputElement>,onChange: Event,Medium,,react 19.2.x,active,2026-08-13
+50,TypeScript,Use generics for reusable components,Generic components for flexible typing,Generic props for list components,Union types for flexibility,<List<T> items={T[]}>,<List items={any[]}>,Medium,,react 19.2.x,active,2026-08-13
+51,Patterns,Container/Presentational split,Separate data logic from UI,Container fetches presentational renders,Mixed data and UI in one,<UserContainer><UserView/></UserContainer>,<User /> with fetch and render,Low,,react 19.2.x,active,2026-08-13
+52,Patterns,Render props for flexibility,Share code via render prop pattern,Render prop for customizable rendering,Duplicate logic across components,<DataFetcher render={data => ...}/>,Copy paste fetch logic,Low,https://react.dev/reference/react/cloneElement#passing-data-with-a-render-prop,react 19.2.x,active,2026-08-13
+53,Patterns,Compound components,Related components sharing state,Tab + TabPanel sharing context,Prop drilling between related,<Tabs><Tab/><TabPanel/></Tabs>,<Tabs tabs={[]} panels={[...]}/>,Low,,react 19.2.x,active,2026-08-13
+54,Performance,Use React Compiler first for memoization,React Compiler provides automatic memoization; keep manual memoization only for measured hotspots or unsupported cases.,"Enable the compiler, then use manual memoization only when profiling proves it helps","Treat useMemo, useCallback, or React.memo as the default first answer",compiler-backed build plus measured useMemo or useCallback only when needed,blanket manual memoization everywhere,High,https://react.dev/blog/2025/10/07/react-compiler-1,react 19.2.x,active,2026-08-13
+55,Tooling,Use eslint-plugin-react-hooks recommended preset,React Compiler lint rules now ship through eslint-plugin-react-hooks recommended presets.,Use the recommended hooks preset with compiler-aware linting,Pin older compiler-lint packages as the primary workflow,reactHooks.configs.flat.recommended,eslint-plugin-react-compiler as the main lint path,Medium,https://react.dev/blog/2025/10/07/react-compiler-1,react 19.2.x,active,2026-08-13
+56,Hooks,Use an Effect Event for non-reactive effect logic,Use useEffectEvent to separate event-like logic from reactive Effect dependencies.,Read latest props and state inside useEffectEvent callbacks,Use useEffectEvent to hide missing dependencies,"const onConnected = useEffectEvent(() => showNotification('Connected!', theme))","useEffect(() => { log(theme) }, [])",High,https://react.dev/reference/react/useEffectEvent,react 19.2.x,active,2026-08-13
+57,Concurrency,Use Actions with async startTransition,React 19 Actions let async state updates run as one transition and include side effects.,Wrap background state updates and async work in startTransition,Assume Actions are only for synchronous state updates,startTransition(async () => { await save(); setState(next) }),await save(); setState(next),Medium,https://react.dev/reference/react/startTransition,react 19.2.x,active,2026-08-13
+58,Components,Pass ref as a prop,React 19 supports ref as a prop; this is the current path for exposing DOM nodes.,Accept ref as a normal prop in new components,Reach for forwardRef in new code,"function Input({ ref, ...props }) { return <input ref={ref} {...props} /> }","const Input = forwardRef(function Input(props, ref) { ... })",Medium,https://react.dev/reference/react/forwardRef,react 19.2.x,active,2026-08-13
+59,Components,Avoid forwardRef in new code,forwardRef is deprecated in React 19 and should be treated as legacy compatibility code.,Migrate to ref as a prop for new and touched components,Introduce new forwardRef wrappers,legacy wrapper only while migrating older code,forwardRef for all new components,High,https://react.dev/reference/react/forwardRef,react legacy,deprecated,2026-08-13
+60,Security,Require React 19.2.1+ for RSC code paths,React Server Components had an unauthenticated RCE in 19.2.0; treat 19.2.1+ as the security floor.,Pin React RSC stacks to 19.2.1 or newer,Ship 19.2.0 or older on any RSC endpoint,react@19.2.1+ react-dom@19.2.1+,react@19.2.0,Critical,https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components,react 19.2.x,active,2026-08-13
+61,Tooling,Treat eslint-plugin-react-compiler as legacy,The React Compiler release recommends eslint-plugin-react-hooks instead of the older compiler-only lint package.,Use eslint-plugin-react-hooks recommended presets,Standardize on eslint-plugin-react-compiler,plugin:react-hooks/recommended,eslint-plugin-react-compiler,Medium,https://react.dev/blog/2025/10/07/react-compiler-1,react legacy,deprecated,2026-08-13
+62,Forms,Use useActionState for Action state,Track the result and pending status of a side-effecting Action.,Pass its dispatch to a form action or call it inside startTransition,Call the returned dispatch directly outside an Action,<form action={formAction}>...</form>,formAction(formData) // outside an Action,High,https://react.dev/reference/react/useActionState,react 19.2.x,active,2026-09-21
+63,Forms,Call useFormStatus from a form child,Reads submission status from the nearest parent form.,Call it in a child rendered inside the form,Call it in the component that renders the form,function Submit(){ const { pending } = useFormStatus(); return <button disabled={pending}>Save</button> },function Form(){ const { pending } = useFormStatus(); return <form>...</form> },High,https://react.dev/reference/react-dom/hooks/useFormStatus,react 19.2.x,active,2026-09-21
+64,Hooks,Use use() with stable promises or context,Reads context or suspends on a promise until it resolves.,Pass a cached or otherwise stable promise to use(),Create a new promise during render,const data = use(dataPromise),const data = use(fetch('/api/data')),Medium,https://react.dev/reference/react/use,react 19.2.x,active,2026-09-21
+65,Concurrency,Call useOptimistic updates inside an Action,Temporarily shows the expected state while an Action is pending.,Call the optimistic setter inside startTransition or an action prop,Call the optimistic setter outside an Action,startTransition(async () => { addOptimistic(item); await save(item); }),addOptimistic(item); await save(item),Medium,https://react.dev/reference/react/useOptimistic,react 19.2.x,active,2026-09-21
+66,Forms,Use form actions for Action-based submissions,Passing a function to action runs it in a Transition; Server Functions can progressively enhance forms.,Use a Server Function with useActionState when submission must work before hydration,Claim progressive enhancement for a client-only action,<form action={serverAction}>...</form>,<form action={clientAction}>...</form> // requires JavaScript,Medium,https://react.dev/reference/react-dom/components/form,react 19.2.x,active,2026-09-21

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

@@ -0,0 +1,69 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Setup,Use CLI for installation,Use CLI v4 to resolve the selected base dependencies and registry items,npx shadcn@latest add component-name,Bypass CLI resolution with stale copied code,npx shadcn@latest add button,Copy an old component implementation,High,https://ui.shadcn.com/docs/cli,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add components directly,npx shadcn@latest init,npx shadcn@latest add button (without init),High,https://ui.shadcn.com/docs/installation,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+3,Setup,Configure path aliases,Set up proper import aliases in tsconfig and components.json,Use @/components/ui path aliases,Relative imports like ../../components,"import { Button } from ""@/components/ui/button""","import { Button } from ""../../components/ui/button""",Medium,https://ui.shadcn.com/docs/installation,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+4,Theming,Use CSS variables for colors,Define semantic OKLCH variables in globals.css and expose them to Tailwind v4 with @theme inline,:root and .dark variables plus @theme inline mappings,Hardcode palette colors in components,"@theme inline { --color-primary: var(--primary); }",bg-blue-500 text-white,High,https://ui.shadcn.com/docs/theming,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+5,Theming,Follow semantic color pairs,Pair each semantic surface token with its foreground token,primary and primary-foreground; secondary and secondary-foreground,Use generic visual names that hide intent,--primary and --primary-foreground,--blue and --light-blue,Medium,https://ui.shadcn.com/docs/theming,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+6,Theming,Support dark mode,Override semantic OKLCH variables under .dark for every custom theme token,Define complete :root and .dark semantic schemes,Keep legacy space-separated HSL snippets or omit dark tokens,.dark { --background: oklch(0.145 0 0); },.dark { --background: 240 10% 3.9%; },High,https://ui.shadcn.com/docs/dark-mode,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+7,Components,Use component variants,Leverage cva variants for consistent styling,Use variant prop for different styles,Inline conditional classes,"<Button variant=""destructive"">","<Button className={isError ? ""bg-red-500"" : ""bg-blue-500""}>",Medium,https://ui.shadcn.com/docs/components/button,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+8,Components,Compose with className,Add custom classes via className prop for overrides,Extend with className for one-off customizations,Modify component source directly,"<Button className=""w-full"">",Edit button.tsx to add w-full,Medium,https://ui.shadcn.com/docs/components/button,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+9,Components,Use size variants consistently,Apply size prop for consistent sizing across components,"size=""sm"" size=""lg"" for sizing",Mix size classes inconsistently,"<Button size=""lg"">","<Button className=""text-lg px-8 py-4"">",Medium,https://ui.shadcn.com/docs/components/button,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+10,Components,Prefer compound components,Use provided sub-components for complex UI,Card + CardHeader + CardContent pattern,Single component with many props,<Card><CardHeader><CardTitle>,"<Card title=""x"" content=""y"" footer=""z"">",Medium,https://ui.shadcn.com/docs/components/card,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+11,Dialog,Use Dialog for modal content,Dialog component for overlay modal windows,Dialog for confirmations forms details,Alert for modal content,<Dialog><DialogContent>,<Alert> styled as modal,High,https://ui.shadcn.com/docs/components/dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+12,Dialog,Handle dialog state properly,Use open and onOpenChange for controlled dialogs,Controlled state with useState,Uncontrolled with default open only,<Dialog open={open} onOpenChange={setOpen}>,<Dialog defaultOpen={true}>,Medium,https://ui.shadcn.com/docs/components/dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+13,Dialog,Include proper dialog structure,Use DialogHeader DialogTitle DialogDescription,Complete semantic structure,Missing title or description,<DialogHeader><DialogTitle><DialogDescription>,<DialogContent><p>Content</p></DialogContent>,High,https://ui.shadcn.com/docs/components/dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+14,Sheet,Use Sheet for side panels,Sheet component for slide-out panels and drawers,Sheet for navigation filters settings,Dialog for side content,"<Sheet side=""right"">",<Dialog> with slide animation,Medium,https://ui.shadcn.com/docs/components/sheet,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+15,Sheet,Specify sheet side,Set side prop for sheet slide direction,"Explicit side=""left"" or side=""right""",Default side without consideration,"<Sheet><SheetContent side=""left"">",<Sheet><SheetContent>,Low,https://ui.shadcn.com/docs/components/sheet,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+16,Form,React Hook Form integration,Use a native form with React Hook Form Controller and shadcn Field primitives,useForm + Controller + Field,Depend on the retired FormField-only abstraction,<Controller render={({ field }) => <Field><Input {...field}/></Field>}/>,<FormField control={form.control}>,High,https://ui.shadcn.com/docs/forms/react-hook-form,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+17,Form,Use Field for input structure,Compose Field Label and Control for accessible form structure,Field + FieldLabel + Input,Unlabeled input or stale FormItem wrapper,<Field><FieldLabel htmlFor='email'>Email</FieldLabel><Input id='email'/></Field>,<Input placeholder='Email'/>,High,https://ui.shadcn.com/docs/components/field,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+18,Form,Display field errors,Render validation messages with FieldError,FieldError with controller fieldState errors,Unassociated custom error text,<FieldError errors={[fieldState.error]}/>,<span>{error.message}</span>,Medium,https://ui.shadcn.com/docs/components/field,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+19,Form,Use schema validation,Use a Standard Schema compatible validator such as Zod where it adds value,Zod schema with resolver or form adapter,Assume Zod is the only supported validator,zodResolver(formSchema),Hand-written divergent client rules,Medium,https://ui.shadcn.com/docs/forms,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+20,Select,Use Select for dropdowns,Select component for option selection,Select for choosing from list,Native select element,<Select><SelectTrigger><SelectContent>,<select><option>,Medium,https://ui.shadcn.com/docs/components/select,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+21,Select,Structure Select properly,Include Trigger Value Content and Items,Complete Select structure,Missing SelectValue or SelectContent,<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>,<Select><option>,High,https://ui.shadcn.com/docs/components/select,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+22,Command,Use Command for search,Command component for searchable lists and palettes,Command for command palette search,Input with custom dropdown,<Command><CommandInput><CommandList>,"<Input><div className=""dropdown"">",Medium,https://ui.shadcn.com/docs/components/command,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+23,Command,Group command items,Use CommandGroup for categorized items,CommandGroup with heading for sections,Flat list without grouping,"<CommandGroup heading=""Suggestions""><CommandItem>",<CommandItem> without groups,Low,https://ui.shadcn.com/docs/components/command,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+24,Table,Use Table for data display,Table component for structured data,Table for tabular data display,Div grid for table-like layouts,<Table><TableHeader><TableBody><TableRow>,"<div className=""grid"">",Medium,https://ui.shadcn.com/docs/components/table,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+25,Table,Include proper table structure,Use TableHeader TableBody TableRow TableCell,Semantic table structure,Missing thead or tbody,<TableHeader><TableRow><TableHead>,<Table><TableRow> without header,High,https://ui.shadcn.com/docs/components/table,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+26,DataTable,Use DataTable for complex tables,Combine Table with TanStack Table for features,DataTable pattern for sorting filtering pagination,Custom table implementation,useReactTable + Table components,Custom sort filter pagination logic,Medium,https://ui.shadcn.com/docs/components/data-table,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+27,Tabs,Use Tabs for content switching,Tabs component for tabbed interfaces,Tabs for related content sections,Custom tab implementation,<Tabs><TabsList><TabsTrigger><TabsContent>,<div onClick={() => setTab(...)},Medium,https://ui.shadcn.com/docs/components/tabs,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+28,Tabs,Set default tab value,Specify defaultValue for initial tab,defaultValue on Tabs component,No default leaving first tab,"<Tabs defaultValue=""account"">",<Tabs> without defaultValue,Low,https://ui.shadcn.com/docs/components/tabs,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+29,Accordion,Use Accordion for collapsible,Accordion for expandable content sections,Accordion for FAQ settings panels,Custom collapse implementation,<Accordion><AccordionItem><AccordionTrigger>,<div onClick={() => setOpen(!open)}>,Medium,https://ui.shadcn.com/docs/components/accordion,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+30,Accordion,Choose accordion type,"Use type=""single"" or type=""multiple"" appropriately","type=""single"" for one open type=""multiple"" for many",Default type without consideration,"<Accordion type=""single"" collapsible>",<Accordion> without type,Low,https://ui.shadcn.com/docs/components/accordion,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+31,Toast,Use Sonner for toasts,Sonner integration for toast notifications,toast() from sonner for notifications,Custom toast implementation,"toast(""Event created"")",setShowToast(true),Medium,https://ui.shadcn.com/docs/components/sonner,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+32,Toast,Add Toaster to layout,Include Toaster component in root layout,<Toaster /> in app layout,Toaster in individual pages,app/layout.tsx: <Toaster />,page.tsx: <Toaster />,High,https://ui.shadcn.com/docs/components/sonner,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+33,Toast,Use toast variants,Apply toast.success toast.error for context,Semantic toast methods,Generic toast for all messages,"toast.success(""Saved!"") toast.error(""Failed"")","toast(""Saved!"") toast(""Failed"")",Medium,https://ui.shadcn.com/docs/components/sonner,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+34,Popover,Use Popover for floating content,Popover for dropdown menus and floating panels,Popover for contextual actions,Absolute positioned divs,<Popover><PopoverTrigger><PopoverContent>,"<div className=""relative""><div className=""absolute"">",Medium,https://ui.shadcn.com/docs/components/popover,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+35,Popover,Handle popover alignment,Use align and side props for positioning,Explicit alignment configuration,Default alignment for all,"<PopoverContent align=""start"" side=""bottom"">",<PopoverContent>,Low,https://ui.shadcn.com/docs/components/popover,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+36,DropdownMenu,Use DropdownMenu for actions,DropdownMenu for action lists and context menus,DropdownMenu for user menu actions,Popover for action lists,<DropdownMenu><DropdownMenuTrigger><DropdownMenuContent>,<Popover> for menu actions,Medium,https://ui.shadcn.com/docs/components/dropdown-menu,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+37,DropdownMenu,Group menu items,Use DropdownMenuGroup and DropdownMenuSeparator,Organized menu with separators,Flat list of items,<DropdownMenuGroup><DropdownMenuItem><DropdownMenuSeparator>,<DropdownMenuItem> without organization,Low,https://ui.shadcn.com/docs/components/dropdown-menu,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+38,Tooltip,Use Tooltip for hints,Tooltip for icon buttons and truncated text,Tooltip for additional context,Title attribute for tooltips,<Tooltip><TooltipTrigger><TooltipContent>,"<button title=""Delete"">",Medium,https://ui.shadcn.com/docs/components/tooltip,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+39,Tooltip,Add TooltipProvider,Wrap app or section in TooltipProvider,TooltipProvider at app level,TooltipProvider per tooltip,<TooltipProvider><App/></TooltipProvider>,<Tooltip><TooltipProvider>,High,https://ui.shadcn.com/docs/components/tooltip,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+40,Skeleton,Use Skeleton for loading,Skeleton component for loading placeholders,Skeleton matching content layout,Spinner for content loading,"<Skeleton className=""h-4 w-[200px]""/>",<Spinner/> for card loading,Medium,https://ui.shadcn.com/docs/components/skeleton,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+41,Skeleton,Match skeleton dimensions,Size skeleton to match loaded content,Skeleton same size as expected content,Generic skeleton size,"<Skeleton className=""h-12 w-12 rounded-full""/>",<Skeleton/> without sizing,Medium,https://ui.shadcn.com/docs/components/skeleton,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+42,AlertDialog,Use AlertDialog for confirms,AlertDialog for destructive action confirmation,AlertDialog for delete confirmations,Dialog for confirmations,<AlertDialog><AlertDialogTrigger><AlertDialogContent>,<Dialog> for delete confirmation,High,https://ui.shadcn.com/docs/components/alert-dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+43,AlertDialog,Include action buttons,Use AlertDialogAction and AlertDialogCancel,Standard confirm/cancel pattern,Custom buttons in AlertDialog,<AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>,<Button>Cancel</Button><Button>Confirm</Button>,Medium,https://ui.shadcn.com/docs/components/alert-dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+44,Sidebar,Use Sidebar for navigation,Sidebar component for app navigation,Sidebar for main app navigation,Custom sidebar implementation,<SidebarProvider><Sidebar><SidebarContent>,"<div className=""w-64 fixed"">",Medium,https://ui.shadcn.com/docs/components/sidebar,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+45,Sidebar,Wrap in SidebarProvider,Use SidebarProvider for sidebar state management,SidebarProvider at layout level,Sidebar without provider,<SidebarProvider><Sidebar></SidebarProvider>,<Sidebar> without provider,High,https://ui.shadcn.com/docs/components/sidebar,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+46,Sidebar,Use SidebarTrigger,Include SidebarTrigger for mobile toggle,SidebarTrigger for responsive toggle,Custom toggle button,<SidebarTrigger/>,<Button onClick={() => toggleSidebar()}>,Medium,https://ui.shadcn.com/docs/components/sidebar,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+47,Chart,Use Chart for data viz,Chart component with Recharts integration,Chart component for dashboards,Direct Recharts without wrapper,<ChartContainer config={chartConfig}>,<ResponsiveContainer><BarChart>,Medium,https://ui.shadcn.com/docs/components/chart,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+48,Chart,Define chart config,Create chartConfig for consistent theming,chartConfig with color definitions,Inline colors in charts,"{ desktop: { label: ""Desktop"", color: ""#2563eb"" } }","<Bar fill=""#2563eb""/>",Medium,https://ui.shadcn.com/docs/components/chart,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+49,Chart,Use ChartTooltip,Apply ChartTooltip for interactive charts,ChartTooltip with ChartTooltipContent,Recharts Tooltip directly,<ChartTooltip content={<ChartTooltipContent/>}/>,<Tooltip/> from recharts,Low,https://ui.shadcn.com/docs/components/chart,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@latest add login-01,Custom login page from scratch,Medium,https://ui.shadcn.com/blocks,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+51,Blocks,Customize block components,Modify copied block code to fit needs,Edit block files after installation,Use blocks without modification,Customize dashboard-01 layout,Use dashboard-01 as-is,Low,https://ui.shadcn.com/blocks,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+52,A11y,Use semantic components,Shadcn components have built-in ARIA,Rely on component accessibility,Override ARIA attributes,<Button> has button role,"<div role=""button"">",High,https://ui.shadcn.com/docs/components/button,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+53,A11y,Maintain focus management,Dialog Sheet handle focus automatically,Let components manage focus,Custom focus handling,<Dialog> traps focus,document.querySelector().focus(),High,https://ui.shadcn.com/docs/components/dialog,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+54,A11y,Provide labels,Use FieldLabel or an explicit accessible name,Associate visible labels with form controls,Placeholder as only label,<FieldLabel htmlFor='email'>Email</FieldLabel><Input id='email'/>,"<Input placeholder=""Email""/>",High,https://ui.shadcn.com/docs/components/field,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+55,Performance,Import components individually,Import only needed components,Named imports from component files,Import all from index,"import { Button } from ""@/components/ui/button""","import { Button Card Dialog } from ""@/components/ui""",Medium,,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+56,Performance,Lazy load dialogs,Dynamic import for heavy dialog content,React.lazy for dialog content,Import all dialogs upfront,const HeavyContent = lazy(() => import('./Heavy')),import HeavyContent from './Heavy',Medium,,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+57,Customization,Extend variants with cva,Add new variants using class-variance-authority,Extend buttonVariants for new styles,Inline classes for variants,"variants: { size: { xl: ""h-14 px-8"" } }","className=""h-14 px-8""",Medium,https://ui.shadcn.com/docs/components/button,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+58,Customization,Create custom components,Build new components following shadcn patterns,Use cn() and cva for custom components,Different patterns for custom,"const Custom = ({ className }) => <div className={cn(""base"" className)}>",const Custom = ({ style }) => <div style={style}>,Medium,,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+59,Patterns,Use asChild for Radix composition,Radix-based components support asChild for polymorphic composition,Use asChild only when the installed Radix component exposes it,Assume Base UI or React Aria components share the Radix API,"<Button asChild><Link href=""/"">","<Button><Link href=""/""></Link></Button>",Medium,https://ui.shadcn.com/docs/components/radix/button,shadcn cli 4; base=radix,active,2026-08-13
+60,Form,TanStack Form integration,Use TanStack Form field adapters with shadcn Field primitives when that form library is selected,form.Field + Field + FieldError,Apply React Hook Form Controller APIs to TanStack Form,<form.Field name='email'>{field => <Field><Input value={field.state.value}/></Field>}</form.Field>,<Controller control={form.control}/>,High,https://ui.shadcn.com/docs/forms/tanstack-form,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+61,Setup,Select an explicit component base,CLI v4 supports base radix and aria; Base UI is the new-project default while existing projects retain their base,Pin --base in non-interactive automation,Infer that an existing Radix project must migrate,npx shadcn@latest init --base aria,Assume every base supports asChild,High,https://ui.shadcn.com/docs/cli#init,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+62,Registry,Use base and font registry item types,Publish base primitives as registry:base and fonts as registry:font so CLI v4 applies them correctly,Explicit registry item types,Publish every artifact as registry:ui,"type: 'registry:base' or type: 'registry:font'","type: 'registry:ui' for a base definition",Medium,https://ui.shadcn.com/docs/registry/registry-item-json,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+63,Registry,Inspect CLI changes before writing,Use CLI v4 dry-run diff and view plus info and docs to inspect project and registry state,npx shadcn@latest add button --dry-run,Blindly overwrite customized components,npx shadcn@latest add button --diff,npx shadcn@latest add button without review,High,https://ui.shadcn.com/docs/cli#add,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+64,Registry,Install public GitHub registries directly,A public repository with root registry.json can be addressed as owner/repo/item,npx shadcn@latest add owner/repo/item,Require a separately hosted generated registry,npx shadcn@latest add acme/ui/button,Copy raw GitHub source files,Medium,https://ui.shadcn.com/docs/registry/getting-started,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+65,Setup,Use CLI presets and apply workflows,Use CLI v4 preset and apply for repeatable project configuration,npx shadcn@latest preset then apply,Manually reproduce a saved project setup,npx shadcn@latest apply <preset>,Copy configuration by hand,Medium,https://ui.shadcn.com/docs/cli,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+66,Registry,Keep registry source declarations,Configure namespaced registry URLs and required headers in components.json,Use registries map with environment variables,Hardcode private registry secrets in source,"registries: { '@acme': { url: '${REGISTRY_URL}/{name}.json' } }",Commit bearer tokens,High,https://ui.shadcn.com/docs/registry/namespace,shadcn cli 4; base=base|radix|aria,active,2026-08-13
+67,Patterns,Preserve React Aria link semantics,Style a semantic anchor with buttonVariants when navigation is intended,Use an anchor for a link and a button for an action,Render a React Aria Button that masquerades as a link,"<a href=""/docs"" className={buttonVariants()}>Docs</a>",<Button onPress={() => navigate('/docs')}>Docs</Button>,High,https://ui.shadcn.com/docs/components/aria/button,shadcn cli 4; base=aria,active,2026-08-13
+68,Patterns,Use render for Base UI composition,Base UI components compose another element through the render prop rather than Radix asChild,Use render with the intended semantic element,Pass the Radix-only asChild prop to a Base UI component,"<Button render={<a href=""/docs"" />}>Docs</Button>","<Button asChild><a href=""/docs"">Docs</a></Button>",High,https://ui.shadcn.com/docs/components/base/button,shadcn cli 4; base=base,active,2026-08-13

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

@@ -0,0 +1,56 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Reactivity,Use $: for reactive statements,Legacy-mode automatic dependency tracking,$: only while maintaining a legacy-mode component,Use $: in new runes-mode code,$: doubled = count * 2,let doubled = $derived(count * 2),Medium,https://svelte.dev/docs/svelte/legacy-reactive-assignments,svelte legacy <=4,deprecated,2026-08-13
+2,Reactivity,Trigger legacy reactivity with assignment,Legacy-mode reactivity tracks assignments,Reassign arrays or objects in legacy mode,Treat assignment as the Svelte 5 runes contract,"items = [...items, newItem]",let items = $state([]),High,https://svelte.dev/docs/svelte/legacy-let,svelte legacy <=4,deprecated,2026-08-13
+3,Reactivity,Use $state in Svelte 5,Runes for explicit reactivity,let count = $state(0),Implicit reactivity in Svelte 5,let count = $state(0),let count = 0 (Svelte 5),Medium,https://svelte.dev/blog/runes,svelte 5,active,2026-08-13
+4,Reactivity,Use $derived for computed values,$derived replaces $: in Svelte 5,let doubled = $derived(count * 2),$: in Svelte 5,let doubled = $derived(count * 2),$: doubled = count * 2 (Svelte 5),Medium,,svelte 5,active,2026-08-13
+5,Reactivity,Use $effect for side effects,$effect replaces $: side effects,Use $effect for subscriptions,$: for side effects in Svelte 5,$effect(() => console.log(count)),$: console.log(count) (Svelte 5),Medium,,svelte 5,active,2026-08-13
+6,Props,Use export let for legacy props,Declare props with export let only in legacy mode,Retain export let while maintaining legacy components,Introduce export let in new runes-mode components,export let count = 0,let { count = 0 } = $props(),High,https://svelte.dev/docs/svelte/legacy-export-let,svelte legacy <=4,deprecated,2026-08-13
+7,Props,Use $props in Svelte 5,$props rune for prop access,let { name } = $props(),export let in Svelte 5,"let { name, age = 0 } = $props()",export let name; export let age = 0,Medium,,svelte 5,active,2026-08-13
+8,Props,Provide prop default values,Destructure defaults from $props,Use defaults in $props destructuring,Add separate fallback mutation,let { count = 0 } = $props(),let { count } = $props(); count ??= 0,Low,https://svelte.dev/docs/svelte/$props,svelte 5,active,2026-08-13
+9,Props,Use rest props in runes mode,Pass through unknown props with $props rest destructuring,Spread a rest object onto the element,Use legacy $$restProps,"let { class: className, ...rest } = $props(); <button {...rest}>",<button {...$$restProps}>,Low,https://svelte.dev/docs/svelte/$props,svelte 5,active,2026-08-13
+10,Bindings,Use bind: for two-way binding,Simplified input handling,bind:value for inputs,on:input with manual update,<input bind:value={name}>,<input value={name} on:input={e => name = e.target.value}>,Low,https://svelte.dev/docs/element-directives#bind-property,svelte 5,active,2026-08-13
+11,Bindings,Bind to DOM elements,Reference DOM nodes,bind:this for element reference,querySelector in onMount,<div bind:this={el}>,onMount(() => el = document.querySelector()),Medium,,svelte 5,active,2026-08-13
+12,Bindings,Use bind:group for radios/checkboxes,Simplified group handling,bind:group for radio/checkbox groups,Manual checked handling,"<input type=""radio"" bind:group={selected}>","<input type=""radio"" checked={selected === value}>",Low,,svelte 5,active,2026-08-13
+13,Events,Use on: for legacy event handlers,Event directive syntax for legacy components,on:click only while maintaining legacy mode,Introduce on: handlers in runes mode,<button on:click={handleClick}>,<button onclick={handleClick}>,Medium,https://svelte.dev/docs/svelte/legacy-on,svelte legacy <=4,deprecated,2026-08-13
+14,Events,Forward events with on:event in legacy mode,Legacy event forwarding without a handler,on:click only for a legacy component,Use legacy forwarding in runes mode,<button on:click>,<button onclick={onclick}>,Low,https://svelte.dev/docs/svelte/legacy-on,svelte legacy <=4,deprecated,2026-08-13
+15,Events,Use createEventDispatcher only in legacy components,Legacy custom component events,Retain dispatch while maintaining legacy components,Add createEventDispatcher to new runes-mode code,"dispatch('save', { data })",let { onsave } = $props(),Medium,https://svelte.dev/docs/svelte/svelte#createeventdispatcher,svelte legacy <=4,deprecated,2026-08-13
+16,Lifecycle,Use onMount for initialization,Run code after component mounts,onMount for setup and data fetching,Code in script body for side effects,onMount(() => fetchData()),fetchData() in script body,High,https://svelte.dev/docs/svelte#onmount,svelte 5,active,2026-08-13
+17,Lifecycle,Return cleanup from onMount,Automatic cleanup on destroy,Return function from onMount,Separate onDestroy for paired cleanup,onMount(() => { sub(); return unsub }),onMount(sub); onDestroy(unsub),Medium,,svelte 5,active,2026-08-13
+18,Lifecycle,Use onDestroy sparingly,Only when onMount cleanup not possible,onDestroy for non-mount cleanup,onDestroy for mount-related cleanup,onDestroy for store unsubscribe,onDestroy(() => clearInterval(id)),Low,,svelte 5,active,2026-08-13
+19,Lifecycle,Avoid beforeUpdate and afterUpdate,Legacy lifecycle hooks are unavailable in runes mode,Use $effect.pre and $effect only when synchronization is required,Use lifecycle hooks or reactive assignments for derived state,$effect.pre(() => measure()),beforeUpdate(() => measure()),Low,https://svelte.dev/docs/svelte/lifecycle-hooks,svelte 5,active,2026-08-13
+20,Stores,Use writable for mutable state,Basic reactive store,writable for shared mutable state,Local variables for shared state,const count = writable(0),let count = 0 in module,Medium,https://svelte.dev/docs/svelte-store#writable,svelte 5,active,2026-08-13
+21,Stores,Use readable for read-only state,External data sources,readable for derived/external data,writable for read-only data,"readable(0, set => interval(set))",writable(0) for timer,Low,https://svelte.dev/docs/svelte-store#readable,svelte 5,active,2026-08-13
+22,Stores,Use derived for computed stores,Combine or transform stores,derived for computed values,Manual subscription for derived,"derived(count, $c => $c * 2)",count.subscribe(c => doubled = c * 2),Medium,https://svelte.dev/docs/svelte-store#derived,svelte 5,active,2026-08-13
+23,Stores,Use $ prefix for auto-subscription,Automatic subscribe/unsubscribe,$storeName in components,Manual subscription,{$count},count.subscribe(c => value = c),High,https://svelte.dev/docs/svelte/stores,svelte 5,active,2026-08-13
+24,Stores,Clean up custom subscriptions,Unsubscribe when component destroys,Return unsubscribe from onMount,Leave subscriptions open,onMount(() => store.subscribe(fn)),store.subscribe(fn) in script,High,https://svelte.dev/docs/svelte/stores,svelte 5,active,2026-08-13
+25,Slots,Use slots for legacy composition,Legacy content projection with slot elements,Retain slots while maintaining legacy components,Introduce slot elements in runes-mode components,<slot>Default</slot>,{@render children()},Medium,https://svelte.dev/docs/svelte/legacy-slots,svelte legacy <=4,deprecated,2026-08-13
+26,Slots,Use named slots for legacy areas,Legacy composition with multiple slot elements,Retain named slots only in legacy components,Add named slots to new runes-mode code,"<slot name=""header"">",{@render header()},Low,https://svelte.dev/docs/svelte/legacy-slots,svelte legacy <=4,deprecated,2026-08-13
+27,Slots,Check slot content with $$slots in legacy mode,Legacy conditional slot rendering,Retain $$slots only in legacy components,Use $$slots in runes mode,"{#if $$slots.footer}<slot name=""footer""/>{/if}","{#if footer}{@render footer()}{/if}",Low,https://svelte.dev/docs/svelte/legacy-$$slots,svelte legacy <=4,deprecated,2026-08-13
+28,Styling,Use scoped styles by default,Styles scoped to component,<style> for component styles,Global styles for component,:global() only when needed,<style> all global,Medium,https://svelte.dev/docs/svelte-components#style,svelte 5,active,2026-08-13
+29,Styling,Use :global() sparingly,Escape scoping when needed,:global for third-party styling,Global for all styles,:global(.external-lib),<style> without scoping,Medium,,svelte 5,active,2026-08-13
+30,Styling,Use CSS variables for theming,Dynamic styling,CSS custom properties,Inline styles for themes,"style=""--color: {color}""","style=""color: {color}""",Low,,svelte 5,active,2026-08-13
+31,Transitions,Use built-in transitions,Svelte transition directives,transition:fade for simple effects,Manual CSS transitions,<div transition:fade>,<div class:fade={visible}>,Low,https://svelte.dev/docs/element-directives#transition-fn,svelte 5,active,2026-08-13
+32,Transitions,Use in: and out: separately,Different enter/exit animations,in:fly out:fade for asymmetric,Same transition for both,<div in:fly out:fade>,<div transition:fly>,Low,,svelte 5,active,2026-08-13
+33,Transitions,Add local modifier,Prevent ancestor trigger,transition:fade|local,Global transitions for lists,<div transition:slide|local>,<div transition:slide>,Medium,,svelte 5,active,2026-08-13
+34,Actions,Use actions for DOM behavior,Reusable DOM logic,use:action for DOM enhancements,onMount for each usage,<div use:clickOutside>,onMount(() => setupClickOutside(el)),Medium,https://svelte.dev/docs/element-directives#use-action,svelte 5,active,2026-08-13
+35,Actions,Return update and destroy,Lifecycle methods for actions,"Return { update, destroy }",Only initial setup,"return { update(params) {}, destroy() {} }",return destroy only,Medium,,svelte 5,active,2026-08-13
+36,Actions,Pass parameters to actions,Configure action behavior,use:action={params},Hardcoded action behavior,<div use:tooltip={options}>,<div use:tooltip>,Low,,svelte 5,active,2026-08-13
+37,Logic,Use {#if} for conditionals,Template conditionals,{#if} {:else if} {:else},Ternary in expressions,{#if cond}...{:else}...{/if},{cond ? a : b} for complex,Low,https://svelte.dev/docs/logic-blocks#if,svelte 5,active,2026-08-13
+38,Logic,Use {#each} for lists,List rendering,{#each} with key,Map in expression,{#each items as item (item.id)},{items.map(i => `<div>${i}</div>`)},Medium,,svelte 5,active,2026-08-13
+39,Logic,Always use keys in {#each},Proper list reconciliation,(item.id) for unique key,Index as key or no key,{#each items as item (item.id)},"{#each items as item, i (i)}",High,https://svelte.dev/docs/svelte/each,svelte 5,active,2026-08-13
+40,Logic,Use {#await} for promises,Handle async states,{#await} for loading/error states,Manual promise handling,{#await promise}...{:then}...{:catch},{#if loading}...{#if error},Medium,https://svelte.dev/docs/logic-blocks#await,svelte 5,active,2026-08-13
+41,SvelteKit,Use +page.svelte for routes,File-based routing,+page.svelte for route components,Custom routing setup,routes/about/+page.svelte,routes/About.svelte,Medium,https://kit.svelte.dev/docs/routing,svelte 5,active,2026-08-13
+42,SvelteKit,Use +page.js for data loading,Load data before render,load function in +page.js,onMount for data fetching,export function load() {},onMount(() => fetchData()),High,https://kit.svelte.dev/docs/load,svelte 5,active,2026-08-13
+43,SvelteKit,Use +page.server.js for server-only,Server-side data loading,+page.server.js for sensitive data,+page.js for API keys,+page.server.js with DB access,+page.js with DB access,High,https://svelte.dev/docs/kit/load#universal-vs-server,svelte 5,active,2026-08-13
+44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Medium,https://kit.svelte.dev/docs/form-actions,svelte 5,active,2026-08-13
+45,SvelteKit,Use $app/stores for legacy app state,Legacy SvelteKit page navigating and updated stores,Retain $app/stores only for legacy Svelte projects,Add $app/stores to new SvelteKit code,import { page } from '$app/stores',import { page } from '$app/state',Medium,https://svelte.dev/docs/kit/$app-stores,svelte legacy <=4,deprecated,2026-08-13
+46,Performance,Use {#key} for forced re-render,Reset component state,{#key id} for fresh instance,Manual destroy/create,{#key item.id}<Component/>{/key},on:change={() => component = null},Low,https://svelte.dev/docs/logic-blocks#key,svelte 5,active,2026-08-13
+47,Performance,Avoid unnecessary effects,Not every computation needs $effect,Use $derived for computed state and $effect only for external synchronization,Use effects for simple assignments,let doubled = $derived(count * 2),$effect(() => doubled = count * 2),Low,https://svelte.dev/docs/svelte/$effect,svelte 5,active,2026-08-13
+48,Performance,Avoid legacy immutable compiler assumptions,Runes use fine-grained reactivity without the legacy immutable option,Use current runes state and measure real bottlenecks,Add immutable mode to new runes components,$state for reactive data,<svelte:options immutable/>,Low,https://svelte.dev/docs/svelte/legacy-compiler-options,svelte 5,active,2026-08-13
+49,TypeScript,"Use lang=""ts"" in script",TypeScript support,"<script lang=""ts"">",JavaScript for typed projects,"<script lang=""ts"">",<script> with JSDoc,Medium,https://svelte.dev/docs/typescript,svelte 5,active,2026-08-13
+50,TypeScript,Type props with an interface,Explicit prop types for $props,Destructure $props with an interface annotation,Use legacy $$Props or untyped props,"interface Props { name: string }; let { name }: Props = $props()",interface $$Props { name: string },Medium,https://svelte.dev/docs/svelte/typescript#typing-$props,svelte 5,active,2026-08-13
+51,TypeScript,Type legacy events with createEventDispatcher,Type-safe events in legacy components,Retain typed dispatch only for legacy components,Add dispatcher events to runes-mode components,createEventDispatcher<{ save: Data }>(),let { onsave }: Props = $props(),Medium,https://svelte.dev/docs/svelte/svelte#createeventdispatcher,svelte legacy <=4,deprecated,2026-08-13
+52,Accessibility,Use semantic elements,Proper HTML in templates,button nav main appropriately,div for everything,<button onclick={handleClick}>,<div onclick={handleClick}>,High,https://svelte.dev/docs/svelte/compiler-warnings#a11y_click_events_have_key_events,svelte 5,active,2026-08-13
+53,Accessibility,Add aria to dynamic content,Accessible state changes,aria-live for updates,Silent dynamic updates,"<div aria-live=""polite"">{message}</div>",<div>{message}</div>,Medium,,svelte 5,active,2026-08-13
+54,Events,Use event properties in runes mode,Svelte 5 event handlers are component or element properties,Use onclick and callback props for new code,Use on: directives or createEventDispatcher in runes mode,<button onclick={handleClick}>Save</button>,<button on:click={handleClick}>Save</button>,High,https://svelte.dev/docs/svelte/v5-migration-guide#event-changes,svelte 5,active,2026-08-13
+55,SvelteKit,Use $app/state for current app state,SvelteKit exposes page navigating and updated as reactive state,Import current state from $app/state,Start new code with deprecated $app/stores,import { page } from '$app/state',import { page } from '$app/stores',High,https://svelte.dev/docs/kit/$app-state,svelte 5,active,2026-08-13

package/dist/assets/uiux/data/stacks/swiftui.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,Views,Use struct for views,SwiftUI views are value types,struct MyView: View,class MyView: View,struct ContentView: View { var body: some View },class ContentView: View,High,https://developer.apple.com/documentation/swiftui/view,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+2,Views,Keep views small and focused,Single responsibility for each view,Extract subviews for complex layouts,Large monolithic views,Extract HeaderView FooterView,500+ line View struct,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+3,Views,Use body computed property,body returns the view hierarchy,var body: some View { },func body() -> some View,"var body: some View { Text(""Hello"") }",func body() -> Text,High,https://developer.apple.com/documentation/swiftui/view/body-swift.property,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+4,Views,Prefer composition over inheritance,Compose views using ViewBuilder,Combine smaller views,Inheritance hierarchies,VStack { Header() Content() },class SpecialView extends BaseView,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+5,State,Use @State for local state,Simple value types owned by view,@State for view-local primitives,@State for shared data,@State private var count = 0,@State var sharedData: Model,High,https://developer.apple.com/documentation/swiftui/state,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+6,State,Use @Binding for two-way data,Pass mutable state to child views,@Binding for child input,@State in child for parent data,@Binding var isOn: Bool,$isOn to pass binding,Medium,https://developer.apple.com/documentation/swiftui/binding,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+7,State,Use @StateObject for reference types,ObservableObject owned by view,@StateObject for view-created objects,@ObservedObject for owned objects,@StateObject private var vm = ViewModel(),@ObservedObject var vm = ViewModel(),High,https://developer.apple.com/documentation/swiftui/stateobject,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+8,State,Use @ObservedObject for injected objects,Reference types passed from parent,@ObservedObject for injected dependencies,@StateObject for injected objects,@ObservedObject var vm: ViewModel,@StateObject var vm: ViewModel (injected),High,https://developer.apple.com/documentation/swiftui/observedobject,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+9,State,Use @EnvironmentObject for shared state,App-wide state injection,@EnvironmentObject for global state,Prop drilling through views,@EnvironmentObject var settings: Settings,Pass settings through 5 views,Medium,https://developer.apple.com/documentation/swiftui/environmentobject,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+10,State,Use @Published in ObservableObject,Automatically publish property changes,@Published for observed properties,Manual objectWillChange calls,@Published var items: [Item] = [],var items: [Item] { didSet { objectWillChange.send() } },Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+11,Observable,Use @Observable macro (iOS 17+),Modern observation without Combine,@Observable class for view models,ObservableObject for new projects,@Observable class ViewModel { },class ViewModel: ObservableObject,Medium,https://developer.apple.com/documentation/observation,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+12,Observable,Use @Bindable for @Observable,Create bindings from @Observable,@Bindable var vm for bindings,@Binding with @Observable,@Bindable var viewModel,$viewModel.name with @Observable,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+13,Layout,Use VStack HStack ZStack,Standard stack-based layouts,Stacks for linear arrangements,GeometryReader for simple layouts,VStack { Text() Image() },GeometryReader for vertical list,Medium,https://developer.apple.com/documentation/swiftui/vstack,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+14,Layout,Use LazyVStack LazyHStack for lists,Lazy loading for performance,Lazy stacks for long lists,Regular stacks for 100+ items,LazyVStack { ForEach(items) },VStack { ForEach(largeArray) },High,https://developer.apple.com/documentation/swiftui/lazyvstack,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+15,Layout,Use GeometryReader sparingly,Only when needed for sizing,GeometryReader for responsive layouts,GeometryReader everywhere,GeometryReader for aspect ratio,GeometryReader wrapping everything,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+16,Layout,Use spacing and padding consistently,Consistent spacing throughout app,Design system spacing values,Magic numbers for spacing,.padding(16) or .padding(),".padding(13), .padding(17)",Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+17,Layout,Use frame modifiers correctly,Set explicit sizes when needed,.frame(maxWidth: .infinity),Fixed sizes for responsive content,.frame(maxWidth: .infinity),.frame(width: 375),Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+18,Modifiers,Order modifiers correctly,Modifier order affects rendering,Background before padding for full coverage,Wrong modifier order,.padding().background(Color.red),.background(Color.red).padding(),High,https://developer.apple.com/documentation/swiftui/configuring-views,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+19,Modifiers,Create custom ViewModifiers,Reusable modifier combinations,ViewModifier for repeated styling,Duplicate modifier chains,struct CardStyle: ViewModifier,.shadow().cornerRadius() everywhere,Medium,https://developer.apple.com/documentation/swiftui/viewmodifier,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+20,Modifiers,Use conditional modifiers carefully,Avoid changing view identity,if-else with same view type,Conditional that changes view identity,Text(title).foregroundColor(isActive ? .blue : .gray),if isActive { Text().bold() } else { Text() },Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+21,Navigation,Use NavigationStack or NavigationSplitView (iOS 16+),Current single-column and multicolumn navigation,NavigationStack for single-column; NavigationSplitView for two- or three-column apps,NavigationView for new projects,NavigationStack { } or NavigationSplitView { ... },NavigationView { } (deprecated),Medium,https://developer.apple.com/documentation/swiftui/migrating-to-new-navigation-types,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+22,Navigation,Use navigationDestination,Type-safe navigation destinations,.navigationDestination(for:),NavigationLink(destination:),.navigationDestination(for: Item.self),NavigationLink(destination: DetailView()),Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+23,Navigation,Use @Environment for dismiss,Programmatic navigation dismissal,@Environment(\.dismiss) var dismiss,presentationMode (deprecated),@Environment(\.dismiss) var dismiss,@Environment(\.presentationMode),Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+24,Lists,Use List for scrollable content,Built-in scrolling and styling,List for standard scrollable content,ScrollView + VStack for simple lists,List { ForEach(items) { } },ScrollView { VStack { ForEach } },Low,https://developer.apple.com/documentation/swiftui/list,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+25,Lists,Provide stable identifiers,Use Identifiable or explicit id,Identifiable protocol or id parameter,Index as identifier,ForEach(items) where Item: Identifiable,"ForEach(items.indices, id: \.self)",High,https://developer.apple.com/documentation/swiftui/foreach,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+26,Lists,Use onDelete and onMove,Standard list editing,onDelete for swipe to delete,Custom delete implementation,.onDelete(perform: delete),.onTapGesture for delete,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+27,Forms,Use Form for settings,Grouped input controls,Form for settings screens,Manual grouping for forms,Form { Section { Toggle() } },VStack { Toggle() },Low,https://developer.apple.com/documentation/swiftui/form,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+28,Forms,Use @FocusState for keyboard,Manage keyboard focus,@FocusState for text field focus,Manual first responder handling,@FocusState private var isFocused: Bool,UIKit first responder,Medium,https://developer.apple.com/documentation/swiftui/focusstate,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+29,Forms,Validate input properly,Show validation feedback,Real-time validation feedback,Submit without validation,TextField with validation state,TextField without error handling,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+30,Async,Use .task for async work,Automatic cancellation on view disappear,.task for view lifecycle async,onAppear with Task,.task { await loadData() },onAppear { Task { await loadData() } },Medium,https://developer.apple.com/documentation/swiftui/view/task(priority:_:),swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+31,Async,Handle loading states,Show progress during async operations,ProgressView during loading,Empty view during load,if isLoading { ProgressView() },No loading indicator,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+32,Async,Use @MainActor for UI updates,Ensure UI updates on main thread,@MainActor on view models,Manual DispatchQueue.main,@MainActor class ViewModel,DispatchQueue.main.async,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+33,Animation,Use withAnimation,Animate state changes,withAnimation for state transitions,No animation for state changes,withAnimation { isExpanded.toggle() },isExpanded.toggle(),Low,https://developer.apple.com/documentation/swiftui/withanimation(_:_:),swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+34,Animation,Use .animation modifier,Apply animations to views,.animation(.spring()) on view,Manual animation timing,.animation(.easeInOut),CABasicAnimation equivalent,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+35,Animation,Respect reduced motion,Check accessibility settings,Check accessibilityReduceMotion,Ignore motion preferences,@Environment(\.accessibilityReduceMotion),Always animate regardless,High,https://developer.apple.com/documentation/swiftui/environmentvalues/accessibilityreducemotion,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+36,Preview,Use #Preview macro (Xcode 15+),Modern preview syntax,#Preview for view previews,PreviewProvider protocol,#Preview { ContentView() },struct ContentView_Previews: PreviewProvider,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+37,Preview,Create multiple previews,Test different states and devices,Multiple previews for states,Single preview only,"#Preview(""Light"") { } #Preview(""Dark"") { }",Single preview configuration,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+38,Preview,Use preview data,Dedicated preview mock data,Static preview data,Production data in previews,Item.preview for preview,Fetch real data in preview,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+39,Performance,Avoid expensive body computations,Body should be fast to compute,Precompute in view model,Heavy computation in body,vm.computedValue in body,Complex calculation in body,High,https://developer.apple.com/documentation/xcode/understanding-and-improving-swiftui-performance,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+40,Performance,Use Equatable views,Skip unnecessary view updates,Equatable for complex views,Default equality for all views,struct MyView: View Equatable,No Equatable conformance,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+41,Performance,Profile with Instruments,Measure before optimizing,Use SwiftUI Instruments,Guess at performance issues,Profile with Instruments,Optimize without measuring,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+42,Accessibility,Add accessibility labels,Describe UI elements,.accessibilityLabel for context,Missing labels,".accessibilityLabel(""Close button"")",Button without label,High,https://developer.apple.com/documentation/swiftui/view/accessibilitylabel(_:)-1d7jv,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+43,Accessibility,Support Dynamic Type,Respect text size preferences,Scalable fonts and layouts,Fixed font sizes,.font(.body) with Dynamic Type,.font(.system(size: 16)),High,https://developer.apple.com/documentation/swiftui/scaledmetric,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+44,Accessibility,Use semantic views,Proper accessibility traits,Correct accessibilityTraits,Wrong semantic meaning,Button for actions Image for display,Image that acts like button,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+45,Testing,Use ViewInspector for testing,Third-party view testing,ViewInspector for unit tests,UI tests only,ViewInspector assertions,Only XCUITest,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+46,Testing,Test view models,Unit test business logic,XCTest for view model,Skip view model testing,Test ViewModel methods,No unit tests,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+47,Testing,Use preview as visual test,Previews catch visual regressions,Multiple preview configurations,No visual verification,Preview different states,Single preview only,Low,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+48,Architecture,Use MVVM pattern,Separate view and logic,ViewModel for business logic,Logic in View,ObservableObject ViewModel,@State for complex logic,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+49,Architecture,Keep views dumb,Views display view model state,View reads from ViewModel,Business logic in View,view.items from vm.items,Complex filtering in View,Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13
+50,Architecture,Use dependency injection,Inject dependencies for testing,Initialize with dependencies,Hard-coded dependencies,init(service: ServiceProtocol),let service = RealService(),Medium,,swiftui current; iOS 16+ baseline; Observation APIs iOS 17+,active,2026-08-13

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

@@ -0,0 +1,54 @@
+No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
+1,Setup,Pin the Three.js Package Version,Install the exact current Three.js release with npm for bundler projects. If a browser CDN is unavoidable use an import map pinned to the same exact release instead of a floating URL.,Pin three@0.185.1 and keep core and addon imports on that release,Use a floating latest URL or a legacy global build as the default production setup,npm install three@0.185.1,"<script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script>",Critical,https://www.npmjs.com/package/three/v/0.185.1,threejs 0.185.1,active,2026-08-13
+2,Setup,Use CapsuleGeometry for Capsule Shapes,CapsuleGeometry is part of the current Three.js geometry API and directly creates a capsule from radius length cap segments and radial segments.,Construct current capsule meshes with THREE.CapsuleGeometry,Rebuild a standard capsule from separate cylinder and sphere meshes unless custom topology is required,"const geometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8); const capsule = new THREE.Mesh(geometry, material);","const body = new THREE.CylinderGeometry(0.5, 0.5, 1); // unnecessary multi-mesh workaround",Critical,https://threejs.org/docs/#api/en/geometries/CapsuleGeometry,threejs 0.185.1,active,2026-08-13
+3,Setup,Import OrbitControls from Three.js Addons,OrbitControls is an addon and must be imported explicitly from the three/addons path while the core library is imported from three.,Import the named OrbitControls addon before constructing controls,Expect THREE.OrbitControls to exist on the core namespace,"import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement);","const controls = new THREE.OrbitControls(camera, renderer.domElement); // not exported by the core namespace",Critical,https://threejs.org/docs/#examples/en/controls/OrbitControls,threejs 0.185.1,active,2026-08-13
+4,Setup,Custom Drag Orbit Fallback,When OrbitControls cannot be loaded implement spherical orbit using mousedown/mousemove/mouseup. The key is rotating in spherical coordinates so both horizontal AND vertical drag work correctly.,Rotate camera in spherical coordinates so both axes respond correctly to drag,Move camera.position.x directly — vertical drag is silently ignored and the orbit is incorrect,"let dragging = false; let prev = { x: 0, y: 0 }; const radius = camera.position.length(); let theta = 0; let phi = Math.PI / 2; canvas.addEventListener('mousedown', () => dragging = true); canvas.addEventListener('mouseup', () => dragging = false); canvas.addEventListener('mousemove', e => { if (!dragging) return; theta -= (e.clientX - prev.x) * 0.005; phi = Math.max(0.1, Math.min(Math.PI - 0.1, phi - (e.clientY - prev.y) * 0.005)); camera.position.set(radius * Math.sin(phi) * Math.sin(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.cos(theta)); camera.lookAt(scene.position); prev = { x: e.clientX, y: e.clientY }; });","let dragging = false; let prev = { x: 0, y: 0 }; canvas.addEventListener('mousemove', e => { if (!dragging) return; camera.position.x += (e.clientX - prev.x) * 0.005; camera.lookAt(scene.position); prev = { x: e.clientX, y: e.clientY }; }); // BUG: Y-drag ignored; orbit is a horizontal slide not a sphere",High,https://threejs.org/docs/#examples/en/controls/OrbitControls,threejs 0.185.1,active,2026-08-13
+5,Setup,Use ESM Imports with Bundlers or Import Maps,Import Three.js from three in bundler projects. For a no-build browser page define an exact-version import map for three and three/addons/ before importing modules.,Use one ESM dependency graph with core and addons pinned to the same release,Mix global script builds with ES module imports or map core and addons to different versions,"<script type=""importmap"">{""imports"":{""three"":""https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js"",""three/addons/"":""https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/""}}</script> <script type=""module"">import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';</script>","<script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script><script type=""module"">import * as THREE from 'three';</script>",Critical,https://threejs.org/manual/en/installation.html,threejs 0.185.1,active,2026-08-13
+6,Setup,Single Renderer Per Page,Create one WebGLRenderer instance for the lifetime of the page. Multiple renderers compete for the browser GPU context limit (8–16 contexts) and cause context-lost errors especially on mobile.,Reuse a single renderer and swap scene content instead of recreating the renderer,Create a new renderer on each component mount or scene transition,"const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(canvas.clientWidth, canvas.clientHeight); // renderer lives for the page lifetime",function showScene() { const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); } showScene(); showScene(); // two GPU contexts — crashes on mobile,Critical,https://threejs.org/docs/#api/en/renderers/WebGLRenderer,threejs 0.185.1,active,2026-08-13
+7,Setup,Pixel Ratio Cap at 2,Cap devicePixelRatio at 2. Retina displays report 3x or higher. Going from 2x to 3x multiplies pixel count by 2.25x with no visible quality improvement at normal viewing distance.,"Apply Math.min(window.devicePixelRatio, 2) — cap is at 2 not at 3",Pass window.devicePixelRatio directly without any cap,"renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));",renderer.setPixelRatio(window.devicePixelRatio); // 3x display = 9 pixels per CSS pixel = 2.25x GPU cost for zero quality gain,High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setPixelRatio,threejs 0.185.1,active,2026-08-13
+8,Setup,Alpha Canvas Plus CSS Background,Set alpha:true on the renderer and control the background color through CSS rather than a renderer clear color. This composites the canvas correctly over any HTML content behind it.,Set alpha:true on renderer and let body or a parent div provide the background color,Set a solid renderer clear color when the canvas must composite over HTML behind it,"const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setClearColor(0x000000, 0); // fully transparent canvas // body { background: #0d0d0d; } handles the visible color",renderer.setClearColor(0x111827); // fully opaque — HTML behind the canvas is blocked,Medium,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setClearColor,threejs 0.185.1,active,2026-08-13
+9,Camera,Aspect Ratio on Resize,Always update camera.aspect and call camera.updateProjectionMatrix() inside every resize handler. A stale aspect ratio causes the entire scene to appear stretched or squashed horizontally.,Update camera.aspect then call updateProjectionMatrix() on every resize,Let aspect ratio become stale after the browser window changes size,"window.addEventListener('resize', () => { camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.clientWidth, canvas.clientHeight); });",// No resize handler — scene stretches to fill a wider window without correcting the projection,High,https://threejs.org/docs/#api/en/cameras/PerspectiveCamera,threejs 0.185.1,active,2026-08-13
+10,Camera,FOV Range 45 to 75,Use a field of view between 45 and 75 degrees. Below 45 creates compressed telephoto distortion. Above 90 creates visible fisheye distortion at frame edges.,Start at 75 for general interactive scenes; use 45–55 for product close-ups,Use FOV above 90 or below 30 without a deliberate artistic reason,"const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000); // general const camera = new THREE.PerspectiveCamera(50, aspect, 0.1, 1000); // product shot","const camera = new THREE.PerspectiveCamera(120, aspect, 0.1, 1000); // fisheye distortion at all edges",Medium,https://threejs.org/docs/#api/en/cameras/PerspectiveCamera,threejs 0.185.1,active,2026-08-13
+11,Camera,Explicit Position and lookAt,Always set an explicit camera position and call camera.lookAt() before the first render. The default camera at the origin pointing down -Z makes subjects at arbitrary coordinates invisible or tiny.,Set camera.position.set() and camera.lookAt() to frame the subject before the first render,Leave the camera at default position (0 0 0) with no lookAt — subject may be behind the camera or microscopic,"camera.position.set(0, 1.5, 5); camera.lookAt(new THREE.Vector3(0, 0, 0));",// No position or lookAt set — subject at y:2 is behind or above the default camera view,Medium,https://threejs.org/docs/#api/en/cameras/Camera.lookAt,threejs 0.185.1,active,2026-08-13
+12,Camera,OrbitControls vs GSAP Camera Rig,Use OrbitControls for model viewers and exploratory scenes where the user needs free-look. Use a GSAP scroll-driven camera rig for product reveals or storytelling where the camera path must stay fixed.,Import OrbitControls from three/addons and match the camera control approach to the scene's UX intent,Use OrbitControls for a scripted reveal where users can orbit away before it completes,"import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // call controls.update() in animate()","const controls = new THREE.OrbitControls(camera, renderer.domElement); // legacy global API and wrong control model for a scripted reveal",High,https://threejs.org/docs/#examples/en/controls/OrbitControls,threejs 0.185.1,active,2026-08-13
+13,Geometry,Never Create Geometry Per Frame,Creating a new geometry inside animate() allocates a fresh GPU buffer every frame and exhausts VRAM within seconds. Create all geometry exactly once before the loop starts. Use attribute mutation if positions must change per frame.,Create all geometry before the animation loop; mutate BufferAttribute arrays in-place if needed,Call any new XxxGeometry() constructor inside the animation loop,"const geo = new THREE.SphereGeometry(1, 32, 32); // created once const mesh = new THREE.Mesh(geo, mat); scene.add(mesh); const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); mesh.rotation.y += clock.getDelta() * 0.8; // delta time renderer.render(scene, camera); }","function animate() { requestAnimationFrame(animate); const geo = new THREE.BoxGeometry(1, 1, 1); // NEW GPU buffer every frame — VRAM exhaustion }",Critical,https://threejs.org/docs/#api/en/core/BufferGeometry,threejs 0.185.1,active,2026-08-13
+14,Geometry,Share Geometry Across Meshes,When multiple objects share the same shape create one geometry instance and pass it to every Mesh. Each Mesh gets its own transform and material while all share a single GPU buffer.,Create one geometry and pass the same reference to every Mesh constructor,Create a separate identical geometry inside a loop for each object,"const geo = new THREE.BoxGeometry(1, 1, 1); // one GPU buffer for (let i = 0; i < 200; i++) { const m = new THREE.Mesh(geo, mat); m.position.set(Math.random() * 10, 0, Math.random() * 10); scene.add(m); }","for (let i = 0; i < 200; i++) { const geo = new THREE.BoxGeometry(1, 1, 1); // 200 separate GPU buffers scene.add(new THREE.Mesh(geo, mat)); }",Critical,https://threejs.org/docs/#api/en/core/BufferGeometry,threejs 0.185.1,active,2026-08-13
+15,Geometry,dispose on Scene Removal,Call geometry.dispose() and material.dispose() and texture.dispose() for every texture map when removing objects from the scene. Three.js never releases GPU resources automatically — they stay in VRAM until explicitly freed.,Dispose of geometry + material + every texture map before calling scene.remove(),Call scene.remove() alone without any dispose calls,function removeMesh(mesh) { scene.remove(mesh); mesh.geometry.dispose(); if (mesh.material.map) mesh.material.map.dispose(); if (mesh.material.normalMap) mesh.material.normalMap.dispose(); mesh.material.dispose(); },scene.remove(mesh); // geometry and all texture maps stay in GPU VRAM forever,Critical,https://threejs.org/docs/#api/en/core/BufferGeometry.dispose,threejs 0.185.1,active,2026-08-13
+16,Geometry,Segment Count Budget,Use the minimum segment count that achieves the desired silhouette quality. Hero objects: 32–64 segments. Background objects: 8–16. Particle stand-ins: 6–8. High counts on background geometry waste GPU draw calls with zero visible benefit.,Apply a tiered segment budget based on the visual priority of each object in the scene,Default every sphere and cylinder to 64+ segments regardless of its role,"const bgSphere = new THREE.SphereGeometry(0.5, 8, 8); // background const heroSphere = new THREE.SphereGeometry(1, 64, 64); // foreground product","const particleSphere = new THREE.SphereGeometry(0.1, 64, 64); // 64 segments × 1000 particles = massive overdraw",Medium,https://threejs.org/docs/#api/en/geometries/SphereGeometry,threejs 0.185.1,active,2026-08-13
+17,Geometry,BufferGeometry for Custom Vertex Data,For custom shapes use BufferGeometry with typed BufferAttribute data for positions normals colors and other vertex attributes.,Use THREE.BufferGeometry with Float32Array-backed attributes for custom vertex data,Reference or instantiate the removed THREE.Geometry class,"const geo = new THREE.BufferGeometry(); geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geo.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));","const geo = new THREE.Geometry(); geo.vertices.push(new THREE.Vector3(0, 0, 0)); // removed legacy API",High,https://threejs.org/docs/#api/en/core/BufferGeometry,threejs 0.185.1,active,2026-08-13
+18,Materials,MeshBasicMaterial vs MeshStandardMaterial,MeshBasicMaterial ignores all lights and is significantly cheaper — use it for UI overlays HUDs and flat-colored decorative elements. MeshStandardMaterial is PBR-accurate and requires lights. Never use StandardMaterial where BasicMaterial suffices.,Use MeshBasicMaterial for any object that does not need lighting; use MeshStandardMaterial for physical objects,Apply MeshStandardMaterial to flat UI elements that never receive light — lights still run for them,"const uiMat = new THREE.MeshBasicMaterial({ color: 0xffffff }); // no lighting cost const physMat = new THREE.MeshStandardMaterial({ color: 0x4f46e5, roughness: 0.4, metalness: 0.6 });",const mat = new THREE.MeshStandardMaterial({ color: 0xffffff }); // on a 2D HUD card — lighting calculation runs with no visual benefit,Medium,https://threejs.org/docs/#api/en/materials/MeshStandardMaterial,threejs 0.185.1,active,2026-08-13
+19,Materials,Share Material Instances,Share one material instance across all meshes that have identical properties. Call mat.clone() only when individual meshes genuinely need different property values. Duplicate materials waste GPU VRAM.,Assign the same material reference to all meshes with identical visual properties,Create a new material inside a loop for objects that look identical,"const mat = new THREE.MeshStandardMaterial({ color: 0x4f46e5, roughness: 0.5 }); meshA.material = mat; meshB.material = mat; meshC.material = mat; // one GPU material",for (const m of meshes) { m.material = new THREE.MeshStandardMaterial({ color: 0x4f46e5 }); } // N redundant GPU materials,High,https://threejs.org/docs/#api/en/materials/Material,threejs 0.185.1,active,2026-08-13
+20,Materials,Dispose Textures Explicitly,Textures are the single largest consumer of GPU VRAM in most Three.js scenes. Call texture.dispose() when switching scenes or removing objects — Three.js does not garbage-collect GPU resources automatically.,Track all loaded textures and call dispose() on each one during scene teardown or on object removal,Load textures without any cleanup path — they persist in VRAM for the entire page lifetime,const tex = new THREE.TextureLoader().load('img.jpg'); mesh.material.map = tex; // on teardown: tex.dispose(); mesh.material.dispose();,const tex = new THREE.TextureLoader().load('img.jpg'); scene.remove(mesh); // tex occupies GPU VRAM until page reload,High,https://threejs.org/docs/#api/en/textures/Texture.dispose,threejs 0.185.1,active,2026-08-13
+21,Lighting,Ambient Plus Directional Minimum,Any scene using MeshStandardMaterial or MeshPhongMaterial requires at minimum one AmbientLight (fill) and one DirectionalLight (shading direction). Without both the objects render as solid black — the material is there but no light reaches it.,Add AmbientLight for fill and DirectionalLight for shading whenever PBR or Phong materials are used,Use MeshStandardMaterial without adding any lights to the scene,"scene.add(new THREE.AmbientLight(0xffffff, 0.4)); const dirLight = new THREE.DirectionalLight(0xffffff, 1.0); dirLight.position.set(5, 10, 7.5); scene.add(dirLight);","const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: 0x4f46e5 })); scene.add(mesh); // renders completely black — no lights in scene",Critical,https://threejs.org/docs/#api/en/lights/DirectionalLight,threejs 0.185.1,active,2026-08-13
+22,Lighting,Enable shadowMap Before castShadow,renderer.shadowMap.enabled = true must be set before any castShadow or receiveShadow flags. Without it the shadow map is never allocated and all shadow flags are silently ignored.,Set renderer.shadowMap.enabled = true first then set castShadow and receiveShadow on lights and meshes,Set castShadow on a light or mesh without enabling renderer.shadowMap.enabled — shadows never render,renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; dirLight.castShadow = true; dirLight.shadow.mapSize.width = 2048; dirLight.shadow.mapSize.height = 2048; heroMesh.castShadow = true; ground.receiveShadow = true;,dirLight.castShadow = true; heroMesh.castShadow = true; // renderer.shadowMap.enabled never set — shadows silently do not render,High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap,threejs 0.185.1,active,2026-08-13
+23,Lighting,Selective Shadow Casting,Shadow map rendering redraws the entire scene from the light's perspective every frame. Enable castShadow only on the primary directional light and receiveShadow only on hero meshes and the ground plane.,Enable shadows only on the key light and the most important meshes,Enable castShadow and receiveShadow on every object in the scene including particles,renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; dirLight.castShadow = true; heroMesh.castShadow = true; ground.receiveShadow = true; // particles and background meshes: no shadow flags,for (const m of allMeshes) { m.castShadow = true; m.receiveShadow = true; } // shadow map pass over particle system — expensive with no visible gain,High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.shadowMap,threejs 0.185.1,active,2026-08-13
+24,Lighting,Skip Lights for MeshBasicMaterial,MeshBasicMaterial completely ignores all scene lights. Adding lights solely to illuminate BasicMaterial objects wastes a light pass on every frame with zero visible effect.,Omit lights entirely when every material in the scene is MeshBasicMaterial,Add AmbientLight and DirectionalLight to a scene that uses only MeshBasicMaterial,"// Scene uses only MeshBasicMaterial — no lights needed const mat = new THREE.MeshBasicMaterial({ color: 0x00ffff }); const mesh = new THREE.Mesh(geo, mat); scene.add(mesh); // MeshBasicMaterial is always fully lit by definition","scene.add(new THREE.AmbientLight(0xffffff, 1.0)); // wasted per-frame light pass — BasicMaterial ignores it entirely",Low,https://threejs.org/docs/#api/en/materials/MeshBasicMaterial,threejs 0.185.1,active,2026-08-13
+25,Raycasting,Single Shared Raycaster,Create exactly one Raycaster instance outside all event handlers. Store mouse coordinates in pointermove (cheap). Call setFromCamera and intersectObjects together inside the animate() loop — once per frame instead of once per mouse event.,Create one Raycaster; store mouse in pointermove; call setFromCamera + intersectObjects inside animate(),Create a new THREE.Raycaster() inside a mousemove handler or call setFromCamera inside the event listener,"const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); canvas.addEventListener('pointermove', e => { // only store coords — no raycasting here mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(e.clientY / canvas.clientHeight) * 2 + 1; }); // setFromCamera and intersectObjects run once per frame in animate()","window.addEventListener('mousemove', e => { const rc = new THREE.Raycaster(); // new allocation per event rc.setFromCamera(mouse, camera); rc.intersectObjects(targets, true); // fires 200+ times/sec });",Critical,https://threejs.org/docs/#api/en/core/Raycaster,threejs 0.185.1,active,2026-08-13
+26,Raycasting,NDC Mouse Coordinates,Raycasting requires mouse in Normalized Device Coordinates: X from -1 (left) to +1 (right) and Y from +1 (top) to -1 (bottom). The Y axis is inverted relative to screen space. A missing negation on Y causes all raycasts to miss or hit the wrong objects.,Apply the full NDC formula — including the negation on the Y axis,Forget to negate Y — raycasting appears to work but hits objects mirrored vertically,mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(e.clientY / canvas.clientHeight) * 2 + 1; // Y is INVERTED,mouse.x = (e.clientX / canvas.clientWidth) * 2 - 1; mouse.y = (e.clientY / canvas.clientHeight) * 2 - 1; // BUG: Y not negated — raycasting is mirrored,Critical,https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera,threejs 0.185.1,active,2026-08-13
+27,Raycasting,setFromCamera and intersectObjects in animate,Call raycaster.setFromCamera(mouse camera) and then raycaster.intersectObjects(targets true) inside the animate() loop. setFromCamera must come before intersectObjects every frame — without it the raycaster uses a stale ray direction.,Call setFromCamera then intersectObjects in order inside every animate() frame,Call intersectObjects without calling setFromCamera first — the raycaster uses a stale or zero ray,"function animate() { requestAnimationFrame(animate); raycaster.setFromCamera(mouse, camera); // update ray direction first const hits = raycaster.intersectObjects(targets, true); // then test intersections if (hits.length > 0) { document.body.style.cursor = 'pointer'; } else { document.body.style.cursor = 'auto'; } renderer.render(scene, camera); }","function animate() { requestAnimationFrame(animate); const hits = raycaster.intersectObjects(targets, true); // BUG: setFromCamera never called — stale ray — hits is always empty renderer.render(scene, camera); }",Critical,https://threejs.org/docs/#api/en/core/Raycaster,threejs 0.185.1,active,2026-08-13
+28,Raycasting,Recursive Flag for Groups and GLTF,Pass true as the second argument to intersectObjects when testing Groups or GLTF loaded models. Geometry lives on child Mesh objects — without recursive:true the parent group is tested but has no geometry and hits is always empty.,Use intersectObjects(targets true) for Groups or any loaded model,Raycast against a parent Group without the recursive flag,"const hits = raycaster.intersectObjects(scene.children, true); // catches all descendant meshes",const hits = raycaster.intersectObjects([modelGroup]); // recursive defaults to false — misses all children,High,https://threejs.org/docs/#api/en/core/Raycaster.intersectObjects,threejs 0.185.1,active,2026-08-13
+29,Raycasting,Cursor Feedback on Hover,Set document.body.style.cursor = 'pointer' when intersections are found and reset to 'auto' when none are found. Without cursor feedback users cannot discover that 3D objects are interactive.,Update cursor to pointer on hit; reset to auto on miss in the same animate loop block,Run raycasting and read hits without ever updating the cursor style,if (hits.length > 0) { document.body.style.cursor = 'pointer'; } else { document.body.style.cursor = 'auto'; },"raycaster.setFromCamera(mouse, camera); raycaster.intersectObjects(targets, true); // hits ignored — cursor never changes — objects feel non-interactive",Medium,https://developer.mozilla.org/en-US/docs/Web/CSS/cursor,threejs 0.185.1,active,2026-08-13
+30,Animation,requestAnimationFrame Loop Only,Drive the render loop exclusively with requestAnimationFrame or renderer.setAnimationLoop(). Never use setInterval or setTimeout — they are not synchronized to the display refresh rate and keep running when the tab is hidden draining battery.,Use requestAnimationFrame or renderer.setAnimationLoop() as the sole render loop driver,Use setInterval or setTimeout for render timing,"function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();","setInterval(() => renderer.render(scene, camera), 16); // not display-synced; runs at full speed even when tab is hidden",Critical,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setAnimationLoop,threejs 0.185.1,active,2026-08-13
+31,Animation,THREE.Clock for Delta Time,"Use THREE.Clock and clock.getDelta() for all time-based motion. A hardcoded increment like += 0.01 runs at 2x speed on 120Hz displays and at unpredictable speed when frames drop under load. CRITICAL: call getDelta() exactly ONCE per animate() frame and store the result in a local dt variable. getDelta() resets the internal clock on every call — a second call in the same frame always returns ~0, silently breaking any animation block that uses it.",Call clock.getDelta() once at the top of animate(); store result in dt; reuse dt everywhere in that frame,Call clock.getDelta() more than once per frame or inside a helper called from animate(),"const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); const dt = clock.getDelta(); // called ONCE — reuse dt below mesh.rotation.y += dt * 0.8; particles.rotation.y += dt * 0.1; // reuse dt, not a second getDelta() renderer.render(scene, camera); }",function animate() { requestAnimationFrame(animate); mesh.rotation.y += 0.01; // 0.01 rad/frame — runs 2x faster on 120Hz than on 60Hz },High,https://threejs.org/docs/#api/en/core/Clock,threejs 0.185.1,active,2026-08-13
+32,Animation,Lerp for Smooth Pointer Follow,Use value += (target - value) * alpha each frame to smoothly interpolate toward a moving target. An alpha of 0.03–0.1 produces organic easing for camera follow pointer-tracking and hover scale effects without requiring GSAP.,Apply the lerp formula each frame with a small alpha for smooth organic motion,Snap a value directly to the target producing an instant jarring jump,// In animate(): cameraTargetX = mouse.x * 3; camera.position.x += (cameraTargetX - camera.position.x) * 0.05; camera.position.y += (cameraTargetY - camera.position.y) * 0.05; camera.lookAt(scene.position);,// In animate(): camera.position.x = mouse.x * 3; // instant snap — jarring with no easing,Medium,https://threejs.org/docs/#api/en/math/MathUtils.lerp,threejs 0.185.1,active,2026-08-13
+33,Animation,GSAP for Multi-Step Sequences,Use GSAP timelines for any animation with more than two sequential steps or for scroll-linked camera paths. GSAP timelines can be paused reversed and scrubbed — far more maintainable than boolean state machines.,Use GSAP timelines for sequences with more than two steps and for scroll-driven animations,Implement multi-step sequences with boolean flags and manual frame counters,"const tl = gsap.timeline({ defaults: { ease: 'power2.out' } }); tl.from(mesh.position, { y: -3, duration: 1 }) .to(mesh.rotation, { y: Math.PI, duration: 1 }, '-=0.3') .to(camera.position, { z: 2, duration: 1.5 });",let step = 0; let t = 0; function animate() { if (step === 0 && (t += 0.01) >= 1) step = 1; } // grows unmanageable with 3+ steps,High,https://www.npmjs.com/package/gsap,threejs 0.185.1,active,2026-08-13
+34,Animation,Pause Render Loop on Tab Hidden,Use renderer.setAnimationLoop() as the loop driver so you can pass null to pause and a function to resume. Continuous rendering in a hidden tab wastes CPU GPU and battery with no user benefit.,Use renderer.setAnimationLoop(animate) to drive the loop; pass null to pause on visibilitychange,Drive with internal requestAnimationFrame and never stop the loop when the tab is hidden,"renderer.setAnimationLoop(animate); // use setAnimationLoop as the driver — not requestAnimationFrame inside animate function animate() { const dt = clock.getDelta(); renderer.render(scene, camera); } document.addEventListener('visibilitychange', () => { if (document.hidden) renderer.setAnimationLoop(null); else renderer.setAnimationLoop(animate); });","function animate() { requestAnimationFrame(animate); // self-referencing RAF cannot be stopped externally renderer.render(scene, camera); } animate(); // runs forever in background tab — drains battery",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setAnimationLoop,threejs 0.185.1,active,2026-08-13
+35,GSAP,Load GSAP Before Scene Script,Load GSAP from its own CDN script tag before your scene script. In bundler projects install via npm and import. GSAP is a completely separate library from Three.js — never try to import it from the Three.js package.,Load GSAP CDN before the scene script; or npm install gsap and import separately,Import gsap from three or expect it to be defined without a separate load,"<!-- CDN: load GSAP before your scene script --> <script src=""https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js""></script> <!-- Bundler: --> // import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger';",import gsap from 'three'; // undefined — GSAP has nothing to do with Three.js,Critical,https://www.npmjs.com/package/gsap,threejs 0.185.1,active,2026-08-13
+36,GSAP,Register ScrollTrigger Before Use,Call gsap.registerPlugin(ScrollTrigger) once at the top of your script before any scrollTrigger config object. Without registration the ScrollTrigger name is undefined and the tween throws immediately.,Call gsap.registerPlugin(ScrollTrigger) as the first line before any gsap.to/from/timeline with scrollTrigger,Include scrollTrigger config in gsap.to() calls without first registering the plugin,"gsap.registerPlugin(ScrollTrigger); gsap.to(camera.position, { z: 2, scrollTrigger: { trigger: '.hero-section', scrub: 1 } });","gsap.to(mesh.position, { scrollTrigger: { trigger: '.section', scrub: true } }); // TypeError: ScrollTrigger is not a constructor — not registered",Critical,https://www.npmjs.com/package/gsap,threejs 0.185.1,active,2026-08-13
+37,GSAP,Tween Three.js Properties Directly,GSAP can tween any numeric JavaScript property including mesh.position.x mesh.rotation.y and material.opacity. No wrapper or adaptor is needed. Note: to tween material.opacity the material must have transparent:true set before the tween starts.,Pass Three.js object properties directly to gsap.to(); set transparent:true before tweening opacity,Use a plain proxy object then manually copy values to Three.js properties every frame,"gsap.to(mesh.rotation, { y: Math.PI * 2, duration: 2, ease: 'power1.inOut' }); mesh.material.transparent = true; // required before tweening opacity gsap.to(mesh.material, { opacity: 0, duration: 1 });","const tw = { v: 0 }; gsap.to(tw, { v: Math.PI * 2, onUpdate: () => mesh.rotation.y = tw.v }); // unnecessary proxy wrapper",Medium,https://gsap.com/docs/v3/GSAP/gsap.to(),threejs 0.185.1,active,2026-08-13
+38,GSAP,scrub for Scroll-Driven Camera Path,Use scrub:true or scrub:1 to link camera movement continuously to scroll position as a 0–1 ratio. scrub:1 adds a 1-second lag for cinematic smoothness. onEnter/onLeave fire only once and create jarring snaps — not the right tool for a camera path.,Use scrub:1 for any scroll-controlled camera movement,Use onEnter or onLeave callbacks for camera motion — they snap instead of scrubbing,"gsap.registerPlugin(ScrollTrigger); gsap.to(camera.position, { x: 5, y: 2, z: 0, ease: 'none', scrollTrigger: { trigger: '.canvas-wrapper', start: 'top top', end: 'bottom bottom', scrub: 1 } });","gsap.to(camera.position, { z: 0, scrollTrigger: { trigger: '.section', onEnter: () => {} } }); // fires once at scroll threshold — not a continuous scrub",High,https://www.npmjs.com/package/gsap,threejs 0.185.1,active,2026-08-13
+39,Performance,InstancedMesh for Repeated Objects,Use THREE.InstancedMesh when rendering 50 or more identical objects. It submits all N transforms in one draw call instead of N draw calls and reduces CPU-GPU communication overhead dramatically.,Use InstancedMesh for any group of 50+ meshes sharing the same geometry and material,Create 50+ separate Mesh objects with the same geometry and material,"const COUNT = 500; const iMesh = new THREE.InstancedMesh(geo, mat, COUNT); const matrix = new THREE.Matrix4(); for (let i = 0; i < COUNT; i++) { matrix.setPosition(Math.random()*10, Math.random()*10, Math.random()*10); iMesh.setMatrixAt(i, matrix); } iMesh.instanceMatrix.needsUpdate = true; scene.add(iMesh);","for (let i = 0; i < 500; i++) { scene.add(new THREE.Mesh(geo, mat)); } // 500 separate draw calls per frame",High,https://threejs.org/docs/#api/en/objects/InstancedMesh,threejs 0.185.1,active,2026-08-13
+40,Performance,Tone Mapping and Output Color Space,Three.js color management is enabled by default. Keep working colors in the linear-sRGB space and set the renderer output color space to SRGBColorSpace; choose tone mapping when rendering HDR lighting to a display.,Use the default ColorManagement.enabled state and set renderer.outputColorSpace plus an appropriate toneMapping,Disable color management or use removed outputEncoding and sRGBEncoding properties,"THREE.ColorManagement.enabled = true; renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0;","renderer.outputEncoding = THREE.sRGBEncoding; // removed legacy properties",Medium,https://threejs.org/manual/en/color-management.html,threejs 0.185.1,active,2026-08-13
+41,Performance,antialias Set at Construction Only,The antialias option can only be set at WebGLRenderer construction time. Setting renderer.antialias after construction has absolutely no effect — the WebGL context is already created without it. Decide before instantiating.,Set antialias:true inside the WebGLRenderer constructor options object,Construct the renderer without antialias then try to enable it by assigning the property,"const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // antialias baked into the WebGL context",const renderer = new THREE.WebGLRenderer(); renderer.antialias = true; // no effect — context created without AA — edges remain aliased,High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer,threejs 0.185.1,active,2026-08-13
+42,Performance,FogExp2 for Depth and Far Culling,Use scene.fog to create atmospheric depth. As a secondary benefit objects that disappear into fog before the far plane stop contributing to draw calls — useful in scenes with large view distances.,Add FogExp2 to scenes with view distances above 100 units for both visual atmosphere and implicit far culling,Ignore fog in scenes with far:1000+ and many distant objects that contribute tiny pixels per draw call,"scene.fog = new THREE.FogExp2(0x0a0a0a, 0.02); // exponential — density feels more natural than linear",// far: 2000 with no fog — hundreds of distant objects too small to see still cost draw calls per frame,Low,https://threejs.org/docs/#api/en/scenes/FogExp2,threejs 0.185.1,active,2026-08-13
+43,Particles,BufferGeometry Plus Points for Particle Systems,Build all particle systems with BufferGeometry plus a Float32Array position attribute rendered as Points. Never use individual Mesh objects as particles — they cannot scale past a few hundred with good performance.,Use Points plus BufferGeometry for all particle effects,Create hundreds of individual Mesh objects to simulate a particle system,"const COUNT = 3000; const geo = new THREE.BufferGeometry(); const pos = new Float32Array(COUNT * 3); for (let i = 0; i < COUNT * 3; i++) pos[i] = (Math.random() - 0.5) * 20; geo.setAttribute('position', new THREE.BufferAttribute(pos, 3)); const particles = new THREE.Points(geo, new THREE.PointsMaterial({ size: 0.05, color: 0xffffff })); scene.add(particles);","for (let i = 0; i < 500; i++) { scene.add(new THREE.Mesh(new THREE.SphereGeometry(0.05, 8, 8), mat)); } // 500 separate draw calls per frame",High,https://threejs.org/docs/#api/en/objects/Points,threejs 0.185.1,active,2026-08-13
+44,Particles,Particle Count Ceiling,Start particle systems at 1000–3000 particles. Beyond 50000 causes sustained frame drops on mid-range mobile. Always test on a real device before increasing the count — desktop and mobile GPU performance ratios can be 10:1.,Start at 3000 particles and profile on actual mobile hardware before raising the limit,Set particle count at 100000 or higher without any mobile profiling,const COUNT = 3000; // safe mobile baseline — profile before going higher const pos = new Float32Array(COUNT * 3);,const COUNT = 150000; // 60fps on desktop — 8fps on a mid-range Android phone,High,https://threejs.org/docs/#api/en/objects/Points,threejs 0.185.1,active,2026-08-13
+45,Particles,needsUpdate After Buffer Mutation,After mutating any BufferAttribute array values per frame you must set geometry.attributes.position.needsUpdate = true so Three.js re-uploads the changed buffer to the GPU. Without it the GPU still uses the old data and particles appear completely frozen.,Set needsUpdate = true on the position attribute after every per-frame mutation of the array,Mutate the Float32Array values without flagging needsUpdate — positions update in JS but not on the GPU,// In animate(): const pos = geo.attributes.position.array; for (let i = 0; i < pos.length; i += 3) { pos[i + 1] += Math.sin(clock.getElapsedTime() + i) * 0.001; // Y component } geo.attributes.position.needsUpdate = true; // GPU re-upload,// In animate(): pos[1] += 0.001; // JS array updated — GPU buffer is stale — particles do not move,Critical,https://threejs.org/docs/#api/en/core/BufferAttribute.needsUpdate,threejs 0.185.1,active,2026-08-13
+46,Responsive,Canvas Dimensions Not Window,Size the renderer and camera to the canvas element's clientWidth and clientHeight — not window.innerWidth and innerHeight. This is correct when the canvas is inside a flex or grid container that does not fill the full viewport.,Use canvas.clientWidth and canvas.clientHeight for all renderer and camera sizing,Hardcode renderer size to window.innerWidth/innerHeight when the canvas may be inside a container,"renderer.setSize(canvas.clientWidth, canvas.clientHeight); camera.aspect = canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix();","renderer.setSize(window.innerWidth, window.innerHeight); // wrong when canvas lives inside a sidebar or grid column",High,https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setSize,threejs 0.185.1,active,2026-08-13
+47,Responsive,ResizeObserver Over window resize Event,Use ResizeObserver on the canvas container instead of the window resize event. ResizeObserver fires when the container element changes size independently of the browser window — common in split-pane layouts and sidebar collapsing.,Attach ResizeObserver to the canvas parent element for accurate container-aware resize detection,Use only window.addEventListener('resize') for canvas sizing when the canvas is not fullscreen,"const ro = new ResizeObserver(entries => { const { width, height } = entries[0].contentRect; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }); ro.observe(canvas.parentElement);","window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); }); // misses container-only resize events in split-pane UIs",Medium,https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver,threejs 0.185.1,active,2026-08-13
+48,Responsive,Touch Events for Mobile Interaction,Add touchstart and touchmove listeners alongside mouse events so the scene remains interactive on mobile. Normalize touch coordinates to the same NDC range as mouse events and pass passive:false on touchmove if you call preventDefault.,Handle both mouse and touch input for any interactive 3D scene,Add only mouse event listeners and leave touch users with no interaction,"canvas.addEventListener('touchmove', e => { e.preventDefault(); const t = e.touches[0]; mouse.x = (t.clientX / canvas.clientWidth) * 2 - 1; mouse.y = -(t.clientY / canvas.clientHeight) * 2 + 1; }, { passive: false }); canvas.addEventListener('touchstart', e => { e.preventDefault(); }, { passive: false });","canvas.addEventListener('mousemove', handleMouse); // touch events unhandled — mobile users get no interaction",Medium,https://developer.mozilla.org/en-US/docs/Web/API/Touch_events,threejs 0.185.1,active,2026-08-13
+49,Accessibility,prefers-reduced-motion,"Check window.matchMedia('(prefers-reduced-motion: reduce)') before starting any auto-rotation, particle animation, or camera movement. Users who enable this OS preference have motion sickness or vestibular disorders. IMPORTANT: reading .matches once at page load is a one-time snapshot — if the user changes their OS accessibility setting mid-session the scene will not react. Attach a 'change' listener to the MediaQueryList so noMotion stays in sync at runtime.",Use matchMedia.addEventListener('change') to keep noMotion reactive; gate all auto-animation on the live value,Read .matches once at startup and never update it — the scene ignores mid-session OS setting changes,"const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); let noMotion = mq.matches; mq.addEventListener('change', e => { noMotion = e.matches; }); // In animate(): if (!noMotion) { mesh.rotation.y += dt * 0.8; particles.rotation.y += dt * 0.1; }",const noMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; // one-time snapshot — mid-session OS change is ignored entirely,High,https://www.w3.org/WAI/WCAG22/Techniques/css/C39.html,threejs 0.185.1,active,2026-08-13
+50,Accessibility,Canvas aria-label,Add role='img' and a descriptive aria-label to renderer.domElement after appending it to the DOM. Screen readers receive no information from a WebGL canvas — the aria-label is the only description they can announce to users.,Set role='img' and a meaningful aria-label on renderer.domElement before or after appending it,Append the canvas to the DOM with no accessibility attributes — invisible to screen readers,"renderer.domElement.setAttribute('role', 'img'); renderer.domElement.setAttribute('aria-label', 'Interactive 3D product viewer. Drag to rotate. Scroll to zoom.'); document.body.appendChild(renderer.domElement);",document.body.appendChild(renderer.domElement); // bare canvas — screen readers announce nothing,Medium,https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#accessibility_concerns,threejs 0.185.1,active,2026-08-13
+51,Production,Bundler Stack for Production,For production install the exact Three.js release from npm and use a bundler such as Vite. Import optional loaders controls and post-processing modules from three/addons so all modules share one version.,Use npm install three@0.185.1 and import core plus addons through ESM,Serve legacy global scripts or import addons from deprecated examples/js paths,"npm install three@0.185.1; import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';","<script src=""https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js""></script> // legacy global build with no module graph",Medium,https://threejs.org/manual/en/installation.html,threejs 0.185.1,active,2026-08-13
+52,Production,GLTFLoader with scene traverse,Load 3D models using GLTFLoader and traverse gltf.scene to configure castShadow receiveShadow and material overrides on all child Mesh nodes. Calling scene.add(gltf.scene) alone silently skips all shadow and material configuration.,Use GLTFLoader and traverse the entire gltf.scene graph to set up shadows and materials on every Mesh child,Load a GLTF model and pass gltf.scene directly to scene.add without traversing child meshes,"import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; const loader = new GLTFLoader(); loader.load('model.glb', gltf => { gltf.scene.traverse(child => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(gltf.scene); });","loader.load('model.glb', gltf => { scene.add(gltf.scene); // shadows and material setup silently skipped on all children });",Medium,https://threejs.org/docs/#examples/en/loaders/GLTFLoader,threejs 0.185.1,active,2026-08-13
+53,Production,LOD for Distance-Based Detail,Use THREE.LOD to automatically swap high-detail and low-detail geometry as objects move closer or farther from the camera. This maintains frame rate in scenes with many objects spread across a large depth range.,Use THREE.LOD to reduce triangle count on distant objects automatically,Render the same high-polygon geometry for every object regardless of its distance from the camera,"const lod = new THREE.LOD(); lod.addLevel(highDetailMesh, 0); // used when < 15 units away lod.addLevel(medDetailMesh, 15); // 15–50 units lod.addLevel(lowDetailMesh, 50); // 50+ units scene.add(lod);",scene.add(highDetailMesh); // 64k-triangle mesh rendered at full cost whether 1 unit or 100 units from camera,Medium,https://threejs.org/docs/#api/en/objects/LOD,threejs 0.185.1,active,2026-08-13