cwb-theming

Code with Beto Skills

Professional agent skills and plugins to help mobile developers ship better apps faster with AI assistance.

Overview

This repository contains a curated collection of ChatGPT, Codex, and Claude agent skills designed specifically for React Native and Expo developers. Each skill automates complex workflows, follows best practices, and helps you build production-ready mobile apps with confidence.

Available Plugins

🎨 App Icon Plugin

AI-powered app icon generation with full iOS 26 Liquid Glass support and Android adaptive icons.

Features:

• Generate professional app icons using AI (powered by OpenAI via SnapAI CLI)
• Full iOS 26 .icon folder format with Liquid Glass effect support
• Android adaptive icons with Material You theming integration
• Automatic app.json configuration for both platforms
• Multiple style options: minimalism, glassy, gradient, neon, material, and more
• Transparent backgrounds for better platform integration

Use cases:

• Starting a new Expo app and need an icon quickly
• Updating existing app icons with fresh designs
• Need proper iOS 26 and Android 13+ support
• Iterate on multiple icon concepts rapidly

View full documentation →

🚀 Ship Plugin

Scaffold production-ready React Native apps from Code with Beto templates using the @codewithbeto/ship CLI.

Features:

• One-command project scaffolding with bunx @codewithbeto/ship
• Pre-configured RevenueCat payments integration
• Automatic app name, bundle ID, and slug configuration
• Dependency installation and git initialization out of the box
• Non-interactive flag-based mode for AI agent compatibility

Use cases:

• Ship a revenue-ready AI image app this weekend
• Skip boilerplate and start building features immediately
• Scaffold from the battle-tested Platano template
• Automate project creation in CI or with AI agents

View full documentation →

🛠 Local Build Plugin

Generate release .apk and simulator .app artifacts for your Expo project using gradlew and xcodebuild directly.

Features:

• Reads your app.config.ts / app.json to pull app name, slug, scheme, and bundle identifier
• Verifies the iOS scheme on disk so the build command matches what Xcode generated
• Writes scripts/build-android.sh and scripts/build-ios.sh with your real values baked in
• Copies each artifact into builds/ (replacing the previous one) for predictable install paths
• Defaults to Release to avoid the expo-dev-client launcher screen

Use cases:

• Producing APKs and .app bundles for e2e tests (Maestro, Detox)
• Sharing a real build with a teammate without spinning up a dev server
• Iterating on a local device or simulator without waiting on remote builds

View full documentation →

🎨 Theming Plugin

Scaffold a unified, cross-platform color system into an Expo Router app, using the same theming pattern as the Platano template.

Features:

• Semantic system tokens (background, text, secondaryText, separator, link, ...) that resolve to native iOS colors and Android Material You dynamic colors
• Brand colors with optional Android Material You dynamic resolution
• Automatic dark/light re-rendering via useColorScheme() and the navigation ThemeProvider
• A useColors() / useTheme() / useBrand() context hook built on React's use
• Adds a theme context if you don't have one and wires your root _layout.tsx without clobbering existing providers

Use cases:

• Setting up theming or dark mode in an Expo / React Native app
• Getting native iOS + Android Material You colors from one set of names
• Replacing scattered Platform.OS color branching with a single useColors() hook
• Following the "Expo UI on Android" lesson and wanting Platano-style theming

Requires Expo SDK 56+ (older SDKs work with hex tokens and the React Navigation ThemeProvider).

View full documentation →

Installation

Codex / ChatGPT desktop app

Add this repo as a plugin marketplace from the Codex CLI:

codex plugin marketplace add Code-with-Beto/skills

Then install the plugins from the Code with Beto marketplace:

• In Codex CLI, run /plugins, install the plugin, and start a new session.
• In the ChatGPT desktop app, restart the app, open Plugins under Work or Codex, choose Code with Beto, and install the plugins you want.

Each plugin includes a Codex manifest at .codex-plugin/plugin.json; the repo marketplace is defined at .agents/plugins/marketplace.json.

Claude Code

/plugin marketplace add Code-with-Beto/skills
/plugin install cwb-app-icon@cwb-plugins

Any agent (skills only)

Install all Code with Beto skills with a single command:

npx skills add code-with-beto/skills

Or install individual plugins: