ui-styling

Name: ui-styling
Author: nextlevelbuilder

bynextlevelbuilder· 18 skills

Installs

12k

Stars

110k

Forks

12k

How to install ui-styling?

nextlevelbuilder/ui-ux-pro-max-skill/ui-styling

$npx -y skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# UI Styling Skill
2
3	Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
4
5	## Reference
6
7	- shadcn/ui: https://ui.shadcn.com/llms.txt
8	- Tailwind CSS: https://tailwindcss.com/docs
9
10	## When to Use This Skill
11
12	Use when:
13	- Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
14	- Implementing accessible components (dialogs, forms, tables, navigation)
15	- Styling with utility-first CSS approach
16	- Creating responsive, mobile-first layouts
17	- Implementing dark mode and theme customization
18	- Building design systems with consistent tokens
19	- Generating visual designs, posters, or brand materials
20	- Rapid prototyping with immediate visual feedback
21	- Adding complex UI patterns (data tables, charts, command palettes)
22
23	## Core Stack
24
25	### Component Layer: shadcn/ui
26	- Pre-built accessible components via Radix UI primitives
27	- Copy-paste distribution model (components live in your codebase)
28	- TypeScript-first with full type safety
29	- Composable primitives for complex UIs
30	- CLI-based installation and management
31
32	### Styling Layer: Tailwind CSS
33	- Utility-first CSS framework
34	- Build-time processing with zero runtime overhead
35	- Mobile-first responsive design
36	- Consistent design tokens (colors, spacing, typography)
37	- Automatic dead code elimination
38
39	### Visual Design Layer: Canvas
40	- Museum-quality visual compositions
41	- Philosophy-driven design approach
42	- Sophisticated visual communication
43	- Minimal text, maximum visual impact
44	- Systematic patterns and refined aesthetics
45
46	## Quick Start
47
48	### Component + Styling Setup
49
50	Install shadcn/ui with Tailwind:
51	```bash
52	npx shadcn@latest init
53	```
54
55	CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
56
57	Add components:
58	```bash
59	npx shadcn@latest add button card dialog form
60	```
61
62	Use components with utility styling:
63	```tsx
64	import { Button } from "@/components/ui/button"
65	import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
66
67	export function Dashboard() {
68	return (
69	<div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
70	<Card className="hover:shadow-lg transition-shadow">
71	<CardHeader>
72	<CardTitle className="text-2xl font-bold">Analytics</CardTitle>
73	</CardHeader>
74	<CardContent className="space-y-4">
75	<p className="text-muted-foreground">View your metrics</p>
76	<Button variant="default" className="w-full">
77	View Details
78	</Button>
79	</CardContent>
80	</Card>
81	</div>
82	)
83	}
84	```
85
86	### Alternative: Tailwind-Only Setup
87
88	Vite projects:
89	```bash
90	npm install -D tailwindcss @tailwindcss/vite
91	```
92
93	```javascript
94	// vite.config.ts
95	import tailwindcss from '@tailwindcss/vite'
96	export default { plugins: [tailwindcss()] }
97	```
98
99	```css
100	/* src/index.css */
101	@import "tailwindcss";
102	```
103
104	## Component Library Guide
105
106	Comprehensive component catalog with usage patterns, installation, and composition examples.
107
108	See: `references/shadcn-components.md`
109
110	Covers:
111	- Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
112	- Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
113	- Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
114	- Feedback & status (Alert, Progress, Skeleton)
115	- Display components (Table, Data Table, Avatar, Badge)
116
117	## Theme & Customization
118
119	Theme configuration, CSS variables, dark mode implementation, and component customization.
120
121	See: `references/shadcn-theming.md`
122
123	Covers:
124	- Dark mode setup with next-themes
125	- CSS variable system
126	- Color customization and palettes
127	- Component variant customization
128	- Theme toggle implementation
129
130	## Accessibility Patterns
131
132	ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
133
134	See: `references/shadcn-accessibility.md`
135
136	Covers:
137	- Radix UI accessibility features
138	- Keyboard navigation patterns
139	- Focus management
140	- Screen reader announcements
141	- Form validation accessibility
142
143	## Tailwind Utilities
144
145	Core utility classes for layout, spacing, typography, colors, borders, and shadows.
146
147	See: `references/tailwind-utilities.md`
148
149	Covers:
150	- Layout utilities (Flexbox, Grid, positioning)
151	- Spacing system (padding, margin, gap)
152	- Typography (font sizes, weights, alignment, line height)
153	- Colors and backgrounds
154	- Borders and shadows
155	- Arbitrary values for custom styling
156
157	## Responsive Design
158
159	Mobile-first breakpoints, responsive utilities, and adaptive layouts.
160
161	See: `references/tailwind-responsive.md`
162
163	Covers:
164	- Mobile-first approach
165	- Breakpoint system (sm, md, lg, xl, 2xl)
166	- Responsive utility patterns
167	- Container queries
168	- Max-width queries
169	- Custom breakpoints
170
171	## Tailwind Customization
172
173	Config file structure, custom utilities, plugins, and theme extensions.
174
175	See: `references/tailwind-customization.md`
176
177	Covers:
178	- @theme directive for custom tokens
179	- Custom colors and fonts
180	- Spacing and breakpoint extensions
181	- Custom utility creation
182	- Custom variants
183	- Layer organization (@layer base, components, utilities)
184	- Apply directive for component extraction
185
186	## Visual Design System
187
188	Canvas-based design philosophy, visual communication principles, and sophisticated compositions.
189
190	See: `references/canvas-design-system.md`
191
192	Covers:
193	- Design philosophy approach
194	- Visual communication over text
195	- Systematic patterns and composition
196	- Color, form, and spatial design
197	- Minimal text integration
198	- Museum-quality execution
199	- Multi-page design systems
200
201	## Utility Scripts
202
203	Python automation for component installation and configuration generation.
204
205	### shadcn_add.py
206	Add shadcn/ui components with dependency handling:
207	```bash
208	python scripts/shadcn_add.py button card dialog
209	```
210
211	### tailwind_config_gen.py
212	Generate tailwind.config.js with custom theme:
213	```bash
214	python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
215	```
216
217	## Best Practices
218
219	1. Component Composition: Build complex UIs from simple, composable primitives
220	2. Utility-First Styling: Use Tailwind classes directly; extract components only for true repetition
221	3. Mobile-First Responsive: Start with mobile styles, layer responsive variants
222	4. Accessibility-First: Leverage Radix UI primitives, add focus states, use semantic HTML
223	5. Design Tokens: Use consistent spacing scale, color palettes, typography system
224	6. Dark Mode Consistency: Apply dark variants to all themed elements
225	7. Performance: Leverage automatic CSS purging, avoid dynamic class names
226	8. TypeScript: Use full type safety for better DX
227	9. Visual Hierarchy: Let composition guide attention, use spacing and color intentionally
228	10. Expert Craftsmanship: Every detail matters - treat UI as a craft
229
230	## Reference Navigation
231
232	Component Library
233	- `references/shadcn-components.md` - Complete component catalog
234	- `references/shadcn-theming.md` - Theming and customization
235	- `references/shadcn-accessibility.md` - Accessibility patterns
236
237	Styling System
238	- `references/tailwind-utilities.md` - Core utility classes
239	- `references/tailwind-responsive.md` - Responsive design
240	- `references/tailwind-customization.md` - Configuration and extensions
241
242	Visual Design
243	- `references/canvas-design-system.md` - Design philosophy and canvas workflows
244
245	Automation
246	- `scripts/shadcn_add.py` - Component installation
247	- `scripts/tailwind_config_gen.py` - Config generation
248
249	## Common Patterns
250
251	Form with validation:
252	```tsx
253	import { useForm } from "react-hook-form"
254	import { zodResolver } from "@hookform/resolvers/zod"
255	import * as z from "zod"
256	import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
257	import { Input } from "@/components/ui/input"
258	import { Button } from "@/components/ui/button"
259
260	const schema = z.object({
261	email: z.string().email(),
262	password: z.string().min(8)
263	})
264
265	export function LoginForm() {
266	const form = useForm({
267	resolver: zodResolver(schema),
268	defaultValues: { email: "", password: "" }
269	})
270
271	return (
272	<Form {...form}>
273	<form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
274	<FormField control={form.control} name="email" render={({ field }) => (
275	<FormItem>
276	<FormLabel>Email</FormLabel>
277	<FormControl>
278	<Input type="email" {...field} />
279	</FormControl>
280	<FormMessage />
281	</FormItem>
282	)} />
283	<Button type="submit" className="w-full">Sign In</Button>
284	</form>
285	</Form>
286	)
287	}
288	```
289
290	Responsive layout with dark mode:
291	```tsx
292	<div className="min-h-screen bg-white dark:bg-gray-900">
293	<div className="container mx-auto px-4 py-8">
294	<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
295	<Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
296	<CardContent className="p-6">
297	<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
298	Content
299	</h3>
300	</CardContent>
301	</Card>
302	</div>
303	</div>
304	</div>
305	```
306
307	## Resources
308
309	- shadcn/ui Docs: https://ui.shadcn.com
310	- Tailwind CSS Docs: https://tailwindcss.com
311	- Radix UI: https://radix-ui.com
312	- Tailwind UI: https://tailwindui.com
313	- Headless UI: https://headlessui.com
314	- v0 (AI UI Generator): https://v0.dev

6 picks

Type

Run `npx skills use "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" --skill "nextlevelbuilder/ui-ux-pro-max-skill/ui-styling"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill" that are relevant to the current task. Run `npx skills add "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill"` and select the relevant skills, then follow their instructions.

ui-styling

How to install ui-styling?

Related

ui-styling

How to install ui-styling?

Related