skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

dating-web

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
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill dating-web-piercingxx
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
shawn-sandyshawn-sandy

design-token-extractor

Extract design tokens from images into W3C DTCG JSON, CSS custom properties, SCSS variables, and Tailwind-style utilities.

Community
Advanced
mhattingpetemhattingpete
657

dashboard-creator

Generate HTML dashboards with KPI cards, SVG charts, and data tables.

Community
Basic
pipixia-labspipixia-labs
38

dating-web

Design a dating dashboard UI with KPI grid, bar chart, and trend panel.

Official
Intermediate
fgarofalo56fgarofalo56
6

dashboard-design

Design dashboards with KPI cards, data grids, and responsive layouts.

Community
Intermediate