メニュー
Step-by-step setup guide for integrating @gv-tech/ui-web and Tailwind CSS v4 in web applications.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Garcia-Ventures/gvtech-design --skill setup-ui-webコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
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: hsl(var(--primary-foreground));
--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--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: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
}
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>
);
}