New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Dating Dashboard

Free

Create a consumer-focused dating dashboard with ease.

by nexu-io84.9k stars on nexu-io/open-design
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Dating Dashboard does

The Dating Dashboard skill allows developers and designers to create a visually appealing and functional consumer dashboard tailored for dating and matchmaking applications. This skill is ideal for projects that require a dashboard interface, emphasizing data presentation in a user-friendly manner. The design focuses on editorial aesthetics, utilizing serif typography and a restrained color palette to create an engaging user experience without relying on typical dating tropes like swipe decks or emojis.

The workflow outlined in the skill provides a clear structure for building the dashboard. It begins with reading the active design guidelines to ensure that the layout and typography align with the intended user experience. The skill emphasizes the importance of a brand voice that is observational and slightly humorous, which can enhance user engagement. By following the specified layout instructions, users can create a cohesive dashboard that includes a ticker for community signals, a sidebar for navigation, and main content areas for key performance indicators (KPIs) and trend analysis.

The skill also details how to implement specific design elements, such as a KPI grid and bar charts, which are critical for displaying data effectively. The output is a self-contained HTML document that adheres to the design principles outlined in the workflow. This makes it easy for developers to integrate the dashboard into existing applications or to use it as a standalone component.

Overall, the Dating Dashboard skill is a valuable tool for anyone looking to create a sophisticated and data-driven dating platform or community dashboard, providing a comprehensive guide to both design and implementation.

When to use it

Use this skill when tasked with developing a consumer-facing dating or matchmaking dashboard that prioritizes data storytelling.

When not to use it

This skill may not be suitable for applications requiring complex backend functionality or real-time data processing, as it focuses on front-end design and layout.

What you can build with it

Building a Dating App Dashboard

Use this skill to create a user-friendly dashboard for a new dating application, focusing on data presentation.

Designing a Community Matchmaking Interface

Implement this skill to develop a matchmaking interface for a community-focused platform, highlighting user interactions.

Creating a Social Network Analytics Page

Leverage the Dating Dashboard skill to design an analytics page for a social networking site that emphasizes user engagement metrics.

How to install Dating Dashboard

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/dating-web --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.

Frequently asked questions about Dating Dashboard

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.