From f1c036d1d88a33f5c6e99839e371feee376b144a Mon Sep 17 00:00:00 2001 From: "Kalana B. Thilakarathna" Date: Tue, 25 Aug 2026 16:20:50 +0530 Subject: [PATCH] frontend initiatewith shadcn uis --- .../.agents/skills/shadcn/SKILL.md | 277 + .../.agents/skills/shadcn/agents/openai.yml | 5 + .../skills/shadcn/assets/shadcn-small.png | Bin 0 -> 1049 bytes .../.agents/skills/shadcn/assets/shadcn.png | Bin 0 -> 3852 bytes distribution_fe/.agents/skills/shadcn/cli.md | 290 + .../.agents/skills/shadcn/customization.md | 209 + .../.agents/skills/shadcn/evals/evals.json | 77 + distribution_fe/.agents/skills/shadcn/mcp.md | 105 + .../.agents/skills/shadcn/registry.md | 277 + .../skills/shadcn/rules/base-vs-radix.md | 306 + .../.agents/skills/shadcn/rules/chat.md | 224 + .../skills/shadcn/rules/composition.md | 213 + .../.agents/skills/shadcn/rules/forms.md | 192 + .../.agents/skills/shadcn/rules/icons.md | 101 + .../.agents/skills/shadcn/rules/styling.md | 185 + .../.claude/skills/shadcn/SKILL.md | 277 + .../.claude/skills/shadcn/agents/openai.yml | 5 + .../skills/shadcn/assets/shadcn-small.png | Bin 0 -> 1049 bytes .../.claude/skills/shadcn/assets/shadcn.png | Bin 0 -> 3852 bytes distribution_fe/.claude/skills/shadcn/cli.md | 290 + .../.claude/skills/shadcn/customization.md | 209 + .../.claude/skills/shadcn/evals/evals.json | 77 + distribution_fe/.claude/skills/shadcn/mcp.md | 105 + .../.claude/skills/shadcn/registry.md | 277 + .../skills/shadcn/rules/base-vs-radix.md | 306 + .../.claude/skills/shadcn/rules/chat.md | 224 + .../skills/shadcn/rules/composition.md | 213 + .../.claude/skills/shadcn/rules/forms.md | 192 + .../.claude/skills/shadcn/rules/icons.md | 101 + .../.claude/skills/shadcn/rules/styling.md | 185 + .../COMMIT_EDITMSG | 1 + .../.git_backup_distribution_fe/FETCH_HEAD | 0 .../.git_backup_distribution_fe/HEAD | 1 + .../.git_backup_distribution_fe/config | 7 + .../.git_backup_distribution_fe/description | 1 + .../hooks/applypatch-msg.sample | 15 + .../hooks/commit-msg.sample | 24 + .../hooks/fsmonitor-watchman.sample | 174 + .../hooks/post-update.sample | 8 + .../hooks/pre-applypatch.sample | 14 + .../hooks/pre-commit.sample | 49 + .../hooks/pre-merge-commit.sample | 13 + .../hooks/pre-push.sample | 53 + .../hooks/pre-rebase.sample | 169 + .../hooks/pre-receive.sample | 24 + .../hooks/prepare-commit-msg.sample | 42 + .../hooks/push-to-checkout.sample | 78 + .../hooks/sendemail-validate.sample | 77 + .../hooks/update.sample | 128 + .../.git_backup_distribution_fe/index | Bin 0 -> 2109 bytes .../.git_backup_distribution_fe/info/exclude | 6 + .../.git_backup_distribution_fe/logs/HEAD | 1 + .../logs/refs/heads/master | 1 + .../03/b693a7f93d0da640b45d5961a6a30c718b3177 | Bin 0 -> 85 bytes .../05/e726d1b4201bc8c7716d2b058279676582e8c0 | Bin 0 -> 239 bytes .../08/8d90049e99bcf4d4c7d4018d36368f0ceb81a8 | Bin 0 -> 141 bytes .../0d/4ba497cebf1e2e01992220edbb40a88abc5212 | Bin 0 -> 125 bytes .../1e/66186dfe120684092c6e3eef77e24022918ac8 | 2 + .../27/0dd7415ba36c38c4e4ea76c8907dd3d3aa2e44 | Bin 0 -> 438 bytes .../2f/8795a936c6fbca951780dd7da3eec156b43084 | Bin 0 -> 92 bytes .../3d/44f4815118cefa955f645c7cf24796c77c4927 | Bin 0 -> 651 bytes .../45/343f1b48bd33af0bf3478283ff4a49b8894a9f | Bin 0 -> 538 bytes .../46/1b0084104385d8cb1d4d6b5f6114033be973fe | 2 + .../70/ca41f00bdd2dabe4fc05bf7232ff04924c374f | Bin 0 -> 90707 bytes .../71/8d6fea4835ec2d246af9800eddb7ffb276240c | Bin 0 -> 9641 bytes .../73/15a79b7d0a246fa8afcb64e85d6426a1958b0c | 2 + .../7b/b15a3e59978f48d191e43804e150f32d9aec44 | 5 + .../8b/d0e39085d5260e7f8faffcad2fdc45e10aef33 | 3 + .../98/ff035b0228a6045943ce431155f3961fd1fe73 | Bin 0 -> 360 bytes .../a8/a2054a152e7f764ca02887b8ec7c9c91a091b3 | Bin 0 -> 182 bytes .../bc/a0e21ac88217b481c589802feb66db29a1b648 | 3 + .../bd/0c391ddd1088e9067844c48835bf4abcd61783 | 2 + .../c5/9e98a0ba69902ee359a9beca04d7661ae5480f | 1 + .../d5/64d0bc3dd917926892c55e3706cc116d5b165e | Bin 0 -> 53 bytes .../de/dd1d16aabc9d9605aa428ab16b7bc81da17b80 | Bin 0 -> 54 bytes .../e6/9de29bb2d1d6434b8b29ae775ad8c2e48c5391 | Bin 0 -> 15 bytes .../e8/597e11c99aabf1ed29db3012ff2772f0fa8c27 | Bin 0 -> 1028 bytes .../e8/7e24da14e72c8e4b61379587a2c98a8e146b02 | Bin 0 -> 1034 bytes .../ec/d831f8a0b5d801cfe9cd6cf7601ffb710381cd | Bin 0 -> 154 bytes .../f6/2ca4272ccf54d4064f7780d852400c0ac32df1 | Bin 0 -> 88 bytes .../refs/heads/master | 1 + distribution_fe/.gitignore | 36 + distribution_fe/.prettierignore | 7 + distribution_fe/.prettierrc | 11 + distribution_fe/AGENTS.md | 5 + distribution_fe/README.md | 21 + distribution_fe/app/(auth)/login/page.tsx | 14 + distribution_fe/app/(dashboard)/layout.tsx | 24 + distribution_fe/app/(dashboard)/page.tsx | 8 + distribution_fe/app/favicon.ico | Bin 0 -> 25931 bytes distribution_fe/app/globals.css | 129 + distribution_fe/app/layout.tsx | 35 + distribution_fe/components.json | 25 + distribution_fe/components/.gitkeep | 0 .../components/layout/app-sidebar.tsx | 175 + .../components/layout/bottom-nav.tsx | 52 + .../shared/data-table/data-table.tsx | 686 ++ .../data-table/hooks/use-table-export.ts | 73 + .../data-table/hooks/use-table-filter.ts | 33 + .../shared/data-table/hooks/use-table-sort.ts | 31 + .../components/shared/data-table/index.ts | 17 + .../shared/data-table/table-pagination.tsx | 106 + .../shared/data-table/table-toolbar.tsx | 124 + .../components/shared/data-table/types.ts | 117 + .../shared/data-table/utils/nested-value.ts | 11 + distribution_fe/components/theme-provider.tsx | 71 + distribution_fe/components/ui/badge.tsx | 52 + distribution_fe/components/ui/button.tsx | 56 + distribution_fe/components/ui/checkbox.tsx | 29 + distribution_fe/components/ui/collapsible.tsx | 21 + .../components/ui/dropdown-menu.tsx | 267 + distribution_fe/components/ui/input.tsx | 20 + distribution_fe/components/ui/select.tsx | 200 + distribution_fe/components/ui/separator.tsx | 25 + distribution_fe/components/ui/sheet.tsx | 138 + distribution_fe/components/ui/sidebar.tsx | 727 ++ distribution_fe/components/ui/skeleton.tsx | 13 + distribution_fe/components/ui/table.tsx | 116 + distribution_fe/components/ui/tooltip.tsx | 66 + distribution_fe/config/nav.ts | 154 + distribution_fe/contexts/auth-context.tsx | 107 + distribution_fe/eslint.config.mjs | 18 + distribution_fe/hooks/.gitkeep | 0 distribution_fe/hooks/use-mobile.ts | 19 + distribution_fe/hooks/use-permission.ts | 20 + distribution_fe/lib/.gitkeep | 0 distribution_fe/lib/api.ts | 37 + distribution_fe/lib/utils.ts | 6 + distribution_fe/next.config.ts | 5 + distribution_fe/package-lock.json | 9906 +++++++++++++++++ distribution_fe/package.json | 41 + distribution_fe/postcss.config.mjs | 7 + distribution_fe/public/.gitkeep | 0 distribution_fe/skills-lock.json | 11 + distribution_fe/tsconfig.json | 35 + distribution_fe/types/api.ts | 521 + 136 files changed, 20257 insertions(+) create mode 100644 distribution_fe/.agents/skills/shadcn/SKILL.md create mode 100644 distribution_fe/.agents/skills/shadcn/agents/openai.yml create mode 100644 distribution_fe/.agents/skills/shadcn/assets/shadcn-small.png create mode 100644 distribution_fe/.agents/skills/shadcn/assets/shadcn.png create mode 100644 distribution_fe/.agents/skills/shadcn/cli.md create mode 100644 distribution_fe/.agents/skills/shadcn/customization.md create mode 100644 distribution_fe/.agents/skills/shadcn/evals/evals.json create mode 100644 distribution_fe/.agents/skills/shadcn/mcp.md create mode 100644 distribution_fe/.agents/skills/shadcn/registry.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/base-vs-radix.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/chat.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/composition.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/forms.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/icons.md create mode 100644 distribution_fe/.agents/skills/shadcn/rules/styling.md create mode 100644 distribution_fe/.claude/skills/shadcn/SKILL.md create mode 100644 distribution_fe/.claude/skills/shadcn/agents/openai.yml create mode 100644 distribution_fe/.claude/skills/shadcn/assets/shadcn-small.png create mode 100644 distribution_fe/.claude/skills/shadcn/assets/shadcn.png create mode 100644 distribution_fe/.claude/skills/shadcn/cli.md create mode 100644 distribution_fe/.claude/skills/shadcn/customization.md create mode 100644 distribution_fe/.claude/skills/shadcn/evals/evals.json create mode 100644 distribution_fe/.claude/skills/shadcn/mcp.md create mode 100644 distribution_fe/.claude/skills/shadcn/registry.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/base-vs-radix.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/chat.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/composition.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/forms.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/icons.md create mode 100644 distribution_fe/.claude/skills/shadcn/rules/styling.md create mode 100644 distribution_fe/.git_backup_distribution_fe/COMMIT_EDITMSG create mode 100644 distribution_fe/.git_backup_distribution_fe/FETCH_HEAD create mode 100644 distribution_fe/.git_backup_distribution_fe/HEAD create mode 100644 distribution_fe/.git_backup_distribution_fe/config create mode 100644 distribution_fe/.git_backup_distribution_fe/description create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/applypatch-msg.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/commit-msg.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/fsmonitor-watchman.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/post-update.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-applypatch.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-commit.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-merge-commit.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-push.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-rebase.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/pre-receive.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/prepare-commit-msg.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/push-to-checkout.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/sendemail-validate.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/hooks/update.sample create mode 100644 distribution_fe/.git_backup_distribution_fe/index create mode 100644 distribution_fe/.git_backup_distribution_fe/info/exclude create mode 100644 distribution_fe/.git_backup_distribution_fe/logs/HEAD create mode 100644 distribution_fe/.git_backup_distribution_fe/logs/refs/heads/master create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/03/b693a7f93d0da640b45d5961a6a30c718b3177 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/05/e726d1b4201bc8c7716d2b058279676582e8c0 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/08/8d90049e99bcf4d4c7d4018d36368f0ceb81a8 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/0d/4ba497cebf1e2e01992220edbb40a88abc5212 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/1e/66186dfe120684092c6e3eef77e24022918ac8 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/27/0dd7415ba36c38c4e4ea76c8907dd3d3aa2e44 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/2f/8795a936c6fbca951780dd7da3eec156b43084 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/3d/44f4815118cefa955f645c7cf24796c77c4927 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/45/343f1b48bd33af0bf3478283ff4a49b8894a9f create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/46/1b0084104385d8cb1d4d6b5f6114033be973fe create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/70/ca41f00bdd2dabe4fc05bf7232ff04924c374f create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/71/8d6fea4835ec2d246af9800eddb7ffb276240c create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/73/15a79b7d0a246fa8afcb64e85d6426a1958b0c create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/7b/b15a3e59978f48d191e43804e150f32d9aec44 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/8b/d0e39085d5260e7f8faffcad2fdc45e10aef33 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/98/ff035b0228a6045943ce431155f3961fd1fe73 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/a8/a2054a152e7f764ca02887b8ec7c9c91a091b3 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/bc/a0e21ac88217b481c589802feb66db29a1b648 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/bd/0c391ddd1088e9067844c48835bf4abcd61783 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/c5/9e98a0ba69902ee359a9beca04d7661ae5480f create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/d5/64d0bc3dd917926892c55e3706cc116d5b165e create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/de/dd1d16aabc9d9605aa428ab16b7bc81da17b80 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/e6/9de29bb2d1d6434b8b29ae775ad8c2e48c5391 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/e8/597e11c99aabf1ed29db3012ff2772f0fa8c27 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/e8/7e24da14e72c8e4b61379587a2c98a8e146b02 create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/ec/d831f8a0b5d801cfe9cd6cf7601ffb710381cd create mode 100644 distribution_fe/.git_backup_distribution_fe/objects/f6/2ca4272ccf54d4064f7780d852400c0ac32df1 create mode 100644 distribution_fe/.git_backup_distribution_fe/refs/heads/master create mode 100644 distribution_fe/.gitignore create mode 100644 distribution_fe/.prettierignore create mode 100644 distribution_fe/.prettierrc create mode 100644 distribution_fe/AGENTS.md create mode 100644 distribution_fe/README.md create mode 100644 distribution_fe/app/(auth)/login/page.tsx create mode 100644 distribution_fe/app/(dashboard)/layout.tsx create mode 100644 distribution_fe/app/(dashboard)/page.tsx create mode 100644 distribution_fe/app/favicon.ico create mode 100644 distribution_fe/app/globals.css create mode 100644 distribution_fe/app/layout.tsx create mode 100644 distribution_fe/components.json create mode 100644 distribution_fe/components/.gitkeep create mode 100644 distribution_fe/components/layout/app-sidebar.tsx create mode 100644 distribution_fe/components/layout/bottom-nav.tsx create mode 100644 distribution_fe/components/shared/data-table/data-table.tsx create mode 100644 distribution_fe/components/shared/data-table/hooks/use-table-export.ts create mode 100644 distribution_fe/components/shared/data-table/hooks/use-table-filter.ts create mode 100644 distribution_fe/components/shared/data-table/hooks/use-table-sort.ts create mode 100644 distribution_fe/components/shared/data-table/index.ts create mode 100644 distribution_fe/components/shared/data-table/table-pagination.tsx create mode 100644 distribution_fe/components/shared/data-table/table-toolbar.tsx create mode 100644 distribution_fe/components/shared/data-table/types.ts create mode 100644 distribution_fe/components/shared/data-table/utils/nested-value.ts create mode 100644 distribution_fe/components/theme-provider.tsx create mode 100644 distribution_fe/components/ui/badge.tsx create mode 100644 distribution_fe/components/ui/button.tsx create mode 100644 distribution_fe/components/ui/checkbox.tsx create mode 100644 distribution_fe/components/ui/collapsible.tsx create mode 100644 distribution_fe/components/ui/dropdown-menu.tsx create mode 100644 distribution_fe/components/ui/input.tsx create mode 100644 distribution_fe/components/ui/select.tsx create mode 100644 distribution_fe/components/ui/separator.tsx create mode 100644 distribution_fe/components/ui/sheet.tsx create mode 100644 distribution_fe/components/ui/sidebar.tsx create mode 100644 distribution_fe/components/ui/skeleton.tsx create mode 100644 distribution_fe/components/ui/table.tsx create mode 100644 distribution_fe/components/ui/tooltip.tsx create mode 100644 distribution_fe/config/nav.ts create mode 100644 distribution_fe/contexts/auth-context.tsx create mode 100644 distribution_fe/eslint.config.mjs create mode 100644 distribution_fe/hooks/.gitkeep create mode 100644 distribution_fe/hooks/use-mobile.ts create mode 100644 distribution_fe/hooks/use-permission.ts create mode 100644 distribution_fe/lib/.gitkeep create mode 100644 distribution_fe/lib/api.ts create mode 100644 distribution_fe/lib/utils.ts create mode 100644 distribution_fe/next.config.ts create mode 100644 distribution_fe/package-lock.json create mode 100644 distribution_fe/package.json create mode 100644 distribution_fe/postcss.config.mjs create mode 100644 distribution_fe/public/.gitkeep create mode 100644 distribution_fe/skills-lock.json create mode 100644 distribution_fe/tsconfig.json create mode 100644 distribution_fe/types/api.ts diff --git a/distribution_fe/.agents/skills/shadcn/SKILL.md b/distribution_fe/.agents/skills/shadcn/SKILL.md new file mode 100644 index 0000000..1b4c414 --- /dev/null +++ b/distribution_fe/.agents/skills/shadcn/SKILL.md @@ -0,0 +1,277 @@ +--- +name: shadcn +description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". +user-invocable: false +allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) +--- + +# shadcn/ui + +A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. + +> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +## Current Project Context + +```json +!`npx shadcn@latest info --json` +``` + +The JSON above contains the project config and installed components. Use `npx shadcn@latest docs ` to get documentation and example URLs for any component. + +## Principles + +1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. +2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. +3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. +4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. + +## Critical Rules + +These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs. + +### Styling & Tailwind → [styling.md](./rules/styling.md) + +- **`className` for layout, not styling.** Never override component colors or typography. +- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. +- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. +- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. +- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). +- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. +- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. + +### Forms & Inputs → [forms.md](./rules/forms.md) + +- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout. +- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`. +- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.** +- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state. +- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading. +- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control. + +### Component Structure → [composition.md](./rules/composition.md) + +- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`. +- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden. +- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`. +- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`. +- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`. +- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load. + +### Use Components, Not Custom Markup → [composition.md](./rules/composition.md) + +- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`. +- **Callouts use `Alert`.** Don't build custom styled divs. +- **Empty states use `Empty`.** Don't build custom empty state markup. +- **Toast follows the project base.** Use `toast` from the `toast` component for + Base UI projects. Use `toast()` from `sonner` for Radix and React Aria + projects. +- **Use `Separator`** instead of `
` or `
`. +- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs. +- **Use `Badge`** instead of custom styled spans. + +### Icons → [icons.md](./rules/icons.md) + +- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon. +- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`. +- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup. + +### Chat & Messaging → [chat.md](./rules/chat.md) + +- **Chat UI composes the chat primitives.** Conversations use `MessageScroller`, rows use `Message`, surfaces use `Bubble`. Never hand-rolled bubble `div`s or a raw scroll container. +- **`MessageScroller` owns scroll behavior.** Streaming follow, anchoring, and jump-to-latest (`MessageScrollerButton`) are built in. Don't write a `useStickToBottom`/`ResizeObserver` hook. +- **Attachments use `Attachment`; system notes and dividers use `Marker`.** Not `Item` cards or `Separator` + a label. + +### CLI + +- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode `, `preset url `, or `preset open `. For project-aware preset detection, use `npx shadcn@latest preset resolve`. +- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply ` for existing projects, or `npx shadcn@latest init --preset ` when initializing. + +## Key Patterns + +These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above. + +```tsx +// Form layout: FieldGroup + Field, not div + Label. + + + Email + + + + +// Validation: data-invalid on Field, aria-invalid on the control. + + Email + + Invalid email. + + +// Icons in buttons: data-icon, no sizing classes. + + +// Spacing: gap-*, not space-y-*. +
// correct +
// wrong + +// Equal dimensions: size-*, not w-* h-*. + // correct + // wrong + +// Status colors: Badge variants or semantic tokens, not raw colors. ++20.1% // correct ++20.1% // wrong +``` + +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `toast` (Base UI), `sonner` (Radix/Aria), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | +| Chat / conversation UI | `MessageScroller`, `Message`, `Bubble`, `Attachment`, `Marker` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). +- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information. + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs ` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +```bash +npx shadcn@latest docs button dialog select +``` + +**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing. + +## Workflow + +1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh. +2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed. +3. **Find components** — `npx shadcn@latest search`. +4. **Get docs and examples** — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`. +5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below). +6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project. +7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on. +8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, `owner/repo`, etc.), ask which registry to use. Never default to a registry on behalf of the user. +9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**? + - **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values. + - **Inspect incoming preset**: `npx shadcn@latest preset decode `. Use `preset url ` or `preset open ` to share or open the preset builder. + - **Overwrite**: `npx shadcn@latest apply `. Overwrites detected components, fonts, and CSS variables. + - **Partial**: `npx shadcn@latest apply --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms. + - **Merge**: `npx shadcn@latest init --preset --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually. + - **Skip**: `npx shadcn@latest init --preset --force --no-reinstall`. Only updates config and CSS, leaves components as-is. + - **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base ` explicitly — preset codes do not encode the base. + +## Updating Components + +When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.** + +1. Run `npx shadcn@latest add --dry-run` to see all files that would be affected. +2. For each file, run `npx shadcn@latest add --diff ` to see what changed upstream vs local. +3. Decide per file based on the diff: + - No local changes → safe to overwrite. + - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications. + - User says "just update everything" → use `--overwrite`, but confirm first. +4. **Never use `--overwrite` without the user's explicit approval.** + +## Quick Reference + +```bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=nova (base style implied) + +# Apply a preset to an existing project. +npx shadcn@latest apply a2r6bw +npx shadcn@latest apply a2r6bw --only theme +npx shadcn@latest apply a2r6bw --only font +npx shadcn@latest apply a2r6bw --only theme,font + +# Inspect preset codes and project preset state. +npx shadcn@latest preset decode a2r6bw +npx shadcn@latest preset url a2r6bw +npx shadcn@latest preset open a2r6bw +npx shadcn@latest preset resolve +npx shadcn@latest preset resolve --json + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add owner/repo/item +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx +npx shadcn@latest add owner/repo/item --dry-run + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" +npx shadcn@latest search owner/repo -q "login" +npx shadcn@latest search # all configured registries +npx shadcn@latest search @shadcn -q "menu" -t ui # filter by item type + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +npx shadcn@latest view owner/repo/item +``` + +**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma` +**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo) +**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com). + +## Detailed References + +- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states +- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading +- [rules/chat.md](./rules/chat.md) — MessageScroller, Message, Bubble, Attachment, Marker; streaming, anchoring, jump-to-latest +- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects +- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion +- [cli.md](./cli.md) — Commands, flags, presets, templates +- [registry.md](./registry.md) — Authoring source registries, `include`, item definitions, dependencies, GitHub registry rules +- [customization.md](./customization.md) — Theming, CSS variables, extending components diff --git a/distribution_fe/.agents/skills/shadcn/agents/openai.yml b/distribution_fe/.agents/skills/shadcn/agents/openai.yml new file mode 100644 index 0000000..ab636da --- /dev/null +++ b/distribution_fe/.agents/skills/shadcn/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/distribution_fe/.agents/skills/shadcn/assets/shadcn-small.png b/distribution_fe/.agents/skills/shadcn/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVkr05M1pgl1mAh%j*h z6I`{x0%imor0saV%ts)_S>O>_%)r1c48n{Iv*t(uO^eJ7i71Ki^|4CM&(%vz$xlkv ztH>0+>{umUo3Q%e#RDspr3imfVamB1>jfNYSkzLEl1NlCV?QiN}Sf^&XRs)CuG zfu4bq9hZWFf=y9MnpKdC8&o@xXRDM^Qc_^0uU}qXu2*iXmtT~wZ)j<0sc&GUZ)Btk zRH0j3nOBlnp_^B%3^4>|j!SBBa#3bMNoIbY0?6FNr2NtnTO}osMQ{LdXGvxn!lt}p zsJDO~)CbAv8|oS8!_5Y2wE>A*`4?rT0&NDFZ)a!&R*518wZ}#uWI2*!AU*|)0=;U- zWup%dHajlKxQFb(K%V94;uvBfm>Yb$>yU#$kCbgiC(9RwrlwA(rsW(``(6H=zq@!* zUB_~Trk_lTdxPh$yxDTsVY&L;b+6{tRm^+d+gl^OQcCIBok=%y)Vhx@dR1ceL3r{0 z9=2nMXx8DxEkhL{v?(>~8{qDBkfB!u-iDB`| z-5d%Ae82YI%n8Zg9$mRN?o-|V)V*=5b-R>a>}P2{=pcK^B(&B-W{C#Z!Q%b*ueK>n zK6ymYLRneebCKDSzcqHEHFopo-mkH{zIkt2Z0^086Tko7%N)NxoZYSDM1jSUwPpuS zSeq*wzrC2D(tq4pZ#s9QP@Cd8Q^wW3*2cL_519?*;#4`B;+ei#o;C{Kkamm3Jooa; zE$3K-+c(6ShTjelW_B*W5o zcS6z34IR5C-SIF8m(lui^IOy!-~We?b1?PSGniCYR=ZyR^%<1lJzf1=);T3K0RU@N BSy=!8 literal 0 HcmV?d00001 diff --git a/distribution_fe/.agents/skills/shadcn/assets/shadcn.png b/distribution_fe/.agents/skills/shadcn/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 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 **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. + +> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag. + +## Contents + +- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build +- Templates: next, vite, start, react-router, astro +- Presets: named, code, URL formats and fields +- Switching presets + +--- + +## Commands + +### `init` — Initialize or create a project + +```bash +npx shadcn@latest init [components...] [options] +``` + +Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step. + +| Flag | Short | Description | Default | +| ----------------------- | ----- | --------------------------------------------------------- | ------- | +| `--template