Firecrawl Demo Walkthrough

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.

firecrawl/firecrawl-workflows·31.5Kinstalls182starsDocumentation

SKILL.md

Full skill instructions

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.

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-demo-walkthrough

View on GitHub

firecrawl-demo-walkthrough

More Documentation skills

View all

Documentation

lark-wiki

Manage Lark Wiki spaces, members, nodes, and document organization hierarchies.

17.5K 457.5K

View

Documentation

lark-openapi-explorer

Discover and call native Lark OpenAPI endpoints from official documentation when existing skills fall short.

17.5K 451K

View

Documentation

supabase-postgres-best-practices

Postgres performance optimization and best practices from Supabase. Use this skill when writing, reviewing, or optimizing Postgres queries, schema designs, or database configurations.

2.7K 431.1K

View

Documentation

writing-beats

writing beats

276.6K 414.7K

View

Documentation

writing-shape

writing shape

276.6K 414.2K

View

Documentation

writing-fragments

writing fragments

276.6K 413.9K

View

Documentation

writing-plans

Comprehensive implementation plans for multi-step tasks, breaking down specs into bite-sized, testable steps.

295.4K 268K

View

Documentation

writing-skills

Test-driven documentation for creating reusable agent techniques, patterns, and reference guides.

295.4K 205.7K

View

Documentation

firebase-auth-basics

Guide for setting up and using Firebase Authentication. Use this skill when the user's app requires user sign-in, user management, or secure data access using auth rules.

462 163.8K

View

Documentation

firebase-data-connect

Builds and deploys Firebase SQL Connect (aka Firebase Data Connect) backends with PostgreSQL securely. Use when designing schemas with tables and relations, writing authorized queries and mutations, configuring real-time data updates, or generating type-safe SDKs. Use when you need a relational database with Firebase, or when the user mentions SQL Connect or Data Connect.

462 158.3K

View

Documentation

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

31.9K 143K

View