with one click
ask-shadcn-mechanic
Expert maintenance skill for shadcn/ui. Handles component customization, responsive layout debugging, and Form/Zod wiring while strictly enforcing UI/UX design integrity.
Menu
Expert maintenance skill for shadcn/ui. Handles component customization, responsive layout debugging, and Form/Zod wiring while strictly enforcing UI/UX design integrity.
Laravel scaffolding for SQL or Mongo (Official/Jenssegers), SoftDeletes, API standards.
Laravel maintenance with Zero Data Loss policy, Mongo/SQL debugging.
Vue 3 scaffolding for Laravel Inertia, Nuxt, or Vite. Composition API + TypeScript.
Vue 3 + Inertia maintenance. Fixes navigation reloads, prop mismatches, reactivity loss.
Guidelines for impact analysis, breaking change detection, and strategic database design.
Code review, staging, and Conventional Commit message generation. MUST NOT COMMIT.
| name | ask-shadcn-mechanic |
| description | Expert maintenance skill for shadcn/ui. Handles component customization, responsive layout debugging, and Form/Zod wiring while strictly enforcing UI/UX design integrity. |
<critical_constraints>
❌ NO arbitrary inline styles (style={{...}}) → Always use Tailwind utilities and cn().
❌ NO breaking a11y → Preserve Radix UI accessibility primitives (aria-attributes, focus management) when modifying components.
✅ MUST use class-variance-authority (cva) when expanding standard components with new visual variants.
✅ MUST verify responsive breakpoints (sm:, md:, lg:) and target dark mode (dark:) when resolving layout/color bugs.
✅ MUST utilize tailwind-merge (via cn()) gracefully when overriding styles from parent components.
</critical_constraints>
<design_integrity> shadcn has distinct UI/UX aesthetics (e.g., standard rounded corners, muted backgrounds, clear visual hierarchy).
p-6, p-4, and gap-4.text-muted-foreground for secondary text and font-medium for emphasis.bg-zinc-900) and mandate CSS variables (bg-background, border-border, ring-ring) so that light/dark mode transitions remain flawless.<variant_expansion> To add new visual states to a component (e.g., a "ghost-success" button):
cva() definition in the component (e.g., components/ui/button.tsx).variants object.<layout_mechanics>
z-40, z-50 to the specific Popover/Dropdown wrapper using className={cn(..., "z-50")}.
</layout_mechanics><form_wiring>
Forms use react-hook-form and zod.
zodResolver, the <Form> context, <FormField>, <FormControl>, and <FormMessage>.name bindings in FormField perfectly match the Zod schema keys.
</form_wiring><component_upgrades> When shadcn/ui releases an update to a custom-modified component:
npx shadcn@latest add [component] in a temp directory or backup the old component.cva variants to the new file.
</component_upgrades>