Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

frontend-mod-ui

Sterne1

Forks0

Aktualisiert25. April 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

lemon07r

lemon07r/AFNM-CraftBuddy

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

WebentwicklerInformatik- und Mathematikberufe·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

Mehr aus diesem Repository

gleiches 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