Mmcp.market

dating-web skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

A consumer-feeling dating / matchmaking dashboard — left rail navigation, ticker bar of community signals, headline KPIs, a 30-day mutual-matches bar chart, and a match-rate trend block. Editorial typography, restrained accent. Use when the brief asks for a "dating site", "matchmaking", "community dashboard", "social network dashboard", or any consumer product where the data is the story.

A100/100content scan

Is the dating-web skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the dating-web skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/dating-web ~/.claude/skills/dating-web
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

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

token for the metric numerals — these screens live or die on numerals.

  1. Read the active DESIGN.md (injected above). Lean into a serif display

real, specific copy. Examples: "the people who'd text back within a day", "manageable. two are now friends.", "your single greatest compatibility asset."

  1. Pick a brand voice — wry, observational, slightly literary. Generate
  1. Layout, in order:

sans-serif eyebrow style: tagline left, "NEXT TIER AT 2,080 MUTUALS" right, both in mono caps with letter-spacing. Thin rule below.

  • Top ticker — single-row horizontal strip across the top in a

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.

  • Left rail — 220–260px sidebar. Brand wordmark in serif italic at

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

  • Main content:
  • KPI grid — 3 columns × 3 rows (or 9 cells). Each cell: small

bars, last two days highlighted in accent. Caption above with "↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE" in mono.

  • Bar chart panel — "mutuals — last 30 days". Tall thin black

copy below ("STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN…"). Footer rule.

  • Trend panel — "match rate — last 12 weeks". One line of body
  1. Write a single HTML document:
  • <!doctype html> through , 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.
  1. Self-check:

bars, one nav active state).

  • Reads as restrained, editorial, slightly funny — not horny.
  • Single accent token used in 3–4 places max (one KPI, two highlight
  • No swipe deck, no hearts, no fire emoji.

Output contract

Emit between tags:

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

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers