Token导航 LogoToken导航TokenDH.com
开发只读github未标认证来源可访问许可证需确认审计通过

paw-cra-multi-platform-exportPaw cra 多平台导出

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

总安装

490

周安装

20

GitHub Stars

25

下载量

157
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:paw-cra-multi-platform-export(Paw cra 多平台导出)
来源仓库:https://github.com/pawbytes/skill-suites
仓库路径:skills/paw-cra-multi-platform-export
安装命令:
npx skills add https://github.com/pawbytes/skill-suites --skill paw-cra-multi-platform-export
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/pawbytes/skill-suites --skill paw-cra-multi-platform-export

简介

辅助前端页面、组件和样式开发与维护。paw-cra-multi-platform-export 属于开发类 Skill,可作为该场景下的辅助能力补充。

  • 适合生成 React、Next.js 或 Vue 相关代码。
  • 使用时需结合项目现有设计系统和路由方式。
  • 避免生成孤立片段,应配合本地预览确认视觉效果。
  • 涉及构建检查时,需验证编译和运行状态。

SKILL.md

Multi-Platform Export

Overview

This workflow converts approved master visual and video assets into all target platform variants — resized, re-encoded, and organized into a delivery-ready folder structure with a machine-readable manifest. It handles both images and videos in a single unified pipeline, enforcing safe zones so critical content (text, logos, faces) is never cropped or obscured by platform UI.

Args: Accepts --headless / -H for non-interactive execution. In headless mode, requires master asset path(s) and target platform list as arguments or reads them from the active campaign brief.

Output: Platform-variant files organized by platform in folders, plus export-manifest.json describing every variant with its specs.

Act as a technical export specialist who understands platform constraints, codec requirements, and safe-zone geometry. Prioritize visual integrity — a variant that preserves the master's intent at slightly lower resolution is always better than one that crops critical content to hit exact pixel dimensions.

On Activation

Load available config from {project-root}/.pawbytes/config/config.yaml and {project-root}/.pawbytes/config/config.user.yaml (root level and cra section). If config is missing, let the user know paw-cra-setup can configure the module at any time. Resolve and apply throughout the session (defaults in parens):

  • {output_directory} (.pawbytes/creative-suites) — base output path
  • {default_brand} (null) — active brand for naming convention

Load shared agency memory from {project-root}/.pawbytes/creative-suites/index.md if available. If an active campaign exists, read the campaign brief for brand name and campaign name (used in file naming).

Tool Verification: Check for ffmpeg availability — it is required for both image and video processing. If missing, abort with install instructions (winget install ffmpeg / brew install ffmpeg). ImageMagick is optional and enhances image-specific operations.

If --headless, proceed directly with provided inputs. Otherwise, greet the user and ask for master asset(s) and target platforms.


Pipeline

Step 1 — Source Intake

Collect inputs:

  • Master asset(s): One or more file paths (images or videos). Detect media type from extension and ffprobe metadata.
  • Target platforms: Which platforms to export for. If not specified, default to all supported platforms.
  • Brand and campaign name: For the naming convention. Infer from active campaign context or ask.

Supported platforms: Instagram, TikTok, YouTube, Facebook, LinkedIn, Twitter/X, Pinterest, Google Business.

Classify each source file:

  • Image: .png, .jpg, .jpeg, .webp, .tiff, .bmp, .svg
  • Video: .mp4, .mov, .avi, .mkv, .webm

Step 2 — Platform Spec Lookup

Load ./references/platform-export-specs.md for complete platform specifications including dimensions, aspect ratios, safe zones, file size limits, codec requirements, and duration limits.

For each source asset + target platform combination, determine:

  • Target dimensions and aspect ratio
  • Safe-zone insets (pixels from each edge where platform UI overlays content)
  • File size ceiling
  • For video: codec, bitrate, max duration, subtitle handling

Step 3 — Image Export

For each image + platform pair:

  1. Analyze source — get dimensions, aspect ratio, identify focal content region using ffprobe or ImageMagick identify
  2. Resize strategy — choose the approach that best preserves the master's intent:

- Same aspect ratio: Scale proportionally - Minor crop needed: Crop centered on focal point, verify critical content stays inside safe zone - Major aspect change: Prefer letterboxing/pillarboxing with brand-colored bars over aggressive cropping. If user prefers cropping, confirm focal point first.

  1. Safe-zone enforcement — after resize/crop, verify no critical content (text overlays, logos, key subjects) falls outside the safe zone. Critical content must have at least the platform's safe-zone inset from every edge.
  2. Re-encode — JPEG (quality 90) for photographs, PNG for graphics with transparency. Keep under the platform's file size limit. If over limit, reduce JPEG quality progressively (85 → 80 → 75) until compliant.
  3. Verify — confirm final dimensions match spec, file size is under limit.

ffmpeg examples for image resize:

# Scale to fit within dimensions, maintaining aspect ratio
ffmpeg -i master.png -vf "scale=1080:1350:force_original_aspect_ratio=decrease,pad=1080:1350:(ow-iw)/2:(oh-ih)/2:color=#000000" output.jpg

# Crop to exact dimensions centered on focal point
ffmpeg -i master.png -vf "scale=1080:-1,crop=1080:1080" output.jpg

Step 4 — Video Export

For each video + platform pair:

  1. Probe source — get resolution, duration, codec, bitrate, subtitle tracks using ffprobe
  2. Duration check — if source exceeds platform max duration, warn the user (do not auto-trim in headless mode — flag it in the manifest as duration_exceeded)
  3. Aspect ratio adjustment:

- Horizontal to vertical (e.g., 16:9 to 9:16): Smart crop centered on the action area. Prefer cropping over letterboxing for vertical video platforms (TikTok, Reels). - Vertical to horizontal: Pillarbox with blurred background or brand-colored bars. - Same ratio, different resolution: Scale directly.

  1. Re-encode — H.264 (libx264), AAC audio, platform-appropriate bitrate. Target CRF 18-23 depending on platform ceiling.
  2. Subtitle repositioning — if source has subtitle tracks and aspect ratio changed, re-position to stay within the new safe zone. For burned-in subtitles, re-render at adjusted coordinates.
  3. Verify — confirm resolution, codec, duration, and file size meet platform requirements.

ffmpeg examples for video:

# Horizontal to vertical (smart center crop)
ffmpeg -i master.mp4 -vf "scale=1920:-1,crop=1080:1920" -c:v libx264 -crf 20 -c:a aac -b:a 128k output.mp4

# Scale to platform resolution
ffmpeg -i master.mp4 -vf "scale=1920:1080:force_original_aspect_ratio=decrease,pad=1920:1080:(ow-iw)/2:(oh-ih)/2" -c:v libx264 -crf 20 -c:a aac output.mp4

Step 5 — Naming Convention

Apply consistent naming to all exported files:

{brand}_{campaign}_{platform}_{asset-type}_{variant}.{ext}
ComponentSourceExample
brandActive brand (lowercase, hyphens)acme-corp
campaignCampaign name (lowercase, hyphens)spring-launch
platformTarget platform (lowercase)instagram, tiktok, youtube
asset-typeimage or videoimage
variantPlatform-specific format descriptorfeed-portrait, story, thumbnail
extPlatform-optimal formatjpg, png, mp4

Example: acme-corp_spring-launch_instagram_image_feed-portrait.jpg

If brand or campaign is unknown, omit those segments: instagram_image_feed-portrait.jpg

Step 6 — Export Organization

Organize all variants into platform-specific folders under the export directory:

{output_directory}/brands/{brand}/exports/{campaign}/
  instagram/
    acme-corp_spring-launch_instagram_image_feed-portrait.jpg
    acme-corp_spring-launch_instagram_image_story.jpg
    acme-corp_spring-launch_instagram_video_reel.mp4
  tiktok/
    acme-corp_spring-launch_tiktok_video_feed.mp4
  youtube/
    acme-corp_spring-launch_youtube_video_main.mp4
    acme-corp_spring-launch_youtube_image_thumbnail.jpg
  ...
  export-manifest.json

Step 7 — Export Manifest

Generate export-manifest.json at the root of the export directory:

{
  "brand": "acme-corp",
  "campaign": "spring-launch",
  "exported_at": "2026-04-01T14:30:00Z",
  "source_assets": [
    {
      "path": "path/to/master.png",
      "type": "image",
      "dimensions": "2400x3000",
      "file_size_bytes": 4500000
    }
  ],
  "variants": [
    {
      "platform": "instagram",
      "variant": "feed-portrait",
      "type": "image",
      "filename": "acme-corp_spring-launch_instagram_image_feed-portrait.jpg",
      "path": "instagram/acme-corp_spring-launch_instagram_image_feed-portrait.jpg",
      "dimensions": "1080x1350",
      "aspect_ratio": "4:5",
      "file_size_bytes": 245000,
      "format": "jpeg",
      "status": "ok"
    },
    {
      "platform": "tiktok",
      "variant": "feed",
      "type": "video",
      "filename": "acme-corp_spring-launch_tiktok_video_feed.mp4",
      "path": "tiktok/acme-corp_spring-launch_tiktok_video_feed.mp4",
      "dimensions": "1080x1920",
      "aspect_ratio": "9:16",
      "duration_seconds": 45,
      "codec": "h264",
      "file_size_bytes": 12000000,
      "status": "ok"
    }
  ],
  "warnings": [],
  "total_variants": 8,
  "total_size_bytes": 45000000
}

Status values: ok, duration_exceeded, size_exceeded, quality_reduced, skipped.

Include any warnings (e.g., "TikTok variant exceeds 60s duration limit — manual trim needed").

Step 8 — Status Update

Append to the daily log at {project-root}/.pawbytes/creative-suites/daily/YYYY-MM-DD.md:

[Export] Multi-platform export complete for {campaign}
- Source: {N} master asset(s)
- Exported: {M} variants across {P} platforms
- Warnings: {W} (or "none")
- Manifest: {path-to-export-manifest.json}

Safe-Zone Reference

Safe zones protect content from being hidden by platform UI (buttons, captions, navigation bars). These are the minimum pixel insets from each edge where no critical content should appear.

PlatformTopBottomLeftRightNotes
Instagram Feed0000Clean viewport
Instagram Story1202006060Top status bar, bottom CTA
TikTok501502020Bottom: username, caption, music
YouTube04000Bottom: progress bar and controls overlay
Facebook Feed06000Bottom: reaction bar and captions overlay
Facebook Story1202006060Same as Instagram Story
LinkedIn Feed05000Bottom: engagement bar overlay on video
Twitter/X0000Clean viewport
Pinterest05000Bottom: pin info overlay
Google Business0000Clean viewport

For video platforms with vertical content (TikTok, Reels, Stories), safe zones are critical — the bottom 10-15% of the frame is typically covered by UI elements.


Error Handling

  • ffmpeg not found: Abort with install instructions. Do not attempt Python-only fallback for video.
  • Source file missing: Skip with warning in manifest, continue with remaining files.
  • Source too low resolution: Warn if upscaling exceeds 150%. Proceed but note quality_reduced in manifest.
  • File size over limit after compression: Note size_exceeded in manifest. Suggest manual optimization.
  • Duration over limit: Note duration_exceeded in manifest. Do not auto-trim.
  • Unsupported format: Skip with warning, suggest conversion first.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

34.62%
按下载量换算54

Claude

33.66%
按下载量换算53

Cursor

19.22%
按下载量换算30

Gemini CLI

9.96%
按下载量换算16

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

只读

该 Skill 主要提供规则、说明或参考内容,本身偏只读;真正读写文件、联网或执行命令仍取决于宿主 Agent 的任务。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills