mcpField
C
component-wrapper-architecture

component-wrapper-architecture

github.com/theorcdev开发2.1k40 次安装2 天前更新
代码仓库

关于 component-wrapper-architecture

component-wrapper-architecture 是一项开发技能，指导如何将 8-bit 组件构建为 shadcn/ui 的包装层，在保留底层组件及其属性的同时添加复古样式。

主要功能

  1. 01包装 shadcn/ui 组件
  2. 02使用 class-variance-authority 定义变体
  3. 03导出独立属性接口
  4. 04使用 React 19 ref 属性
  5. 05透传底层组件属性

适用场景

  1. 01为 shadcn/ui 按钮添加像素样式
  2. 02为卡片包装像素化边框
  3. 03基于基础组件构建复古对话框

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill component-wrapper-architecture

安装后在 Claude Code 中输入/component-wrapper-architecture确认已加载。

详细介绍

组件包装器架构

8-bit 组件包装 shadcn/ui 组件，而不是替换它们。这种模式在添加复古样式的同时保持兼容性。

基本包装器模式

结构：

  1. 使用别名导入基础组件
  2. 使用 class-variance-authority 定义变体
  3. 为 props 导出单独的接口
  4. 使用 ref prop（React 19 不使用 forwardRef）
import { type VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";
import { Button as ShadcnButton } from "@/components/ui/button";
import "@/components/ui/8bit/styles/retro.css";

export const buttonVariants = cva("", {
  variants: {
    font: {
      normal: "",
      retro: "retro",
    },
    variant: {
      default: "bg-foreground",
      // ...
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
});

export interface BitButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
  ref?: React.Ref<HTMLButtonElement>;
}

function Button({ children, asChild, ...props }: BitButtonProps) {
  const { variant, size, className, font } = props;

  return (
    <ShadcnButton
      {...props}
      className={cn(
        "rounded-none active:translate-y-1 transition-transform",
        className
      )}
      size={size}
      variant={variant}
      asChild={asChild}
    >
      {children}
    </ShadcnButton>
  );
}
重新导出基础组件

对于包含多个子组件的组件，原样重新导出未更改的部分：

import {
  Dialog as ShadcnDialog,
  DialogHeader as ShadcnDialogHeader,
  DialogFooter as ShadcnDialogFooter,
  DialogDescription as ShadcnDialogDescription,
} from "@/componentsconst Dialog = ShadcnDialog;
const DialogHeader =/ui/dialog";

 ShadcnDialogHeader;
const DialogFooter = ShadcnDialogFooter;
const DialogDescription = ShadcnDialogDescription;

export {
  Dialog,
  DialogHeader,
  DialogFooter,
  DialogDescription,
  // ...custom implementations
};
卡片包装器模式

使用外层包装器实现像素化边框，同时保留基础组件：

function Card({ className, font, ...props }: BitCardProps) {
  return (
    <div
      className={cn(
        "relative border-y-6 border-foreground dark:border-ring !p-0",
        className
      )}
    >
      <ShadcnCard
        {...props}
        className={cn(
          "rounded-none border-0 !w-full",
          font !== "normal" && "retro",
          className
        )}
      />

      {/* Pixelated side borders */}
      <div
        className="absolute inset-0 border-x-6 -mx-1.5 border-foreground dark:border-ring pointer-events-none"
        aria-hidden="true"
      />
    </div>
  );
}
核心原则
  1. 导入别名 - 基础组件使用 as ShadcnComponent 模式
  2. 空的 cva 基础样式 - 变体通常从空基础样式开始，依靠 CSS 设置样式
  3. 单独的 props 接口 - 导出 BitComponentProps 供 TypeScript 使用
  4. React 19 ref - 使用 ref?: React.Ref<T>，而不是 forwardRef
  5. rounded-none - 移除基础组件的所有圆角
  6. 传递 props - 转发所有 props，包括 size、variant、className
  7. 有条件地应用复古样式 - 使用 font !== "normal" && "retro" 模式
组件示例
  • components/ui/8bit/button.tsx - 带像素边框的基本包装器
  • components/ui/8bit/card.tsx - 带外层包装器的卡片
  • components/ui/8bit/dialog.tsx - 多子组件包装器

评论

支持 Markdown