Skip to content

Update shipping calendar skill branding #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
emilieschario wants to merge 1 commit into
base: main
Choose a base branch
from
+95 −101
Open

Update shipping calendar skill branding #4

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 95 additions & 101 deletions skills/shipping-calendar/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,135 +1,129 @@
---
name: shipping-calendar
description: Create visually appealing shipping calendars in Kilo branding from lists of features, releases, or shipped items. Use whenever users want to visualize product releases, feature launches, development milestones, sprint deliverables, or any time-based shipping data in calendar format. Also trigger when users mention "calendar", "shipped", "releases", "timeline", "product roadmap", or want to show what was delivered in a specific time period.
description: >
Create visually appealing shipping calendars in Kilo branding from lists of features, releases, or shipped items.
Use whenever users want to visualize product releases, feature launches, development milestones, sprint deliverables,
or any time-based shipping data in calendar format. Also trigger when users mention "calendar", "shipped",
"releases", "timeline", "product roadmap", or want to show what was delivered in a specific time period.
---

# Shipping Calendar Creator

Transforms lists of shipped features, releases, or deliverables into professional shipping calendars using official Kilo branding and design system.

Transforms lists of shipped features, releases, or deliverables into professional release-board calendars using official Kilo branding.
## What This Skill Does

Creates HTML calendars that showcase product releases, feature launches, and development milestones with:
- **Kilo brand colors**: Yellow (#FAF74F), dark (#1a1a18), blue (#087bc9)
- **Kilo brand colors**: Yellow (#FAF74F) and dark (#1a1a18) as the primary visual system
- **JetBrains Mono typography**: Official Kilo brand font
- **Punchy, emoji-enhanced items**: Makes shipped features exciting and memorable
- **Responsive, compact design**: Professional presentation that fits any screen
- **Category-based color coding**: Different colors for feature types (integrations, billing, etc.)

- **No emojis in task labels**: Calendar entries should be clean, text-only release items
- **Dark release-board layout**: Dark page background with high-contrast Kilo yellow shipped-day cells
- **Sunday-first weeks**: Calendar grids must start with Sunday, then Monday through Saturday
- **Responsive, compact design**: Professional presentation that works for screenshots and sharing
## Input Format

Accept shipping data in any of these formats:

### Simple List Format
```text
April 1: Feature A, Feature B
April 5: Integration with X, Performance improvements
April 15: Admin tooling update
```
March 1: Feature A, Feature B
March 5: Integration with X, Performance improvements
March 15: Billing system update
```

### Structured Format
```json
{
"month": "March 2026",
"team": "KiloClaw Team",
"month": "April 2026",
"team": "KiloClaw Team",
"items": [
{"date": "2026-03-01", "features": ["Feature A", "Feature B"]},
{"date": "2026-03-05", "features": ["Integration with X", "Performance improvements"], "category": "integration"},
{"date": "2026-03-15", "features": ["Billing system update"], "category": "billing"}
{"date": "2026-04-01", "features": ["Feature A", "Feature B"]},
{"date": "2026-04-05", "features": ["Integration with X", "Performance improvements"]},
{"date": "2026-04-15", "features": ["Admin tooling update"]}
]
}
```

### Conversational Format
Accept natural descriptions like "In March we shipped X on the 5th, Y on the 10th, and Z at the end of the month."

Accept natural descriptions like "In April we shipped X on the 5th, Y on the 10th, and Z at the end of the month."
## Calendar Generation Process

### 1. Parse and Enhance Input
- Extract dates, features, and categories from user input
- Add relevant emojis to make items punchy and visual
- Categorize items when possible (integrations, billing, major features, etc.)
### 1. Parse and Clean Input
- Extract dates and shipped items from user input or git history when requested
- Do **not** add emojis to task labels
- Clean up language to be concise and impactful

### 2. Apply Kilo Branding
- Use Title Case or compact sentence case consistently for calendar items
- Preserve the user's requested scope, month, and exclusions exactly
### 2. Apply Kilo Release-Board Branding
**Colors:**
- Default shipped days: Kilo yellow (#FAF74F) with dark text (#1a1a18)
- Major features: Kilo blue (#087bc9) with white text
- Billing features: Yellow gradient variations
- Integration features: Blue gradient variations
- Empty days: Subtle gray with yellow accents

- Page background: Kilo dark (#1a1a18)
- Shipped days: Kilo yellow (#FAF74F) with dark text (#1a1a18)
- Day-of-week headers: dark olive panels with yellow text
- Empty or out-of-month days: subtle dark gray panels with muted text
- Avoid category-based color coding unless the user explicitly requests it
- If the user experiments with colors and asks to revert, restore Kilo yellow (#FAF74F)
**Typography:**
- Font: JetBrains Mono (loaded from Google Fonts)
- Weights: 400 (regular) and 500 (medium) only
- Conservative sizing for readability

- Font: JetBrains Mono loaded from Google Fonts
- Use weights 400, 500, and 700 where useful for hierarchy
- Bold, compact heading similar to: `Everything the KiloClaw Team shipped in April 2026`
- Highlight the team name in Kilo yellow
**Design System:**
- Border radius: 8px for calendar cells, 6px for headers
- Transparency patterns: /10, /20, /30 opacity following Kilo standards
- Compact spacing: Optimized for information density

- Dark full-page canvas
- Compact grid with small gaps between cells
- Calendar cells use 8px border radius
- Day numbers are large and bold
- Task labels are bullet-style text rows using a dot marker, not emoji icons
- Include a compact `Kilo Releases` header with a yellow square `K` mark
- Include a small `Kilo.ai` footer watermark
### 3. Create Professional Layout
- Grid-based calendar with proper month structure
- Color-coded day headers with Kilo yellow accents
- Compact day cells with appropriate item spacing
- Inline Kilo.ai watermark to save space
- Responsive design that works on all screen sizes

### 4. Enhance Items for Impact
Transform mundane feature names into exciting, memorable items:

**Before:** "Authentication system updates"
**After:** "🔐 Auth System 2.0"

**Before:** "Database migration completed"
**After:** "🚀 Database Migration"

**Before:** "Fixed login issue"
**After:** "🔧 Login Fixes"

- Generate a true month calendar with correct leading and trailing days
- Weeks must start on **Sunday**
- Include day-of-week headers in this order: Sun, Mon, Tue, Wed, Thu, Fri, Sat
- Use dark cells for empty days and Kilo yellow cells for days with shipped items
- Optimize for screenshot readability at around 1024–1220px wide
- Keep the calendar single-month unless the user explicitly requests a range
### 4. Item Filtering and Exclusions
When the user asks to remove a topic, remove all matching task labels and closely related wording. Common exclusions from prior feedback:
- No emojis in task labels
- Remove references to earlybird details
- Remove provider-related information, including generic "providers" wording
- Remove Northflank references
- Remove Grafana references
- Remove Google OAuth Calendar references
- Remove docker-local support references
- Remove Impact Referrals references
- Remove subscription references
- Remove billing references
- Remove promo or promotion references
- Remove Bulk Deployments when requested
After applying exclusions, search the generated file for the removed terms to verify none remain.
## HTML Structure

Generate complete, self-contained HTML files with:
- Embedded CSS (no external dependencies except Google Fonts)
- JetBrains Mono font loading
- Embedded CSS
- Google Fonts import for JetBrains Mono as the only external dependency
- Proper viewport meta tags for mobile
- Clean, semantic HTML structure
- Optimized for both viewing and sharing

## Category Color Mapping

- **Default/Standard**: Kilo yellow (#FAF74F)
- **Major Features**: Kilo blue (#087bc9)
- **Integrations**: Blue gradients (#087bc9 to #065a8c)
- **Billing/Financial**: Yellow gradients (#FAF74F to #e8e645)
- **Performance/Infrastructure**: Standard yellow with blue accents
- **Security/Auth**: Blue with security-focused styling

- No JavaScript required
- Optimized for viewing, screenshots, and sharing
## Default Visual Template
Use this visual direction by default:
- Header: dark background, yellow `K` logo square, `Kilo Releases` label
- Title: `Everything the <Team> shipped in <Month Year>` with team highlighted yellow
- Subtitle: `<Month range>. Product releases and major features. Infrastructure overhauls included.`
- Grid: Sunday-first, 7 columns, dark day-of-week headers, yellow shipped cells
- Items: dot bullets with no emojis
- Footer: `Kilo.ai`
## File Output

Save calendars with descriptive names:
- `shipping-calendar-march-2026.html`
- `kiloclaw-releases-q1-2026.html`
- `shipping-calendar-april-2026.html`
- `kiloclaw-releases-april-2026.html`
- `team-deliverables-april-2026.html`

## Examples

**Example 1:**
Input: "We shipped Linear integration on March 27, pricing changes on March 19, and real-time chat on March 26"

Output: Professional calendar showing:
- March 19: 💰 Pricing Updates (billing category)
- March 26: 💬 Real-time Chat Tab (major feature)
- March 27: 📐 Linear Integration (integration category)

Input: "We shipped Linear integration on March 27, pricing changes on March 19, and real-time chat on March 26. Exclude pricing."
Output calendar items:
- March 26: Real-Time Chat Tab
- March 27: Linear Integration
Do not include pricing because the user excluded it. Do not add emojis.
**Example 2:**
Input: List of 15 features across March 2026

Output: Complete month calendar with daily activities, proper categorization, and visual hierarchy showing the development intensity.

Input: "Make an April KiloClaw calendar, but remove billing, subscriptions, providers, Northflank, Grafana, Google OAuth Calendar, docker-local, Impact Referrals, promos, and Bulk Deployments."
Output:
- April-only dark Kilo release-board calendar
- Sunday-first weeks
- No emojis
- No excluded terms or close variants in task labels
## When to Use This Skill

Trigger this skill when users:
- Provide lists of shipped features, releases, or deliverables
- Want to create product release calendars or timelines
Expand All @@ -138,13 +132,13 @@ Trigger this skill when users:
- Want to showcase team productivity or development velocity
- Need professional visuals for stakeholder reporting
- Request "timeline", "roadmap visualization", or "shipping overview"

## Success Criteria

A successful shipping calendar should:
- Accurately represent all provided shipping data
- Use consistent Kilo branding throughout
- Make every shipped item sound exciting and impactful
- Follow Kilo release-board branding: dark background, yellow shipped cells, JetBrains Mono
- Use Sunday as the first day of the week
- Use clean text-only task labels with no emojis
- Respect user exclusions and verify removed terms are gone
- Provide clear visual hierarchy and easy scanning
- Work well for screenshots, presentations, and sharing
- Feel professional yet energetic and celebratory
- Feel professional, energetic, and on-brand