review

Author: MarcSkovMadsen

docs/assets/images/getting-started-claude-data-eplorer.png

@@ -20,23 +20,22 @@ By the end, you'll have built an interactive report that displays financial data
 First, let's ask Claude to help us plan our stock analysis report. Open claude and run:
 
 ```text
-I want to create a stock analysis report showing AAPL and META's hourly data for the last 5 days. The report should include:
+I want to quickly display a stock analysis report showing AAPL and META's hourly data for the last 60 days.
+
+The report should include:
 
 - Individual price charts for each stock
 - Summary statistics table
 - Normalized comparison overlay
 - Trading volume visualization
 - Professional styling
 
-Please plan the architecture for this report. What components should I use from Panel and hvPlot?
+Please design and plan this report. Keep it simple and as a single script.
 ```
 
-Claude will provide a detailed architecture plan including:
+Claude will use `holoviz-data-explorer` to develop a detailed architecture plan:
 
-- Data sources and how to fetch stock data with yfinance
-- Chart types to use for price and volume visualization
-- Panel components for layout and statistics
-- Best practices for organizing the report
+![Claude Data Explorer](../assets/images/getting-started-claude-data-eplorer.png)
 
 !!! success "What you'll see"
     Claude will outline a clear plan for building your report, including the key libraries and components needed.
@@ -46,7 +45,7 @@ Claude will provide a detailed architecture plan including:
 Now let's ask Claude to implement the report and use the display tool to show it:
 
 ```text
-Implement it. Display it using the holoviz_display tool.
+Please implement the report. Then display it using the holoviz_display tool.
 ```
 
 Claude will:
@@ -81,7 +80,7 @@ Open the URL in your browser. You should see your stock analysis report with:
 Now that you understand how the report works, let's modify it to analyze different stocks:
 
 ```text
-Modify the report to show GOOGL and MSFT instead of AAPL and META
+Display GOOGL and MSFT instead of AAPL and META
 ```
 
 Claude will generate updated code with the new stocks and provide a new URL to view the modified report.
@@ -93,7 +92,7 @@ Claude will generate updated code with the new stocks and provide a new URL to v
 Let's enhance the report by adding a moving average to the price charts:
 
 ```text
-Add a 20-period moving average line to each stock's price chart
+Display a 20-period moving average line in each stock's price chart
 ```
 
 Claude will update the code to include moving average trend lines and provide a new URL to view the enhanced report.

docs/tutorials/stock-analysis-claude-code.md

@@ -28,16 +28,20 @@ Take a moment to review Claude's summary. This will guide our dashboard design!
 Now let's ask Claude to help us plan the dashboard architecture:
 
 ```text
-I want to create an awesome dashboard for exploring the Seattle Weather dataset. The dashboard should:
+I want to create a modern, professional looking dashboard for exploring the Seattle Weather dataset. The dashboard should:
 
 - Enable filtering by multiple years (default: 2015)
 - Include plots for temperature and wind grouped by year
 - Include a plot by weather type
 - Include a table with the raw data
-- Use ECharts with smooth transitions
-- Use consistent and modern styling
-
-Please plan the architecture for this dashboard. What components should I use from Panel? How should the code be organized?
+- Use panel-material-ui for a modern look and feel
+- Use ECharts with smooth transitions for an awesome look and feel. Not hvplot
+- Use consistent, modern and appealing styling
+- Use the vega-datasets package for providing the Seattle weather data
+
+Please plan the architecture for this dashboard. What components should I use from Panel? How should I organize them?
+Keep it as a single script weather_dashboard.py file for simplicity
+Add the tests in test_weather_dashboard.py file and make sure the tests pass
 ```
 
 Claude will provide a detailed architecture including:
@@ -49,22 +53,14 @@ Claude will provide a detailed architecture including:
 - Color palette suggestions
 
 !!! success "What you'll see"
-    Take time to read through Claude's plan - it's the blueprint for your application!
+    Take time to review and refine Claude's plan - it's the blueprint for your application!
 
 ## Step 3: Implement the Dashboard
 
 With a solid plan, let's create the dashboard. We'll create it as a project file:
 
 ```text
-Based on the plan above, create a weather_dashboard.py file that implements the Seattle Weather dashboard. Include:
-
-- Data loading and filtering
-- ECharts visualizations for temperature, wind, and weather types
-- Panel components for interactivity
-- Clean, well-organized code with docstrings
-- The vega_datasets package provides the Seattle weather data
-
-Keep it as a single file for simplicity.
+Based on the plan implement the Seattle Weather dashboard in a single weather_dashboard.py file. Make sure all tests pass.
 ```
 
 Claude will create the `weather_dashboard.py` file in your current directory.

docs/tutorials/weather-dashboard-claude-code.md

@@ -583,6 +583,7 @@ def create_plot(self) -> go.Figure:
 
 ### ECharts
 
+DO prefer ECharts dict configuration over of pyecharts
 **CRITICAL**: ECharts configurations must be JSON-serializable. Panel uses Bokeh's serialization mechanism which cannot serialize Python functions.
 
 ❌ **NEVER use Python functions or lambdas** in ECharts configuration: