dating-web

Generate a standalone HTML dating dashboard prototype with KPI grids and chart panels.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill dating-web
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dating-web
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/dating-web
Command: npx skills add https://github.com/junainfinity/osmDesign --skill dating-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert complex dating metrics into a clean, readable single-screen dashboard that communicates engagement and compatibility signals to product teams and users.

Core Features & Use Cases

  • Left rail navigation with brand, user card, and quick access sections for Today, You, and Archive.
  • KPI grid showing Mutuals on file, Replies in 24h, Communities, and more, with typographic emphasis and color cues.
  • Visual panels including a 30-day mutuals bar chart and a 12-week match-rate trend, plus a contextual storyline.
  • Quick-start workflow guidance to craft a consistent editorial voice and layout for consumer dashboards. Use cases include a dating-site dashboard, matchmaking analytics, and social dashboard prototypes for product pitches.

Quick Start

Generate a standalone HTML dating dashboard prototype that mirrors the structure described in this skill, including left rail, KPI grid, and chart panels.

Frequently Asked Questions about dating-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a dating dashboard prototype to visualize match insights?

You can build a dating dashboard prototype by generating a self-contained HTML document that includes a left rail, KPI grid, mutuals bar chart, and match-rate trend panel to visualize engagement and compatibility signals.

What is the best way to display dating app metrics in a single-screen layout?

Displaying dating app metrics in a single-screen layout involves organizing KPIs, visual panels, and contextual storylines into a clean, readable dashboard with editorial typography that communicates engagement data to product teams.

Can I create a social dashboard prototype for consumer dating apps using inline CSS?

Yes, you can create a social dashboard prototype for consumer dating apps using a single HTML document with inline CSS, rendering left rail navigation, KPI grids, and chart panels without external dependencies.

Does the dating dashboard support desktop contexts for matchmaking analytics?

The dating dashboard supports desktop contexts for matchmaking analytics by rendering KPI grids, 30-day mutuals bar charts, and 12-week match-rate trends with data-od-id attributes on major panels.

How do I convert complex dating metrics into a readable dashboard layout?

Converting complex dating metrics into a readable dashboard layout requires structuring mutuals, replies, and community signals into a KPI grid with typographic emphasis and color cues for clear data visualization.

What is included in the editorial typography for consumer product dashboards?

Editorial typography for consumer product dashboards includes typographic emphasis and color cues applied to KPI grids, left rail navigation, and contextual storylines to ensure a consistent editorial voice and layout.