competitive-landscape

Original：🇨🇳 Chinese
Translated

Generate Apple minimalist-style competitive analysis HTML reports with Chart.js data visualization. Use analysis frameworks including Porter's Five Forces, Blue Ocean Strategy, and Competitive Positioning Map. Suitable for competitive analysis, market positioning, and competitive advantage assessment.

8installs
Sourcedidixuxu/didi-skills
Added on

NPX Install

npx skill4agent add didixuxu/didi-skills competitive-landscape

Tags

Translated version includes tags in frontmatter
competitive-analysishtml-report-generatorchartjsapple-minimalist-designmarket-positioning

SKILL.md Content (Chinese)

View Translation Comparison →

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)

ForceEvaluation PointsRating 1-5
Threat of new entrantsCapital barriers, brand loyalty, economies of scale
Bargaining power of suppliersSupplier concentration, substitutability, forward integration
Bargaining power of buyersCustomer concentration, switching costs, price sensitivity
Threat of substitute productsNumber of alternatives, cost-performance ratio, switching costs
Intensity of industry competitionNumber 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):
  1. Market share — Doughnut chart or horizontal bar chart
  2. Product specification comparison — Grouped bar chart or table (use table for dense data for clarity)
  3. Comprehensive competitiveness radar chart — 6-8 dimensions, one line per competitor
  4. Competitive positioning bubble chart — 2D positioning + bubble size represents market share
  5. 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

  1. Write the HTML to a file (default path: current working directory)
  2. Use the 
    open
    command to open it in a browser
  3. 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)