just-works: Skill for Claude Code

shadcn/ui coding

Match project conventions. Read components.json for style, Tailwind version, aliases, and RSC settings. Check components/ui/ for local component source and package.json for React version (18 vs 19) and Radix package format (unified radix-ui vs individual @radix-ui/react-*). These defaults apply only when the project has no established convention.

Never rules

These are unconditional. They prevent runtime errors, accessibility breakage, and infinite re-renders regardless of project style.

• Never import shadcn components from npm -- shadcn is not a package. Import from the local alias.

// Wrong: shadcn is not an npm package
import { Button } from "shadcn/ui";
import { Button } from "@shadcn/ui";

// Correct: import from the local alias defined in components.json
import { Button } from "@/components/ui/button";

• Never flatten Radix compound components -- Dialog, DropdownMenu, Select, AlertDialog, Menubar, NavigationMenu, ContextMenu, and Tabs require their nested structure. Removing wrapper layers breaks ARIA roles and keyboard navigation.

// Wrong: missing compound structure, broken accessibility
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogTitle>Title</DialogTitle>
  <DialogDescription>Desc</DialogDescription>
</Dialog>

// Correct: full compound structure preserved
<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Desc</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

• Never omit asChild when wrapping custom elements in Trigger components -- without asChild, the Trigger renders its own <button>, creating button-in-button nesting (invalid HTML, broken accessibility).

// Wrong: renders <button><button>...</button></button>
<DialogTrigger>
  <Button variant="outline">Open</Button>
</DialogTrigger>

// Correct: Slot merges props onto the child element
<DialogTrigger asChild>
  <Button variant="outline">Open</Button>
</DialogTrigger>