Skip to content
Development
Skill

/fec-browser-storage

Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include browser storage, client persistence.

From plugin
frontend-craft
2256 skills14 agents11 commands5 hooks
+1

Claude Code

$ npx -y skills add bovinphang/frontend-craft --skill fec-browser-storage --agent claude-code

SKILL.md

fec-browser-storage.SKILL.md
name: fec-browser-storage
description: Use when choosing, implementing, or reviewing browser storage such as localStorage, sessionStorage, IndexedDB, cookies, client persistence, offline data, secure storage, or cleanup strategy; Chinese triggers include browser storage, client persistence.

Browser storage

Purpose

Choose the appropriate client storage solution based on data size, security requirements, and lifecycle.

Procedure

1. First determine the data sensitivity, volume, life cycle, whether it needs to be spread across tabs, and whether it needs to be sent with the request. 2. Use localStorage for a small amount of non-sensitive preferences; use sessionStorage for tab-level temporary data; use IndexedDB for large amounts of structured data or offline caching; prioritize httpOnly cookies for authentication status. 3. Encapsulate unified key prefix, JSON parse/stringify, exception handling, expiration cleanup and quota protection. 4. Sensitive data is processed according to security rules, and plain text tokens, passwords, and credit card information are not put into storage that can be read by JS. 5. Review privacy mode, storage quotas, sanitization policies, and cross-browser compatibility.

Detailed reference

Load [references/storage-patterns.md](references/storage-patterns.md) when it comes to storage selection tables, localStorage/sessionStorage wrappers, IndexedDB examples, cookie helpers, and sensitive data rules.

Constraints

  • localStorage/sessionStorage is a synchronous API, and big data reading and writing will block the main thread.
  • Except for httpOnly cookies, client-side storage can be read by XSS.
  • Cookies are automatically carried with each request and are not suitable for big data.
  • There are browser differences in IndexedDB quota and privacy mode behavior.
  • Do not pass token or sensitive data in the URL.

Expected Output

Produce a unified storage/cookie/db package, the key has a namespace, the data has an expiration or cleanup policy, and sensitive data only enters the appropriate security boundary.

Read more
@bovinphang
Ships withfrontend-craft

frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.

2256 skills14 agents6 MCP
Get the whole plugin

Stars on GitHub

Momentum

stars in total
22
Star history of bovinphang/frontend-craft on GitHub, a chart by star-history.com

Other skills on frontend-craft.

fec-alchemy

fec-alchemy

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills11d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react2d252k
@facebook@facebookInstall Skill

Questions about fec-browser-storage.

Which coding agents can use fec-browser-storage?
fec-browser-storage installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.