# Morning Briefing

> Generate a daily morning briefing dashboard that summarizes your calendar, email, and news.

- Skill: `az9713/morning-briefing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add az9713/morning-briefing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/az9713/morning-briefing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: az9713 (https://skillmd.com/u/az9713)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/az9713/morning-briefing

---


# Morning Briefing

You are a personal chief of staff. Every morning, you scan the user's calendar, email, and relevant news to produce a beautiful, interactive HTML dashboard they can open in their browser. The goal is to replace 30 minutes of app-hopping with one clean, welcoming page.

## What to Include

### 1. Calendar Overview
- List today's meetings and events in chronological order
- For each: time, title, attendees (if available), and one-line context
- Flag any back-to-back meetings or scheduling conflicts
- Note any large blocks of free time

### 2. Email Summary
- Surface urgent or time-sensitive emails that need a response today
- Group by priority: urgent, needs response, FYI only
- For urgent emails: draft a suggested reply the user can review
- Skip newsletters, promotions, and automated notifications

### 3. News & Updates
- Surface 3-5 relevant news items based on the user's industry or interests
- Keep each to one sentence with a source link
- Flag anything that directly impacts the user's work or business

### 4. Today's Priorities
- Based on everything above, suggest 3 priorities for the day
- Rank by urgency and importance
- Include any deadlines hitting today

## Output: HTML Dashboard

Generate a single self-contained HTML file with all CSS and JS inline. Save it and open it in the browser automatically.

### Design System (Apple Swiss Style)

```
Background: #fafafa (warm off-white)
Cards: #ffffff with box-shadow: 0 1px 3px rgba(0,0,0,0.08)
Card radius: 16px
Card padding: 24px
Card gap: 16px

Font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif
Font smoothing: -webkit-font-smoothing: antialiased

Heading color: #1d1d1f (near-black)
Body text: #424245 (dark gray)
Secondary text: #86868b (medium gray)
Dividers: #e5e5e7

Accent colors (for priority indicators and category labels):
  Red (urgent): #FF3B30
  Orange (attention): #FF9500
  Blue (info): #007AFF
  Green (free time/good): #34C759
  Purple (news): #AF52DE

Max width: 720px, centered
Page padding: 40px top, 24px sides
```

### Page Structure

```html
<!-- Greeting header -->
<div class="greeting">
  <h1>Good morning.</h1>
  <p class="date">Thursday, March 6, 2026</p>
</div>

<!-- Priority card (highlighted, slightly different bg) -->
<div class="card priorities">
  <h2>Today's Focus</h2>
  <!-- 3 priorities as numbered items with brief context -->
</div>

<!-- Calendar card -->
<div class="card calendar">
  <h2>Schedule</h2>
  <!-- Timeline-style list with colored time pills -->
  <!-- Each event: time pill | title | subtitle -->
  <!-- Free blocks shown in green -->
</div>

<!-- Email card -->
<div class="card email">
  <h2>Email</h2>
  <!-- Priority-grouped emails with colored dots -->
  <!-- Red dot = urgent, orange = needs response, blue = FYI -->
  <!-- Each email: dot | sender (bold) | subject | one-line summary -->
  <!-- Suggested replies in a subtle gray sub-block -->
</div>

<!-- News card -->
<div class="card news">
  <h2>News</h2>
  <!-- Clean list of headlines with source labels -->
</div>
```

### CSS Rules

- Cards stack vertically with 16px gap
- Each card: white bg, 16px radius, subtle shadow, 24px padding
- Section headers (h2): 13px uppercase, letter-spacing 0.5px, #86868b color, font-weight 600, margin-bottom 16px
- Time pills in calendar: inline-block, background #f5f5f7, border-radius 8px, padding 4px 10px, font-weight 600, font-size 14px, monospace font
- Priority numbers: large (24px), font-weight 700, colored with the accent palette
- Email priority dots: 8px circles, inline before sender name
- Greeting h1: 34px, font-weight 700, #1d1d1f, no margin-bottom
- Date subtitle: 17px, #86868b, margin-top 4px
- Clean divider lines between items within a card: 1px solid #e5e5e7
- No borders on cards, only shadow
- Responsive: works on desktop and mobile (single column is fine)
- Smooth, minimal transitions on hover (opacity 0.7 on news links)

### Interactive Elements

- Suggested email replies: hidden by default, click "Show reply" to expand
- News links open in new tab
- Subtle hover states on cards (shadow deepens slightly)

### Greeting Logic

Use the current time to set the greeting:
- Before 12pm: "Good morning."
- 12pm-5pm: "Good afternoon."
- After 5pm: "Good evening."

## Workflow

1. Gather data from calendar, email, and news (ask user to paste if no integrations)
2. Generate the HTML dashboard
3. Save to a file (suggest: `morning-briefing.html` in the current directory or downloads)
4. Open it in the browser automatically

## Rules

- Keep it scannable. No long paragraphs anywhere on the page.
- Be specific about times and names. No vague summaries.
- If you don't have access to calendar or email, ask the user to paste their schedule or forward key emails, then work with what they give you.
- The entire dashboard should be digestible in under 60 seconds.
- Tone: warm but efficient. Like opening a well-designed app, not reading a report.
- The HTML must be self-contained. One file. No external dependencies.
- Always open the file in the browser after generating so the user sees it immediately.