🚀 Building Your First Skill

The opening paragraph defines the output in one sentence: a self-contained, interactive HTML page with light/dark theme, flight cards, a day-by-day itinerary, and checklists that save their state.

A skill’s first sentence is a contract. It tells Claude—and you—exactly what will be delivered, avoiding generic output.

Concrete output · "page, not document" · self-contained · interactivity as a differentiator.

A sequence of 4 steps Claude MUST go through before producing anything: basic details, integrations, deep details, and confirmation.

It's the step marked "CRITICAL." Collecting real data is what turns a generic template into a document that feels custom-made.

Discovery · "ask before assuming" · 4 steps · confirm before generating.

Step 2 asks Claude to check email, calendar, Drive, messages, and URLs. If the user authorizes it, the skill uses MCP tools (Gmail, Calendar, Drive) to retrieve real data.

It’s the leap from “text generator” to “assistant.” Flight confirmations, reservations, and events go straight into the document.

MCP · "ask every time" · permission · real data > placeholder.

The section defines the format: a single HTML file with inline CSS and JS, images in base64 or emoji, and no external dependencies beyond the font. Saved with a standardized name.

Explicit output constraints prevent Claude from inventing dependencies, broken links, or scattered files.

Self-contained · inline CSS/JS · base64 · file-naming convention.

A numbered list of 13 suggested sections — hero, stats, route map, flights, hotel, itinerary, budget, checklists, footer — marked as "adapt per trip".

Shows how to provide a “blueprint” without being rigid: Claude chooses the blocks relevant to that trip instead of dumping them all.

Block list · adaptation by use case · suggested order · optional vs. required.

Six short principles that capture the spirit of the skill: real data first, ask before assuming, one file, app-like feel, interactive > static, color-code things.

Principles cover cases the blueprint didn’t anticipate. They’re the rule of thumb when Claude needs to decide on its own.

Principles > steps · decision rule · skill tone · consistency.

The skill embeds a block :root with CSS variables for backgrounds, surfaces, borders, and five semantic accents (blue, orange, green, lavender, gold).

Defining the tokens in SKILL.md ensures every output has the same identity — without Claude inventing colors each time it runs.

Design tokens · semantic color · consistency · custom properties.

Inter for text, monospaced for times and codes; responsive hero with clamp(); uppercase labels with letter spacing.

An explicit type scale produces a consistent hierarchy; without one, each output ends up with random sizes.

Inter · monospace for data · clamp() · uppercase labels · weights.

Twelve components described one by one: hero, event banner, flight cards, day selector, hotel, route map, stats, budget, checklists, and theme.

Describing each component with its anatomy gives Claude ready-made pieces to assemble, instead of improvising layouts from scratch.

Component library · anatomy · reuse · composition.

A table maps meaning to color: blue = outbound, green = confirmed, orange = return, lavender = connection, gold = event. Tags are uppercase pills.

Color with a fixed meaning makes the page scannable: you can read the status without reading the text. It’s one of the skill’s six principles.

Semantic color · uppercase pills · readability · fixed convention.

Orbs (fixed radial blurs), glassmorphism with backdrop-filter, shimmer on banners, hover-lift, and the plane’s animated contrail.

These are the details that separate a "document" from a "premium app." Each effect is described with enough detail for Claude to recreate it.

Orbs · glassmorphism · shimmer · hover-lift · contrail animation.

JS patterns: day switching via a data attribute, flight accordion with max-height, checklists saved in localStorage, theme toggle, and automatic progress bars.

Persisting state (a checked checklist stays checked) is the detail that brings the user back to the page. It's the "interactive > static" principle in practice.

localStorage · accordion · data-attribute · automatic progress.