Menu
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.
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
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.
Monorepo architecture, app boundaries, package ownership, and cross-domain implementation guidance for Dukkani.
Storefront app guidance for product browsing, cart, checkout, localization, and oRPC integration in apps/storefront.
Best practices for Remotion - Video creation in React
apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form.
| name | dukkani-dashboard |
| description | apps/dashboard src layout — hooks (api vs controllers), stores, lib, product form. |
| triggers | ["apps/dashboard","dashboard hooks","useProductForm"] |
Canonical rules: .cursor/rules/apps/dashboard.mdc
Route params: Client pages under [id] (and similar) use getDynamicRouteParam from shared/lib/route-params.util.ts — see dashboard rule “Dynamic route params (client components)”.
productFormOptions: components/app/products/product-form-options.ts (TanStack formOptions, colocated with form UI). Re-exported from product-form.tsx for convenience; use-product-form imports the options file directly to avoid circular imports with the shell component.useProductStore: Zustand list/catalog state only — not form field values.