agentsclimarketplace
Sign in

Editorial app craft

Skill tinh2/skills-hub-registry/build/editorial-app-craft

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.From its SKILL.md

Install
npx -y skills add tinh2/skills-hub-registry --skill editorial-app-craft

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 12 stars12 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

11.3 KB, ~2.2k tokens by cl100k_base, as published. Nobody here has run it

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/<app-name>/:

~/git/<app-name>/
├── 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. <head> with theme-color meta, favicon link, apple-touch-icon link, Google Fonts (Playfair Display + Source Sans 3), inline <style>.
  2. The full design tokens block from assets/design-tokens.css.
  3. The component patterns block from assets/patterns.css.
  4. <body> with: welcome-modal, family-setup-modal (if multi-user), app shell, content modals.
  5. <script type="module"> with Firebase imports (if needed), state, render, the detail-patterns functions from assets/detail-patterns.js.

VALIDATION: index.html opens directly in a browser without a server and renders the empty welcome modal with daily ornament + time-of-day greeting. FALLBACK: If something blocks rendering, fix it before adding features.

============================================================ === PHASE 3: APPLY DETAIL PATTERNS ===

Layer these in. Each is described in assets/detail-patterns.js:

PatternWhere it goes
Daily rotating ornamentBrand mark (top-left) + welcome-modal mark. Call applyDailyOrnament() on boot + setInterval(60_000).
Time-of-day greetingItalic Playfair line above the welcome-modal headline.
Daily quoteBelow the sign-in button or somewhere persistent the user sees on each visit (footer ribbon, settings panel).
Editorial cardsTitle in Playfair italic, metadata as inline byline with · separators, no pill backgrounds. Sage rail on hover, terracotta rail on "meaningful".
Field Notes detail modalItalic serif numerals 01/02/03 for sub-items, hairline dividers, memo-line input.
Day-varying empty statesPull a line from EMPTY_STATES[zoneKey] by dayIndex().
Toast personality variantsUse celebrationLine({...}) instead of generic "+1 pt for X".
Page-load orchestrationAdd .first-paint class to the board on first render, strip after 900ms.
Streak milestonesIf the app has any streak/count, use streakOrnament(n) and isStreakMilestone(n).
iOS-aware voiceUse setupVoiceInput({...}) — auto-hides the mic on iOS WebKit.
Mobile touch targetsWrap icon-button styles in @media (hover: none) { min-width: 40px; min-height: 40px; }.

For each pattern: write it, then verify it renders + works.

VALIDATION: Open the running app at 1400px AND 390px. Check that the editorial details actually show. Touch targets must be ≥40px on mobile. FALLBACK: If a pattern doesn't fit the app's data model (e.g., no "meaningful" concept), skip it rather than forcing it.

============================================================ === PHASE 4: FIREBASE WIRING (optional) ===

If the user wants sync, follow assets/firebase-deploy.md:

  1. firebase projects:create + register a Web app + grab SDK config
  2. Enable Firestore + Identity Toolkit APIs (refresh CLI token if needed)
  3. Create Firestore database
  4. User enables Google sign-in via Console (one click — unavoidable)
  5. Write firebase.json, firestore.rules, .firebaserc
  6. firebase deploy --only hosting,firestore:rules

VALIDATION: Live URL works, sign-in flow completes, a test write to Firestore succeeds. FALLBACK: If any step blocks, write a static localStorage-only version first and ship that. Firebase can be added later without disturbing the UI.

============================================================ === PHASE 5: CUSTOM DOMAIN (optional) ===

Only proceed if user confirmed DNS provider in pre-flight.

  1. Call customDomains API to register the subdomain
  2. Read requiredDnsUpdates.desired — extract CNAME + TXT records
  3. If user authorized AWS access: write Route 53 records via aws route53 CLI
  4. Otherwise: print the exact records and instruct user to paste at their registrar
  5. Poll cert status until HOST_ACTIVE + CERT_ACTIVE
  6. Add the new hostname to Auth's authorizedDomains list

VALIDATION: https://<custom.domain> loads with a green padlock. FALLBACK: If cert provisioning takes >40 min, hand off to the user with a watch command and the current status; don't block.

============================================================ === SELF-REVIEW ===

Score the output (1–5):

  • Complete: All requested core features built and live?
  • Detail-rich: Did you layer in at least 6 of the 11 detail patterns from Phase 3?
  • Brand-faithful: Sage + cream + terracotta palette intact? Playfair + Source Sans? Multi-layer shadows? No purple gradients / emoji icons / pill-cluster cards?
  • Mobile-honest: Verified at 360px or 390px? Touch targets ≥40px? Mic hidden on iOS?
  • Cozy, not clinical: Empty states warm, copy human, italic Playfair used where it earns?

If any score < 4:

  • Identify the specific gap and fix it.
  • If unfixable in this run, note it explicitly as a known limitation in the final message.

============================================================ === LEARNINGS CAPTURE ===

After completing, append one entry to ~/.claude/skills/editorial-app-craft/LEARNINGS.md:

## <YYYY-MM-DD> — <app name + key decisions>

- **What worked:** <pattern that landed especially well, or a setup step that was smooth>
- **What was awkward:** <step that needed retries — Firebase auth provider, iOS Safari quirk, DNS, etc.>
- **Suggested patch:** <one concrete improvement — e.g., "default to Route 53 path detection",
  "add explicit step for custom-domain authorizedDomains", "include a default 30-quote list">
- **Verdict:** [Smooth / Minor friction / Major friction]

Anti-patterns this skill refuses

  • Purple gradients of any kind
  • Pill clusters on cards (use editorial byline with dot separators instead)
  • "B" letter on the brand mark (use the daily fleuron)
  • Em-dashes in user-facing copy (commas / colons / sentence breaks instead)
  • Emoji as decorative icons (only as content-bearing characters: ❤ for meaningful, 🔥/✦/🏆 for streak tiers)
  • Cards with left-color-border + flat shadow (the 2020–2024 Material/Tailwind look)
  • Inter/Roboto/system fonts as display (always Playfair Display for headings)
  • "Add family members and kids" → say "Add family members". The app doesn't draw an adult/child line.

What ships with it: 4 files

27.7 KB alongside SKILL.md, 1 of them executable

assets/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.