Skip to main content Home Creators hoanghd218 zalocrm ak-ui-styling
ak-ui-styling Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/hoanghd218/ZaloCRM --skill ak-ui-stylingThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Interview-driven advisory skill. Analyzes a prompt or URL (GitHub issue, spec, doc), scouts the codebase, interviews the user one question at a time to reframe the problem into exact requirements and goals, then delivers honest advice: what to do, what to avoid, better alternatives, benefits and trade-offs. Use when the user asks for advice, a second opinion, a sanity check, requirement reframing before committing to a direction, or wants an existing plan or design pressure-tested (grilled) one question at a time.
Browser and desktop automation through the agent-browser CLI. Use for long autonomous browsing, compact page snapshots, screenshots, form filling, login/test flows without real Chrome profile state, scraping, exploratory QA, cloud browsers, Electron apps, Slack automation, and bug hunts.
name ak:ui-styling description Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization. user-invocable true when_to_use Invoke for shadcn, Tailwind, themes, or component styling. category frontend keywords ["shadcn","radix","tailwind","themes"] license MIT argument-hint [component or layout] metadata {"author":"agentkit","version":"1.0.0"}
UI Styling Skill
Comprehensive skill for creating beautiful, accessible user interfaces combining shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual design systems.
Reference
When to Use This Skill
Use when:
Building UI with React-based frameworks (Next.js, Vite, Remix, Astro)
Implementing accessible components (dialogs, forms, tables, navigation)
Styling with utility-first CSS approach
Creating responsive, mobile-first layouts
Implementing dark mode and theme customization
Building design systems with consistent tokens
Generating visual designs, posters, or brand materials
Rapid prototyping with immediate visual feedback
Adding complex UI patterns (data tables, charts, command palettes)
Core Stack
Component Layer: shadcn/ui
Pre-built accessible components via Radix UI primitives
Copy-paste distribution model (components live in your codebase)
TypeScript-first with full type safety
Composable primitives for complex UIs
CLI-based installation and management
Styling Layer: Tailwind CSS
Utility-first CSS framework
Build-time processing with zero runtime overhead
Mobile-first responsive design
Consistent design tokens (colors, spacing, typography)
Automatic dead code elimination
Visual Design Layer: Canvas
Museum-quality visual compositions
Philosophy-driven design approach
Sophisticated visual communication
Minimal text, maximum visual impact
Systematic patterns and refined aesthetics
Quick Start
Component + Styling Setup
Install shadcn/ui with Tailwind:
npx shadcn@latest init
CLI prompts for framework, TypeScript, paths, and theme preferences. This configures both shadcn/ui and Tailwind CSS.
Add components:
npx shadcn@latest add button card dialog form
Use components with utility styling:
import { Button
from
"@/components/ui/button"
import
Card
CardHeader
CardTitle
CardContent
from
"@/components/ui/card"
export
function
Dashboard
return
<div className ="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3" >
<Card className ="hover:shadow-lg transition-shadow" >
<CardHeader >
<CardTitle className ="text-2xl font-bold" > Analytics</CardTitle >
</CardHeader >
<CardContent className ="space-y-4" >
<p className ="text-muted-foreground" > View your metrics</p >
<Button variant ="default" className ="w-full" >
View Details
</Button >
</CardContent >
</Card >
</div >
Alternative: Tailwind-Only Setup npm install -D tailwindcss @tailwindcss/vite
import tailwindcss from '@tailwindcss/vite'
export default { plugins : [tailwindcss ()] }
Component Library Guide Comprehensive component catalog with usage patterns, installation, and composition examples.
See: references/shadcn-components.md
Form & input components (Button, Input, Select, Checkbox, Date Picker, Form validation)
Layout & navigation (Card, Tabs, Accordion, Navigation Menu)
Overlays & dialogs (Dialog, Drawer, Popover, Toast, Command)
Feedback & status (Alert, Progress, Skeleton)
Display components (Table, Data Table, Avatar, Badge)
Theme & Customization Theme configuration, CSS variables, dark mode implementation, and component customization.
See: references/shadcn-theming.md
Dark mode setup with next-themes
CSS variable system
Color customization and palettes
Component variant customization
Theme toggle implementation
Accessibility Patterns ARIA patterns, keyboard navigation, screen reader support, and accessible component usage.
See: references/shadcn-accessibility.md
Radix UI accessibility features
Keyboard navigation patterns
Focus management
Screen reader announcements
Form validation accessibility
Tailwind Utilities Core utility classes for layout, spacing, typography, colors, borders, and shadows.
See: references/tailwind-utilities.md
Layout utilities (Flexbox, Grid, positioning)
Spacing system (padding, margin, gap)
Typography (font sizes, weights, alignment, line height)
Colors and backgrounds
Borders and shadows
Arbitrary values for custom styling
Responsive Design Mobile-first breakpoints, responsive utilities, and adaptive layouts.
See: references/tailwind-responsive.md
Mobile-first approach
Breakpoint system (sm, md, lg, xl, 2xl)
Responsive utility patterns
Container queries
Max-width queries
Custom breakpoints
Tailwind Customization Config file structure, custom utilities, plugins, and theme extensions.
See: references/tailwind-customization.md
@theme directive for custom tokens
Custom colors and fonts
Spacing and breakpoint extensions
Custom utility creation
Custom variants
Layer organization (@layer base, components, utilities)
Apply directive for component extraction
Visual Design System Canvas-based design philosophy, visual communication principles, and sophisticated compositions.
See: references/canvas-design-system.md
Design philosophy approach
Visual communication over text
Systematic patterns and composition
Color, form, and spatial design
Minimal text integration
Museum-quality execution
Multi-page design systems
Utility Scripts Python automation for component installation and configuration generation.
shadcn_add.py Add shadcn/ui components with dependency handling:
python scripts/shadcn_add.py button card dialog
tailwind_config_gen.py Generate tailwind.config.js with custom theme:
python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter
Best Practices
Component Composition : Build complex UIs from simple, composable primitivesUtility-First Styling : Use Tailwind classes directly; extract components only for true repetitionMobile-First Responsive : Start with mobile styles, layer responsive variantsAccessibility-First : Leverage Radix UI primitives, add focus states, use semantic HTMLDesign Tokens : Use consistent spacing scale, color palettes, typography systemDark Mode Consistency : Apply dark variants to all themed elementsPerformance : Leverage automatic CSS purging, avoid dynamic class namesTypeScript : Use full type safety for better DXVisual Hierarchy : Let composition guide attention, use spacing and color intentionallyExpert Craftsmanship : Every detail matters - treat UI as a craft
Reference Navigation
references/shadcn-components.md - Complete component catalogreferences/shadcn-theming.md - Theming and customizationreferences/shadcn-accessibility.md - Accessibility patterns
references/tailwind-utilities.md - Core utility classesreferences/tailwind-responsive.md - Responsive designreferences/tailwind-customization.md - Configuration and extensions
references/canvas-design-system.md - Design philosophy and canvas workflows
scripts/shadcn_add.py - Component installationscripts/tailwind_config_gen.py - Config generation
Common Patterns import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form , FormField , FormItem , FormLabel , FormControl , FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
const schema = z.object ({
email : z.string ().email (),
password : z.string ().min (8 )
})
export function LoginForm (const form = useForm ({
resolver : zodResolver (schema),
defaultValues : { email : "" , password : "" }
})
return (
<Form {...form }>
<form onSubmit ={form.handleSubmit(console.log)} className ="space-y-6" >
<FormField control ={form.control} name ="email" render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl >
<Input type ="email" {...field } />
</FormControl >
<FormMessage />
</FormItem >
)} />
<Button type ="submit" className ="w-full" > Sign In</Button >
</form >
</Form > Responsive layout with dark mode:
<div className="min-h-screen bg-white dark:bg-gray-900" >
<div className ="container mx-auto px-4 py-8" >
<div className ="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" >
<Card className ="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700" >
<CardContent className ="p-6" >
<h3 className ="text-xl font-semibold text-gray-900 dark:text-white" >
Content
</h3 >
</CardContent >
</Card >
</div >
</div >
Resources 