How to build a dashboard and landing page with Claude Code

Why most dashboards fail where it matters

A client who pays you every month judges your service by what they see, not by what you do. If the work doesn't show up on a clear dashboard, for them it doesn't exist. And the day a client sees another company's data, it doesn't matter how good the panel looked: the trust is gone.

The same mistakes keep coming back:

• Permissions that only hide buttons. The screen hides the menu, but the server answers anyone who calls the route.
• The number in the URL. A client changes the company number and sees someone else's.
• Internal data travelling hidden. The internal cost or the team's note reaches the client's browser "even if it isn't shown".
• Metrics without a date. "143 tickets" doesn't tell you if you're doing better or worse.
• Reports that never leave the system. Without PDF or Excel, someone rebuilds them by hand every month.
• The forgotten corners. The screen filters correctly, but the export, the search box or the Telegram alert don't.

This skill comes with those rules in place. It is written from patterns running in production at xytask.com, the multi-company operations platform we built on Cloudflare.

What the skill builds

Both faces of a digital product, built with Claude Code while you decide every step:

1. The dashboard, for your team and for each client's own company. It answers in five seconds whether everything is fine, and one click more shows why.
2. The landing page that sells the product: it shows the real product, explains each feature with an animated diagram you get in three seconds, exists in two languages with one URL per language and loads fast on a slow phone.

All on Cloudflare: a Worker with the API, a D1 database, files in R2 and the landing in its own Worker. One command to publish each piece and no server to maintain.

What it brings for reports

• Date range with shortcuts (30 days, 90 days, 12 months, all) and custom dates, in your business's time zone. The range lives in the link, so you can share it.
• A fair comparison against the previous period with the same number of days, not against a shorter month.
• Every number opens. The "8 to 14 days" bar shows which tickets they are, who handles them and how long they've been waiting.
• Print to PDF with a report header, always in light mode and with the file name already set.
• Client view for your team: see the dashboard exactly as the client sees it before you send them a PDF.
• Client portal: each client opens their own dashboard, prints and exports, and never sees internal data.
• Export to Excel with accents intact, no internal columns and no formulas that run when the file opens.

Multi-company security, solved from day one

The server decides who sees what, denied by default. Every route applies the person's scope, including the ones people forget: export, print, search, counts, alerts and attachments. Responses are built from a whitelist of fields per role, so an internal cost never leaves the server. The skill includes that code ready to adapt, with automated tests: a client can't see another company, can't request the team view, and without a session everything answers 401.

Step 1. Install the skill

You need Node.js 22 or newer, git and a Cloudflare account. Download the file, unzip it and copy the folder into your skills:

~/.claude/skills/dashboard-y-landing/

On Windows it's C:\Users\YOUR-USER\.claude\skills\, with SKILL.md right inside the folder. The skill's guides are written in Spanish; Claude follows them and answers in your language.

Before building anything, double-click templates/dashboard/index.html: it's a demo dashboard with made-up data where you can try the date range, the click-through detail, the client view, the printable report and the export.

Step 2. Paste this first prompt

Open Claude Code in an empty folder (or in your project, if it already exists) and paste something like this, with your business details:

Use the dashboard-y-landing skill. I want a dashboard for my clients and a landing page for my service.

My business: IT support for companies in Panama City.
Who logs in: me, my team of technicians and one contact from each client company.
What each client wants to see: their open tickets, how fast we respond and this month's hours.
What a client must never see: internal notes, estimates and who logged each hour.
Time zone: Panama. Landing page languages: English and Spanish.

Let's start with the brief: ask me what's missing, two or three questions at a time. Show me the
role matrix before any screens. Don't write code until I say "go ahead", and ask me before touching
my Cloudflare account.

While you build, use made-up test data. Never paste your clients' real data into the chat.

What you have at the end

• A dashboard that answers in five seconds, with light and dark mode, that works on a phone.
• Date-range reports with comparison, click-through detail, PDF and Excel.
• A portal where each client sees only their company, and a client view for your team.
• Passing tests and, in production: 401 without a session and 403 when asking for another company.
• A bilingual landing page with the real product, ready for Google and measured with numbers (Lighthouse and CLS).

Common mistakes

• "It's not on screen, so it's protected." No: if the data reaches the browser, anyone sees it in the network tab. It's cut on the server.
• September's report counts tickets from October 1. The server cut the day in UTC. Day boundaries use the business's time zone.
• The migration ran locally but not in production. The new route fails with the first client. Remote migration first, verified, then the code.
• The second language switches with JavaScript. For Google it doesn't exist. Each language needs its own URL.
• Changing the domain and breaking email. Before touching DNS, list every record and leave the email ones alone.

Who it's for

For anyone selling a recurring service who wants clients to see the work: agencies, IT support, accounting, maintenance, consultancies. For anyone with a SaaS product who needs its panel and its landing page. And for anyone who already built a panel with AI and wants to check it against the multi-company security list: that list alone is worth the download.

It's not for anyone who wants it done by itself. You decide, test and approve; Claude builds, explains and verifies.

If you'd rather have help

At the in-person workshop we build it live. And if you need your product's dashboard or landing page built by our team, book a conversation.