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.