skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

dating-web

Generates a single-page HTML dating dashboard with KPI grid, bar chart, and editorial typography.

Updated May 20, 2026
Search Tags:#html#dashboard#prototype#ui generation#editorial design#svg chart#dating app
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill dating-web-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dating-web
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/dating-web
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill dating-web-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a consumer dating or matchmaking dashboard from scratch requires balancing data density with a distinctive visual voice, and generic admin templates rarely fit a consumer product where the data itself is the story. ## Core Features & Use Cases - Editorial dashboard layout: Produces a single HTML file with a top ticker bar, left navigation rail, 3x3 KPI grid, a 30-day mutual-matches SVG bar chart, and a match-rate trend panel. - Restrained design system: Uses serif display numerals, mono uppercase labels, a creamy off-white background, and a single accent color limited to a few elements. - Brand voice copywriting: Generates wry, specific microcopy for stats and footnotes rather than placeholder text. - Use Case: Ask for a dating site dashboard for a social app concept and receive a complete, self-contained HTML prototype with realistic metrics, navigation, and charts ready to preview in a browser. ## Quick Start Ask the assistant to design a dating site dashboard with daily stats, a mutual-matches bar chart, and a community ticker using this skill.

Frequently Asked Questions about dating-web

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

FAQPage Schema
How do I generate a dating app dashboard prototype in HTML?▼

Describe the dating or matchmaking concept and request a dashboard with stats, a mutual-matches bar chart, and a community ticker. The skill outputs one self-contained HTML file with inline CSS, a KPI grid, left navigation rail, and SVG chart.

What layout does this dating dashboard template use?▼

It uses a top ticker strip, a 220-260px left sidebar with grouped navigation, a 3x3 KPI grid with oversized serif numerals, a 30-day bar chart panel, and a match-rate trend panel. All styling is inline CSS with a creamy off-white background.

Can I customize the colors and fonts of the generated dashboard?▼

Yes. The output uses CSS custom properties for paper, ink, muted, rule, and accent colors, plus serif display, serif body, and mono font stacks. Editing the :root variables restyles the entire dashboard.

Does the dashboard require JavaScript or external libraries?▼

No. The output is a single HTML document with inline CSS and a hand-authored SVG bar chart. The only external references are optional Google Fonts links, which can be removed or swapped for system fonts.

When should I not use this dating dashboard style?▼

Avoid it when the brief calls for swipe-deck interactions, playful consumer tropes like hearts or flame icons, or dense enterprise admin tables. The skill deliberately produces an editorial, restrained single-screen layout without interactive widgets.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
zenbuappszenbuapps

aibdd-auto-frontend-nextjs-pages

Convert static HTML prototypes into dynamic Next.js pages with MSW API integration.

Official
Advanced
Hey-ViswaHey-Viswa

zapier-design-skill

Apply Zapier design-system patterns to product interfaces.

Community
Intermediate
AltimateAIAltimateAI
792

data-viz

Create interactive data visualizations and dashboards with code-based libraries.

Official
Advanced