mcpField
R
retro-css-architecture

retro-css-architecture

github.com/theorcdev设计与 UI2.1k78 次安装2 天前更新
代码仓库

关于 retro-css-architecture

为 8-bit 组件组织 CSS 的技能，涵盖共享复古样式、像素字体、图像渲染和响应式尺寸，适用于使用 CSS 与 Tailwind utilities 构建风格统一的复古界面的开发者。

主要功能

  1. 01导入共享复古样式表
  2. 02使用 Press Start 2P 字体
  3. 03以像素风方式渲染图像
  4. 04采用语义化暗色模式配色
  5. 05使用 Tailwind utilities 组织样式

适用场景

  1. 01为 8-bit 组件设置共享样式
  2. 02设计像素艺术精灵图与字体
  3. 03统一不同屏幕上的复古布局

安装

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

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

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

详细介绍

复古 CSS 架构

使用自定义属性、像素字体和响应式模式组织 8-bit 组件的 CSS。

必需的导入

所有 8-bit 组件都必须导入复古样式表：

import "@/components/ui/8bit/styles/retro.css";
像素字体

使用 "Press Start 2P" 呈现原汁原味的 8-bit 排版：

.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

通过类或字体变体应用：

<Button className="retro">START GAME</Button>

// or via font prop
<Button font="retro">START GAME</Button>
像素化图像

让像素艺术图像保持清晰：

.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

<Image src="/pixel-art.png" className="pixelated" />
深色模式颜色

使用语义化颜色名称及其深色模式变体：

<div className="border-foreground dark:border-ring" />
<div className="bg-foreground dark:bg-ring" />
响应式像素尺寸

使用一致的像素值，营造复古风格：

{/* Standard pixel sizes */}
<div className="size-1.5" />      {/* Corner pixels */}
<div className="h-1.5 w-3" />     {/* Shadow segments */}
<div className="border-y-6" />     {/* Card borders */}

{/* Mobile considerations */}
<div className="h-[5px] md:h-1.5" />
CSS 组织

将复古风格专用样式保存在 components/ui/8bit/styles/retro.css 中：

/* Import pixel font */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* Font class */
.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Image handling */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
组件级 CSS

使用 Tailwind 工具类设置组件专用样式：

<div
  className={cn(
    "relative border-y-6 border-foreground dark:border-ring",
    "rounded-none active:translate-y-1 transition-transform",
    className
  )}
/>
关键原则
  1. 导入 retro.css - 所有 8-bit 组件都必须导入
  2. 像素字体 - 使用 "Press Start 2P" 呈现原汁原味的外观
  3. 像素化图像 - 为精灵图应用 image-rendering: pixelated
  4. 尺寸一致 - 使用固定像素值（1.5、3、6px）
  5. 深色模式 - 使用带 dark: 前缀的语义化颜色
  6. rounded-none - 移除所有边框圆角，营造复古风格
  7. 优先使用 Tailwind - 先使用工具类，再编写自定义 CSS
参考文件
  • components/ui/8bit/styles/retro.css - 全局复古样式
  • components/ui/8bit/button.tsx - CSS 类用法示例

评论

支持 Markdown