diff --git a/.claude/skills/frontend-ui-dark-ts/SKILL.md b/.claude/skills/frontend-ui-dark-ts/SKILL.md index 8ee4e0e..658cfa2 100644 --- a/.claude/skills/frontend-ui-dark-ts/SKILL.md +++ b/.claude/skills/frontend-ui-dark-ts/SKILL.md @@ -26,11 +26,11 @@ A modern dark-themed React UI system using **Tailwind CSS** and **Framer Motion* ## Quick Start ```bash -npm create vite@latest my-app -- --template react-ts +bun --bun create vite@latest my-app -- --template react-ts cd my-app -npm install framer-motion clsx react-router-dom -npm install -D tailwindcss postcss autoprefixer -npx tailwindcss init -p +bun --bun install framer-motion clsx react-router-dom +bun --bun install -D tailwindcss postcss autoprefixer +bunx --bun tailwindcss init -p ``` ## Project Structure diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv b/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv index 6e9bea5..e3b87d0 100644 --- a/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv +++ b/.claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv @@ -36,7 +36,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 35,Environment,Use NEXT_PUBLIC prefix,Client-accessible env vars need prefix,NEXT_PUBLIC_ for client vars,Server vars exposed to client,NEXT_PUBLIC_API_URL,API_SECRET in client code,High,https://nextjs.org/docs/app/building-your-application/configuring/environment-variables 36,Environment,Validate env vars,Check required env vars exist,Validate on startup,Undefined env at runtime,if (!process.env.DATABASE_URL) throw,process.env.DATABASE_URL (might be undefined),High, 37,Environment,Use .env.local for secrets,Local env file for development secrets,.env.local gitignored,Secrets in .env committed,.env.local with secrets,.env with DATABASE_PASSWORD,High, -38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true npm run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer +38,Performance,Analyze bundle size,Use @next/bundle-analyzer,Bundle analyzer in dev,Ship large bundles blindly,ANALYZE=true bun --bun run build,No bundle analysis,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/bundle-analyzer 39,Performance,Use dynamic imports,Code split with next/dynamic,dynamic() for heavy components,Import everything statically,const Chart = dynamic(() => import('./Chart')),import Chart from './Chart',Medium,https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading 40,Performance,Avoid layout shifts,Reserve space for dynamic content,Skeleton loaders aspect ratios,Content popping in,"",No placeholder for async content,High, 41,Performance,Use Partial Prerendering,Combine static and dynamic in one route,Static shell with Suspense holes,Full dynamic or static pages,Static header + dynamic content,Entire page SSR,Low,https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv b/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv index fb86e8d..cbaa7b3 100644 --- a/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv +++ b/.claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv @@ -1,6 +1,6 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL -1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@latest add button,Copy component code manually,High,https://ui.shadcn.com/docs/cli -2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add components directly,npx shadcn@latest init,npx shadcn@latest add button (without init),High,https://ui.shadcn.com/docs/installation +1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,bunx --bun shadcn@latest add component-name,Manual copy-paste from docs,bunx --bun shadcn@latest add button,Copy component code manually,High,https://ui.shadcn.com/docs/cli +2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,bunx --bun shadcn@latest init before adding components,Skip init and add components directly,bunx --bun shadcn@latest init,bunx --bun shadcn@latest add button (without init),High,https://ui.shadcn.com/docs/installation 3,Setup,Configure path aliases,Set up proper import aliases in tsconfig and components.json,Use @/components/ui path aliases,Relative imports like ../../components,import { Button } from "@/components/ui/button",import { Button } from "../../components/ui/button",Medium,https://ui.shadcn.com/docs/installation 4,Theming,Use CSS variables for colors,Define colors as CSS variables in globals.css for theming,CSS variables in :root and .dark,Hardcoded color values in components,bg-primary text-primary-foreground,bg-blue-500 text-white,High,https://ui.shadcn.com/docs/theming 5,Theming,Follow naming convention,Use semantic color names with foreground pattern,primary/primary-foreground secondary/secondary-foreground,Generic color names,--primary --primary-foreground,--blue --light-blue,Medium,https://ui.shadcn.com/docs/theming @@ -48,7 +48,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 47,Chart,Use Chart for data viz,Chart component with Recharts integration,Chart component for dashboards,Direct Recharts without wrapper,,,Medium,https://ui.shadcn.com/docs/components/chart 48,Chart,Define chart config,Create chartConfig for consistent theming,chartConfig with color definitions,Inline colors in charts,"{ desktop: { label: ""Desktop"", color: ""#2563eb"" } }",,Medium,https://ui.shadcn.com/docs/components/chart 49,Chart,Use ChartTooltip,Apply ChartTooltip for interactive charts,ChartTooltip with ChartTooltipContent,Recharts Tooltip directly,}/>, from recharts,Low,https://ui.shadcn.com/docs/components/chart -50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@latest add login-01,Custom login page from scratch,Medium,https://ui.shadcn.com/blocks +50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,bunx --bun shadcn@latest add dashboard-01,Build dashboard from scratch,bunx --bun shadcn@latest add login-01,Custom login page from scratch,Medium,https://ui.shadcn.com/blocks 51,Blocks,Customize block components,Modify copied block code to fit needs,Edit block files after installation,Use blocks without modification,Customize dashboard-01 layout,Use dashboard-01 as-is,Low,https://ui.shadcn.com/blocks 52,A11y,Use semantic components,Shadcn components have built-in ARIA,Rely on component accessibility,Override ARIA attributes,