React State Management
involvex/youtube-music-cli
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.
Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling.
Install Map Editor
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install webdevcody/survive-the-night-game map-editor --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/map-editor .claude/skills/map-editor && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .claude/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editorType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install webdevcody/survive-the-night-game map-editor --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/map-editor .agents/skills/map-editor && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .agents/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install webdevcody/survive-the-night-game map-editor --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/map-editor .cursor/skills/map-editor && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .cursor/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/webdevcody/survive-the-night-game.git --path .cursor/skills/map-editor--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install webdevcody/survive-the-night-game map-editor --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/map-editor .gemini/skills/map-editor && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .gemini/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install webdevcody/survive-the-night-game map-editorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/map-editor .github/skills/map-editor && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .github/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add webdevcody/survive-the-night-game --skill map-editor -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install webdevcody/survive-the-night-game map-editor --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/webdevcody/survive-the-night-game.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/map-editor .opencode/skills/map-editor && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "map-editor" agent skill from https://github.com/webdevcody/survive-the-night-game/tree/main/.cursor/skills/map-editor into .opencode/skills/map-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "map-editor", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
map-editor- GitHub stars
- 229
- Token cost
- ~1.9k tokens
- SKILL.md length
- 677 words
- Files
- 1
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- MIT
At a glance
Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling.
- Works in 3 steps: Sidebar list renders one row per map… → Primary click on the row → Modal reads row/col from store, loads…
- Changing anything under packages/website/src/routes/editor (sidebar
- SKILL.md covers Layout and state, Click-to-edit patterns, Numeric inputs and Item / entity typeahead, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Map Editor is an agent skill from webdevcody/survive-the-night-game. Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling. Use when adding or changing anything under packages/website/src/routes/editor (sidebar, modals, decal/NPC/merchant/spawner authoring, numeric fields, or typeaheads).
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering State management. It works with Zustand. The licence is MIT.
When your agent uses it
- Changing anything under packages/website/src/routes/editor (sidebar
- Decal/NPC/merchant/spawner authoring
Example prompts
- “/map-editor”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Sidebar list renders one row per map entity (e.g. MerchantsListPanel.tsx, NpcsListPanel.tsx).
- Primary click on the row
- Modal reads row/col from store, loads the current entry, and writes back via store actions. Use Dialog from ~/components/ui/dialog. Close…
What it can do on your machine
Read from SKILL.md and the folder at commit 2bbd1ab. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Map Editor loads about 1.9k tokens when it runs. Until then it costs about 82 tokens; SKILL.md has 677 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from webdevcody/survive-the-night-game at commit 2bbd1ab, republished under its MIT licence (© webdevcody). 677 words, ~1,897 tokens.
Download SKILL.mdSave it as
.claude/skills/map-editor/SKILL.md (or your agent's skills folder).- name
- map-editor
- description
- Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling. Use when adding or changing anything under packages/website/src/routes/editor (sidebar, modals, decal/NPC/merchant/spawner authoring, numeric fields, or typeaheads).
Map editor (website)
Read this skill before implementing or refactoring UI in packages/website/src/routes/editor. After changes, verify the checklist at the end.
Layout and state
- Editor route:
index.tsxmounts list panels, tile palette, and modals. - State:
-store.ts(useEditorStore). Map mutations usually go through dedicated actions (e.g.setMerchantShopLinesAt,updateScavengeDecalEntry) so grids and meta stay reconciled. - Right overlay tabs:
EditorRightOverlay.tsx— NPCs, Spawners, Merchants, Scavenge, Quests, etc.
Click-to-edit patterns
List row → modal (heavy forms)
Use when editing many fields or long content.
- Sidebar list renders one row per map entity (e.g.
MerchantsListPanel.tsx,NpcsListPanel.tsx). - Primary click on the row:
- Optionally
focusCameraOnMapCell(row, col)first so the user sees the tile (merchants do this together with opening the editor). - Call a store opener such as
openMerchantMetaEditor(row, col),openScavengeDecalEditor(row, col), oropenDialogueNpcEditor(row, col), which sets the matching*ConfigModalcell and closes competing modals when appropriate.
- Optionally
- Modal reads
row/colfrom store, loads the current entry, and writes back via store actions. UseDialogfrom~/components/ui/dialog. Close withset*ConfigModal(null)ononOpenChange.
Reference implementations:
MerchantMetaModal.tsx— stock lines, relocate, remove.ScavengeDecalModal.tsx+ScavengeListPanel.tsx—setScavengePlaceMode+ map click paints a decal (like merchant place mode); otherwise click opens the modal;handleGridCellClickgates behavior like merchants.NpcConfigModal.tsx+NpcAuthoringPanel.tsx.SpawnerMetaModal.tsx.
List row → inline panel (lighter forms)
Use when a small set of fields is enough and discovery next to the layer palette helps (decals).
- Example:
MessageDecalsListPanel.tsxinsideTilePalette.tsx. - Still provide
Go(camera only) andRemove(clear tile + reconcile) when the inline list is the right fit.
Buttons
- Small actions:
Buttonwithsize="sm",className="!h-6 !min-h-0 !px-2 !py-0 !text-[10px]"(see merchant / scavenge panels). - Destructive row actions:
variant="ghost"with red text classes matching merchant line remove.
Numeric inputs
- Prefer
WholeNumberInputfor integer fields that must not flicker to0on every keystroke (it uses text +inputMode="numeric"and commits on blur). - Required props:
value: number,onValueChange: (n: number) => void,max, and usuallymin(defaults to0). - Styling (match merchant / scavenge):
className="h-8 w-full rounded border border-gray-600 bg-gray-950 px-2 text-[11px] text-gray-100" - Optional “omit from map when equal to default”: display
value={entry.field ?? DEFAULT}and inonValueChangewriteundefined(ornullper API) whenn === DEFAULT, so JSON stays minimal — see scavenge search/respawn/drop counts. - Do not use raw
type="number"for new integer UX unless you need a specific behaviorWholeNumberInputcannot express (e.g. a legacy optional field); if you keeptype="number", follow an existing pattern and document why.
Show full SKILL.md (291 more words)Show less
Item / entity typeahead
- Use
ComboboxTypeaheadfor pickingitemTypestrings (items, weapons, resources) from the full registry set. - Options: map ids to
{ value, label }(labels are usually the id string). Build the id list the same way everywhere:MerchantMetaModal.tsx—sortedAllItemTypeIds()usingitemRegistry,weaponRegistry,resourceRegistryfrom@survive-the-night/game-shared/entities/index.
- Props:
placeholder="Type to search…",listClassName="max-h-48"(or similar), and inside dialogs setstopEscapePropagationso Escape closes the dropdown instead of the dialog incorrectly (see merchant modal). - Quests reuse the same component with different option lists — see
QuestsEditorPanel.tsx.
Row-based “tables” (shop stock, drop tables, etc.)
Mirror MerchantMetaModal.tsx:
+ Add itemappends a row with a sensible default (first id in sorted list + default weight/price).- Cap row count with a shared constant when appropriate (e.g.
MERCHANT_META_MAX_SHOP_LINESfrom game-shared for shop-like lists). - Each row: typeahead +
WholeNumberInputcolumns + Remove. - Optional “revert to default behavior” button (e.g. Use global catalog / Use built-in loot) that clears overrides in the shape the server expects.
Keep updates immutable (map/filter) and commit via one store call per logical edit if possible.
Labels and copy
- Field labels:
text-[9px] font-medium text-gray-500(ortext-gray-400for section labels). - Helper text:
text-[9px] text-gray-600ortext-[10px] text-gray-500. - Empty-state / warning:
text-[10px] text-amber-200/90where merchant does.
Agent verification checklist
After editing the map editor:
- Interaction: Does the user open the flow the same way as similar features (list → modal vs inline panel)? Is
focusCameraOnMapCellused when a modal edits a tile? - Numbers: Are new integer fields using
WholeNumberInputwithmax(and documented min/default behavior)? - Item pickers: Is
ComboboxTypeaheadused with the registry union pattern andstopEscapePropagationinside dialogs? - State: Are updates going through
-store.tsactions that reconcile grids/meta (no hand-editing only local React state for persisted data)? - Visuals: Do buttons/inputs match merchant / scavenge spacing and typography?
© webdevcody, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .cursor/skills/map-editor of webdevcody/survive-the-night-game.
Open the folder on GitHubat commit 2bbd1ab
Compare with similar skills
Map Editor next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Map Editor this skillwebdevcody/survive-the-night-game | 229 | — | ~1.9k | Automated safety check: Pass | MIT | |
| React State Managementinvolvex/youtube-music-cli | 456 | 13 repos | ~3k | Automated safety check: Pass | MIT | |
| LobeHub Data Fetching Layerslobehub/lobehub | 83k | — | ~1.7k | Automated safety check: Pass | Custom licence | |
| Create Storeryokun6/ryos | 1.3k | — | ~2.1k | Automated safety check: Pass | AGPL-3.0 | |
| LobeHub Zustand Store Patternslobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| Nextjs15 Initbear2u/my-skills | 933 | — | ~2.4k | Automated safety check: Pass | None |
Similar skills
LobeHub Data Fetching Layers
lobehub/lobehub
Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.
Create Store
ryokun6/ryos
Create or modify ryOS Zustand stores following repo conventions — persist middleware, partialize, versioned migrations, the debounced write-behind storage adapter for large slices, and cloud-sync…
LobeHub Zustand Store Patterns
lobehub/lobehub
Conventions for Zustand stores in LobeHub: list and detail state shapes, public, internal and dispatch actions, reducers, optimistic updates and naming rules.
Nextjs15 Init
bear2u/my-skills
A skill your agent uses when user wants to create a new Next.js 15 project (Todo/Blog/Dashboard/E-commerce/Custom domain) with App Router, ShadCN, Zustand, Tanstack Query, and modern Next.js stack
Xray UI Dev
bropines/xray-config-ui-editor
Development and maintenance of Xray Config UI Editor. An agent skill from bropines/xray-config-ui-editor.
More from webdevcody/survive-the-night-game
Items Sheet Sprites
webdevcody/survive-the-night-game
Add or regenerate 16×16 item/resource icons on items-sheet.png (Pillow), align with game-shared asset coords, InteractableTexts, and optional interactableDisplayName.
Related
Works with
Categories
Questions about Map Editor
What does Map Editor do?
Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling. Map Editor is an agent skill from webdevcody/survive-the-night-game. Website map editor UI patterns: click-to-edit flows, Zustand modals, WholeNumberInput, ComboboxTypeahead for entity/item ids, list panels, and styling.
When should I use Map Editor?
Map Editor fits situations like: changing anything under packages/website/src/routes/editor (sidebar; decal/NPC/merchant/spawner authoring.
How do I install Map Editor in Claude Code?
Run `npx skills add webdevcody/survive-the-night-game --skill map-editor -a claude-code`. Or copy the skill folder (.cursor/skills/map-editor in webdevcody/survive-the-night-game) into .claude/skills/map-editor in your project. Claude Code loads it when a task matches its description.
How do I install Map Editor in Codex?
Run `npx skills add webdevcody/survive-the-night-game --skill map-editor -a codex`. Or copy the skill folder (.cursor/skills/map-editor in webdevcody/survive-the-night-game) into .agents/skills/map-editor in your project. Codex loads it when a task matches its description.
Can I use Map Editor in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add webdevcody/survive-the-night-game --skill map-editor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/map-editor, .gemini/skills/map-editor, .github/skills/map-editor and .opencode/skills/map-editor in your project.
What does Map Editor need to run?
SKILL.md names no scripts, command-line tools or credentials: Map Editor is instructions for the agent only.
Does Map Editor access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Map Editor safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Map Editor use?
Map Editor is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Map Editor use?
About 1.9k tokens (SKILL.md is roughly 7.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Map Editor?
Skills that share tags, products or a category with Map Editor: React State Management (involvex/youtube-music-cli, 456 stars), LobeHub Data Fetching Layers (lobehub/lobehub, 83k stars), Create Store (ryokun6/ryos, 1.3k stars) and LobeHub Zustand Store Patterns (lobehub/lobehub, 83k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Map Editor?
webdevcody (a GitHub user) maintains it in webdevcody/survive-the-night-game, which has 229 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on April 16, 2026.
Source: webdevcody/survive-the-night-game on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.