frontend-design

Name: frontend-design
Author: sabahattink

27stars9forks

How to install frontend-design?

sabahattink/antigravity-fullstack-hq/frontend-design

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill frontend-design

Installs into the current project.

Summary

UI component design principles, visual hierarchy, spacing, typography for Next.js apps. Use when building or reviewing React/Next.js components, setting up design tokens, or establishing visual consistency.

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	## Core Design Principles
4
5	### Visual Hierarchy
6	Every screen needs a clear reading order. Use size, weight, color, and spacing to guide the eye.
7
8	```tsx
9	// Good: Clear hierarchy
10	export function ArticleCard({ title, excerpt, author, date }: ArticleCardProps) {
11	return (
12	<article className="rounded-xl border border-gray-100 p-6 shadow-sm hover:shadow-md transition-shadow">
13	{/* Primary: title grabs attention */}
14	<h2 className="text-xl font-semibold text-gray-900 leading-snug mb-2">
15	{title}
16	</h2>
17	{/* Secondary: excerpt supports */}
18	<p className="text-gray-600 text-sm leading-relaxed line-clamp-3 mb-4">
19	{excerpt}
20	</p>
21	{/* Tertiary: metadata recedes */}
22	<div className="flex items-center gap-2 text-xs text-gray-400">
23	<span>{author}</span>
24	<span>·</span>
25	<time>{date}</time>
26	</div>
27	</article>
28	)
29	}
30	```
31
32	### Spacing System
33	Use a consistent spacing scale. Tailwind's default scale (4px base) works well.
34
35	```tsx
36	// Design token constants — define once, use everywhere
37	export const spacing = {
38	xs: 'gap-1', // 4px — tight inline elements
39	sm: 'gap-2', // 8px — related items
40	md: 'gap-4', // 16px — section padding
41	lg: 'gap-6', // 24px — card padding
42	xl: 'gap-8', // 32px — section gaps
43	'2xl': 'gap-12', // 48px — page sections
44	'3xl': 'gap-16', // 64px — hero sections
45	} as const
46
47	// Usage: consistent padding inside cards
48	function Card({ children }: { children: React.ReactNode }) {
49	return (
50	<div className="p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
51	<div className="flex flex-col gap-4">
52	{children}
53	</div>
54	</div>
55	)
56	}
57	```
58
59	## Typography
60
61	### Font Scale
62	```tsx
63	// tailwind.config.ts — extend the default scale
64	import type { Config } from 'tailwindcss'
65
66	const config: Config = {
67	theme: {
68	extend: {
69	fontSize: {
70	'display-2xl': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
71	'display-xl': ['3.75rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
72	'display-lg': ['3rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
73	'display-md': ['2.25rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
74	'display-sm': ['1.875rem',{ lineHeight: '1.3' }],
75	'body-xl': ['1.25rem', { lineHeight: '1.75' }],
76	'body-lg': ['1.125rem',{ lineHeight: '1.75' }],
77	'body-md': ['1rem', { lineHeight: '1.6' }],
78	'body-sm': ['0.875rem',{ lineHeight: '1.5' }],
79	'body-xs': ['0.75rem', { lineHeight: '1.5' }],
80	},
81	fontFamily: {
82	sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
83	mono: ['var(--font-fira-code)', 'monospace'],
84	},
85	},
86	},
87	}
88	export default config
89	```
90
91	### Loading Fonts in Next.js
92	```tsx
93	// app/layout.tsx
94	import { Inter, Fira_Code } from 'next/font/google'
95
96	const inter = Inter({
97	subsets: ['latin'],
98	variable: '--font-inter',
99	display: 'swap',
100	})
101
102	const firaCode = Fira_Code({
103	subsets: ['latin'],
104	variable: '--font-fira-code',
105	display: 'swap',
106	})
107
108	export default function RootLayout({ children }: { children: React.ReactNode }) {
109	return (
110	<html lang="en" className={`${inter.variable} ${firaCode.variable}`}>
111	<body className="font-sans antialiased">{children}</body>
112	</html>
113	)
114	}
115	```
116
117	## Component Patterns
118
119	### Compound Components
120	Group related UI into a single composable API.
121
122	```tsx
123	// components/ui/Card/index.tsx
124	interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
125	variant?: 'default' \| 'elevated' \| 'outlined'
126	}
127
128	function Card({ variant = 'default', className, ...props }: CardProps) {
129	const variants = {
130	default: 'bg-white border border-gray-100 shadow-sm',
131	elevated: 'bg-white shadow-lg',
132	outlined: 'bg-transparent border-2 border-gray-200',
133	}
134	return (
135	<div
136	className={`rounded-2xl p-6 ${variants[variant]} ${className ?? ''}`}
137	{...props}
138	/>
139	)
140	}
141
142	function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
143	return <div className={`mb-4 ${className ?? ''}`} {...props} />
144	}
145
146	function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
147	return <h3 className={`text-lg font-semibold text-gray-900 ${className ?? ''}`} {...props} />
148	}
149
150	function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
151	return <div className={`text-gray-600 ${className ?? ''}`} {...props} />
152	}
153
154	function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
155	return <div className={`mt-4 pt-4 border-t border-gray-100 ${className ?? ''}`} {...props} />
156	}
157
158	Card.Header = CardHeader
159	Card.Title = CardTitle
160	Card.Con

People who liked this also viewed

6 picks

Type

frontend-design

27stars9forks

View on GitHub

How to install frontend-design?

sabahattink/antigravity-fullstack-hq/frontend-design

$npx -y skills add sabahattink/antigravity-fullstack-hq --skill frontend-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Frontend Design
2
3	## Core Design Principles
4
5	### Visual Hierarchy
6	Every screen needs a clear reading order. Use size, weight, color, and spacing to guide the eye.
7
8	```tsx
9	// Good: Clear hierarchy
10	export function ArticleCard({ title, excerpt, author, date }: ArticleCardProps) {
11	return (
12	<article className="rounded-xl border border-gray-100 p-6 shadow-sm hover:shadow-md transition-shadow">
13	{/* Primary: title grabs attention */}
14	<h2 className="text-xl font-semibold text-gray-900 leading-snug mb-2">
15	{title}
16	</h2>
17	{/* Secondary: excerpt supports */}
18	<p className="text-gray-600 text-sm leading-relaxed line-clamp-3 mb-4">
19	{excerpt}
20	</p>
21	{/* Tertiary: metadata recedes */}
22	<div className="flex items-center gap-2 text-xs text-gray-400">
23	<span>{author}</span>
24	<span>·</span>
25	<time>{date}</time>
26	</div>
27	</article>
28	)
29	}
30	```
31
32	### Spacing System
33	Use a consistent spacing scale. Tailwind's default scale (4px base) works well.
34
35	```tsx
36	// Design token constants — define once, use everywhere
37	export const spacing = {
38	xs: 'gap-1', // 4px — tight inline elements
39	sm: 'gap-2', // 8px — related items
40	md: 'gap-4', // 16px — section padding
41	lg: 'gap-6', // 24px — card padding
42	xl: 'gap-8', // 32px — section gaps
43	'2xl': 'gap-12', // 48px — page sections
44	'3xl': 'gap-16', // 64px — hero sections
45	} as const
46
47	// Usage: consistent padding inside cards
48	function Card({ children }: { children: React.ReactNode }) {
49	return (
50	<div className="p-6 rounded-2xl bg-white shadow-sm border border-gray-100">
51	<div className="flex flex-col gap-4">
52	{children}
53	</div>
54	</div>
55	)
56	}
57	```
58
59	## Typography
60
61	### Font Scale
62	```tsx
63	// tailwind.config.ts — extend the default scale
64	import type { Config } from 'tailwindcss'
65
66	const config: Config = {
67	theme: {
68	extend: {
69	fontSize: {
70	'display-2xl': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
71	'display-xl': ['3.75rem', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
72	'display-lg': ['3rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
73	'display-md': ['2.25rem', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
74	'display-sm': ['1.875rem',{ lineHeight: '1.3' }],
75	'body-xl': ['1.25rem', { lineHeight: '1.75' }],
76	'body-lg': ['1.125rem',{ lineHeight: '1.75' }],
77	'body-md': ['1rem', { lineHeight: '1.6' }],
78	'body-sm': ['0.875rem',{ lineHeight: '1.5' }],
79	'body-xs': ['0.75rem', { lineHeight: '1.5' }],
80	},
81	fontFamily: {
82	sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
83	mono: ['var(--font-fira-code)', 'monospace'],
84	},
85	},
86	},
87	}
88	export default config
89	```
90
91	### Loading Fonts in Next.js
92	```tsx
93	// app/layout.tsx
94	import { Inter, Fira_Code } from 'next/font/google'
95
96	const inter = Inter({
97	subsets: ['latin'],
98	variable: '--font-inter',
99	display: 'swap',
100	})
101
102	const firaCode = Fira_Code({
103	subsets: ['latin'],
104	variable: '--font-fira-code',
105	display: 'swap',
106	})
107
108	export default function RootLayout({ children }: { children: React.ReactNode }) {
109	return (
110	<html lang="en" className={`${inter.variable} ${firaCode.variable}`}>
111	<body className="font-sans antialiased">{children}</body>
112	</html>
113	)
114	}
115	```
116
117	## Component Patterns
118
119	### Compound Components
120	Group related UI into a single composable API.
121
122	```tsx
123	// components/ui/Card/index.tsx
124	interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
125	variant?: 'default' \| 'elevated' \| 'outlined'
126	}
127
128	function Card({ variant = 'default', className, ...props }: CardProps) {
129	const variants = {
130	default: 'bg-white border border-gray-100 shadow-sm',
131	elevated: 'bg-white shadow-lg',
132	outlined: 'bg-transparent border-2 border-gray-200',
133	}
134	return (
135	<div
136	className={`rounded-2xl p-6 ${variants[variant]} ${className ?? ''}`}
137	{...props}
138	/>
139	)
140	}
141
142	function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
143	return <div className={`mb-4 ${className ?? ''}`} {...props} />
144	}
145
146	function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
147	return <h3 className={`text-lg font-semibold text-gray-900 ${className ?? ''}`} {...props} />
148	}
149
150	function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
151	return <div className={`text-gray-600 ${className ?? ''}`} {...props} />
152	}
153
154	function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
155	return <div className={`mt-4 pt-4 border-t border-gray-100 ${className ?? ''}`} {...props} />
156	}
157
158	Card.Header = CardHeader
159	Card.Title = CardTitle
160	Card.Con

People who liked this also viewed

6 picks

Type