skills.rest
lxsmnsyc
lxsmnsycCOMMUNITY
Explore all skills by this author →
Website𝕏@lxsmnsycGitHub

device-settings

Stores and reads per-device game preferences via a module signal and localStorage.

2|1|Updated Jun 28, 2026
Search Tags:#localstorage#settings#solid#preferences#hydration#solidstart#module signal
One-click install
npx skills add https://github.com/lxsmnsyc/overwander --skill device-settings-lxsmnsyc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: device-settings
Source: https://github.com/lxsmnsyc/overwander/tree/main/.claude/skills/device-settings
Command: npx skills add https://github.com/lxsmnsyc/overwander --skill device-settings-lxsmnsyc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Player preferences that belong to the machine rather than the account need a storage pattern that avoids the server, avoids auth tables, and avoids hydration mismatches in a SolidStart app. ## Core Features & Use Cases - Centralized settings module: src/components/app/settings.ts defines GameSettings, defaults(), stored() normalization, and a module-signal accessor readable from components, canvas code, or helpers without a provider. - Safe persistence: one JSON key in localStorage, read only after hydration via loadSettings() in onMount, with every stored field normalized and falling back to defaults. - Use Case: Add a new preference like boxColumns by declaring it in GameSettings, giving it a default, and reading it with settings().boxColumns; CSS-driven settings become a root-element class set by a createEffect in src/app.tsx. ## Quick Start Add a new device-level setting to the game by declaring it in GameSettings with a default and reading it through the settings accessor.

Frequently Asked Questions about device-settings

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I store user preferences in localStorage in a Solid app?▼

Define the settings and defaults in a single module, expose a module signal accessor, and persist changes as one JSON key in localStorage. Read storage only after hydration, from an onMount call, to avoid server-client markup mismatches.

How do I add a new device-level setting to this project?▼

Add the key and type to GameSettings in src/components/app/settings.ts, give it a value in defaults(), then read it with settings().yourKey and write it with setSetting. Normalization in stored() handles untrusted stored values automatically.

Why use a module signal instead of a context provider for settings?▼

A module signal can be read from anywhere, including canvas modules and helpers with no component owner, so there is no provider to forget and nothing throws when a provider is missing.

Why does reading localStorage during SSR cause hydration errors?▼

The server has no localStorage, so reading it before hydration makes server markup and client state disagree. Loading settings in onMount after hydration keeps the initial render consistent.

When should a setting not go into localStorage device settings?▼

Account-level data that must sync across browsers belongs in the database behind auth, and the color scheme is owned by Terracotta with its own localStorage key and no-flash script, so it must not be mirrored into GameSettings.

Related Skills

Explore More Software Engineering Skills→
vallafedericovallafederico

solidstart-routing

Explain and demonstrate SolidStart file-based routing with dynamic routes, nested layouts, and route groups.

Community
Intermediate
jimmi-joenssonjimmi-joensson
2

openwhisper-devtools-sheet

Place dev-only UI overrides inside the DevToolsPanel sheet gated by import.meta.env.DEV.

Community
Intermediate
fusenginefusengine
22

dark-light-modes

Implement dark and light modes with CSS variables and next-themes in Next.js.

Community
Intermediate
TanStackTanStack
28.3k

angular/client-to-server

Convert Angular Table v9 from client-side to server-driven pagination and sorting.

Official
Advanced