Shipping Calendar

Shipping Calendar Creator

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

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)
• 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.)

Input Format

Accept shipping data in any of these formats:

Simple List Format

March 1: Feature A, Feature B
March 5: Integration with X, Performance improvements
March 15: Billing system update

Structured Format

{
  "month": "March 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"}
  ]
}

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."

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.)
• Clean up language to be concise and impactful

2. Apply Kilo 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

Typography:

• Font: JetBrains Mono (loaded from Google Fonts)
• Weights: 400 (regular) and 500 (medium) only
• Conservative sizing for readability

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

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"

HTML Structure

Generate complete, self-contained HTML files with:

• Embedded CSS (no external dependencies except Google Fonts)
• JetBrains Mono font loading
• 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

File Output

Save calendars with descriptive names:

• shipping-calendar-march-2026.html
• kiloclaw-releases-q1-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)

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.

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
• Ask to "turn this into a calendar" or "visualize our shipping"
• Mention "what we shipped", "releases", "deliverables", "milestones"
• 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
• Provide clear visual hierarchy and easy scanning
• Work well for screenshots, presentations, and sharing
• Feel professional yet energetic and celebratory