Skill Editor mockup report

Outcome

• Selected composition: prefab-stacked.
• Final deliverable: mockup-skill-editor-final.arted.html.
• Canvas: Unity-standard portrait frame, exactly 1290 × 2796 CSS px per state. Export CSS contains physical pixel values for geometry, typography, radii, borders, shadows, and spacing; it does not rely on zoom or container scaling.
• States included: 5.
• Final external judge score: 72/100 (revise).
• Target score: 80/100. The score stayed at 72 across the maximum three refinement rounds, so the loop stopped per the $mockup workflow.

Variant exploration

Rank	Variant	Score	Selection note
1	prefab-stacked	72	No critical issues in the exploration rubric; closest to SkillsScreenView and the supplied reference.
2	dual-core-rail	72	More novel central-hub composition, but duplicated the base skill and received a critical GDD coverage issue.
3	compact-workbench	72	Dense and efficient, but diverged further from the existing prefab anatomy.

Refinement trajectory

1. Exploration: 72/100.
2. Refinement 1: 72/100.
3. Refinement 2: 72/100; palette reached 5/5.
4. Refinement 3: 72/100.

The previous rubric was not transmitted during refinement because that external payload was not approved. As a result, later judge rounds contradicted some earlier recommendations. When recommendations conflicted, the explicit UI/UX handoff remained authoritative, especially for:

• BASE MANA / REAL COST / FANTASY COST as three separate values;
• arrow notation such as 20 → 26;
• visible secondary LEVEL value;
• three demo sockets per side with data-driven count metadata.

Unity reuse

The mockup directly reuses project art derived from:

• SkillsScreenView.prefab;
• SkillButton_Item.prefab;
• SkillButton_Slot.prefab;
• SkillInfoView.prefab;
• BuildCoreView.prefab;
• existing ability icons, rarity frames, popup chrome, buttons, progress bars, socket frames, locks, and the Skill Gacha background.

The SKILLS / STONES switcher follows the exact SkillGachaScreenView.prefab category-button pattern: Shared/btn_small_yellow.png for the selected tab and Shared/btn_small_blue.png for the available tab.

The stone inventory filter/sort controls follow the custom CAUDropdownButton pattern from ChestAutoUseView.prefab: Shared/square.png-style dark rows, the real ChestAutoUse/arrow_dropdown.png arrow, alternating dark option rows, and Shared/dropdown_selector_01.png for the active option.

Project assets are embedded once in the HTML and hydrated into repeated slots at runtime.

Generated art

Seven genuinely missing roles were generated and cached under art/skill-editor/:

• mana_droplet;
• support_real_amplify;
• support_real_efficiency;
• support_real_split;
• support_fantasy_amplify;
• support_fantasy_efficiency;
• support_fantasy_split.

The generated data URIs are deduplicated in the final HTML, so repeated states reuse the same seven payloads. art/skill-editor/base.png is an unused artifact from an interrupted fuzzy-reuse attempt and is not referenced by the final mockup.

Included states

1. Default Skill Editor.
2. Real socket selected and Stones inventory open. 2B. Sort dropdown open over the same Real-stone inventory.
3. Skill Info.
4. Compatible Support Stone Info.

Final QA

• All 5 frames rendered successfully.
• Every external Unity frame measures exactly 1290 × 2796, and all five state cards stay in one horizontal row without wrapping.
• Export safety: .phone has computed zoom: 1 and transform: none; internal pixel values are mechanically expanded by 1290 / 390 before HTML generation.
• Broken images: 0.
• Browser console/page errors: 0.
• Images with invalid alt convention: 0.
• Buttons without aria-label: 0.
• SKILLS → STONES interaction: passed.
• Frame 01: Skills inventory open and yellow SKILLS tab selected.
• Frame 02: Stones inventory open and yellow STONES tab selected.
• Selected empty sockets keep their target state in data but use the standard EMPTY treatment: no SELECTED caption and no selection glow.
• Frames 02 and 02B use two equal controls only: FILTER / COMPATIBLE on the left and SORT / POWER on the right.
• Frame 02B shows the sorting dropdown open with POWER, LEVEL, RARITY, and UPGRADE READY; the active row uses the project selector sprite.
• Frame 02 stone cards show only icon, level, and stone name; side badges and compact effect captions are removed.
• Core-side headers show only REAL and FANTASY; the secondary PHYSICAL LAW / ARCANE LAW labels are removed.
• The screen uses a single top header labeled SKILLS; the duplicate inner SKILLS ribbon is removed.
• Exit action: standard Shared/btn_back_big.png button in the bottom action bar; top header contains no exit or info control.
• Bottom action bar: QUICK EQUIP and AUTO-UPGRADE; the former PRESETS and CLEAR buttons are removed.
• Base skill summary: single horizontal row matching the approved copy (icon → name → LVL → LEVEL → COOLDOWN → MANA).
• Support Stone Info shows current LVL 18 separately, copy progress (3 / 5), and every upgradeable value as current → upgraded.
• Skill Info shows current LVL 12 separately in the hero block; damage, cooldown, and mana remain formatted as current → next-level values.
• Skill Info copy progress shows only 2 / 4; the redundant LVL 12 → 13 · 2 MORE COPIES NEEDED line is removed.
• Forbidden SVG and CSS margin: absent.
• Final HTML size: approximately 8.8 MB.

Files

• mockup-skill-editor-final.arted.html — final hi-fi handoff.
• mockup-skill-editor-final.arted.preview.png — final gallery preview.
• mockup-skill-editor-prefab-stacked.html — exploration variant A.
• mockup-skill-editor-dual-core-rail.html — exploration variant B.
• mockup-skill-editor-compact-workbench.html — exploration variant C.
• generate_skill_editor_mockup_variants.mjs — deterministic generator.
• finalize_skill_editor_art.mjs — restores the final HTML contract and deduplicates generated art.