Menu
MANDATORY usage rules for daisyUI 5
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when creating a new SolidJS project, scaffolding a SolidStart application, or setting up project infrastructure. Prevents misconfigured Vite/TypeScript settings, wrong directory structures, and React-style project patterns. Covers Vite configuration, TypeScript setup, component directory structure, routing, state management, and testing setup. Keywords: SolidJS scaffold, SolidStart project, Vite config, tsconfig, project template, file structure, routing setup, new SolidJS project, start from scratch, create SolidJS app.
Use when reviewing generated SolidJS code, validating a SolidJS project, or checking for React pattern contamination. Prevents silent reactivity breaks from incorrect signal access, destructured props, wrong control flow, and store mutation errors. Covers signal access patterns, control flow components, props handling, store mutations, event handling, and context usage. Keywords: SolidJS review, code validation, React contamination, signal access, createSignal, Show, For, props, stores, check my SolidJS code, is this correct, review component, validate SolidJS.
Use when starting a SolidJS project, checking API availability, or looking up import paths and version compatibility. Prevents using deprecated APIs such as SolidStart 0.x patterns or pre-0.15 router cache function. Covers version matrix for SolidJS 1.x/2.x and SolidStart, import reference, ecosystem package map, and getting started guidance. Keywords: SolidJS API, version matrix, SolidStart, solid-js imports, @solidjs/router, ecosystem, Vite, what is SolidJS, getting started, which version, API reference.
Use when reasoning about SolidJS reactivity, debugging tracking issues, or understanding why components run once. Prevents React mental model contamination such as expecting re-renders, virtual DOM diffing, or stale closure patterns. Covers reactive dependency graph, tracking contexts, ownership tree, synchronous execution model, and direct DOM updates. Keywords: SolidJS reactivity, fine-grained, signals, tracking scope, ownership, createEffect, createMemo, no virtual DOM, how reactivity works, why component runs once, not like React, mental model.
Use when implementing error boundaries, Suspense loading states, or error recovery in SolidJS components. Prevents uncaught rendering errors, missing fallback UIs, and incorrect ErrorBoundary/Suspense nesting. Covers ErrorBoundary with reset, Suspense for createResource, nested boundaries, caught vs uncaught errors, and combined error/loading patterns. Keywords: ErrorBoundary, Suspense, error handling, fallback, reset, createResource, loading state, error recovery, app crashes, unhandled error, loading spinner, catch errors in component.
Use when reviewing SolidJS code for React anti-patterns or converting React components to SolidJS. Prevents destructured props, useState/useEffect habits, Array.map rendering, and all other React patterns that silently break SolidJS reactivity. Covers all 12+ contamination patterns including props destructuring, signal misuse, effect cleanup, list rendering, conditional rendering, refs, children, and navigation. Keywords: React to SolidJS, destructure props, createSignal, createEffect, For component, Show component, anti-pattern, migration, convert from React, React habits, why does my component break, coming from React.
| name | daisyui-usage |
| description | MANDATORY usage rules for daisyUI 5 |
btn px-10 sets a custom horizontal padding to a btn! at the end of the Tailwind CSS utility class to override the existing styles. For example btn bg-red-500! sets a custom background color to a btn forcefully. This is a last resort solution and should be used sparinglyflex and grid for layout, it should be responsive using Tailwind CSS responsive utility prefixes.bg-base-100 text-base-content to body unless it's necessarybtn btn-primary, prefer btn, unless the user asked for a specific variant.daisyUI 5 class names are one of the following categories. These type names are only for reference and are not used in the actual code
component: the required component classpart: a child part of a componentstyle: sets a specific style to component or partbehavior: changes the behavior of component or partcolor: sets a specific color to component or partsize: sets a specific size to component or partplacement: sets a specific placement to component or partdirection: sets a specific direction to component or partmodifier: modifies the component or part in a specific wayvariant: prefixes for utility classes that conditionally apply styles. syntax is variant:utility-class