メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Garcia-Ventures/gvtech-design --skill setup-ui-nativeコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Step-by-step setup guide for integrating @gv-tech/ui-web and Tailwind CSS v4 in web applications.
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-native |
| description | 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. |
Use this skill when installing and configuring @gv-tech/ui-native in Expo or React Native CLI projects.
npm install @gv-tech/ui-native @gv-tech/design-tokens nativewind@^5.0.0-preview.4 lucide-react-native react-native-reanimated react-native-svg
Add the lightningcss override in your package.json to prevent build deserialization issues with NativeWind v5 previews:
"overrides": {
"lightningcss": "1.30.1"
}
src/global.css)@import '@gv-tech/design-tokens/theme.css';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css';
@import 'nativewind/theme';
@layer base {
:root {
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
{
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
}
Import global.css at the top of your root entry point (App.tsx or index.js):
import './src/global.css';
tailwind.config.js)CRITICAL: You MUST include ./node_modules/@gv-tech/ui-native/dist/**/*.mjs in the content array or Tailwind will purge all component class names, causing transparent backgrounds!
const { preset } = require('@gv-tech/design-tokens');
module.exports = {
content: [
'./App.{js,jsx,ts,tsx}',
'./src/**/*.{js,jsx,ts,tsx}',
'./node_modules/@gv-tech/ui-native/dist/**/*.mjs',
'./node_modules/@gv-tech/ui-native/src/**/*.{ts,tsx}',
],
presets: [require('nativewind/preset'), preset],
};
metro.config.js)const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
config.resolver.sourceExts = [...config.resolver.sourceExts, 'native.tsx', 'native.ts', 'native.js'];
module.exports = withNativeWind(config, { input: './src/global.css' });
Create nativewind-env.d.ts in project root:
/// <reference types="nativewind/types" />
Add Reanimated worklet plugin to babel.config.js:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-worklets/plugin'],
};
};
Screen root views MUST use flex-1 bg-background:
import './src/global.css';
import { View } from 'react-native';
import { ThemeProvider, Button, Text } from '@gv-tech/ui-native';
export default function App() {
return (
<ThemeProvider value="system">
<View className="flex-1 items-center justify-center bg-background p-6">
<Button>
<Text>Native Button</Text>
</Button>
</View>
</ThemeProvider>
);
}