f8-editor-ui-workflow

name	f8-editor-ui-workflow
description	Use when working with UI editor tools — sprite slicing, atlas tools, safe area setup, BaseView template creation, and UI utility components in F8Framework.

UI Editor Workflow

Use this skill when

• The task involves UI editor tools like sprite slicing, atlas management, or template creation.
• The user asks about nine-patch auto-slicing, atlas cutting, or image size optimization.

Path resolution

1. Editor code: Assets/F8Framework/Editor/UI

Sources of truth

• Editor module: Assets/F8Framework/Editor/UI
• Test docs: Assets/F8Framework/Tests/UI/README.md

Key editor features

Feature	Description
Nine-Patch Auto-Slice	Automatically cuts middle uniform color area to reduce image size
Atlas Slice	Cuts sprite atlas (requires Read/Write enabled, compression None, pre-sliced in Sprite Editor)
Image Size to 4x	Sets image dimensions to multiples of 4 (optimal for compression)
Collect Chinese Text	Scans all UI Chinese text into localization table
Create BaseView Template	Right-click → F8 UI → Create BaseView code template

Workflow

1. Create UI prefab in AssetBundles or Resources.
2. Right-click → F8 UI → Create BaseView to generate template.
3. Attach generated script to prefab root.
4. Use Inspector component binding to auto-generate code.
5. Use editor tools for image optimization:
   • Nine-patch auto-slice for large uniform images
   • Size-to-4x for compression optimization
   • Atlas slice for pre-sliced sprite sheets
6. Use Collect Chinese Text to populate localization table.

Common error handling

Error	Cause	Solution
Atlas slice fails	Read/Write not enabled or not pre-sliced	Enable Read/Write, set compression to None, slice in Sprite Editor
BaseView already exists	Duplicate script generation	Delete old script or rename

Output checklist

• BaseView template created and attached.
• Image optimization tools applied.
• Localization text collected if applicable.