agentleFS
Sign inStart free
charanjit-singhcharanjit-singh/lovable-skills/skills/shadcn-patterns/SKILL.md

shadcn-patterns

Skill10 starsChanged 6 months agoMITView on GitHub

Use when adding UI with shadcn/ui: dialogs, sheets, data tables, forms, command palette, dropdowns, or layout components. Not for non-shadcn design systems or backend-only work.

The file

We split this skill into the rules it gives an agent

6 rules. About 0 are common, 1 is distinctive, and 5 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 5

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Use existing shadcn components from @/components/ui.

    line 11
  2. Very specific:

    Always include DialogTitle / SheetTitle for accessibility.

    line 20
  3. Very specific:

    Use @tanstack/react-table with shadcn Table, DataTable pattern.

    line 24
  4. Very specific:

    Use Sonner (<Toaster /> once at the root) for transient feedback.

    line 46
  5. Distinctive:

    Test at 375px width.

    line 67
  6. Very specific:

    Use CSS variables from shadcn (bg-background, text-foreground) — never hardcoded #fff.

    line 71

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

shadcn/ui patterns

Use existing shadcn components from @/components/ui. Do not reinvent primitives.

Dialog vs Sheet

UseComponent
Desktop modal, short formsDialog
Mobile-first, filters, long formsSheet (side or bottom)

Always include DialogTitle / SheetTitle for accessibility.

Data tables

  • Use @tanstack/react-table with shadcn Table, DataTable pattern.
  • Column headers sortable when list is large.
  • Row actions in DropdownMenu, not 5 inline buttons.
  • Empty/error states via error-states-and-empty-ui skill.

Forms

  • Form, FormField, FormItem, FormLabel, FormControl, FormMessage.
  • Pair with Zod + react-hook-form (typed-api-hooks-forms skill).

Buttons and actions

  • One primary action per section; destructive uses variant="destructive".
  • Button + disabled={isPending} during mutations.

Command palette

  • Command, CommandInput, CommandList, CommandItem for search/navigation.
  • Keyboard: Cmd/Ctrl+K when spec asks for it.

Toasts and notifications

  • Use Sonner (<Toaster /> once at the root) for transient feedback.
  • One toast per action; don't stack 5 success toasts.
  • Errors: short message + optional retry; never raw error.message from Supabase.
import { toast } from "sonner";

toast.success("Project created");
toast.error("Could not save changes", { description: "Please try again." });

Navigation patterns

  • Persistent left Sidebar for app shell; Tabs inside a route for sub-views.
  • Breadcrumb once routes go ≥ 3 levels deep.
  • Mobile: bottom nav or Sheet drawer — never desktop sidebar squeezed onto phones.

Responsive

  • Stack filters in Sheet on mobile; inline on md+.
  • Touch targets ≥ 44px where possible.
  • Test at 375px width.

Theming

  • Use CSS variables from shadcn (bg-background, text-foreground) — never hardcoded #fff.
  • Dark mode: see dark-mode-and-theming skill.

Avoid

  • Raw HTML <button> styled ad hoc when shadcn exists.
  • Nested dialogs without clear close path.
  • Missing aria labels on icon-only buttons.
  • Multiple toast libraries (Sonner + react-hot-toast + custom) in one app.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free