メニュー
Guide to configuring splash screens in Capacitor apps including asset generation, animation, and programmatic control. Use this skill when users need to customize their app launch experience.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | capacitor-splash-screen |
| description | Guide to configuring splash screens in Capacitor apps including asset generation, animation, and programmatic control. Use this skill when users need to customize their app launch experience. |
Configure and customize splash screens for iOS and Android.
npm install @capacitor/splash-screen
npx cap sync
// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
plugins: {
SplashScreen: {
launchShowDuration: 2000,
launchAutoHide: true,
backgroundColor: '#ffffff',
androidSplashResourceName: 'splash',
androidScaleType: 'CENTER_CROP',
showSpinner: false,
splashFullScreen: true,
splashImmersive: true,
},
},
};
import { SplashScreen } from '@capacitor/splash-screen';
// Hide after app is ready
async function initApp() {
// Initialize your app
await loadUserData();
await setupServices();
// Hide splash screen
await SplashScreen.hide();
}
// Show splash (useful for app refresh)
await SplashScreen.show({
autoHide: false,
});
// Hide with animation
await SplashScreen.hide({
fadeOutDuration: 500,
});
npm install -D @capacitor/assets
# Place source images in resources/
# resources/splash.png (2732x2732 recommended)
# resources/splash-dark.png (optional)
npx capacitor-assets generate
| Size | Usage |
|---|---|
| 2732x2732 | iPad Pro 12.9" |
| 2048x2732 | iPad Pro portrait |
| 2732x2048 | iPad Pro landscape |
| 1668x2388 | iPad Pro 11" |
| 1536x2048 | iPad |
| 1242x2688 | iPhone XS Max |
| 828x1792 | iPhone XR |
| 1125x2436 | iPhone X/XS |
| 1242x2208 | iPhone Plus |
| 750x1334 | iPhone 8 |
| 640x1136 | iPhone SE |
| Density | Size |
|---|---|
| mdpi | 320x480 |
| hdpi | 480x800 |
| xhdpi | 720x1280 |
| xxhdpi | 960x1600 |
| xxxhdpi | 1280x1920 |
<!-- ios/App/App/Base.lproj/LaunchScreen.storyboard -->
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0">
<scenes>
<scene sceneID="1">
<objects>
<viewController id="2" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="3">
<rect key="frame" x="0" y="0" width="414" height="896"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<subviews>
<imageView
contentMode="scaleAspectFit"
image="splash"
translatesAutoresizingMaskIntoConstraints="NO"
id="4">
</imageView>
</subviews>
<constraints>
<constraint firstItem="4" firstAttribute="centerX" secondItem="3" secondAttribute="centerX" id="5"/>
<constraint firstItem="4" firstAttribute="centerY" secondItem="3" secondAttribute="centerY" id="6"/>
</constraints>
</view>
</viewController>
</objects>
</scene>
</scenes>
</document>
<!-- android/app/src/main/res/values/styles.xml -->
<resources>
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/splash_background</item>
<item name="windowSplashScreenAnimatedIcon">@drawable/splash</item>
<item name="windowSplashScreenAnimationDuration">1000</item>
<item name="postSplashScreenTheme">@style/AppTheme.NoActionBar</item>
</style>
</resources>
<!-- android/app/src/main/res/values/colors.xml -->
<resources>
<color name="splash_background">#FFFFFF</color>
</resources>
<!-- android/app/src/main/res/values-night/colors.xml -->
<resources>
<color name="splash_background">#121212</color>
</resources>
// capacitor.config.ts
plugins: {
SplashScreen: {
launchAutoHide: false, // Control manually
backgroundColor: '#ffffff',
// iOS will use LaunchScreen.storyboard variations
// Android uses values-night/colors.xml
},
},
// Detect dark mode and configure
import { SplashScreen } from '@capacitor/splash-screen';
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// Show appropriate themed content
await SplashScreen.hide({
fadeOutDuration: 300,
});
import { SplashScreen } from '@capacitor/splash-screen';
async function showAnimatedSplash() {
// Keep native splash while loading
await SplashScreen.show({ autoHide: false });
// Load Lottie animation in web
const lottie = await import('lottie-web');
// Show web-based animated splash
document.getElementById('splash-animation').style.display = 'block';
const animation = lottie.loadAnimation({
container: document.getElementById('splash-animation'),
path: '/animations/splash.json',
loop: false,
});
animation.addEventListener('complete', async () => {
// Hide native splash
await SplashScreen.hide({ fadeOutDuration: 0 });
// Hide web splash
document.getElementById('splash-animation').style.display = 'none';
});
}
| Issue | Solution |
|---|---|
| White flash | Match splash background to app |
| Stretching | Use correct asset sizes |
| Not hiding | Call hide() manually |
| Dark mode wrong | Add values-night resources |
Guides migration from Capawesome Cloud live updates or @capawesome/capacitor-live-update to Capgo Updater. Use when a Capacitor app contains Capawesome live update packages, CLI commands, config, API calls, or when the user asks why Capgo Updater is the better live-update path: native updater runtime, fully open source, cheaper at comparable scale, and longer proven track record.
Official Capacitor package guide plus Capgo ecosystem plugin recommendations. Use this skill when users need native functionality, want the right official Capacitor package, or need a stronger Capgo/community plugin when the official package is missing or too limited.
Use for Capgo Cloud Build native iOS and Android workflows, including CLI login, API-key handling, iOS build onboarding, signing credential storage, build requests, store upload settings, output download links, and troubleshooting. Do not use for OTA bundle uploads or generic Capacitor setup unless a native Capgo build is requested.
Guides the agent through authoring and validating agent skills. Use when creating new skill directories, tightening skill metadata, extracting supporting references, or preparing skillgrade evals. Do not use for general app documentation, generic README editing, or non-agentic library code.
Revenue playbook for getting a mobile or web subscription app from zero to early MRR. Use when users ask how to make revenue, reach $1K MRR, monetize an app, get first users, improve ASO, plan TikTok/Reels/Shorts or Reddit acquisition, design a paywall, choose freemium vs trial, price subscriptions, reduce churn, or build a simple growth loop for an app.
Guide to migrating an existing Capacitor iOS app from CocoaPods to Swift Package Manager (SPM). Use this skill when users want Capacitor 8-style SPM projects, need to run or recover from spm-migration-assistant, replace Podfile/Pods/App.xcworkspace with CapApp-SPM, add debug.xcconfig, verify plugin SPM support, or remove CocoaPods from an app project.