Guide · Agent skill
How to use the Back/Forward Cache Optimizer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The back-forward-cache skill teaches an AI agent to review a web page's code for things that stop the browser's back/forward cache (bfcache) from working. When bfcache works, pressing Back or Forward restores the whole page from memory instead of reloading it. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what to check in its output.
Back/Forward Cache Optimizerthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the back-forward-cache skill as a ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Open your agent. Start a session in your project, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 4Ask for a review. Describe the route or problem in plain words, such as checking a page for back/forward cache blockers.
- 5Apply the suggested fixes. Replace unload logic with pagehide and pageshow, and keep beforeunload conditional.
- 6Verify in DevTools. Confirm the page is eligible for bfcache and test Back and Forward navigation.
What the skill makes the agent do
Back/forward cache turns many back and forward navigations into near-instant restores because the entire page is resumed from memory instead of being rebuilt from the network. The skill guides the agent to look for code that makes a page ineligible for this cache.
The agent checks a route for unload listeners and unconditional beforeunload listeners, and for state that assumes every navigation is a full reload. It is also directed to check the actual browser lifecycle and restore path, not only static code patterns.
- Find blocking listeners such as unload and unconditional beforeunload
- Replace unload logic with pagehide and pageshow handlers
- Keep beforeunload conditional and remove it when there are no unsaved changes
- Refresh only time-sensitive state when pageshow.persisted is true
- Suggest verifying eligibility in DevTools rather than assuming a page is cacheable
Install the skill from the ZIP download
Download the skill as a ZIP from this page. The skill package contains two files: SKILL.md and references/rule.md.
For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder. Either way, the skill folder should be named back-forward-cache.
You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
The skill's description tells the agent when to use it: reviewing navigation performance, browser lifecycle events, or resume-from-memory behavior. You do not need a special command. Describe the problem in ordinary words.
Name the route, file or component when you can. The skill asks the agent to review route code, global listeners, analytics hooks and data-refresh logic, so pointing it at those areas gives better results.
- "Review the checkout route for back/forward cache blockers."
- "Why does pressing Back reload the product page instead of restoring it?"
- "Check our global listeners for unload handlers that break bfcache."
- "Our analytics sends data on leave. Make it work with back/forward navigation."
What a good result looks like
A useful review names the exact listener, API or lifecycle assumption that prevents a restore, and explains what to change. For example, an unload handler that sends an analytics beacon can be moved to pagehide, which the source notes runs for normal unloads and bfcache attempts.
The source's example shows a pageshow handler that checks event.persisted and refreshes only time-sensitive data. Treat the output as a list of suggestions to test, not automatic truth.
window.addEventListener('pagehide', () => {
navigator.sendBeacon('/analytics/leave')
})Requirements and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, so it only reads and suggests changes to your code.
The skill applies only to page navigation in browsers. It is not useful for projects without a browser front end. Some pages need a fresh reload on every visit; the skill's fixes may not suit those, so test changes before shipping them.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better results
Use DevTools to confirm eligibility before and after a change, as the skill itself recommends. Do not assume a page is cacheable because the code looks correct.
Start with the route that has the most navigation traffic, and review its global listeners and analytics hooks first. Because the skill is rated advanced, read the agent's changes closely before accepting them.
- Verify eligibility in DevTools before and after each change
- Review one route at a time
- Check analytics code that runs on leave
- Test back and forward behaviour after each fix
What people use it for
- Finding an unload listener that prevents a checkout or product page from being restored from memory
- Moving analytics that fires on leave from unload to pagehide
- Removing a beforeunload prompt that appears even when a form has no unsaved changes
- Refreshing only time-sensitive data after a pageshow restore instead of re-running the whole app boot
Frequently asked questions
Is the back-forward-cache skill free?
The skill is published under the MIT licence, as listed on this page. Check the licence file in the source repository for the full terms.
What do I need to use the back-forward-cache skill?
The skill lists no requirements. It does not run scripts and does not use the network. You need an agent that supports skills and a browser front-end project to review.
Where do I install the back-forward-cache skill?
Unzip the downloaded ZIP into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What is the difference between bfcache and HTTP caching?
The back/forward cache restores the entire page from memory when you navigate back or forward, without rebuilding it from the network. HTTP caching is a separate mechanism, and the skill's guide explains the difference in its Explain section.
Why does an unload listener break bfcache?
The skill identifies unload listeners as the most common bfcache blocker. It recommends using pagehide and pageshow instead, since pagehide runs for normal unloads and bfcache attempts.
Does this skill work for projects that are not web apps?
No. The skill only applies to page navigation in browsers, so it is not useful for projects without a browser front end.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers and teams who want faster back and forward navigation and need a structured review of unload, beforeunload and resume logic. Skip it if your project has no browser front end, or if your pages must reload fresh on every visit, since its fixes may not fit those cases and changes should be tested first.
Download the skill