Skip to content
Get packs

Dating Community Dashboard

Generates a consumer-style dating/community matching dashboard in HTML

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill teaches an AI agent to produce a styled web dashboard for a dating or community-matching product, with a left navigation rail, a live-style signal ticker, headline key metrics, a 30-day bar chart of mutual matches, and a match-rate trend block. It guides the look toward polished editorial typography with restrained accent colours. The included example.html shows the intended layout.

Great for

  • Designers who want a realistic mockup of a matching or community app dashboard
  • Front-end developers starting a dashboard layout they will later connect to real data
  • Product teams presenting a visual concept to stakeholders

Skip it if

  • Showing real user or match data: the template is a visual layout, and any figures it shows are illustrative, so they could be mistaken for real results
  • Production analytics that must be accurate: the skill contains no data pipeline or calculation logic

Try asking

  • “Create a consumer-style dating dashboard mockup with a 30-day mutual matches bar chart”
  • “Build a community match-rate trend dashboard in a clean editorial style”
  • “Make an HTML dashboard layout with a left rail, ticker bar and headline KPIs”
Step-by-step guide: how to use Dating Community DashboardInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    dating-web.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dating-web.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dating-web.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for sample figures explicitly labelled as placeholder data so the mockup is not mistaken for real results
  • Specify a target screen size, such as desktop at 1440 pixels wide, to match the skill's suggested aspect hint
  • Give the agent your brand colours or fonts to override the default restrained accent palette

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.