zafer-skills by zaferayan/skills
npx skills add https://github.com/zaferayan/skills --skill zafer-skills重要提示:这是一个 SKILL 文件,不是项目。切勿在此文件夹中运行 npm/bun install。切勿在此处创建代码文件。创建新项目时,务必先询问用户项目路径或在单独的目录中创建(例如,
~/Projects/app-name)。
本指南旨在为使用 Claude Code 处理 Expo 项目时提供上下文。
创建新的 Expo 项目时,必须包含以下所有内容:
src/app/onboarding.tsx - 基于滑动的引导页,带有全屏背景视频和渐变叠加层src/app/paywall.tsx - RevenueCat 付费墙屏幕(在引导页后显示)src/app/settings.tsx - 设置屏幕,包含语言、主题、通知和重置引导页选项引导页屏幕必须有一个全屏背景视频。使用 URL,而非本地文件:
import { useVideoPlayer, VideoView } from "expo-video";
const VIDEO_URL =
"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
const player = useVideoPlayer(VIDEO_URL, (player) => {
player.loop = true;
player.muted = true;
player.play();
});
// 在渲染中:
<VideoView
player={player}
style={StyleSheet.absoluteFill}
contentFit="cover"
nativeControls={false}
/>;
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
切勿仅导入 expo-video 而不实际使用 VideoView 组件。
expo-router/unstable-native-tabs 中的 NativeTabs 进行标签页导航 - 切勿使用 @react-navigation/bottom-tabs 或 expo-router 中的 Tabsimport { ThemeProvider } from "@/context/theme-context";
import {
DarkTheme,
DefaultTheme,
ThemeProvider as NavigationThemeProvider,
} from "@react-navigation/native";
<ThemeProvider>
<OnboardingProvider>
<AdsProvider>
<NavigationThemeProvider
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<Stack />
</NavigationThemeProvider>
</AdsProvider>
</OnboardingProvider>
</ThemeProvider>;
使用 npx expo install 安装库(而非 npm/yarn/bun install):
npx expo install react-native-purchases react-native-google-mobile-ads expo-notifications i18next react-i18next expo-localization react-native-reanimated expo-video expo-audio expo-sqlite expo-linear-gradient
库列表:
react-native-purchases (RevenueCat)react-native-google-mobile-ads (AdMob)expo-notificationsi18next + react-i18next + expo-localizationreact-native-reanimatedexpo-video + expo-audioexpo-sqlite (用于 localStorage)expo-linear-gradient (用于渐变叠加层)必须在 app.json 中添加以下配置才能使 AdMob 正常工作:
{
"expo": {
"plugins": [
[
"react-native-google-mobile-ads",
{
"androidAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
"iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
}
]
]
}
}
用于开发/测试的测试 App ID:
ca-app-pub-3940256099942544~1458002511ca-app-pub-3940256099942544~3347511713切勿跳过此配置,否则应用将因 GADInvalidInitializationException 而崩溃。
必须在标签页布局中实现横幅广告。使用以下模式:
import { View, StyleSheet } from 'react-native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
import { useTranslation } from 'react-i18next';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
import { useAds } from '@/context/ads-context';
const adUnitId = __DEV__
? TestIds.BANNER
: 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy';
export default function TabLayout() {
const { t } = useTranslation();
const { shouldShowAds } = useAds();
return (
<View style={styles.container}>
<NativeTabs>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger.Label>{t('tabs.home')}</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="house.fill" md="home" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
<NativeTabs.Trigger.Label>{t('tabs.settings')}</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="gear" md="settings" />
</NativeTabs.Trigger>
</NativeTabs>
{shouldShowAds && (
<View style={styles.adContainer}>
<BannerAd
unitId={adUnitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
adContainer: {
alignItems: 'center',
paddingBottom: 10,
},
});
TestIds.BANNERuseAds 上下文检查 shouldShowAds(对高级用户隐藏)编写 tr.json 时,必须使用正确的土耳其语字符:
示例:
expo-sqlite/localStorage/installTabs - 改用 NativeTabs@react-navigation/bottom-tabs - 改用 NativeTabsexpo-av - 视频改用 expo-video,音频改用 expo-audioexpo-ads-admob - 改用 react-native-google-mobile-adsreact-native-google-mobile-ads切勿在回调函数、循环或条件语句内部调用 useAnimatedStyle、useSharedValue 或其他 Reanimated 钩子。
❌ 错误示例:
const renderItem = () => {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // 错误!
return <Animated.View style={animatedStyle} />;
};
✅ 正确示例:
function MyComponent() {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // 顶层
return <Animated.View style={animatedStyle} />;
}
对于列表,为每个项目创建一个单独的组件:
function AnimatedItem({ item }) {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 }));
return <Animated.View style={animatedStyle}>{item.name}</Animated.View>;
}
// 在 FlatList 中:
renderItem={({ item }) => <AnimatedItem item={item} />}
创建新的 Expo 项目后,必须:
(tabs) 文件夹,删除 src/app/index.tsx 以避免路由冲突:rm src/app/index.tsx
lineHeight:src/components/themed-text.tsx (默认包含 lineHeight - 移除它)lineHeight 的组件搜索并移除所有 lineHeight 出现的地方:
grep -r "lineHeight" src/
改用 padding 或 margin。
完成编写/修改代码后,必须按顺序运行以下命令:
npx expo install --fix
npx expo prebuild --clean
install --fix 修复依赖版本不匹配问题prebuild --clean 重新创建 ios 和 android 文件夹切勿跳过这些步骤。
当用户要求创建应用时,必须:
bunx create-expo -t default@next app-name
app.json:{
"expo": {
"ios": {
"bundleIdentifier": "com.company.appname"
},
"android": {
"package": "com.company.appname"
}
}
}
4. 然后进入项目目录并开始实现所有必需的屏幕 5. 不要询问项目路径 - 始终使用当前目录
警告 : 切勿使用 AsyncStorage!改用 expo-sqlite polyfill。
使用示例
import "expo-sqlite/localStorage/install";
globalThis.localStorage.setItem("key", "value"); console.log(globalThis.localStorage.getItem("key")); // 'value'
警告 : 切勿使用
lineHeight!它会导致 React Native 中的布局问题。改用 padding 或 margin。
project-root/
├── src/
│ ├── app/
│ │ ├── _layout.tsx
│ │ ├── index.tsx
│ │ ├── explore.tsx
│ │ ├── settings.tsx
│ │ ├── paywall.tsx
│ │ └── onboarding.tsx
│ ├── components/
│ │ ├── ui/
│ │ ├── themed-text.tsx
│ │ └── themed-view.tsx
│ ├── constants/
│ │ ├── theme.ts
│ │ └── [data-files].ts
│ ├── context/
│ │ ├── onboarding-context.tsx
│ │ └── ads-context.tsx
│ ├── hooks/
│ │ ├── use-notifications.ts
│ │ └── use-color-scheme.ts
│ ├── lib/
│ │ ├── notifications.ts
│ │ ├── purchases.ts
│ │ ├── ads.ts
│ │ └── i18n.ts
│ └── locales/
│ ├── tr.json
│ └── en.json
├── assets/
│ └── images/
├── ios/
├── android/
├── app.json
├── eas.json
├── package.json
└── tsconfig.json
Expo Router 使用 NativeTabs 进行原生标签页导航:
import { NativeTabs } from "expo-router/unstable-native-tabs";
export default function TabLayout() {
return (
<NativeTabs>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="house.fill" md="home" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="explore">
<NativeTabs.Trigger.Label>Explore</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="compass.fill" md="explore" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
<NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="gear" md="settings" />
</NativeTabs.Trigger>
</NativeTabs>
);
}
| 用途 | SF Symbol | Material Icon |
|---|---|---|
| 首页 | house.fill | home |
| 探索 | compass.fill | explore |
| 设置 | gear | settings |
| 个人资料 | person.fill | person |
| 搜索 | magnifyingglass | search |
| 收藏 | heart.fill | favorite |
| 通知 | bell.fill | notifications |
bun install
bun start
bun ios
bun android
bun lint
npx expo install --fix
npx expo prebuild --clean
eas build --profile development --platform ios
eas build --profile development --platform android
eas build --profile production --platform ios
eas build --profile production --platform android
eas submit --platform ios
eas submit --platform android
lib/purchases.tsapp/paywall.tsxsrc/lib/ads.tssrc/lib/notifications.ts, src/hooks/use-notifications.ts文件: src/app/onboarding.tsx, src/app/paywall.tsx
基于滑动的屏幕,带有全屏背景视频
视频上的渐变叠加层
重要提示 : 引导页完成后必须立即显示付费墙
// 在 onboarding.tsx 中 - 当用户完成引导页时: const handleComplete = async () => { await setOnboardingCompleted(true); router.replace('/paywall'); // 立即导航到付费墙 };
// 在 paywall.tsx 中 - 购买或跳过之后: const handleContinue = () => { router.replace('/(tabs)'); // 导航到主应用 };
流程: 引导页 → 付费墙 → 主应用 (标签页)
付费墙必须有两个订阅选项:
// 订阅选项组件示例:
const subscriptionOptions = [
{
id: 'weekly',
title: t('paywall.weekly'),
price: '$4.99/week',
selected: selectedPlan === 'weekly',
},
{
id: 'yearly',
title: t('paywall.yearly'),
price: '$129.99/year',
badge: '50% OFF',
selected: selectedPlan === 'yearly',
},
];
// 年订阅选项应作为最佳价值方案进行视觉高亮
设置屏幕必须包含:
const { isPremium } = usePurchases();
// 移除广告 - 导航到付费墙
const handleRemoveAds = () => {
router.push('/paywall');
};
// 重置引导页
const handleResetOnboarding = async () => {
await setOnboardingCompleted(false);
router.replace('/onboarding');
};
// 在设置列表中:
{!isPremium && (
<SettingsItem
title={t('settings.removeAds')}
icon="crown.fill"
onPress={handleRemoveAds}
/>
)}
<SettingsItem
title={t('settings.resetOnboarding')}
icon="arrow.counterclockwise"
onPress={handleResetOnboarding}
/>
lib/i18n.tslocales/ 中<ThemeProvider>
<OnboardingProvider>
<AdsProvider>
<Stack />
</AdsProvider>
</OnboardingProvider>
</ThemeProvider>
文件: src/hooks/use-color-scheme.ts
import { useThemeContext } from '@/context/theme-context';
export function useColorScheme(): 'light' | 'dark' | 'unspecified' {
const { isDark } = useThemeContext();
return isDark ? 'dark' : 'light';
}
app.json 中定义app.json 中定义newArchEnabled: true 启用新架构experiments.typedRoutes 启用类型化路由npx expo prebuild --clean
bun ios
bun android
注意:
prebuild --clean会重新创建 ios 和 android 文件夹。修改原生模块或 app.json 后运行它。
每周安装数
276
仓库
GitHub 星标数
107
首次出现
2026年1月29日
安全审计
安装于
codex198
gemini-cli196
opencode194
claude-code171
github-copilot159
cursor144
IMPORTANT : This is a SKILL file, NOT a project. NEVER run npm/bun install in this folder. NEVER create code files here. When creating a new project, ALWAYS ask the user for the project path first or create it in a separate directory (e.g.,
~/Projects/app-name).
This guide is created to provide context when working with Expo projects using Claude Code.
When creating a new Expo project, you MUST include ALL of the following:
src/app/onboarding.tsx - Swipe-based onboarding with fullscreen background video and gradient overlaysrc/app/paywall.tsx - RevenueCat paywall screen (shown after onboarding)src/app/settings.tsx - Settings screen with language, theme, notifications, and reset onboarding optionsThe onboarding screen MUST have a fullscreen background video. Use a URL, not a local file:
import { useVideoPlayer, VideoView } from "expo-video";
const VIDEO_URL =
"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
const player = useVideoPlayer(VIDEO_URL, (player) => {
player.loop = true;
player.muted = true;
player.play();
});
// In render:
<VideoView
player={player}
style={StyleSheet.absoluteFill}
contentFit="cover"
nativeControls={false}
/>;
Do NOT just import expo-video without actually using the VideoView component.
NativeTabs from expo-router/unstable-native-tabs for tab navigation - NEVER use @react-navigation/bottom-tabs or Tabs from expo-routerimport { ThemeProvider } from "@/context/theme-context";
import {
DarkTheme,
DefaultTheme,
ThemeProvider as NavigationThemeProvider,
} from "@react-navigation/native";
<ThemeProvider>
<OnboardingProvider>
<AdsProvider>
<NavigationThemeProvider
value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<Stack />
</NavigationThemeProvider>
</AdsProvider>
</OnboardingProvider>
</ThemeProvider>;
Use npx expo install to install libraries (NOT npm/yarn/bun install):
npx expo install react-native-purchases react-native-google-mobile-ads expo-notifications i18next react-i18next expo-localization react-native-reanimated expo-video expo-audio expo-sqlite expo-linear-gradient
Libraries:
react-native-purchases (RevenueCat)react-native-google-mobile-ads (AdMob)expo-notificationsi18next + react-i18next + expo-localizationreact-native-reanimatedexpo-video + expo-audioexpo-sqlite (for localStorage)You MUST add this to app.json for AdMob to work:
{
"expo": {
"plugins": [
[
"react-native-google-mobile-ads",
{
"androidAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy",
"iosAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"
}
]
]
}
}
For development/testing, use test App IDs:
ca-app-pub-3940256099942544~1458002511ca-app-pub-3940256099942544~3347511713Do NOT skip this configuration or the app will crash with GADInvalidInitializationException.
You MUST implement banner ads in the Tab layout. Use this pattern:
import { View, StyleSheet } from 'react-native';
import { NativeTabs } from 'expo-router/unstable-native-tabs';
import { useTranslation } from 'react-i18next';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
import { useAds } from '@/context/ads-context';
const adUnitId = __DEV__
? TestIds.BANNER
: 'ca-app-pub-xxxxxxxxxxxxxxxx/yyyyyyyyyy';
export default function TabLayout() {
const { t } = useTranslation();
const { shouldShowAds } = useAds();
return (
<View style={styles.container}>
<NativeTabs>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger.Label>{t('tabs.home')}</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="house.fill" md="home" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
<NativeTabs.Trigger.Label>{t('tabs.settings')}</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="gear" md="settings" />
</NativeTabs.Trigger>
</NativeTabs>
{shouldShowAds && (
<View style={styles.adContainer}>
<BannerAd
unitId={adUnitId}
size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
adContainer: {
alignItems: 'center',
paddingBottom: 10,
},
});
TestIds.BANNER in developmentuseAds context to check shouldShowAds (hides for premium users)When writing tr.json, you MUST use correct Turkish characters:
Example:
expo-sqlite/localStorage/install insteadTabs from expo-router - Use NativeTabs instead@react-navigation/bottom-tabs - Use NativeTabs insteadexpo-av - Use expo-video for video, expo-audio for audio insteadexpo-ads-admob - Use react-native-google-mobile-ads insteadNEVER call useAnimatedStyle, useSharedValue, or other reanimated hooks inside callbacks, loops, or conditions.
❌ WRONG:
const renderItem = () => {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // ERROR!
return <Animated.View style={animatedStyle} />;
};
✅ CORRECT:
function MyComponent() {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 })); // Top level
return <Animated.View style={animatedStyle} />;
}
For lists, create a separate component for each item:
function AnimatedItem({ item }) {
const animatedStyle = useAnimatedStyle(() => ({ opacity: 1 }));
return <Animated.View style={animatedStyle}>{item.name}</Animated.View>;
}
// In FlatList:
renderItem={({ item }) => <AnimatedItem item={item} />}
After creating a new Expo project, you MUST:
(tabs) folder, DELETE src/app/index.tsx to avoid route conflicts:rm src/app/index.tsx
lineHeight from these files:src/components/themed-text.tsx (comes with lineHeight by default - REMOVE IT)lineHeightSearch and remove all lineHeight occurrences:
grep -r "lineHeight" src/
Replace with padding or margin instead.
When you finish writing/modifying code, you MUST run these commands in order:
npx expo install --fix
npx expo prebuild --clean
install --fix fixes dependency version mismatchesprebuild --clean recreates ios and android foldersDo NOT skip these steps.
When user asks to create an app, you MUST:
bunx create-expo -t default@next app-name
app.json with the bundle ID:{
"expo": {
"ios": {
"bundleIdentifier": "com.company.appname"
},
"android": {
"package": "com.company.appname"
}
}
}
4. Then cd into the project and start implementing all required screens 5. Do NOT ask for project path - always use current directory
WARNING : DO NOT USE AsyncStorage! Use expo-sqlite polyfill instead.
Example usage
import "expo-sqlite/localStorage/install";
globalThis.localStorage.setItem("key", "value"); console.log(globalThis.localStorage.getItem("key")); // 'value'
WARNING : NEVER USE
lineHeight! It causes layout issues in React Native. Use padding or margin instead.
project-root/
├── src/
│ ├── app/
│ │ ├── _layout.tsx
│ │ ├── index.tsx
│ │ ├── explore.tsx
│ │ ├── settings.tsx
│ │ ├── paywall.tsx
│ │ └── onboarding.tsx
│ ├── components/
│ │ ├── ui/
│ │ ├── themed-text.tsx
│ │ └── themed-view.tsx
│ ├── constants/
│ │ ├── theme.ts
│ │ └── [data-files].ts
│ ├── context/
│ │ ├── onboarding-context.tsx
│ │ └── ads-context.tsx
│ ├── hooks/
│ │ ├── use-notifications.ts
│ │ └── use-color-scheme.ts
│ ├── lib/
│ │ ├── notifications.ts
│ │ ├── purchases.ts
│ │ ├── ads.ts
│ │ └── i18n.ts
│ └── locales/
│ ├── tr.json
│ └── en.json
├── assets/
│ └── images/
├── ios/
├── android/
├── app.json
├── eas.json
├── package.json
└── tsconfig.json
Expo Router uses NativeTabs for native tab navigation:
import { NativeTabs } from "expo-router/unstable-native-tabs";
export default function TabLayout() {
return (
<NativeTabs>
<NativeTabs.Trigger name="index">
<NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="house.fill" md="home" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="explore">
<NativeTabs.Trigger.Label>Explore</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="compass.fill" md="explore" />
</NativeTabs.Trigger>
<NativeTabs.Trigger name="settings">
<NativeTabs.Trigger.Label>Settings</NativeTabs.Trigger.Label>
<NativeTabs.Trigger.Icon sf="gear" md="settings" />
</NativeTabs.Trigger>
</NativeTabs>
);
}
| Purpose | SF Symbol | Material Icon |
|---|---|---|
| Home | house.fill | home |
| Explore | compass.fill | explore |
| Settings | gear | settings |
| Profile | person.fill | person |
| Search | magnifyingglass | search |
| Favorites | heart.fill | favorite |
| Notifications | bell.fill | notifications |
bun install
bun start
bun ios
bun android
bun lint
npx expo install --fix
npx expo prebuild --clean
eas build --profile development --platform ios
eas build --profile development --platform android
eas build --profile production --platform ios
eas build --profile production --platform android
eas submit --platform ios
eas submit --platform android
lib/purchases.tsapp/paywall.tsxsrc/lib/ads.tssrc/lib/notifications.ts, src/hooks/use-notifications.tsFiles: src/app/onboarding.tsx, src/app/paywall.tsx
Swipe-based screens with fullscreen background video
Gradient overlay on video
IMPORTANT : Paywall MUST appear immediately after onboarding completes
// In onboarding.tsx - when user completes onboarding: const handleComplete = async () => { await setOnboardingCompleted(true); router.replace('/paywall'); // Navigate to paywall immediately };
// In paywall.tsx - after purchase or skip: const handleContinue = () => { router.replace('/(tabs)'); // Navigate to main app };
Flow: Onboarding → Paywall → Main App (tabs)
Paywall MUST have two subscription options:
// Subscription option component example:
const subscriptionOptions = [
{
id: 'weekly',
title: t('paywall.weekly'),
price: '$4.99/week',
selected: selectedPlan === 'weekly',
},
{
id: 'yearly',
title: t('paywall.yearly'),
price: '$129.99/year',
badge: '50% OFF',
selected: selectedPlan === 'yearly',
},
];
// Yearly option should be visually highlighted as the best value
Settings screen MUST include:
const { isPremium } = usePurchases();
// Remove Ads - navigates to paywall
const handleRemoveAds = () => {
router.push('/paywall');
};
// Reset onboarding
const handleResetOnboarding = async () => {
await setOnboardingCompleted(false);
router.replace('/onboarding');
};
// In settings list:
{!isPremium && (
<SettingsItem
title={t('settings.removeAds')}
icon="crown.fill"
onPress={handleRemoveAds}
/>
)}
<SettingsItem
title={t('settings.resetOnboarding')}
icon="arrow.counterclockwise"
onPress={handleResetOnboarding}
/>
lib/i18n.tslocales/<ThemeProvider>
<OnboardingProvider>
<AdsProvider>
<Stack />
</AdsProvider>
</OnboardingProvider>
</ThemeProvider>
File: src/hooks/use-color-scheme.ts
import { useThemeContext } from '@/context/theme-context';
export function useColorScheme(): 'light' | 'dark' | 'unspecified' {
const { isDark } = useThemeContext();
return isDark ? 'dark' : 'light';
}
app.jsonapp.jsonnewArchEnabled: trueexperiments.typedRoutesnpx expo prebuild --clean
bun ios
bun android
NOTE:
prebuild --cleanrecreates ios and android folders. Run it after modifying native modules or app.json.
Weekly Installs
276
Repository
GitHub Stars
107
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex198
gemini-cli196
opencode194
claude-code171
github-copilot159
cursor144
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装
SQLAlchemy Alembic 专家最佳实践与代码审查指南 - 生产级数据库迁移优化
272 周安装
Django部署Google Cloud SQL PostgreSQL教程:10分钟快速配置与生产环境设置
272 周安装
代码复杂度分析工具:Python/Go代码质量检测与重构指南
273 周安装
批量处理器技能 - 高效批量处理文档,支持PDF转换、文本提取、文件重命名
273 周安装
Cypress 自动化测试指南:E2E 与组件测试最佳实践、安装配置与故障排除
273 周安装
Antigravity Manager - AI账户管理器与代理网关,支持Gemini/Claude多账户轮换与协议转换
273 周安装
expo-linear-gradient (for gradient overlays)react-native-google-mobile-ads