skills.rest
ebecerra-developer
ebecerra-developerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

admin-panel

Provision and extend multi-tenant admin panels backed by a centralized SaaS authentication backend.

Updated Mar 6, 2026
Search Tags:#authentication#multi-tenant#supabase#next.js#design tokens#admin panel#provisioning
One-click install
npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill admin-panel-ebecerra-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: admin-panel
Source: https://github.com/ebecerra-developer/ebecerra-web/tree/main/.claude/skills/admin-panel
Command: npx skills add https://github.com/ebecerra-developer/ebecerra-web --skill admin-panel-ebecerra-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ebecerra/client-admin-sdk.

What problem does it solve? Setting up a branded admin panel for each new client normally means rebuilding authentication, layout, theming, and module wiring from scratch. This Skill codifies a reusable, config-zero admin architecture so a new tenant's panel is provisioned with only a brand-bridge CSS file and a modules registry. ## Core Features & Use Cases - New tenant provisioning: Step-by-step checklist for installing the client-admin SDK, writing brand-bridge.css, creating AuthShell and modules.ts, setting Vercel env vars, and whitelisting operators in the app_admins table. - Module extension: A repeatable pattern for adding modules (e.g., bookings) via a page wrapped in AuthShell plus an entry in the MODULES registry and optional proxy API handlers. - Brand token mapping: Defines the four critical layering variables (--admin-surface, --admin-bg, --admin-surface-2, --admin-bg-deep) plus text, border, and CTA tokens, with a visual smoke test and a list of vetoed anti-patterns (no gradients, no rounded active nav buttons). - Use Case: A new client signs up; you insert their tenant_branding row, copy the SDK, map their brand palette to the admin tokens, and their panel at /admin is live with magic-link auth against admin.ebecerra.es. ## Quick Start Provision an admin panel for a new client by following the tenant provisioning checklist, starting with the tenant_branding seed row and the brand-bridge.css token mapping.

Frequently Asked Questions about admin-panel

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

FAQPage Schema
How do I provision an admin panel for a new client tenant?▼

Insert the tenant's row in tenant_branding with palette and fonts, copy or install the client-admin SDK, create brand-bridge.css mapping brand tokens to --admin-* variables, add modules.ts and AuthShell, set ADMIN_API_URL and SESSION_SECRET env vars, and whitelist the operator in app_admins.

How do I add a new module to an existing admin panel?▼

Create app/admin/<module>/page.tsx wrapped in AuthShell with the activeModule prop, then add an entry to the MODULES array in modules.ts. If the module needs a backend, add API handlers using buildAdminProxyHandler from the SDK.

Why does the social generator preview show the wrong default colors?▼

The tenant is missing its row in the tenant_branding table, so the preview falls back to the default green palette. Insert a tenant_branding row with the client's bg, fg, primary_color, accent, monogram, and fonts to fix it.

Can one admin panel serve multiple tenants on the same domain?▼

Yes. Move routes to /admin/[slug]/, scope the session cookie path to /admin/<slug>, and convert brand and modules into per-slug factory functions. The apps/demos directory contains the complete reference pattern.

What styling rules does the admin panel enforce?▼

The design uses four progressive tonal layers from surface to bg-deep, no gradients anywhere, active nav shown as colored text with a 2px underline rather than a rounded button, and cards lighter than the main background so they appear to float.

Related Skills

Explore More Software Engineering Skills→
SalesforceCommerceCloudSalesforceCommerceCloud
51

b2c-scapi-admin

Obtain Account Manager OAuth tokens and call SCAPI Admin endpoints.

Official
Intermediate
kiurakkukiurakku
15

dashboard-build

Design Grafana monitoring and analytics dashboards with PromQL panels, KPI layouts, and metric selection.

Community
Intermediate
aramark-destinationsaramark-destinations

create-brand-tokens

Create or update a tokens.css file with only brand tokens differing from root defaults.

Official
Advanced
AYin-ZAYin-Z
1

http-api-cloudbase

Call CloudBase platform features via raw HTTP APIs without SDKs.

Community
Advanced