卡片组件

function Card({ className, ...props }) {
  return (
    <div
      className={cn(
        "rounded-xl border border-gray-200 bg-white shadow-sm",
        "dark:border-gray-800 dark:bg-gray-950",
        className
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }) {
  return <div className={cn("p-6 pb-4", className)} {...props} />;
}

function CardContent({ className, ...props }) {
  return <div className={cn("p-6 pt-0", className)} {...props} />;
}

function CardFooter({ className, ...props }) {
  return (
    <div
      className={cn("flex items-center p-6 pt-0", className)}
      {...props}
    />
  );
}

带标签的输入框

function FormField({ label, error, children, className }) {
  return (
    <div className={cn("space-y-2", className)}>
      <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
        {label}
      </label>
      {children}
      {error && (
        <p className="text-sm text-red-500">{error}</p>
      )}
    </div>
  );
}

function Input({ className, ...props }) {
  return (
    <input
      className={cn(
        "flex h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2",
        "text-sm placeholder:text-gray-400",
        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "dark:border-gray-700 dark:bg-gray-900",
        className
      )}
      {...props}
    />
  );
}

响应式模式

移动优先网格

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

响应式排版

<h1 className="text-2xl font-bold sm:text-3xl lg:text-4xl xl:text-5xl">
  响应式标题
</h1>

<p className="text-sm sm:text-base lg:text-lg leading-relaxed">
  按比例缩放的正文字体
</p>

容器查询

<div className="@container">
  <div className="flex flex-col @md:flex-row @md:items-center gap-4">
    <img className="w-full @md:w-48 rounded-lg" src={image} alt="" />
    <div className="flex-1">
      <h3 className="text-lg @lg:text-xl font-semibold">{title}</h3>
      <p className="text-gray-600 @lg:text-lg">{description}</p>
    </div>
  </div>
</div>

动画模式

过渡效果

// 悬停过渡
<button className="transition-colors duration-200 hover:bg-gray-100">
  悬停我
</button>

// 悬停缩放
<div className="transition-transform duration-200 hover:scale-105">
  卡片
</div>

// 组合过渡
<a className="transition-all duration-200 hover:text-brand-500 hover:translate-x-1">
  带箭头的链接 →
</a>

关键帧动画

@theme {
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-spin-slow: spin 3s linear infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



<div className="animate-fade-in">淡入内容</div>
<div className="animate-slide-up">上滑内容</div>

深色模式

// 切换组件
<div className="bg-white dark:bg-gray-900">
  <h1 className="text-gray-900 dark:text-gray-100">
    自适应标题
  </h1>
  <p className="text-gray-600 dark:text-gray-400">
    自适应文本
  </p>
</div>

// 使用 CSS 变量进行主题化
@theme {
  --color-surface: white;
  --color-on-surface: #111827;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-surface: #111827;
    --color-on-surface: #f9fafb;
  }
}

布局模式

粘性头部

<header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-sm">
  <nav className="container mx-auto flex h-16 items-center px-4">
    {/* 导航内容 */}
  </nav>
</header>

侧边栏布局

<div className="flex min-h-screen">
  <aside className="hidden w-64 border-r bg-gray-50 lg:block">
    {/* 侧边栏 */}
  </aside>
  <main className="flex-1 p-6">
    {/* 主要内容 */}
  </main>
</div>

居中最大宽度内容

<main className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
  {/* 内容 */}
</main>

最佳实践

1. 使用设计标记 通过 @theme 保持一致性
2. 移动优先 - 从移动端开始，向上添加断点
3. 使用 cn() 组合 - 清晰地合并类名
4. 提取组件 当模式重复 3 次以上时
5. 使用语义化颜色 (品牌色、表面色、错误色) 而非原始值
6. 优先使用工具类 而非自定义 CSS
7. 按逻辑分组相关工具类 以提高可读性

每周安装量

104

仓库

autohandai/comm…y-skills

首次出现

2026年1月24日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

opencode94

codex88

gemini-cli84

cursor84

claude-code80

github-copilot80

Card Component

function Card({ className, ...props }) {
  return (
    <div
      className={cn(
        "rounded-xl border border-gray-200 bg-white shadow-sm",
        "dark:border-gray-800 dark:bg-gray-950",
        className
      )}
      {...props}
    />
  );
}

function CardHeader({ className, ...props }) {
  return <div className={cn("p-6 pb-4", className)} {...props} />;
}

function CardContent({ className, ...props }) {
  return <div className={cn("p-6 pt-0", className)} {...props} />;
}

function CardFooter({ className, ...props }) {
  return (
    <div
      className={cn("flex items-center p-6 pt-0", className)}
      {...props}
    />
  );
}

Input with Label

function FormField({ label, error, children, className }) {
  return (
    <div className={cn("space-y-2", className)}>
      <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
        {label}
      </label>
      {children}
      {error && (
        <p className="text-sm text-red-500">{error}</p>
      )}
    </div>
  );
}

function Input({ className, ...props }) {
  return (
    <input
      className={cn(
        "flex h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2",
        "text-sm placeholder:text-gray-400",
        "focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "dark:border-gray-700 dark:bg-gray-900",
        className
      )}
      {...props}
    />
  );
}

Responsive Patterns

Mobile-First Grid

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {items.map(item => <Card key={item.id} {...item} />)}
</div>

Responsive Typography

<h1 className="text-2xl font-bold sm:text-3xl lg:text-4xl xl:text-5xl">
  Responsive Heading
</h1>

<p className="text-sm sm:text-base lg:text-lg leading-relaxed">
  Body text that scales appropriately
</p>

Container Queries

<div className="@container">
  <div className="flex flex-col @md:flex-row @md:items-center gap-4">
    <img className="w-full @md:w-48 rounded-lg" src={image} alt="" />
    <div className="flex-1">
      <h3 className="text-lg @lg:text-xl font-semibold">{title}</h3>
      <p className="text-gray-600 @lg:text-lg">{description}</p>
    </div>
  </div>
</div>

Animation Patterns

Transitions

// Hover transition
<button className="transition-colors duration-200 hover:bg-gray-100">
  Hover me
</button>

// Scale on hover
<div className="transition-transform duration-200 hover:scale-105">
  Card
</div>

// Combined transitions
<a className="transition-all duration-200 hover:text-brand-500 hover:translate-x-1">
  Link with arrow →
</a>

Keyframe Animations

@theme {
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.3s ease-out;
  --animate-spin-slow: spin 3s linear infinite;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



<div className="animate-fade-in">Fading content</div>
<div className="animate-slide-up">Sliding content</div>

Dark Mode

// Toggle component
<div className="bg-white dark:bg-gray-900">
  <h1 className="text-gray-900 dark:text-gray-100">
    Adaptive heading
  </h1>
  <p className="text-gray-600 dark:text-gray-400">
    Adaptive text
  </p>
</div>

// Using CSS variables for theming
@theme {
  --color-surface: white;
  --color-on-surface: #111827;
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-surface: #111827;
    --color-on-surface: #f9fafb;
  }
}

Layout Patterns

Sticky Header

<header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-sm">
  <nav className="container mx-auto flex h-16 items-center px-4">
    {/* Nav content */}
  </nav>
</header>

Sidebar Layout

<div className="flex min-h-screen">
  <aside className="hidden w-64 border-r bg-gray-50 lg:block">
    {/* Sidebar */}
  </aside>
  <main className="flex-1 p-6">
    {/* Main content */}
  </main>
</div>

Centered Max-Width Content

<main className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
  {/* Content */}
</main>

Best Practices

1. Use design tokens via @theme for consistency
2. Mobile-first - start with mobile, add breakpoints up
3. Compose with cn() - merge classes cleanly
4. Extract components when patterns repeat 3+ times
5. Use semantic colors (brand, surface, error) over raw values
6. Prefer utilities over custom CSS when possible
7. Group related utilities logically for readability

Weekly Installs

104

Repository

autohandai/comm…y-skills

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

opencode94

codex88

gemini-cli84

cursor84

claude-code80

github-copilot80