From 90ffb592ac98b4ad56e22c7cead862edf118729e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nguy=E1=BB=85n=20Tr=E1=BA=A7n=20Chung?= Date: Wed, 3 Dec 2025 12:47:03 +0900 Subject: [PATCH] feat: add Tailwind v4 rules (bg-linear, shrink-0, size-*, SVG dimensions) (#11) --- .claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv | 4 ++++ .shared/ui-ux-pro-max/data/stacks/html-tailwind.csv | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv b/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv index 6c022da..0efe300 100644 --- a/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv +++ b/.claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv @@ -50,3 +50,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state 50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values 51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors +52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image +53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink +54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size +55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,,SVG without explicit dimensions,,,High, diff --git a/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv b/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv index 6c022da..0efe300 100644 --- a/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv +++ b/.shared/ui-ux-pro-max/data/stacks/html-tailwind.csv @@ -50,3 +50,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL 49,Interactivity,Group and Peer,Style based on parent/sibling state,group-hover peer-checked,JS for simple state interactions,group-hover:text-blue-500,onMouseEnter={() => setHover(true)},Low,https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state 50,Customization,Arbitrary Values,Use [] for one-off values,w-[350px] for specific needs,Creating config for single use,top-[117px] (if strictly needed),style={{ top: '117px' }},Low,https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values 51,Colors,Theme color variables,Define colors in Tailwind theme and use directly,bg-primary text-success border-cta,bg-[var(--color-primary)] text-[var(--color-success)],bg-primary,bg-[var(--color-primary)],Medium,https://tailwindcss.com/docs/customizing-colors +52,Colors,Use bg-linear-to-* for gradients,Tailwind v4 uses bg-linear-to-* syntax for gradients,bg-linear-to-r bg-linear-to-b,bg-gradient-to-* (deprecated in v4),bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500 to-purple-500,Medium,https://tailwindcss.com/docs/background-image +53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink +54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size +55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,,SVG without explicit dimensions,,,High,