skills.rest
zephyrwang6
zephyrwang6COMMUNITY
Explore all skills by this author →
GitHub

meridian

Create Meridian dashboard panels with glass-card styling and page.tsx registration.

14|4|Updated Mar 31, 2026
Search Tags:#claude code#navigation#dashboard#obsidian#nextjs#panel#meridian
One-click install
npx skills add https://github.com/zephyrwang6/allSkills --skill meridian-zephyrwang6
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: meridian
Source: https://github.com/zephyrwang6/allSkills/tree/main/meridian
Command: npx skills add https://github.com/zephyrwang6/allSkills --skill meridian-zephyrwang6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

这个 Skill 帮助你把 Meridian 仪表盘里的导航面板、分析面板和可视化模块按规范快速搭出来，避免在 Next.js 代码、注册路由和样式约束之间来回切换。

Core Features & Use Cases

  • 单面板创建：一次只生成一个新面板，并按要求注册到 page.tsx，避免批量误改。
  • Meridian 集成：围绕本地 Obsidian Vault、Claude Code 和 Meridian API 端点组织实现，适合做左侧导航、自定义内容区和分析模块。
  • 样式与数据规范：使用 glass-card、stat-value 等 Meridian CSS 类，并优先从本地文件系统或 API 动态读取数据。
  • Use Case：当你要为某个文件夹或功能区新增一个仪表盘面板时，它会指导你完成组件创建、路由接入和页面注册。

Quick Start

请根据当前 Meridian 项目需求，帮我创建一个新的单独面板并将它注册到 page.tsx。

Frequently Asked Questions about meridian

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

FAQPage Schema
How do I create a custom dashboard panel in a Next.js app using Obsidian vault data?▼

Yes, you can build Obsidian vault integrations for Next.js by reading local file-system data and connecting it through custom API routes. The Skill organizes implementation around local vault data and Meridian API endpoints to populate panel content dynamically.

What is the workflow for adding sidebar navigation to a Meridian dashboard?▼

Meridian dashboard panels require specific CSS classes such as glass-card and stat-value for proper styling. These styling constraints ensure visual consistency across custom panel components and sidebar navigation elements within the Next.js application.

Can I use Claude Code to automate Meridian dashboard panel generation?▼

Yes, you can use Claude Code to automate Meridian dashboard panel generation by prompting it to build a single custom panel component. It handles component creation, route integration, and page.tsx registration based on your project conventions.

Does building Meridian panels allow generating multiple components at once?▼

Building Meridian panels does not allow generating multiple components at once. The workflow strictly requires a one-panel-at-a-time approach, ensuring each custom component is individually registered in page.tsx to avoid batch errors and maintain route integrity.

How do I register a new Meridian panel component in my Next.js application?▼

To register a new Meridian panel component in a Next.js application, you add it to the page.tsx file alongside its related API routes. This ensures the local file-system data flows correctly to the custom panel using the required glass-card styling.

Related Skills

Explore More Software Engineering Skills→
SpaceZephyrSpaceZephyr
333

meridian

Create Meridian dashboard panels and navigation components for Obsidian vault integrations.

Community
Intermediate
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
emptistemptist

create-slash-commands

Generate Claude Code slash commands configured with YAML and XML structures.

Community
Intermediate
AtlasRoXAtlasRoX

Dashboard Scaffold Skill

Generate a Next.js admin dashboard scaffold with Tailwind CSS and TypeScript.

Community
Intermediate