Run any Skill in Manus with one click

frontend-mod-ui

Stars1

Forks0

UpdatedApril 25, 2026 at 11:20

AFNM/CraftBuddy mod UI guidance. Activate for settings panels, injected UI, persistent overlays, React/MUI components, browser harness checks, or visual integration with the AFNM Electron runtime.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

lemon07r

lemon07r/AFNM-CraftBuddy

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-mod-ui
description	AFNM/CraftBuddy mod UI guidance. Activate for settings panels, injected UI, persistent overlays, React/MUI components, browser harness checks, or visual integration with the AFNM Electron runtime.

Frontend Mod UI

CraftBuddy uses a persistent React/MUI overlay for recommendations and settings. AFNM game components are useful for screen/options integrations, but CraftBuddy's main UI should stay aligned with src/ui/* and the committed harness.

Activate When

Editing src/ui/* or UI-facing settings
Adding settings/options/injected UI
Fixing overlay size, z-index, pointer events, HUD overlap, or visual regressions

CraftBuddy UI Rules

Keep shared styling in src/ui/theme.ts, ThemeProvider.tsx, and src/ui/components/StyledComponents.tsx.
Keep panel state and settings boundaries clear; do not push game extraction logic into UI components.
Preserve pointer-event behavior so the overlay is interactive without blocking unrelated game UI.
Use the harness for visual validation before live installed-client checks.
Keep React and ReactDOM versions matched.

AFNM Game UI Components

When implementing native settings/options/screen affordances, prefer game-provided components where available:

GameDialog for dialog containers
GameButton / GameIconButton for actions
BackgroundImage and PlayerComponent for full screens
window.React.createElement in options contexts where JSX is unavailable

Validation

bun run ui:harness:build
bun run ui:harness:serve
agent-browser open http://127.0.0.1:4173

Use craftbuddy-ui-validation for screenshot/snapshot expectations and live-test escalation.

Gotchas

Harness first: static code review is not enough for layout changes.
Game React surface differs from bundler imports: respect webpack externals and runtime globals.
Options UI can lack JSX conveniences: use window.React.createElement when required.
Live testing is opt-in: use runtime oracle/harness before launching AFNM.

Related Skills

craftbuddy-ui-validation
frontend-design
live-game-testing

More from this repository

same repository

conventional-git

lemon07r/AFNM-CraftBuddy

Standardized commit messages and branch naming for AFNM mod projects. Activate when creating commits, branches, or release tags to follow the project's conventional commit format.

2026-07-061

afnm-modding

lemon07r/AFNM-CraftBuddy

CraftBuddy orientation for Ascend From Nine Mountains mod work. Activate first for AFNM-CraftBuddy tasks to route into optimizer, runtime integration, UI validation, ModAPI lookup, validation, and release skills without bulk-loading docs.

2026-04-251

craftbuddy-release

lemon07r/AFNM-CraftBuddy

CraftBuddy release and Workshop publishing workflow. Activate when bumping versions, packaging, uploading to Steam Workshop item 3661729323, pushing release commits, tagging GitHub releases, changing Workshop description copy, or for any Steam Workshop upload mechanics.

2026-04-251

modapi-lookup

lemon07r/AFNM-CraftBuddy

CraftBuddy ModAPI lookup workflow. Activate when using AFNM hooks, actions, utilities, root-state APIs, gameData, injectUI, registerOptionsUI, or when verifying API signatures before implementation.

2026-04-251

typescript-afnm

lemon07r/AFNM-CraftBuddy

CraftBuddy TypeScript conventions for AFNM ModAPI work. Activate when writing or reviewing TypeScript, adding interfaces, touching globals, or considering any/ts-ignore.

2026-04-251

agent-browser

lemon07r/AFNM-CraftBuddy

Browser automation CLI for agents. Use for opening pages, clicking, filling forms, taking screenshots, reading DOM snapshots, testing local harnesses, or connecting to AFNM/Electron DevTools sessions.

2026-04-251

name	frontend-mod-ui
description	AFNM/CraftBuddy mod UI guidance. Activate for settings panels, injected UI, persistent overlays, React/MUI components, browser harness checks, or visual integration with the AFNM Electron runtime.

Frontend Mod UI

Activate When

Editing src/ui/* or UI-facing settings
Adding settings/options/injected UI
Fixing overlay size, z-index, pointer events, HUD overlap, or visual regressions

CraftBuddy UI Rules

Keep shared styling in src/ui/theme.ts, ThemeProvider.tsx, and src/ui/components/StyledComponents.tsx.
Keep panel state and settings boundaries clear; do not push game extraction logic into UI components.
Preserve pointer-event behavior so the overlay is interactive without blocking unrelated game UI.
Use the harness for visual validation before live installed-client checks.
Keep React and ReactDOM versions matched.

AFNM Game UI Components

When implementing native settings/options/screen affordances, prefer game-provided components where available:

GameDialog for dialog containers
GameButton / GameIconButton for actions
BackgroundImage and PlayerComponent for full screens
window.React.createElement in options contexts where JSX is unavailable

Validation

bun run ui:harness:build
bun run ui:harness:serve
agent-browser open http://127.0.0.1:4173

Use craftbuddy-ui-validation for screenshot/snapshot expectations and live-test escalation.

Gotchas

Harness first: static code review is not enough for layout changes.
Game React surface differs from bundler imports: respect webpack externals and runtime globals.
Options UI can lack JSX conveniences: use window.React.createElement when required.
Live testing is opt-in: use runtime oracle/harness before launching AFNM.

Related Skills

craftbuddy-ui-validation
frontend-design
live-game-testing