tailwind-patterns

Name: tailwind-patterns
Author: sabahattink

27stars9forks

How to install tailwind-patterns?

sabahattink/antigravity-fullstack-hq/tailwind-patterns

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill tailwind-patterns

Installs into the current project.

Summary

Tailwind CSS v4 patterns, component styling, dark mode, responsive design, and design system integration. Use when styling components or reviewing CSS.

Files · 1

View on GitHub

SKILL.md

1	# Tailwind Patterns
2
3	## Core Approach
4
5	- Utility-first: compose classes, don't write custom CSS
6	- Extract components, not classes (use React components, not `@apply`)
7	- Consistent spacing/color via design tokens
8
9	## Component Patterns
10
11	### Button Variants
12
13	```tsx
14	const buttonVariants = {
15	primary: 'bg-blue-600 hover:bg-blue-700 text-white',
16	secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900',
17	danger: 'bg-red-600 hover:bg-red-700 text-white',
18	ghost: 'hover:bg-gray-100 text-gray-700',
19	}
20
21	interface ButtonProps {
22	variant?: keyof typeof buttonVariants
23	size?: 'sm' \| 'md' \| 'lg'
24	children: React.ReactNode
25	}
26
27	export const Button = ({ variant = 'primary', size = 'md', children }: ButtonProps) => {
28	const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' }
29	return (
30	<button className={`${buttonVariants[variant]} ${sizes[size]} rounded-lg font-medium transition-colors`}>
31	{children}
32	</button>
33	)
34	}
35	```
36
37	### Responsive Design
38
39	```tsx
40	// Mobile-first approach
41	<div className="
42	flex flex-col // mobile: stack
43	md:flex-row // tablet: row
44	lg:grid lg:grid-cols-3 // desktop: 3 columns
45	gap-4
46	">
47	```
48
49	### Dark Mode
50
51	```tsx
52	// Use dark: prefix
53	<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
54	<p className="text-gray-600 dark:text-gray-400">
55	Secondary text
56	</p>
57	</div>
58	```
59
60	## Design Tokens (v4)
61
62	```css
63	/* In CSS — v4 uses CSS variables */
64	@theme {
65	--color-primary: oklch(0.6 0.2 250);
66	--color-primary-foreground: oklch(1 0 0);
67	--spacing-page: 1.5rem;
68	--radius-card: 0.75rem;
69	}
70	```
71
72	```tsx
73	// Use in components
74	<div className="bg-primary text-primary-foreground p-page rounded-card">
75	```
76
77	## Common Patterns
78
79	### Card
80
81	```tsx
82	<div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
83	```
84
85	### Form Input
86
87	```tsx
88	<input className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-900" />
89	```
90
91	### Skeleton Loader
92
93	```tsx
94	<div className="animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700 h-4 w-3/4" />
95	```
96
97	## Forbidden Patterns
98
99	```tsx
100	// ❌ Never use @apply for component styles
101	.btn { @apply px-4 py-2; } // extract React component instead
102
103	// ❌ Arbitrary values when token exists
104	<div className="text-[#3b82f6]" /> // use text-blue-500
105
106	// ❌ Inline styles with Tailwind
107	<div style={{ color: 'blue' }} className="...">
108	```

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

tailwind-patterns

27stars9forks

View on GitHub

How to install tailwind-patterns?

sabahattink/antigravity-fullstack-hq/tailwind-patterns

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill tailwind-patterns

Installs into the current project.

Summary

Tailwind CSS v4 patterns, component styling, dark mode, responsive design, and design system integration. Use when styling components or reviewing CSS.

Files · 1

View on GitHub

SKILL.md

1	# Tailwind Patterns
2
3	## Core Approach
4
5	- Utility-first: compose classes, don't write custom CSS
6	- Extract components, not classes (use React components, not `@apply`)
7	- Consistent spacing/color via design tokens
8
9	## Component Patterns
10
11	### Button Variants
12
13	```tsx
14	const buttonVariants = {
15	primary: 'bg-blue-600 hover:bg-blue-700 text-white',
16	secondary: 'bg-gray-100 hover:bg-gray-200 text-gray-900',
17	danger: 'bg-red-600 hover:bg-red-700 text-white',
18	ghost: 'hover:bg-gray-100 text-gray-700',
19	}
20
21	interface ButtonProps {
22	variant?: keyof typeof buttonVariants
23	size?: 'sm' \| 'md' \| 'lg'
24	children: React.ReactNode
25	}
26
27	export const Button = ({ variant = 'primary', size = 'md', children }: ButtonProps) => {
28	const sizes = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2', lg: 'px-6 py-3 text-lg' }
29	return (
30	<button className={`${buttonVariants[variant]} ${sizes[size]} rounded-lg font-medium transition-colors`}>
31	{children}
32	</button>
33	)
34	}
35	```
36
37	### Responsive Design
38
39	```tsx
40	// Mobile-first approach
41	<div className="
42	flex flex-col // mobile: stack
43	md:flex-row // tablet: row
44	lg:grid lg:grid-cols-3 // desktop: 3 columns
45	gap-4
46	">
47	```
48
49	### Dark Mode
50
51	```tsx
52	// Use dark: prefix
53	<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
54	<p className="text-gray-600 dark:text-gray-400">
55	Secondary text
56	</p>
57	</div>
58	```
59
60	## Design Tokens (v4)
61
62	```css
63	/* In CSS — v4 uses CSS variables */
64	@theme {
65	--color-primary: oklch(0.6 0.2 250);
66	--color-primary-foreground: oklch(1 0 0);
67	--spacing-page: 1.5rem;
68	--radius-card: 0.75rem;
69	}
70	```
71
72	```tsx
73	// Use in components
74	<div className="bg-primary text-primary-foreground p-page rounded-card">
75	```
76
77	## Common Patterns
78
79	### Card
80
81	```tsx
82	<div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
83	```
84
85	### Form Input
86
87	```tsx
88	<input className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20 dark:border-gray-700 dark:bg-gray-900" />
89	```
90
91	### Skeleton Loader
92
93	```tsx
94	<div className="animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700 h-4 w-3/4" />
95	```
96
97	## Forbidden Patterns
98
99	```tsx
100	// ❌ Never use @apply for component styles
101	.btn { @apply px-4 py-2; } // extract React component instead
102
103	// ❌ Arbitrary values when token exists
104	<div className="text-[#3b82f6]" /> // use text-blue-500
105
106	// ❌ Inline styles with Tailwind
107	<div style={{ color: 'blue' }} className="...">
108	```

People who liked this also viewed

6 picks

Type