Competitive Analysis Report Generator

Generate professional competitive analysis reports output as Apple minimalist-style HTML pages with data visualization charts.

Execution Process

1. Clarify analysis objects → Confirm industry, competitors, analysis objectives
2. Data collection → Use WebSearch to search for real market data
3. Framework analysis → Apply analysis frameworks
4. Generate report → Output HTML + Chart.js visualization
5. Open browser → Preview with the `open` command

Step 1: Clarify Analysis Objects

Confirm with the user:

Which competitors to analyze? (Recommended 2-4)
Which industry/category?
What is the analysis objective? (Investment decision / Market entry / Product positioning / Content display)

Step 2: Data Collection

Must use WebSearch to search for real data, do not fabricate numbers. At least search:

Search 1: "[Brand A] vs [Brand B] vs [Brand C] market share [Year]"
Search 2: "[Industry] market share [Brand] [Year]"
Search 3: "[Product A] vs [Product B] specifications price comparison [Year]"
Search 4: "[Industry] trends forecast [Year]" (Optional)

Data types to collect:

Market share / Shipment volume / Revenue
Product specifications / Price comparison
User reviews / Industry evaluations
Latest developments / Strategic directions

Step 3: Analysis Frameworks

Select the following frameworks as needed (no need to use all, choose 2-3 based on analysis objectives):

Porter's Five Forces Analysis (Industry Attractiveness)

Force	Evaluation Points	Rating 1-5
Threat of new entrants	Capital barriers, brand loyalty, economies of scale
Bargaining power of suppliers	Supplier concentration, substitutability, forward integration
Bargaining power of buyers	Customer concentration, switching costs, price sensitivity
Threat of substitute products	Number of alternatives, cost-performance ratio, switching costs
Intensity of industry competition	Number of competitors, growth rate, degree of differentiation

Competitive Positioning Map

Choose 2 dimensions most important to users and draw a bubble chart:

Price vs Functionality
Technological innovation vs Cost-performance ratio
Brand premium vs Ecosystem completeness
Complexity vs Usability

Blue Ocean Strategy Four Quadrants

Analyze each competitor:

Eliminate — Elements that are industry defaults but can be removed
Reduce — Elements that can be lowered below industry standards
Raise — Elements that can be raised above industry standards
Create — New value never provided by the industry

Comprehensive Competitiveness Radar Chart

Select 6-8 evaluation dimensions, score each competitor 0-100, and generate a radar chart.

Step 4: Generate HTML Report

Design System: Apple Minimalist Style

Core principles: White space > Decoration, Information > Flashiness, Restraint > Piling up

css

/* Colors */
--bg: #ffffff;
--card-bg: #f5f5f7;
--text: #1d1d1f;
--text-secondary: #86868b;
--border: #d2d2d7;
--accent: #0071e3;          /* Apple Blue, for emphasis */

/* Assign a low-saturation brand color to each competitor */
/* Example: --brand-a: #6e6e73; --brand-b: #0071e3; --brand-c: #bf4800; */

/* Fonts */
font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;

/* Title hierarchy */
h1: 48px, font-weight: 700, letter-spacing: -0.02em  /* Report main title */
h2: 28px, font-weight: 600                            /* Section title */
h3: 21px, font-weight: 600                            /* Subtitle */
body: 17px, line-height: 1.65                          /* Body text */
caption: 12px, color: var(--text-secondary)            /* Chart caption */

/* Spacing */
Section spacing: 80px
Card padding: 32px
Card border-radius: 16px
No card border, use background color to distinguish: background: var(--card-bg)

/* Layout */
max-width: 980px
Single column as main, use double columns for data comparison

Prohibited elements (too AI-style):

Dark/dark mode backgrounds
Gradient backgrounds
Neon colors, high-saturation color schemes
Glow effects, excessive shadows
Excessive tags/badges
Tables with too many borders
Any elements that look like "AI-generated dashboards"

Desired feel:

Like apple.com/newsroom product comparison pages
Abundant white space
Mainly black and white, with brand color accents
Simple tables (no vertical lines, light gray horizontal lines)
Numbers use tabular-nums monospaced digits
Restrained, low-saturation chart color schemes

Data Visualization: Chart.js

Import:

html

<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>

Chart style requirements:

javascript

// Global defaults
Chart.defaults.color = '#86868b';
Chart.defaults.borderColor = '#e5e5e5';
Chart.defaults.font.family = "-apple-system, 'SF Pro Display', sans-serif";

// Color scheme principles: low saturation, high recognition
// Good color schemes: ['#0071e3', '#86868b', '#bf4800', '#1d1d1f']
// Avoided color schemes: neon green, bright purple, fluorescent orange

// General chart settings
{
  responsive: true,
  plugins: {
    legend: {
      position: 'bottom',
      labels: { usePointStyle: true, padding: 20, font: { size: 13 } }
    },
    title: {
      display: true,
      font: { size: 17, weight: '600' },
      color: '#1d1d1f',
      padding: { bottom: 20 }
    }
  }
}

// Bar chart: borderRadius: 8, no borders
// Pie/doughnut chart: cutout: '55%', borderWidth: 0
// Radar chart: fill opacity 0.08, line width 2
// Bubble chart: opacity 0.5, border width 1.5

Required charts (based on data availability):

Market share — Doughnut chart or horizontal bar chart
Product specification comparison — Grouped bar chart or table (use table for dense data for clarity)
Comprehensive competitiveness radar chart — 6-8 dimensions, one line per competitor
Competitive positioning bubble chart — 2D positioning + bubble size represents market share
Porter's Five Forces radar chart (if using this framework)

Report Structure Template

1. Title Area
   - Report title (large font)
   - Subtitle (one line explaining analysis scope and date)

2. Core Indicator Cards (3-4)
   - One card per competitor
   - 1 core number + 1 line of explanation

3. Market Landscape (Chart + Insight text)

4. Competitor Profile Comparison (Table)

5. Product/Specification Matrix (Table + Chart)

6. Analysis Framework Output (Selected frameworks)
   - Porter's Five Forces: Radar chart + Score table
   - Positioning Map: Bubble chart
   - Blue Ocean Strategy: Four-quadrant cards
   - Comprehensive radar chart

7. Conclusions and Recommendations
   - One-sentence summary for each competitor
   - Key insights (2-3 points)

8. Data Sources (small text at the bottom)

The structure is for reference, not a fixed template; adjust flexibly based on content.

Table Style

css

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid #1d1d1f;  /* Dark thick line for table header */
  font-weight: 600;
  font-size: 13px;
  color: #86868b;
}
td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e5e5;  /* Light gray thin line for row separation */
}
/* No vertical lines, no outer borders */

Step 5: Output and Preview

Write the HTML to a file (default path: current working directory)
Use the
```
open
```
command to open it in a browser
Ask the user if adjustments are needed

Notes

Data first: Use real data if available, mark "estimated" if not
Restrained judgment: Analysis should be objective, do not make conclusive judgments for the user
More charts are not better: 5-6 charts are sufficient, each must have information value
Responsive: Ensure it is viewable on mobile devices (max-width + media queries)

competitive-landscape

NPX Install

Tags

SKILL.md Content (Chinese)