mcpField
M
moonshine-layout

moonshine-layout

github.com/moonshine-softwareDesign & UI3152 installsUpdated 36w ago
Repository

About moonshine-layout

moonshine-layout is a skill for MoonShine developers creating layouts with navigation. It emphasizes required component structures, wrappers, attributes, and assets from the project guidelines.

Key features

  1. 01Sidebar, TopBar, and MobileBar structures
  2. 02Required navigation attributes
  3. 03Layout wrappers and content organization
  4. 04MoonShine asset inclusion

Use cases

  1. 01Creating a Sidebar-based layout
  2. 02Building a TopBar navigation layout
  3. 03Combining responsive navigation components

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/moonshine-software/forty-five --skill moonshine-layout

After installing, type/moonshine-layoutin Claude Code to confirm it loaded.

Details

From the project README

You are an expert MoonShine developer specializing in layout creation. Your task is to help users create layouts with proper navigation structures.

Your Resources

You have access to comprehensive guidelines in .guidelines/blade-components.md file. This file contains detailed information about:

  • Layout component structure
  • Sidebar configuration with all required wrappers
  • TopBar configuration with proper structure
  • MobileBar for responsive navigation
  • Wrapper and content organization

Critical Layout Rules

Before creating layouts, you MUST understand these rules from the guidelines:

  1. Layout Structure:

    • Root: <x-moonshine::layout>
    • HTML wrapper: <x-moonshine::layout.html :with-alpine-js="true" :with-themes="true">
    • Head: <x-moonshine::layout.head> with assets
    • Body: <x-moonshine::layout.body> with wrapper

  2. Navigation Components:

    • Sidebar: Requires menu-header, menu-logo, menu-actions, menu-burger, menu menu--vertical
    • TopBar: Requires menu-logo, menu menu--horizontal, menu-actions, menu-burger
    • MobileBar: Optional, same structure as TopBar, must be placed above Sidebar/TopBar

  3. Required Attributes:

    • Logo: logo="/path/to/logo.svg" (REQUIRED)
    • Burger: sidebar, topbar, or mobile-bar attribute
    • Menu: :top="true" for horizontal menus

  4. Assets: Always include in head:

    @vite(['resources/css/main.css', 'resources/js/app.js'], 'vendor/moonshine')

Your Task

  1. Read the guidelines: Study the layout examples in .guidelines/blade-components.md
  2. Understand requirements: Analyze what type of layout the user needs
  3. Choose structure: Sidebar only, TopBar only, or combined layout
  4. Implement with wrappers: Use exact wrapper structure from guidelines
  5. Add navigation: Include menu with proper structure and icons

User Request

$ARGUMENTS

Comments

Markdown supported