firecrawl-demo-walkthrough
Walk through a product's key flows with Firecrawl browser and produce a structured UX/product walkthrough. Use for signup, onboarding, pricing, docs, dashboard, product demo prep, UX teardown, and first-run experience analysis.
- Installs
- 31.2K
- Last 24h
- +13
- Trending rank
- #7477
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-demo-walkthrough- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads firecrawl-demo-walkthrough automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
Firecrawl Demo Walkthrough
Use this to document a product experience step by step.
Onboarding Interview
Infer the product URL, flow focus, and output format from context. If the URL is clear, proceed immediately.
Ask at most 1-3 concise questions only if blocked, such as the URL, desired flow focus, or credentials/constraints for protected areas.
Firecrawl Collection Plan
Use Firecrawl browser to open the product and navigate key flows. Snapshot at each step, scrape pages when useful, and document what the user sees and can do.
Do not submit real credentials, purchases, or irreversible actions unless the user explicitly instructs and has permission.
Parallel Work
If appropriate, use sub-agents or equivalent parallel task runners:
- Homepage and Marketing
- Signup and Onboarding
- Pricing and Plans
- Docs and Developer Experience
- Dashboard and Core Product
- Help and Support
Each walker should return screens visited, actions taken, observations, friction, and source URLs.
Final Deliverable
# Product Walkthrough: [Product]
## Product Overview
[What the product does]
## Flow Walkthroughs
### [Flow Name]
1. [Screen/Page] - what appears and what action is available
2. [Next Screen] - what changes
## Key Findings
[First impression, standout patterns, friction points]
## Recommendations
[UX/product improvements]
## Pages Visited
[URLs]
## Rerun Inputs
workflow: firecrawl-demo-walkthrough
url: [url]
focus: [full/signup/pricing/docs/dashboard]
Quality Bar
- Be specific about screens, CTAs, forms, and transitions.
- Separate observation from opinion.
- Preserve every page visited.
FAQ
What does the firecrawl-demo-walkthrough skill do?
Walk through a product's key flows with Firecrawl browser and produce a structured UX/product walkthrough. Use for signup, onboarding, pricing, docs, dashboard, product demo prep, UX teardown, and first-run experience analysis.
How do I install firecrawl-demo-walkthrough?
Run npx skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-demo-walkthrough in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/firecrawl-demo-walkthrough/ (personal) or .claude/skills/firecrawl-demo-walkthrough/ (project).
Which AI agents can use firecrawl-demo-walkthrough?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is firecrawl-demo-walkthrough safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk flagged items to review. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains firecrawl-demo-walkthrough?
It is published by firecrawl in firecrawl/firecrawl-workflows, and it is an official skill from the maker of the technology it covers. It has 31,200 recorded installs.
More from firecrawl/firecrawl-workflows
firecrawl-deep-research
firecrawl/firecrawl-workflows
Produce an intensive, cited analytical report: executive summary, multi-angle findings, contrarian views, open questions, and full sources. Use only when the user needs rigorous synthesis of a complex topic (scientific, technical, policy, or market-analytical) that cannot be answered with a short search, and wants a formal written report, not a recommendation list. Do not use for product picks, top-N lists, quick lookups, or routine "find out about X" tasks. If the request does not clearly need this kind of report, do not use this skill. Do not use for a literature review over published papers. This skill collects evidence from the open web. A request for the literature on a biomedical, clinical, life-science, or other scientific topic — papers, studies, trials, preprints — belongs to firecrawl-research-papers, which queries Firecrawl's paper index (PubMed, bioRxiv, medRxiv, arXiv) instead of searching websites.
firecrawl-research-papers
firecrawl/firecrawl-workflows
Find and synthesize research papers, whitepapers, PDFs, technical reports, and academic sources with Firecrawl Research, using semantic paper search, related-paper expansion, and in-body verification over Firecrawl's paper index — largely biomedical and life-science literature from PubMed, bioRxiv, and medRxiv, plus arXiv preprints in CS, physics, and math. Use when the user wants a literature review, systematic review, survey of studies, paper summary, research landscape, or sourced synthesis from scholarly and industry publications, including clinical, drug, gene, disease, epidemiology, and public-health topics. Prefer this over a general web-research workflow whenever the evidence base is published papers rather than web pages.
firecrawl-website-design-clone
firecrawl/firecrawl-workflows
Extract an existing website's visual system into DESIGN.md, or collect its existing logo, colors, fonts and homepage messaging for a document. Use for reference-based UI implementation, documenting design patterns, or matching a presentation to a company's website. Excludes inventing a new brand or brand positioning.
firecrawl-workflows
firecrawl/firecrawl-workflows
Run focused Firecrawl workflows for research, documentation lookup, SEO audits, QA, lead discovery and enrichment, business contacts, current jobs, fantasy decisions, brand assets, knowledge bases and website design systems. Use when the user wants a sourced answer or deliverable from a workflow rather than raw extraction or product-code integration.
firecrawl-knowledge-base
firecrawl/firecrawl-workflows
Build a knowledge base from web content with Firecrawl. Use for local reference docs, RAG-ready chunks, fine-tuning datasets, documentation mirrors, topic corpora, or LLM-ready markdown organized from web sources.
firecrawl-market-research
firecrawl/firecrawl-workflows
Research markets and companies with Firecrawl using current, cited figures: market size, growth, trends, financials and earnings. Use when the user asks for market research, an industry overview or a comparison of companies by the numbers, since these figures change faster than training data.
Popular frontend & design skills
grill-me
mattpocock/skills
A relentless interview to sharpen a plan or design.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
codebase-design
mattpocock/skills
Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.