mcpField
G
generic-react-design-system

generic-react-design-system

github.com/travisjneuman设计与 UI106184 次安装1 天前更新
代码仓库

关于 generic-react-design-system

面向 React 与 TypeScript 应用设计系统构建的参考技能，涵盖 Tailwind 与 CSS 变量、组件和动效模式、主题处理及无障碍示例。

主要功能

  1. 01Tailwind 与 CSS 变量配置
  2. 02React 组件模式
  3. 03Framer Motion 示例
  4. 04使用 React Context 实现深色模式
  5. 05无障碍模式

适用场景

  1. 01在 React 应用中设置设计令牌
  2. 02实现按钮、卡片或模态框
  3. 03添加页面切换动画
  4. 04构建主题与焦点行为

安装

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

$npx skills add https://github.com/travisjneuman/.claude --skill generic-react-design-system

安装后在 Claude Code 中输入/generic-react-design-system确认已加载。

详细介绍

React 设计系统

适用于 React/TypeScript 应用的设计系统模式。

扩展： 通用设计系统 — 阅读基础技能，了解色彩理论、字体比例、间距系统和组件状态。

Tailwind 配置

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        accent: "var(--accent)",
      },
      spacing: {
        18: "72px",
      },
      borderRadius: {
        xl: "16px",
      },
    },
  },
};
CSS 变量设置
:root {
  /* Brand - customize per project */
  --primary: #3b82f6;
  --primary-rgb: 59, 130, 246;
  --secondary: #10b981;
  --accent: #8b5cf6;

  /* Surfaces */
  --background: #ffffff;
  --foreground: #000000;
  --muted: #64748b;
}

[data-theme="dark"] {
  --background: #121212;
  --foreground: #ffffff;
}

React 组件模式

按钮变体
// Primary
<button className="px-6 py-3 bg-primary text-white rounded-lg shadow
  hover:shadow-lg hover:-translate-y-0.5 transition-all">
  Primary
</button>

// Secondary
<button className="px-6 py-3 border border-primary text-primary rounded-lg
  hover:bg-primary/10 transition-all">
  Secondary
</button>

// Ghost
<button className="px-4 py-2 text-muted hover:bg-slate-100 rounded-lg transition-all">
  Ghost
</button>
输入字段
<input
  className="w-full px-4 py-3 bg-white border border-slate-300 rounded-md
    focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
  placeholder="Enter text..."
/>
卡片
<div className="p-6 bg-white dark:bg-slate-800 rounded-xl shadow-soft">
  {/* Card content */}
</div>
使用 Framer Motion 的模态框
<motion.div
  initial={{ opacity: 0, scale: 0.95 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.95 }}
  className="glass p-8 rounded-2xl max-w-md"
  role="dialog"
  aria-modal="true"
>
  {/* Modal content */}
</motion.div>
加载骨架屏
<div className="animate-pulse space-y-4">
  <div className="h-8 bg-slate-200 dark:bg-slate-700 rounded w-3/4" />
  <div className="h-4 bg-slate-200 dark:bg-slate-700 rounded" />
</div>

视觉效果

玻璃拟态
.glass {
  backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.glass-dark {
  background: rgba(255, 255, 255, 0.05);
}
阴影
--shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 10px 15px rgba(0, 0, 0, 0.15);
--shadow-floating: 0 25px 50px rgba(0, 0, 0, 0.3);
--shadow-glow: 0 0 20px rgba(var(--primary-rgb), 0.4);

Framer Motion 模式

悬停抬升
<motion.div
  whileHover={{ y: -4 }}
  transition={{ type: "spring", stiffness: 300 }}
  className="card"
>
  {/* Content */}
</motion.div>
页面过渡
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.2 }}
>
  {/* Page content */}
</motion.div>
子元素交错
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map((i) => (
    <motion.li key={i} variants={item} />
  ))}
</motion.ul>;

深色模式实现

React Context 方案
// ThemeProvider.tsx
const ThemeContext = createContext<{
  theme: "light" | "dark";
  toggle: () => void;
}>({ theme: "light", toggle: () => {} });

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  useEffect(() => {
    document.documentElement.dataset.theme = theme;
  }, [theme]);

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggle: () => setTheme((t) => (t === "light" ? "dark" : "light")),
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
}
检测系统偏好设置
useEffect(() => {
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
  setTheme(prefersDark.matches ? "dark" : "light");

  prefersDark.addEventListener("change", (e) =>
    setTheme(e.matches ? "dark" : "light"),
  );
}, []);

React 无障碍设计

焦点状态（Tailwind）
*:focus-visible {
  @apply outline-2 outline-primary outline-offset-2;
}
跳过链接
<a
  href="#main"
  className="sr-only focus:not-sr-only focus:absolute
  focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2
  focus:bg-primary focus:text-white focus:rounded"
>
  Skip to content
</a>

另请参阅

评论

支持 Markdown