Skip to main content سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/hoanghd218/ZaloCRM --skill ak-ui-stylingيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Search library/framework documentation via llms.txt (context7.com). Use for API docs, GitHub repository analysis, technical documentation lookup, latest library features.
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 