ui-styling

Name: ui-styling
Author: nextlevelbuilder

10kinstalls12kforks

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.

Summary

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessib

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 (fo

People who liked this also viewed

6 picks

Type

ui-styling

10kinstalls12kforks

View on GitHub

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.

Summary

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 (fo

People who liked this also viewed

6 picks

Type