Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs130 stars
Browser
Browser Storage
Try itUse 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.
What it does
1. 先判断数据敏感度、体积、生命周期、是否需要跨 Tab、是否需要随请求发送。 2. 小量非敏感偏好用 localStorage；Tab 级临时数据用 sessionStorage；大量结构化数据或离线缓存用 IndexedDB；认证态优先 httpOnly cookie。 3. 封装统一 key 前缀、JSON parse/stringify、异常处理、过期清理和 quota 兜底。 4. 敏感数据按安全规则处理，不把明文 token、密码、信用卡信息放进可被 JS 读取的存储。 5. 审查隐私模式、存储配额、清理策略和跨浏览器兼容性。
The skill document
浏览器存储
Purpose
根据数据大小、安全要求和生命周期选择合适的客户端存储方案。
Procedure
- 先判断数据敏感度、体积、生命周期、是否需要跨 Tab、是否需要随请求发送。
- 小量非敏感偏好用 localStorage；Tab 级临时数据用 sessionStorage；大量结构化数据或离线缓存用 IndexedDB；认证态优先 httpOnly cookie。
- 封装统一 key 前缀、JSON parse/stringify、异常处理、过期清理和 quota 兜底。
- 敏感数据按安全规则处理，不把明文 token、密码、信用卡信息放进可被 JS 读取的存储。
- 审查隐私模式、存储配额、清理策略和跨浏览器兼容性。
Detailed References
涉及存储选型表、localStorage/sessionStorage 封装、IndexedDB 示例、Cookie 辅助方法和敏感数据规则时，加载 references/storage-patterns.md。
Constraints
- localStorage/sessionStorage 是同步 API，大数据读写会阻塞主线程。
- 除 httpOnly cookie 外，客户端存储都可被 XSS 读取。
- Cookie 每次请求自动携带，不适合大数据。
- IndexedDB 配额和隐私模式行为有浏览器差异。
- URL 中不要传 token 或敏感数据。
Expected Output
产出统一的 storage/cookie/db 封装，key 有命名空间，数据有过期或清理策略，敏感数据只进入合适的安全边界。
Related skills
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
More from bovinphang
Browse all skillsGenerate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.
by bovinphang9 installs1 stars
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo
by bovinphang5 installs
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or
by bovinphang8 installs
Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio
by bovinphang10 installs1 stars
Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.
by bovinphang10 installs1 stars
Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines
by bovinphang10 installs1 stars