@coze-arch/cli 0.0.7-alpha.e6346c → 0.0.8-alpha.fe3c0f

package/lib/__templates__/expo/AGENTS.md

@@ -7,33 +7,66 @@
 - Expo 代码在 client 目录，Express.js 代码在 server 目录
 - 本模板默认无 Tab Bar，可按需改造
 
-目录结构说明
-
-├── server/                     # 服务端代码根目录 (Express.js)
-|   ├── src/
-│   │   └── index.ts            # Express 入口文件
-|   └── package.json            # 服务端 package.json
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
 │   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
-│   │   ├── home.tsx            # 首页
-│   │   └── index.tsx           # re-export home.tsx
+│   │   └── index.tsx           # 首页
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── demo/               # demo 示例页面
-│   │       ├── index.tsx       # 页面组件实现
-│   │       └── styles.ts       # 页面样式
+│   │   └── demo/               # 示例页面
+│   │       └── index.tsx
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
-│   ├── constants/              # 常量定义（如主题配置）
 │   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
+├── server/                     # 服务端代码根目录 (Express.js)
+|   ├── src/
+│   │   └── index.ts            # 服务端入口文件
+|   └── package.json            # 服务端 package.json
 ├── package.json
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
+## 样式方案
+
+基于 tailwindcss 进行样式开发（底层基于 Uniwind）
+
+写法示例：
+
+```tsx
+<View className="flex-1 bg-white dark:bg-gray-900 p-4"></View>
+```
+
+```tsx
+<Text
+  className="text-lg font-bold text-gray-900 dark:text-white"
+  selectionColorClassName="accent-blue-500"
+>
+  Hello World
+</Text>
+```
+
+Uniwind 官方文档：https://docs.uniwind.dev/llms.txt
+
+## 如何进行静态校验（TSC + ESLint）
+
+```bash
+# 对 client 和 server 目录同时进行校验
+npm run lint
+
+# 对 client 目录进行校验
+npm run lint:client
+
+# 对 server 目录进行校验
+npm run lint:server
+```
+
+## 如何修改主题模式（跟随系统、固定暗色、固定亮色）
+
+默认为跟随系统，如果用户明确指定为“暗色”或“亮色”，需要修改 `client/components/ColorSchemeUpdater.tsx` 的 `DEFAULT_THEME` 变量为合适的值
+
 ## 依赖管理与模块导入规范
 
 ### 依赖安装
@@ -70,8 +103,4 @@ import { Screen } from '../../../components/Screen';
 
 ## 本地开发
 
-运行 coze dev 可以同时启动前端和后端服务，如果端口已占用，该命令会先杀掉占用端口的进程再启动，也可以用来重启前端和后端服务
-
-```bash
-coze dev
-```
+`coze dev`：用来首次启动前后端服务，也可以用来重启前后端服务（该命令会先尝试杀掉占用端口的进程，再启动服务）

package/lib/__templates__/expo/README.md

@@ -7,33 +7,66 @@
 - Expo 代码在 client 目录，Express.js 代码在 server 目录
 - 本模板默认无 Tab Bar，可按需改造
 
-目录结构说明
-
-├── server/                     # 服务端代码根目录 (Express.js)
-|   ├── src/
-│   │   └── index.ts            # Express 入口文件
-|   └── package.json            # 服务端 package.json
 ├── client/                     # React Native 前端代码
 │   ├── app/                    # Expo Router 路由目录（仅路由配置）
 │   │   ├── _layout.tsx         # 根布局文件（必需，务必阅读）
-│   │   ├── home.tsx            # 首页
-│   │   └── index.tsx           # re-export home.tsx
+│   │   └── index.tsx           # 首页
 │   ├── screens/                # 页面实现目录（与 app/ 路由对应）
-│   │   └── demo/               # demo 示例页面
-│   │       ├── index.tsx       # 页面组件实现
-│   │       └── styles.ts       # 页面样式
+│   │   └── demo/               # 示例页面
+│   │       └── index.tsx
 │   ├── components/             # 可复用组件
 │   │   └── Screen.tsx          # 页面容器组件（必用）
 │   ├── hooks/                  # 自定义 Hooks
 │   ├── contexts/               # React Context 代码
-│   ├── constants/              # 常量定义（如主题配置）
 │   ├── utils/                  # 工具函数
 │   ├── assets/                 # 静态资源
 |   └── package.json            # Expo 应用 package.json
+├── server/                     # 服务端代码根目录 (Express.js)
+|   ├── src/
+│   │   └── index.ts            # 服务端入口文件
+|   └── package.json            # 服务端 package.json
 ├── package.json
 ├── .cozeproj                   # 预置脚手架脚本（禁止修改）
 └── .coze                       # 配置文件（禁止修改）
 
+## 样式方案
+
+基于 tailwindcss 进行样式开发（底层基于 Uniwind）
+
+写法示例：
+
+```tsx
+<View className="flex-1 bg-white dark:bg-gray-900 p-4"></View>
+```
+
+```tsx
+<Text
+  className="text-lg font-bold text-gray-900 dark:text-white"
+  selectionColorClassName="accent-blue-500"
+>
+  Hello World
+</Text>
+```
+
+Uniwind 官方文档：https://docs.uniwind.dev/llms.txt
+
+## 如何进行静态校验（TSC + ESLint）
+
+```bash
+# 对 client 和 server 目录同时进行校验
+npm run lint
+
+# 对 client 目录进行校验
+npm run lint:client
+
+# 对 server 目录进行校验
+npm run lint:server
+```
+
+## 如何修改主题模式（跟随系统、固定暗色、固定亮色）
+
+默认为跟随系统，如果用户明确指定为“暗色”或“亮色”，需要修改 `client/components/ColorSchemeUpdater.tsx` 的 `DEFAULT_THEME` 变量为合适的值
+
 ## 依赖管理与模块导入规范
 
 ### 依赖安装
@@ -70,8 +103,4 @@ import { Screen } from '../../../components/Screen';
 
 ## 本地开发
 
-运行 coze dev 可以同时启动前端和后端服务，如果端口已占用，该命令会先杀掉占用端口的进程再启动，也可以用来重启前端和后端服务
-
-```bash
-coze dev
-```
+`coze dev`：用来首次启动前后端服务，也可以用来重启前后端服务（该命令会先尝试杀掉占用端口的进程，再启动服务）

package/lib/__templates__/expo/client/app/+not-found.tsx

@@ -1,30 +1,15 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text } from 'react-native';
 import { Link } from 'expo-router';
-import { useTheme } from '@/hooks/useTheme';
-import { Spacing } from '@/constants/theme';
 
 export default function NotFoundScreen() {
-  const { theme } = useTheme();
-
   return (
-    <View style={[styles.container, { backgroundColor: theme.backgroundRoot }]}>
-      <Text>
+    <View className="flex-1 justify-center items-center bg-background">
+      <Text className="text-foreground">
         页面不存在
       </Text>
-      <Link href="/" style={[styles.gohome]}>
+      <Link href="/" className="text-accent mt-6">
         返回首页
       </Link>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  gohome: {
-    marginTop: Spacing['2xl'],
-  },
-});

package/lib/__templates__/expo/client/app/_layout.tsx

@@ -1,11 +1,10 @@
-import { useEffect } from 'react';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { LogBox } from 'react-native';
 import Toast from 'react-native-toast-message';
-import { AuthProvider } from "@/contexts/AuthContext";
-import { ColorSchemeProvider } from '@/hooks/useColorScheme';
+import { Provider } from '@/components/Provider';
+
+import '../global.css';
 
 LogBox.ignoreLogs([
   "TurboModuleRegistry.getEnforcing(...): 'RNMapsAirModule' could not be found",
@@ -14,23 +13,18 @@ LogBox.ignoreLogs([
 
 export default function RootLayout() {
   return (
-    <AuthProvider>
-      <ColorSchemeProvider>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <StatusBar style="dark"></StatusBar>
-          <Stack screenOptions={{
-            // 设置所有页面的切换动画为从右侧滑入，适用于iOS 和 Android
-            animation: 'slide_from_right',
-            gestureEnabled: true,
-            gestureDirection: 'horizontal',
-            // 隐藏自带的头部
-            headerShown: false
-          }}>
-            <Stack.Screen name="index" options={{ title: "" }} />
-          </Stack>
-          <Toast />
-        </GestureHandlerRootView>
-      </ColorSchemeProvider>
-    </AuthProvider>
+    <Provider>
+      <Stack
+        screenOptions={{
+          animation: 'slide_from_right',
+          gestureEnabled: true,
+          gestureDirection: 'horizontal',
+          headerShown: false
+        }}
+      >
+        <Stack.Screen name="index" options={{ title: "" }} />
+      </Stack>
+      <Toast />
+    </Provider>
   );
 }

package/lib/__templates__/expo/client/components/ColorSchemeUpdater.tsx

@@ -0,0 +1,43 @@
+import { Fragment, useEffect } from 'react';
+import { ColorSchemeName, Platform } from 'react-native';
+import { Uniwind } from 'uniwind'
+
+// system: 跟随系统变化
+// light: 固定为 light 主题
+// dark: 固定为 dark 主题
+const DEFAULT_THEME: 'system' | 'light' | 'dark' = 'system'
+
+const WebOnlyColorSchemeUpdater = function ({ children }: { children?: ReactNode }) {
+  useEffect(() => {
+    Uniwind.setTheme(DEFAULT_THEME);
+  }, []);
+
+  useEffect(() => {
+    function handleMessage(e: MessageEvent<{ event: string; colorScheme: ColorSchemeName; } | undefined>) {
+      if (e.data?.event === 'coze.workbench.colorScheme') {
+        const cs = e.data.colorScheme;
+        if (typeof cs === 'string') {
+          Uniwind.setTheme(cs);
+        }
+      }
+    }
+
+    if (Platform.OS === 'web') {
+      window.addEventListener('message', handleMessage, false);
+    }
+
+    return () => {
+      if (Platform.OS === 'web') {
+        window.removeEventListener('message', handleMessage, false);
+      }
+    }
+  }, []);
+
+  return <Fragment>
+    {children}
+  </Fragment>
+};
+
+export {
+  WebOnlyColorSchemeUpdater,
+}

package/lib/__templates__/expo/client/components/Provider.tsx

@@ -0,0 +1,18 @@
+import { AuthProvider } from '@/contexts/AuthContext';
+import { type ReactNode } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { WebOnlyColorSchemeUpdater } from './ColorSchemeUpdater';
+
+function Provider({ children }: { children: ReactNode }) {
+  return <WebOnlyColorSchemeUpdater>
+    <AuthProvider>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        {children}
+      </GestureHandlerRootView>
+    </AuthProvider>
+  </WebOnlyColorSchemeUpdater>
+}
+
+export {
+  Provider,
+}

package/lib/__templates__/expo/client/components/Screen.tsx

@@ -142,7 +142,7 @@ const KeyboardAwareScrollable = ({
 
 export const Screen = ({
   children,
-  backgroundColor = '#fff',
+  backgroundColor = 'var(--background)',
   statusBarStyle = 'dark',
   statusBarColor = 'transparent',
   safeAreaEdges = ['top', 'left', 'right', 'bottom'],

package/lib/__templates__/expo/client/eslint.config.mjs

@@ -23,6 +23,7 @@ export default [
       '**/*.d.ts',
       'eslint.config.*',
       'metro.config.*',
+      './scripts/**',
     ],
   },
   regexp.configs["flat/recommended"],

package/lib/__templates__/expo/client/global.css

@@ -0,0 +1,267 @@
+@import 'tailwindcss';
+@import 'uniwind';
+
+@theme {
+  /* Primitive Colors (Do not change between light and dark) */
+  --white: oklch(100% 0 0);
+  --black: oklch(0% 0 0);
+  --snow: oklch(0.9911 0 0);
+  --eclipse: oklch(0.2103 0.0059 285.89);
+
+  /* Border */
+  --border-width: 1px;
+  --field-border-width: 0px;
+
+  /* Base radius */
+  --radius: 0.5rem;
+  --field-radius: calc(var(--radius) * 1.5);
+
+  /* Opacity */
+  --opacity-disabled: 0.5;
+}
+
+@layer theme {
+  :root {
+    @variant light {
+      /* Base Colors */
+      --background: #fafafa;
+      --foreground: var(--eclipse);
+
+      /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+      --surface: var(--white);
+      --surface-foreground: var(--foreground);
+
+      /* Overlay: Used for floating/overlay components (dialogs, popovers, modals, menus) */
+      --overlay: var(--white);
+      --overlay-foreground: var(--foreground);
+
+      --muted: oklch(0.5517 0.0138 285.94);
+
+      --default: oklch(94% 0.001 286.375);
+      --default-foreground: var(--eclipse);
+
+      --accent: oklch(0.6204 0.195 253.83);
+      --accent-foreground: var(--snow);
+
+      /* Form Fields */
+      --field-background: var(--white);
+      --field-foreground: oklch(0.2103 0.0059 285.89);
+      --field-placeholder: var(--muted);
+      --field-border: transparent; /* no border by default on form fields */
+
+      /* Status Colors */
+      --success: oklch(0.7329 0.1935 150.81);
+      --success-foreground: var(--eclipse);
+
+      --warning: oklch(0.7819 0.1585 72.33);
+      --warning-foreground: var(--eclipse);
+
+      --danger: oklch(0.6532 0.2328 25.74);
+      --danger-foreground: var(--snow);
+
+      /* Component Colors */
+      --segment: var(--white);
+      --segment-foreground: var(--eclipse);
+
+      /* Misc Colors */
+      --border: oklch(90% 0.004 286.32);
+      --separator: oklch(74% 0.004 286.32);
+      --focus: var(--accent);
+      --link: var(--foreground);
+
+      /* Shadows */
+      --surface-shadow:
+        0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+        0 0 1px 0 rgba(0, 0, 0, 0.06);
+      --overlay-shadow:
+        0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 -6px 12px 0 rgba(0, 0, 0, 0.02),
+        0 14px 28px 0 rgba(0, 0, 0, 0.06);
+      --field-shadow:
+        0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+        0 0 1px 0 rgba(0, 0, 0, 0.06);
+    }
+
+    @variant dark {
+      /* Base Colors */
+      --background: #09090b;
+      --foreground: var(--snow);
+
+      /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+      --surface: oklch(0.2103 0.0059 285.89);
+      --surface-foreground: var(--foreground);
+
+      /* Overlay: Used for floating/overlay components (dialogs, popovers, modals, menus) - lighter for contrast */
+      --overlay: oklch(0.2103 0.0059 285.89);
+      --overlay-foreground: var(--foreground);
+
+      --muted: oklch(70.5% 0.015 286.067);
+
+      --default: oklch(27.4% 0.006 286.033);
+      --default-foreground: var(--snow);
+
+      --accent: oklch(0.6204 0.195 253.83);
+      --accent-foreground: var(--snow);
+
+      /* Form Field Defaults - Colors (only the ones that are different from light theme) */
+      --field-background: oklch(0.2103 0.0059 285.89);
+      --field-foreground: var(--foreground);
+      --field-placeholder: var(--muted);
+      --field-border: transparent; /* no border by default on form fields */
+
+      /* Status Colors */
+      --success: oklch(0.7329 0.1935 150.81);
+      --success-foreground: var(--eclipse);
+
+      --warning: oklch(0.8203 0.1388 76.34);
+      --warning-foreground: var(--eclipse);
+
+      --danger: oklch(0.594 0.1967 24.63);
+      --danger-foreground: var(--snow);
+
+      /* Component Colors */
+      --segment: oklch(0.3964 0.01 285.93);
+      --segment-foreground: var(--foreground);
+
+      /* Misc Colors */
+      --border: oklch(28% 0.006 286.033);
+      --separator: oklch(40% 0.006 286.033);
+      --focus: var(--accent);
+      --link: var(--foreground);
+
+      /* Shadows */
+      --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */
+      --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.2) inset;
+      --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */
+    }
+  }
+}
+
+@theme inline static {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-surface: var(--surface);
+  --color-surface-foreground: var(--surface-foreground);
+  --color-surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+  --color-overlay: var(--overlay);
+  --color-overlay-foreground: var(--overlay-foreground);
+
+  --color-muted: var(--muted);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-segment: var(--segment);
+  --color-segment-foreground: var(--segment-foreground);
+
+  --color-border: var(--border);
+  --color-separator: var(--separator);
+  --color-focus: var(--focus);
+  --color-link: var(--link);
+
+  --color-default: var(--default);
+  --color-default-foreground: var(--default-foreground);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+
+  /* Form Field Tokens */
+  --color-field: var(--field-background, var(--default));
+  --color-field-foreground: var(--field-foreground, var(--foreground));
+  --color-field-placeholder: var(--field-placeholder, var(--muted));
+  --color-field-border: var(--field-border, var(--border));
+  --radius-field: var(--field-radius, var(--radius-xl));
+  --border-width-field: var(--field-border-width, var(--border-width));
+
+  --shadow-surface: var(--surface-shadow);
+  --shadow-overlay: var(--overlay-shadow);
+  --shadow-field: var(--field-shadow);
+
+  /* Calculated Variables */
+
+  /* Colors */
+
+  /* --- background shades --- */
+  --color-background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+  --color-background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  --color-background-inverse: var(--foreground);
+
+  /* ------------------------- */
+  --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+  --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+  --color-success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+  --color-warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+  --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+
+  /* Form Field Colors */
+  --color-field-hover: color-mix(in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2%);
+  --color-field-focus: var(--field-background, var(--default));
+  --color-field-border-hover: color-mix(in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10%);
+  --color-field-border-focus: color-mix(in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22%);
+
+  /* Soft Colors */
+  --color-accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+  --color-accent-soft-foreground: var(--accent);
+  --color-accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+
+  --color-danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+  --color-danger-soft-foreground: var(--danger);
+  --color-danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+
+  --color-warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+  --color-warning-soft-foreground: var(--warning);
+  --color-warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+
+  --color-success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+  --color-success-soft-foreground: var(--success);
+  --color-success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+
+  /* Surface Levels - progressively darker/lighter shades for layering */
+  --color-surface-secondary: color-mix(in oklab, var(--surface) 94%, var(--surface-foreground) 6%);
+  --color-surface-tertiary: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+
+  /* On Surface Colors */
+  --color-on-surface: color-mix(in oklab, var(--surface) 93%, var(--surface-foreground) 7%);
+  --color-on-surface-foreground: var(--surface-foreground);
+  --color-on-surface-hover: color-mix(in oklab, var(--surface) 91%, var(--surface-foreground) 9%);
+  --color-on-surface-focus: color-mix(in oklab, var(--surface) 93%, var(--surface-foreground) 7%);
+
+  /* On Surface Colors - Secondary (on secondary surface) */
+  --color-on-surface-secondary: color-mix(in oklab, var(--surface) 87%, var(--surface-foreground) 13%);
+  --color-on-surface-secondary-foreground: var(--surface-foreground);
+  --color-on-surface-secondary-hover: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+  --color-on-surface-secondary-focus: color-mix(in oklab, var(--surface) 87%, var(--surface-foreground) 13%);
+
+   /* On Surface Colors - Tertiary (on tertiary surface) */
+  --color-on-surface-tertiary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+  --color-on-surface-tertiary-foreground: var(--surface-foreground);
+  --color-on-surface-tertiary-hover: color-mix(in oklab, var(--surface) 84%, var(--surface-foreground) 16%);
+  --color-on-surface-tertiary-focus: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+
+  /* Separator Colors - Levels */
+  --color-separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+  --color-separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+
+  /* Border Colors - Levels (progressive contrast: default → secondary → tertiary) */
+  /* Light mode: lighter → darker | Dark mode: darker → lighter */
+  --color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+  --color-border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+
+  /* Radius and default sizes - defaults can change by just changing the --radius */
+  --radius-xs: calc(var(--radius) * 0.25); /* 0.125rem (2px) */
+  --radius-sm: calc(var(--radius) * 0.5); /* 0.25rem (4px) */
+  --radius-md: calc(var(--radius) * 0.75); /* 0.375rem (6px) */
+  --radius-lg: calc(var(--radius) * 1); /* 0.5rem (8px) */
+  --radius-xl: calc(var(--radius) * 1.5); /* 0.75rem (12px) */
+  --radius-2xl: calc(var(--radius) * 2); /* 1rem (16px) */
+  --radius-3xl: calc(var(--radius) * 3); /* 1.5rem (24px) */
+  --radius-4xl: calc(var(--radius) * 4); /* 2rem (32px) */
+}
+

package/lib/__templates__/expo/client/metro.config.js

@@ -1,6 +1,7 @@
 const { getDefaultConfig } = require('expo/metro-config');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 const connect = require('connect');
+const { withUniwindConfig } = require('uniwind/metro');
 
 const config = getDefaultConfig(__dirname);
 
@@ -121,4 +122,10 @@ config.server = {
   },
 };
 
-module.exports = config;
+module.exports = withUniwindConfig(config, {
+  // relative path to your global.css file
+  cssEntryFile: './global.css',
+  // (optional) path where we gonna auto-generate typings
+  // defaults to project's root
+  dtsFile: './uniwind-types.d.ts'
+});

package/lib/__templates__/expo/client/package.json

@@ -7,7 +7,7 @@
     "check-deps": "npx depcheck",
     "postinstall": "npm run install-missing",
     "install-missing": "node ./scripts/install-missing-deps.js",
-    "lint": "expo lint",
+    "lint": "tsc --noEmit; eslint ./ -f ./scripts/formatter.mjs --quiet",
     "start": "expo start --web --clear",
     "test": "jest --watchAll"
   },
@@ -90,6 +90,9 @@
     "react-test-renderer": "19.1.0",
     "tsx": "^4.21.0",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.32.1",
+    "axios": "^1.13.6",
+    "tailwindcss": "^4.1.18",
+    "uniwind": "^1.2.7"
   }
 }