用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Garcia-Ventures/gvtech-design --skill setup-ui-web命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | setup-ui-web |
| description | Step-by-step setup guide for integrating @gv-tech/ui-web and Tailwind CSS v4 in web applications. |
Use this skill when installing and configuring @gv-tech/ui-web in Next.js, Vite, or React DOM applications.
npm install @gv-tech/ui-web @gv-tech/design-tokens lucide-react clsx tailwind-merge next-themes
globals.css)@import 'tailwindcss';
/* Scan design system components for styles */
@source 'node_modules/@gv-tech/ui-web/dist/**/*.mjs';
@theme {
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-primary: hsl(var(--primary));
--color-primary-foreground: ((--primary-foreground));
: ((--secondary));
: ((--secondary-foreground));
: ((--card));
: ((--card-foreground));
: ((--border));
: ((--input));
: ((--ring));
}
globals.css)@layer base {
:root {
--background: 0 0% 96%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--primary: 225 73% 57%;
--primary-foreground: 0 0% 100%;
--secondary: 93 28% 54%;
--secondary-foreground: 0 0% 100%;
--border: 0 0% 89%;
--input: 0 0% 89%;
--ring: 222 47% 11%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 9%;
--foreground: 0 0% 100%;
--card: 0 0% 14%;
--card-foreground: 0 0% 100%;
--primary: 227 96% 71%;
--primary-foreground: 0 0% 9%;
--secondary: 96 44% 61%;
--secondary-foreground: 0 0% 9%;
--border: 0 0% 18%;
--input: 0 0% 18%;
--ring: 0 0% 90%;
}
}
Wrap your layout with <ThemeProvider> from @gv-tech/ui-web:
import { ThemeProvider } from '@gv-tech/ui-web';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
);
}
Complete 6-step end-to-end setup guide for @gv-tech/ui-native, NativeWind v5 preview, Metro, Babel, and TypeScript in React Native and Expo projects.
Component usage patterns, layout rules, and NativeWind v5 practices for @gv-tech/ui-native in React Native and Expo apps.
Component usage patterns and best practices for @gv-tech/ui-web in Web applications.