skills.rest
eaglhuang
eaglhuangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-asset-slice-pipeline

Automate UI asset slicing, classification, and post-processing for tooling pipelines.

3|Updated Mar 6, 2026
Search Tags:#automation#ui#classification#image-processing#post-processing#asset-slice
One-click install
npx skills add https://github.com/eaglhuang/cocos_new --skill ui-asset-slice-pipeline
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-asset-slice-pipeline
Source: https://github.com/eaglhuang/cocos_new/tree/main/.github/skills/ui-asset-slice-pipeline
Command: npx skills add https://github.com/eaglhuang/cocos_new --skill ui-asset-slice-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bundles the end-to-end workflow to slice UI assets, auto-classify, pick high-confidence slices, separate provisional temp slices, and post-process assets for tooling pipelines. It eliminates manual, multi-tool steps by providing a consolidated pre-processing pipeline for panel, cap, badge, glyph, and related UI slices from a full-page UI image.

Core Features & Use Cases

  • Full slice + auto-classify + auto-pick from a source image or folder.
  • Targeted cropping for GeneralDetail header caps.
  • Backgound removal and transparent trimming to prep assets for runtime use.
  • Post-process integration and batch readiness for task runners.
  • Recommended workflows: Path A (full-page to selected), Path B (header caps), Path C (selected-to-postprocess wrapper) to fit different design pipelines.

Quick Start

Provide an input image or folder and choose full-slice or targeted crop, then run the UI Asset Slice Pipeline to generate temp and selected outputs ready for post-processing.

Frequently Asked Questions about ui-asset-slice-pipeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate UI asset slicing from a full-page screenshot?▼

To automate UI asset slicing, provide a full-page screenshot or folder to the pipeline, which performs full cuts, auto-classifies elements, and picks high-confidence slices automatically.

What is the best way to crop header caps from a 2K UI master image?▼

The best way to crop header caps from a 2K master is using targeted cropping, which isolates GeneralDetail header caps and separates provisional temp slices from selected outputs.

Can I batch process UI assets for background removal and transparent trimming?▼

Yes, you can batch process UI assets for background removal and transparent trimming, prepping elements for runtime use through post-process integration and task-driven wrappers.

Does the UI asset slice pipeline support panel sheets and single assets?▼

The UI asset slice pipeline supports panel sheets, single assets, and full-page UI screenshots, applying auto-classification and full cuts to generate artifacts under artifacts/ui-generated.

How do I prep sliced UI assets for downstream post-processing workflows?▼

To prep sliced UI assets for downstream post-processing, run the selected-to-postprocess wrapper, which integrates batch-ready post-processing and outputs selected artifacts for tooling pipelines.

Related Skills

Explore More Design & Creative Skills→
vijaykpatelvijaykpatel

before-and-after

Capture before/after screenshots from two URLs or image paths.

Community
Intermediate
landing-ailanding-ai
62

document-workflows

Orchestrate ADE document pipelines with parse, classify-then-extract, and export steps.

Official
Advanced
michaelboedingmichaelboeding
24

background-remove

Remove image backgrounds to transparent PNG or WebP files.

Community
Intermediate
okgoogle13okgoogle13
1

figma-to-component

Generate React component files from Figma Inspect panel details.

Community
Intermediate