ワンクリックでManusで任意のスキルを実行

frontend-mod-ui

スター1

フォーク0

更新日2026年4月25日 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.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

lemon07r

lemon07r/AFNM-CraftBuddy

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

このリポジトリの他の Skills

同じリポジトリ

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

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

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.