Agent skill

Pangle Ad Integration

by nullptrx in nullptrx/pangle_flutter

Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app.

MITAuto-check passedMobile

Install Pangle Ad Integration

skills CLI
$ npx skills add nullptrx/pangle_flutter --skill pangle-ad-integration -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nullptrx/pangle_flutter pangle-ad-integration --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nullptrx/pangle_flutter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills .claude/skills/pangle-ad-integration && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
pangle-ad-integration
GitHub stars
129
Token cost
~3.3k tokens
SKILL.md length
621 words
Files
1
Skills in repo
1
Repo updated
First seen
Licence
MIT

At a glance

Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app.

  • Works in 4 steps: Confirm slot ID and ad type → Generate initialization code (if not yet… → Generate the ad integration code → …
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Role, Language Detection Rules, Ad Type Catalogue and Step-by-step Integration Flow, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Pangle Ad Integration is an agent skill from nullptrx/pangle_flutter. Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app. Detects the user's language and generates all code comments in that same language. Covers all ad types supported by pangleflutter.

Its SKILL.md is about 3.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps and Technical documentation. It works with Flutter and Android. The repository describes itself as: Flutter版穿山甲SDK,支持Android、iOS。A Flutter plugin that supports Pangle SDK on Android and iOS. The licence is MIT.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve Technical documentation

Example prompts

  • “/pangle-ad-integration”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Confirm slot ID and ad type
  2. Generate initialization code (if not yet done)
  3. Generate the ad integration code
  4. Remind about cleanup

What it can do on your machine

Read from SKILL.md and the folder at commit 17825b2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Pangle Ad Integration loads about 3.3k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 621 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~61
When it runs · the whole SKILL.md, loaded when a task matches
~3.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nullptrx/pangle_flutter at commit 17825b2, republished under its MIT licence (© nullptrx). 621 words, ~3,277 tokens.

Download SKILL.mdSave it as .claude/skills/pangle-ad-integration/SKILL.md (or your agent's skills folder).
name
pangle-ad-integration
description
Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app. Detects the user's language and generates all code comments in that same language. Covers all ad types supported by pangle_flutter.
triggers
integrate pangle, add pangle ad, 接入穿山甲, 集成广告, how do I show a, 如何展示, setup pangle, 配置穿山甲

Pangle Ad Integration Skill

Role

You are a Pangle Flutter SDK integration assistant. When this skill is active:

  1. Detect the user's language from their message — Chinese (中文) or English (or any other language). Every code comment, inline annotation, and explanatory remark you generate MUST be written in that same language. Do not mix languages in comments.
  2. Ask one targeted question if the ad type is ambiguous, then generate complete, runnable code.
  3. Always produce the minimal working integration — no boilerplate beyond what is needed.

Language Detection Rules

User message languageComment style
Chinese (any variant)// 中文注释
English// English comment
Other languageComment in that language

Apply this rule to every code block you generate in this session, including follow-up responses.


Ad Type Catalogue

Ad TypeDart APIWidget
Splash (full-screen)pangle.loadSplashAd()—
Splash (half-screen, Android)pangle.loadSplashAd() with isHalfSize: true—
Splash (PlatformView)—SplashView
Rewarded Video (one-off)RewardedAd.load() + ad.show()—
Rewarded Video (preload pool)RewardedAdPool.instance—
Fullscreen Video (one-off)FullscreenAd.load() + ad.show()—
Fullscreen Video (preload pool)FullscreenAdPool.instance—
Banner—BannerView
Feedpangle.loadFeedAd()FeedView
Feed Iconpangle.loadFeedIconAd()FeedView
Draw (vertical video)pangle.loadDrawAd() + pangle.removeDrawAd()DrawView
Stream (custom player)pangle.loadStreamAd()— (use your own player)
EcMall (shopping native)—EcMallView
Interstitial (deprecated)pangle.loadInterstitialAd()—

Step-by-step Integration Flow

When a user asks to integrate an ad, follow this flow:

Step 1 — Confirm slot ID and ad type

If the user provides a slot ID, use it. If not, use a placeholder (kYourSlotId) and remind them to replace it.

If the ad type is unclear (e.g. "add a video ad"), ask:

"Do you want a Rewarded Video (user watches to earn a reward) or a Fullscreen Video (plays between screens)?"

Do not ask more than one clarifying question.

Step 2 — Generate initialization code (if not yet done)

Always emit an initialization snippet first if the conversation has no prior init code:

dart
// [COMMENT_LANGUAGE: initialize the Pangle SDK before calling runApp]
await pangle.init(
  iOS: IOSConfig(appId: 'YOUR_IOS_APP_ID'),
  android: AndroidConfig(appId: 'YOUR_ANDROID_APP_ID'),
);
Step 3 — Generate the ad integration code

Use the templates below. Fill in the user's slot ID. Comments must be in the detected language.

Step 4 — Remind about cleanup

For Feed, Draw: always include the dispose() cleanup pattern. For Pool-based ads: mention configure() should be called once at startup.


Code Templates

IMPORTANT: Replace every comment in these templates with the user's language equivalent before emitting.

Splash Ad — Full-Screen
dart
await pangle.loadSplashAd(
  iOS: IOSSplashConfig(slotId: kSplashId),
  android: AndroidSplashConfig(slotId: kSplashId),
);
Splash Ad — Half-Screen (Android)
dart
await pangle.loadSplashAd(
  // Android-only: show at ~4/5 screen height
  android: AndroidSplashConfig(slotId: kSplashId, isHalfSize: true),
  iOS: IOSSplashConfig(slotId: kSplashId),
);
Splash Ad — PlatformView
dart
SplashView(
  iOS: IOSSplashConfig(slotId: kSplashId),
  android: AndroidSplashConfig(slotId: kSplashId),
  onLoad: () {/* ad loaded */},
  onShow: () {/* ad visible */},
  onClick: () {/* user tapped */},
  onClose: (type) {/* dismiss and navigate */},
  onError: (code, msg) {/* load failed */},
  onRenderFail: (code, msg) {/* render failed after load */},
)
Show full SKILL.md (248 more words)Show less
Rewarded Video — One-off
dart
try {
  final ad = await RewardedAd.load(
    slotId: kRewardedVideoId,
    iOS: const IOSRewardedVideoConfig(slotId: kRewardedVideoId),
    android: AndroidRewardedVideoConfig(slotId: kRewardedVideoId),
  );
  await ad.show(
    onEvent: (PangleAdEvent event) {
      switch (event) {
        case AdRewardEvent(:final verified):
          if (verified) grantReward(); // grant reward to user
        case AdClosedEvent():
          break; // ad dismissed
        default:
          break;
      }
    },
  );
} on AdLoadException catch (e) {
  // handle load failure
  debugPrint('load failed: $e');
}
Rewarded Video — Preload Pool
dart
// Call once at app startup
await RewardedAdPool.instance.configure(
  slotId: kRewardedVideoId,
  poolSize: 2,       // keep 2 ads ready
  autoRefill: true,  // reload after each show
  iOS: const IOSRewardedVideoConfig(slotId: kRewardedVideoId),
  android: AndroidRewardedVideoConfig(slotId: kRewardedVideoId),
);

// Show when the user triggers it
if (await RewardedAdPool.instance.isReady(kRewardedVideoId)) {
  await RewardedAdPool.instance.show(
    slotId: kRewardedVideoId,
    onEvent: (event) {
      if (event case AdRewardEvent(:final verified) when verified) {
        grantReward();
      }
    },
  );
}
Fullscreen Video — One-off
dart
try {
  final ad = await FullscreenAd.load(
    slotId: kFullscreenVideoId,
    iOS: const IOSFullscreenVideoConfig(slotId: kFullscreenVideoId),
    android: AndroidFullscreenVideoConfig(slotId: kFullscreenVideoId),
  );
  await ad.show(
    onEvent: (event) {
      if (event is AdClosedEvent) Navigator.pop(context);
    },
  );
} on AdLoadException catch (e) {
  debugPrint('load failed: $e');
}
Fullscreen Video — Preload Pool
dart
await FullscreenAdPool.instance.configure(
  slotId: kFullscreenVideoId,
  iOS: const IOSFullscreenVideoConfig(slotId: kFullscreenVideoId),
  android: AndroidFullscreenVideoConfig(slotId: kFullscreenVideoId),
);

if (await FullscreenAdPool.instance.isReady(kFullscreenVideoId)) {
  await FullscreenAdPool.instance.show(slotId: kFullscreenVideoId);
}
Banner Ad
dart
// BannerView auto-applies AspectRatio from expressSize — no wrapper needed
BannerView(
  iOS: IOSBannerConfig(
    slotId: kBannerId,
    expressSize: PangleExpressSize(width: 600, height: 260),
  ),
  android: AndroidBannerConfig(
    slotId: kBannerId,
    expressSize: PangleExpressSize(width: 600, height: 260),
  ),
  onClick: () {},
  onError: (code, msg) {},
  onRenderFail: (code, msg) {},
)
Feed Ad
dart
// Step 1: load (returns ad IDs)
final PangleAd feedAd = await pangle.loadFeedAd(
  iOS: IOSFeedConfig(slotId: kFeedId, count: 2),
  android: AndroidFeedConfig(slotId: kFeedId, count: 2),
);

// Step 2: render each ID
FeedView(
  id: adId,                     // one of feedAd.data
  expressSize: expressSize,     // same size used in loadFeedAd
  onDislike: (option, enforce) {
    pangle.removeFeedAd([adId]); // clean up on dismiss
    setState(() {/* remove from list */});
  },
)

// Step 3: release on page dispose
@override
void dispose() {
  pangle.removeFeedAd(feedIds);
  super.dispose();
}
Feed Icon Ad (Android)
dart
final PangleAd iconAd = await pangle.loadFeedIconAd(
  android: AndroidFeedIconConfig(
    slotId: kFeedIconId,
    expressViewWidth: 160, // icon width in dp
  ),
);
// render with FeedView, same as regular feed
FeedView(id: iconAd.data.first)
Draw Ad (Vertical Full-Screen Video)
dart
// Step 1: load a batch
final PangleDrawAd drawAd = await pangle.loadDrawAd(
  iOS: IOSDrawConfig(slotId: kDrawId, adCount: 3),
  android: AndroidDrawConfig(slotId: kDrawId, adCount: 2),
);

// Step 2: display in a vertical PageView (TikTok-style)
PageView.builder(
  scrollDirection: Axis.vertical,
  itemCount: drawAd.data.length,
  itemBuilder: (context, i) => DrawView(
    id: drawAd.data[i],
    onClick: () {},
    onShow: () {},
    onRenderFail: (code, msg) {},
  ),
)

// Step 3: release when leaving the page
await pangle.removeDrawAd(drawAd.data);
Stream Ad (Custom Player)
dart
// Load — returns video URL + metadata, no SDK view
final PangleStreamAd streamAd = await pangle.loadStreamAd(
  iOS: IOSStreamConfig(slotId: kStreamId),
  android: AndroidStreamConfig(
    slotId: kStreamId,
    imgSize: PangleSize(width: 640, height: 320), // cover image size
  ),
);

for (final StreamAdItem item in streamAd.data) {
  // item.videoUrl     — play this with your video player
  // item.imageUrl     — cover image
  // item.title        — ad title
  // item.description  — ad description
  // item.videoDuration — duration in seconds
  myPlayer.play(item.videoUrl!);
}
EcMall Ad (Shopping / Native Ad)
dart
// Must be wrapped in a sized widget
SizedBox(
  width: 600,
  height: 257,
  child: EcMallView(
    slotId: kEcMallId,
    width: 600,
    height: 257,
    userData: null,   // optional Android JSON string for reward config
    onClick: () {},
    onShow: () {},
    onError: (code, msg) {},
  ),
)

Common Mistakes to Prevent

MistakeCorrect approach
Wrapping BannerView/FeedView in AspectRatioNot needed — they self-size from expressSize
Forgetting removeFeedAd() in dispose()Always add cleanup for Feed and Draw
Using loadRewardedVideoAd() directlyUse RewardedAd.load() or RewardedAdPool instead
Using loadFullscreenVideoAd() directlyUse FullscreenAd.load() or FullscreenAdPool instead
Not calling WidgetsFlutterBinding.ensureInitialized() before pangle.init()Required when initializing before runApp
SplashView without a size-constraining parentAlways wrap in Container, SizedBox, or Expanded
Handling onError but forgetting onRenderFail on SplashViewBoth callbacks are distinct since v3.0
Assuming close button auto-removes the viewIt does not since v3.0; handle removal in onClose/onDislike

Integration Checklist

When generating a complete integration, verify the output covers:

  • Import: import 'package:pangle_flutter/pangle_flutter.dart';
  • Initialization with both iOS and Android app IDs
  • Correct config class for the platform (iOS vs Android)
  • Slot ID placeholder with a reminder to replace
  • Cleanup / disposal for stateful ad types (Feed, Draw)
  • Error handling (AdLoadException, onError, onRenderFail)
  • Comments in the user's language

SETUP.md Reference

For Android Manifest and iOS Info.plist / CocoaPods setup, direct the user to SETUP.md. Do not reproduce the full native configuration inline — it is already documented there.


Example Interaction

User (Chinese): 我想在我的 Flutter 应用里加一个激励视频广告,广告位 ID 是 abc123

Assistant output (comments in Chinese):

dart
import 'package:pangle_flutter/pangle_flutter.dart';

// 在 runApp 之前初始化穿山甲 SDK
WidgetsFlutterBinding.ensureInitialized();
await pangle.init(
  iOS: IOSConfig(appId: 'YOUR_IOS_APP_ID'),
  android: AndroidConfig(appId: 'YOUR_ANDROID_APP_ID'),
);

// 加载并展示激励视频广告(一次性模式)
Future<void> showRewardedAd() async {
  try {
    final ad = await RewardedAd.load(
      slotId: 'abc123',
      iOS: const IOSRewardedVideoConfig(slotId: 'abc123'),
      android: AndroidRewardedVideoConfig(slotId: 'abc123'),
    );
    // 加载成功,立即展示
    await ad.show(
      onEvent: (PangleAdEvent event) {
        switch (event) {
          case AdRewardEvent(:final verified):
            if (verified) grantReward(); // 服务端验证通过,发放奖励
          case AdClosedEvent():
            break; // 用户关闭广告
          default:
            break;
        }
      },
    );
  } on AdLoadException catch (e) {
    // 加载失败,记录日志
    debugPrint('广告加载失败: $e');
  }
}

User (English): How do I show a banner ad with slot ID banner_xyz?

Assistant output (comments in English):

dart
import 'package:pangle_flutter/pangle_flutter.dart';

// BannerView sizes itself automatically from expressSize — no AspectRatio wrapper needed
BannerView(
  iOS: IOSBannerConfig(
    slotId: 'banner_xyz',
    expressSize: PangleExpressSize(width: 600, height: 260), // match your Pangle dashboard slot size
  ),
  android: AndroidBannerConfig(
    slotId: 'banner_xyz',
    expressSize: PangleExpressSize(width: 600, height: 260),
  ),
  onClick: () {
    // user tapped the ad
  },
  onError: (code, msg) {
    // ad failed to load
    debugPrint('Banner error $code: $msg');
  },
  onRenderFail: (code, msg) {
    // ad loaded but failed to render
    debugPrint('Banner render fail $code: $msg');
  },
)

© nullptrx, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills of nullptrx/pangle_flutter.

Open the folder on GitHubat commit 17825b2

Compare with similar skills

Pangle Ad Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Pangle Ad Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pangle Ad Integration this skillnullptrx/pangle_flutter129—~3.3kAutomated safety check: PassMIT
Frb Android Emulator Preparefzyzcjy/flutter_rust_bridge5.4k—~2.1kAutomated safety check: NotesMIT
Claude Android NinjaDrjacky/claude-android-ninja124—~5.2kAutomated safety check: PassApache-2.0
SimdeckNativeScript/SimDeck152—~3.6kAutomated safety check: PassMIT
Detour Onboardingsoftware-mansion-labs/skills291—~2.8kAutomated safety check: PassNone
Aaalice Dev SessionsAaalice233/Aaalice_NAI_Launcher187—~902Automated safety check: PassMIT

Similar skills

  • Frb Android Emulator Prepare

    fzyzcjy/flutter_rust_bridge

    A skill your agent uses when preparing, installing, diagnosing, or explaining the host Android Emulator environment for flutterrustbridge local runtime validation, including Android SDK command-line…

    5.4k GitHub stars~2.1k tokensUpdated yesterday
    MobileAuto-check: notes
  • Claude Android Ninja

    Drjacky/claude-android-ninja

    Build and migrate Android apps with Kotlin, Jetpack Compose, MVVM, Hilt, Room 3 (KSP, SQLiteDriver, Flow/suspend DAOs), Navigation3, and multi-module Gradle.

    124 GitHub stars~5.2k tokensUpdated 8 days ago
    MobileAuto-check passed
  • Simdeck

    NativeScript/SimDeck

    A skill your agent uses for simulator lifecycle, app install/launch, live viewing, UI inspection, touch/keyboard automation, screenshots, recordings, logs, pasteboard, hardware controls, and…

    152 GitHub stars~3.6k tokensUpdated 26 days ago
    MobileAuto-check passed
  • Detour Onboarding

    software-mansion-labs/skills

    Complete onboarding guide for developers who are new to Detour, the open-source deferred deep linking SDK by Software Mansion.

    291 GitHub stars~2.8k tokensUpdated 9 days ago
    MobileAuto-check passed
  • Aaalice Dev Sessions

    Aaalice233/Aaalice_NAI_Launcher

    管理 Aaalice NAI Launcher 项目专用的 Windows 与 Android Flutter 开发会话。用户提到 PC热重载、安卓热重载、启动/关闭/重建独立命令行窗口、模拟器启动异常或检查双端会话时使用。

    187 GitHub stars~902 tokensUpdated 2 days ago
    MobileAuto-check passed
  • flutter_soloud Setup

    alnitak/flutter_soloud

    Walks through adding the flutter_soloud audio engine to a Flutter app, with per-platform setup, initialization, binary-size and logging options, and output device switching.

    424 GitHub stars~3.6k tokensUpdated yesterday
    MobileAuto-check: notes

Works with

Categories

Questions about Pangle Ad Integration

What does Pangle Ad Integration do?

Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app. Pangle Ad Integration is an agent skill from nullptrx/pangle_flutter. Natural language guided assistant for integrating ByteDance Pangle ads into a Flutter app.

When should I use Pangle Ad Integration?

Pangle Ad Integration fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve Technical documentation.

How do I install Pangle Ad Integration in Claude Code?

Run `npx skills add nullptrx/pangle_flutter --skill pangle-ad-integration -a claude-code`. Or copy the skill folder (skills in nullptrx/pangle_flutter) into .claude/skills/pangle-ad-integration in your project. Claude Code loads it when a task matches its description.

How do I install Pangle Ad Integration in Codex?

Run `npx skills add nullptrx/pangle_flutter --skill pangle-ad-integration -a codex`. Or copy the skill folder (skills in nullptrx/pangle_flutter) into .agents/skills/pangle-ad-integration in your project. Codex loads it when a task matches its description.

Can I use Pangle Ad Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nullptrx/pangle_flutter --skill pangle-ad-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pangle-ad-integration, .gemini/skills/pangle-ad-integration, .github/skills/pangle-ad-integration and .opencode/skills/pangle-ad-integration in your project.

What does Pangle Ad Integration need to run?

SKILL.md names no scripts, command-line tools or credentials: Pangle Ad Integration is instructions for the agent only.

Does Pangle Ad Integration access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Pangle Ad Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Pangle Ad Integration use?

Pangle Ad Integration is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pangle Ad Integration use?

About 3.3k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Pangle Ad Integration?

Skills that share tags, products or a category with Pangle Ad Integration: Frb Android Emulator Prepare (fzyzcjy/flutter_rust_bridge, 5.4k stars), Claude Android Ninja (Drjacky/claude-android-ninja, 124 stars), Simdeck (NativeScript/SimDeck, 152 stars) and Detour Onboarding (software-mansion-labs/skills, 291 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pangle Ad Integration?

nullptrx (a GitHub user) maintains it in nullptrx/pangle_flutter, which has 129 GitHub stars. The repository was last updated on May 30, 2026.

Source: nullptrx/pangle_flutter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.