dating-web

Name: dating-web
Availability: InStock
Author: piercingxx

Generate a self-contained HTML dating dashboard with KPIs and community signals.

1|Updated Jul 9, 2026

Search Tags:#typography #ui #html #dashboard #design-system #dataviz #dating app

Ready to run

npx skills add https://github.com/PiercingXX/xx-stack --skill dating-web-piercingxx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dating-web
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/dating-web
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill dating-web-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It helps you rapidly produce a consumer-style dating and matchmaking dashboard UI where community signals and KPIs are the story, with editorial typography and restrained accents.

Core Features & Use Cases

Single-screen dashboard layout: Generates a left-rail navigation, top ticker, KPI grid, mutuals bar chart, and match-rate trend block in one coherent document.
Brand-voice copy and visual hierarchy: Produces wry, observational microcopy and uses restrained accent placement for readability and tone.
Design-system-aligned rendering: Leverages the active DESIGN.md requirements (colors, typography, layout, components) and outputs a self-contained HTML page.

Quick Start

Use the dating-web skill to generate a single-screen “mutuals” dashboard for a dating site concept described in your brief.

Frequently Asked Questions about dating-web

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

FAQPage Schema

How do I design a dating app dashboard with KPIs and community signals?▼

A mutuals dashboard for a dating site foregrounds KPIs, community signals, and match-rate trends using editorial typography and a self-contained HTML layout with inline CSS.

Can I generate a self-contained HTML document for a consumer product metrics view?▼

Yes, this Skill outputs a self-contained HTML document with inline CSS, rendering a specified layout including a top ticker, left rail, KPI grid, and trend copy for consumer metrics.

What is the best way to visualize mutuals data and match-rate trends for a dating site?▼

Visualizing mutuals data is best handled by a dedicated dashboard layout featuring a bar chart with approximately 30 bars and a trend block highlighting match-rate data.

Does this dashboard UI generator include navigation and data visualization components?▼

The dashboard UI generator includes a left-rail navigation component, a top ticker, a KPI grid, and a mutuals bar chart to drive the data visualization story.

How do I create a single-screen landing layout for community metrics?▼

Creating a single-screen community metrics layout involves leveraging design-system-aligned rendering to produce a coherent UI with restrained accents and required data anchors for key sections.