Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

frontend-mod-ui

Estrellas1

Forks0

Actualizado25 de abril de 2026 a las 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

lemon07r

lemon07r/AFNM-CraftBuddy

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·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

Más de este repositorio

mismo repositorio

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