--- name: editorial-app-craft description: | Build a considered, cozy, editorial single-file web app (Firebase backend optional). Use when the user asks for a personal/family/couple/journaling/cozy app: "build a family board", "shared list app for me and my partner", "create a household app", "single-file Firebase app", "warm cream sage design", "Playfair editorial UI", "apply Field Notes aesthetic", "cozy productivity", "small considered web app". NOT for marketing landing pages, dashboards, or generic SaaS. Bundles a tuned design token system (sage + cream + terracotta + honey), Playfair Display + Source Sans 3 typography, multi-layer paper shadows, Apple-style easing, and a set of considered detail patterns: daily rotating ornament + palette + quote, time-of-day greeting, editorial cards with byline metadata, Field Notes detail modal with italic serif numerals, day-varying empty states, toast personality variants, page-load orchestration, streak milestone ornaments, iOS-aware voice input, mobile touch targets. version: "1.0.0" category: build platforms: [CLAUDE_CODE] --- # editorial-app-craft You build a single-file HTML web app with a cozy editorial aesthetic — sage + cream + terracotta, Playfair Display + Source Sans 3, with a curated set of "considered detail" patterns layered in. Optional Firebase backend (Auth + Firestore + Hosting + custom domain). This is for **personal / family / cozy / journaling / shared-with-loved-ones** apps. It is NOT for marketing pages, dashboards, or generic SaaS. The aesthetic is "Field Notes meets a quiet weekend morning at home." ============================================================ === PRE-FLIGHT === ============================================================ Before starting, verify: - [ ] User has described the kind of app they want, OR is iterating on an existing one. - [ ] The app is small/personal/family-scale (not a marketing site or dashboard). - [ ] If Firebase backend is requested: `firebase --version` works and the user has run `firebase login`. - [ ] If a custom domain is requested: confirm DNS provider (Route 53? Cloudflare? GoDaddy?). If any check fails: - Aesthetic mismatch (marketing landing page, dashboard, etc.) → say so and decline. This skill has strong opinions; using it on the wrong target produces strange output. - Firebase CLI not installed → `brew install firebase-cli` or skip the deploy phase entirely and produce a static single-file app instead. - DNS unclear → produce the app and stop before custom-domain wiring; tell user to come back once they know. ============================================================ === PHASE 1: UNDERSTAND THE APP === ============================================================ Ask (in ONE message, then proceed): 1. What is the app for, in one sentence? 2. Who's it for? (just you, you + partner, family of N, etc.) 3. What are the 2–4 main "things" the app needs to hold? (tasks, lists, notes, photos, journal entries...) 4. Does it need to sync across devices / multiple users? (yes → Firebase; no → localStorage only) If the user already gave enough signal in their prompt, skip the questions and proceed. VALIDATION: You can describe the app in one paragraph and name its core data model. FALLBACK: If still unclear, propose a small default and let the user redirect. ============================================================ === PHASE 2: SCAFFOLD === ============================================================ Create the project at `~/git//`: ``` ~/git// ├── index.html # single-file app ├── icon.svg # favicon SVG (small fleuron in brand gradient) ├── apple-touch-icon.png # 180×180 PNG (render via Playwright screenshot of icon.svg) ├── firebase.json # if Firebase ├── firestore.rules # if Firestore └── .firebaserc # if Firebase ``` The `index.html` skeleton has these sections in this order: 1. `` with theme-color meta, favicon link, apple-touch-icon link, Google Fonts (Playfair Display + Source Sans 3), inline `