mcpField
D
dating-web

dating-web

github.com/mphinanceDesign & UI3285 installsUpdated 4d ago
Repository

About dating-web

dating-web is a design skill for producing a single-screen dating dashboard as one HTML document. It uses editorial typography, restrained accents, specific dashboard copy, and chart and trend panels rather than swipe-based dating conventions.

Key features

  1. 01Single-screen consumer dashboard layout
  2. 02Editorial serif typography and mono labels
  3. 03Nine-cell KPI grid
  4. 04Mutuals bar chart and match-rate trend
  5. 05Single-file HTML with inline CSS

Use cases

  1. 01Designing a dating-service dashboard
  2. 02Presenting mutual and match-rate metrics
  3. 03Creating an editorial-style single-page prototype

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mphinance/alpha-skills --skill dating-web

After installing, type/dating-webin Claude Code to confirm it loaded.

Bundled filesexample.htmlREADME.md

Details

From the project README

Dating Web Skill

Produce a single-screen consumer dashboard that feels like a Sunday-paper dating column rendered as software. Editorial type, single restrained accent, lots of negative space, no swipe deck or hookup tropes.

Workflow

  1. Read the active DESIGN.md (injected above). Lean into a serif display token for the metric numerals — these screens live or die on numerals.
  2. Pick a brand voice — wry, observational, slightly literary. Generate real, specific copy. Examples: "the people who'd text back within a day", "manageable. two are now friends.", "your single greatest compatibility asset."
  3. Layout, in order:
    • Top ticker — single-row horizontal strip across the top in a sans-serif eyebrow style: tagline left, "NEXT TIER AT 2,080 MUTUALS" right, both in mono caps with letter-spacing. Thin rule below.
    • Left rail — 220–260px sidebar. Brand wordmark in serif italic at top. User card (avatar / handle / ratio / tier). Three groups of nav: "TODAY" (specimen, inbox, queue, notifications), "YOU" (your stats, mutuals & communities, blocked, settings), "ARCHIVE" (past issues, expired matches). Active item gets accent text + accent dot.
    • Main content:
      • KPI grid — 3 columns × 3 rows (or 9 cells). Each cell: small caps mono label, an oversized serif numeral (use accent or muted green for positive, muted red for caution), one-line italic footnote. Plausible specifics — "1,842 ↑ 41 this wk · healthy growth.", "14% above median for your cohort.", "4 / exes in your circle · manageable. two are now friends."
      • Bar chart panel — "mutuals — last 30 days". Tall thin black bars, last two days highlighted in accent. Caption above with "↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE" in mono.
      • Trend panel — "match rate — last 12 weeks". One line of body copy below ("STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…"). Footer rule.
  4. Write a single HTML document:
    • <!doctype html> through </html>, CSS inline.
    • Background creamy off-white, body serif, mono labels everywhere.
    • Use font-feature-settings: 'tnum' on the metric numerals.
    • SVG bar chart with ~30 bars, varied heights.
    • data-od-id on ticker, sidebar, kpi grid, chart, trend.
  5. Self-check:
    • Reads as restrained, editorial, slightly funny — not horny.
    • Single accent token used in 3–4 places max (one KPI, two highlight bars, one nav active state).
    • No swipe deck, no hearts, no fire emoji.

Output contract

Emit between <artifact> tags:

<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Comments

Markdown supported