Menu
MANDATORY color 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-colors |
| description | MANDATORY color usage rules for daisyUI 5 |
primary: Primary brand color, The main color of your brandprimary-content: Foreground content color to use on primary colorsecondary: Secondary brand color, The optional, secondary color of your brandsecondary-content: Foreground content color to use on secondary coloraccent: Accent brand color, The optional, accent color of your brandaccent-content: Foreground content color to use on accent colorneutral: Neutral dark color, For not-saturated parts of UIneutral-content: Foreground content color to use on neutral colorbase-100:-100 Base surface color of page, used for blank backgroundsbase-200:-200 Base color, darker shade, to create elevationsbase-300:-300 Base color, even more darker shade, to create elevationsbase-content: Foreground content color to use on base colorinfo: Info color, For informative/helpful messagesinfo-content: Foreground content color to use on info colorsuccess: Success color, For success/safe messagessuccess-content: Foreground content color to use on success colorwarning: Warning color, For warning/caution messageswarning-content: Foreground content color to use on warning colorerror: Error color, For error/danger/destructive messageserror-content: Foreground content color to use on error colorbg-primary will use the primary color for the backgrounddark: for daisyUI color namesred-500) is used, it will be the same red color on all themesprimary) is used, it will change color based on the themetext-gray-800 on bg-base-100 would be unreadable on a dark theme - because on dark theme, bg-base-100 is a dark color*-content colors should have a good contrast compared to their associated colorsbase-* colors for majority of the page. Use the default variant for all elements. Use primary color once only, for the most important element on the page.text-red-500) is allowed instead of using a daisyUI color name (for example text-error): when a specific content must be indepecent from the theme. For example if a svg icon or a chart graph must use a specific color, no matter what are our brand colors or theme colors.A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
@import 'tailwindcss';
@plugin "daisyui";
@plugin "daisyui/theme" {
name: 'mytheme';
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
/* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */
--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. In so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
--size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. In so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */
--border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. In so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */
--depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
--noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
}
People can use https://daisyui.com/theme-generator/ visual tool to create their own theme.