settings-usage-guidelines

Persist React user preferences to localStorage with Zustand.

Updated Mar 28, 2025

Search Tags:#react #localStorage #offline #zustand #state-management #settings

Ready to run

npx skills add https://github.com/gileck/app-template-ai --skill settings-usage-guidelines

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: settings-usage-guidelines
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/settings-usage-guidelines
Command: npx skills add https://github.com/gileck/app-template-ai --skill settings-usage-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides guidelines for implementing and persisting user preferences in a React app using Zustand to ensure consistent settings across sessions.

Core Features & Use Cases

Guides on subscribing to specific settings slices with the useSettingsStore hook
Ensures settings automatically persist to localStorage via Zustand persistence
Provides a pattern for adding new fields in types.ts and keeping UI in sync
Use Case: A user updates theme and offline preference; settings persist across reloads

Quick Start

Review the Settings store definitions and ensure Zustand persist is enabled
Use the useSettingsStore hook to read and update user preferences
Extend types.ts with new fields and update defaultSettings accordingly

Frequently Asked Questions about settings-usage-guidelines

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

FAQPage Schema

How do I persist React user settings to localStorage using Zustand?▼

The Zustand persist middleware saves user preferences to localStorage automatically, ensuring theme and offline mode settings remain consistent across browser sessions and page reloads.

What is the best way to manage offline mode state in a React application?▼

Managing offline mode state in React applications involves combining a Zustand settings store with a useEffectiveOffline hook to track connectivity and synchronize offline preferences with UI components.

How do I add a new user preference field to an existing Zustand store?▼

Adding a new user preference field to a Zustand store requires extending types.ts with the new field definition and updating defaultSettings, allowing UI components subscribing via useSettingsStore to stay in sync automatically.

Can I subscribe to specific settings slices with Zustand to prevent unnecessary re-renders?▼

Yes, you can subscribe to specific settings slices using the useSettingsStore hook in Zustand, allowing React components to re-render only when targeted preference values change, optimizing overall performance.

Does this Zustand settings pattern work for managing AI model selections?▼

Yes, the Zustand settings pattern supports managing AI model selections by persisting the chosen model preference alongside UI settings like theme and offline mode across sessions via localStorage.