skills.rest
Mord0reK
Mord0reKCOMMUNITY
Explore all skills by this author →
GitHub

panel-frontend

Coordinate a dark-mode Next.js UI stack with Tailwind and Shadcn UI.

Updated Aug 23, 2026
Search Tags:#frontend#nextjs#playwright#tailwind#shadcn#dark-mode#ui-patterns
One-click install
npx skills add https://github.com/Mord0reK/panel --skill panel-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: panel-frontend
Source: https://github.com/Mord0reK/panel/tree/main/.claude/skills/panel-frontend
Command: npx skills add https://github.com/Mord0reK/panel --skill panel-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies a dark-mode-first Next.js UI stack with Tailwind 4 and Shadcn UI, enforcing standardized design rules and data normalization practices across the frontend.

Core Features & Use Cases

  • Dark Mode Always On: HTML root has dark mode enforced and styling tokens consistently applied across components.
  • Standard UI Stack: Next.js 16 App Router, TypeScript 5, Tailwind 4, Shadcn UI, Lucide icons, and ECharts for metrics visualization.
  • Data Normalization Rules: Clear guidance for PascalCase to camelCase normalization in data handling and test verification with Playwright.
  • Reusable Architecture: Structured folders for app, auth, api, components, hooks, and tests to support scalable frontends.

Quick Start

Start the frontend with the standardized UI workflow to explore the panel frontend module.

Frequently Asked Questions about panel-frontend

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

FAQPage Schema
How do I enforce a dark-mode-only UI in a Next.js and Tailwind application?▼

To enforce dark-mode UI in Next.js, you apply a fixed dark class to the HTML root and consistently map Tailwind styling tokens across Shadcn UI components for standardized visual output.

What is the best way to normalize PascalCase API responses to camelCase in Next.js frontends?▼

Normalizing PascalCase API responses to camelCase in Next.js frontends requires applying standardized data normalization rules during data handling to ensure consistent property mapping across UI components.

How do I structure a Next.js App Router project for scalable dashboards and metrics?▼

Structuring a scalable Next.js App Router project involves organizing folders specifically for app routes, authentication, API proxies, reusable UI components, hooks, and Playwright tests.

Does this frontend tooling stack support ECharts for metrics visualization?▼

Yes, the frontend tooling stack supports ECharts for metrics visualization alongside Shadcn UI and Lucide icons to render interactive dashboard data within a TypeScript environment.

How do I verify UI components and data normalization with Playwright in a Next.js stack?▼

Verifying UI components and data normalization with Playwright involves writing test cases that check standardized design patterns and camelCase data outputs against expected dashboard behaviors.

Can I use Shadcn UI with Tailwind 4 for a standardized design system?▼

Yes, you can use Shadcn UI with Tailwind 4 to enforce standardized design rules, ensuring consistent component styling and dark-mode-first aesthetics across the frontend application.

Related Skills

Explore More Software Engineering Skills→
shazilk-devshazilk-dev

nextjs-frontend

Generate a Next.js 16 frontend scaffold with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
Alif-NAlif-N

create-tests

Generate Playwright E2E and Vitest unit tests for DaaS features and API routes.

Community
Advanced
MesferAliMesferAli

atlas-ui

Provide guidance on Atlas UI components, theming, forms, and data display.

Community
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate