Cline Skills

When creating any HTML, CSS, or visual output, follow the MegaBrain Design System:

COLORS:
- Page background: #09090b
- Card/section background: #18181b
- Border color: #27272a
- Primary text: #fafafa
- Secondary/muted text: #a1a1aa
- Brand accent (headings, highlights): #e4530a
- Success/code: #22c55e
- Link hover: #e4530a

TYPOGRAPHY:
- Font stack: system-ui, -apple-system, 'Segoe UI', sans-serif
- Heading sizes: h1=2.5rem, h2=1.75rem, h3=1.25rem
- Heading weight: 700-800, letter-spacing: -0.02em
- Body line-height: 1.65
- Monospace: 'JetBrains Mono', 'Fira Code', monospace

COMPONENT PATTERNS:
- Cards: background #18181b, border 1px solid #27272a, border-radius 16px, padding 24px
- Badges: border-radius 999px, padding 4px 12px, border 1px solid #3f3f46, font-size 0.75rem
- Code blocks: background #09090b, border-radius 12px, padding 16px, font-family monospace
- Buttons (primary): background #e4530a, color white, border-radius 8px, padding 10px 20px
- Dividers: border-color #27272a, opacity 0.6

LAYOUT:
- Max content width: 1200px, centered
- Section padding: 48px 24px
- Grid gap: 16-24px
- Always use CSS Grid or Flexbox, never tables for layout

CHARTS (when using Chart.js or similar):
- Background: transparent
- Grid lines: rgba(255,255,255,0.06)
- Tick color: #71717a
- Dataset colors in order: #e4530a, #3b82f6, #22c55e, #a855f7, #f59e0b
- Legend label color: #a1a1aa

Always produce self-contained HTML with all CSS inline or in a <style> tag. No external CSS frameworks unless Chart.js CDN for charts.

When analyzing data or creating presentations, apply the McKinsey 7-Step Problem Solving framework combined with the Pyramid Principle.

ANALYSIS FRAMEWORK — McKinsey 7 Steps:

Step 1 — DEFINE THE PROBLEM
- Restate the problem in one crisp sentence
- Identify: Who is the decision-maker? What decision do they need to make? By when?
- Define what "solved" looks like (success metrics)

Step 2 — STRUCTURE THE PROBLEM (Issue Tree)
- Break the problem into MECE sub-questions (Mutually Exclusive, Collectively Exhaustive)
- Use a logic tree: main question → 3-5 branches → sub-branches
- Label each branch as a hypothesis to test

Step 3 — PRIORITIZE ISSUES
- Rank sub-questions by: (a) impact on the answer, (b) ease of analysis
- Focus 80% of effort on the 20% of issues that drive the answer
- State explicitly what you are NOT analyzing and why

Step 4 — BUILD THE WORK PLAN
- For each priority issue: what data is needed, what analysis, what output
- Assign a "ghost slide" concept to each: what would the chart/table look like if the hypothesis is true?

Step 5 — CONDUCT ANALYSES
- Run the analyses on the actual data provided
- For each finding: state the so-what, not just the what
- Flag data quality issues or gaps explicitly

Step 6 — SYNTHESIZE FINDINGS
- Group findings into 3-5 key messages (no more)
- Each message must be: action-oriented, specific, and supported by at least one data point
- Identify the "single most important insight" — the one thing the decision-maker must know

Step 7 — DEVELOP RECOMMENDATIONS
- Lead with the recommendation, not the analysis
- Structure as: Recommendation → Evidence → Risk/Mitigation → Next step
- Be concrete: who does what, by when, measured how?

---

PRESENTATION STRUCTURE — Pyramid Principle (Barbara Minto):

Opening — SCQA Framework:
- Situation: What is the stable context everyone agrees on?
- Complication: What has changed or what is the problem?
- Question: What question does this raise for the audience?
- Answer: Your top-line recommendation (state it upfront, always)

Body — Grouped Arguments:
- Present 3 main supporting arguments (never 2, rarely more than 5)
- Each argument must directly support the top-line answer
- Support each argument with data, not assertions
- Use the "So what?" test on every slide/section

Slide/Section Titles:
- Write action titles, not topic titles
- Bad: "Revenue Trends" → Good: "Revenue grew 23% driven by Q4 enterprise wins"
- Every title should be a complete sentence stating the insight

Chart Principles:
- One message per chart
- Title states the insight the chart proves
- Highlight the key data point (bold, color, annotation)
- Remove all chart junk (unnecessary gridlines, legends when obvious, 3D effects)

---

OUTPUT FORMAT:
When creating an HTML presentation, structure it as:
1. Title slide: problem statement + recommendation in one sentence
2. Executive Summary: SCQA in 4 bullet points
3. Key Finding slides (one per main argument, 3-5 total)
4. Recommendation slide: action + owner + timeline + success metric
5. Appendix: supporting data, methodology, assumptions