Claude Code Integration

Meno ships with a pre-configured .claude/ directory and a CLAUDE file so that Claude Code (the terminal-based AI coding tool) understands Meno project structure, node types, styling rules, and CMS conventions out of the box.

What Is Included

Every Meno project contains these files:

.claude/
  agents/
    meno-component-builder.md
    meno-page-editor.md
    meno-cms-developer.md
    meno-filter-expert.md
  commands/
    meno-docs.md
    add-node-type.md
  docs/meno/
    core.md
    components.md
    cms-schema.md
    list.md
    styling.md
    javascript.md
    embeds.md
    localization.md
    conditional.md
    libraries.md
    redirects.md
    meno-filter.md
    meno-filter-api.md
CLAUDE

Agents

Four specialized agents are available. Claude Code selects the right agent automatically based on your task, or you can request one explicitly.

Agent	What It Does
meno-component-builder	Creates and edits component JSON files. Handles props, interactive styles (hover/focus states), style mappings, and vanilla JavaScript behavior.
meno-page-editor	Edits page JSON files. Handles node structure, responsive styling, conditional rendering, embed nodes, and link nodes.
meno-cms-developer	Creates CMS collections, defines schemas with field types, builds template pages, and works with CMS item data and list nodes.
meno-filter-expert	Implements client-side filtering, sorting, search, and pagination using MenoFilter data attributes and the JavaScript API.

Slash Commands

/meno-docs [topic]

Loads Meno documentation for a specific topic into the conversation context. You can also load multiple topics at once with commas (e.g., /meno-docs components,styling).

Topic	Description	Aliases
`core`	Essential editing rules, node types, style objects
`components`	Component interfaces, props, slots, structure
`cms-schema`	CMS collections, field types, URL patterns	`cms`
`list`	List node iteration (prop-based and CMS)
`styling`	Interactive styles, hover/focus states	`styles`
`javascript`	defineVars, vanilla JS, component communication	`js`
`embeds`	Raw HTML/SVG content injection
`localization`	Locale list for language switching
`conditional`	Conditional rendering with the if property
`libraries`	External scripts and CSP configuration
`redirects`	URL redirects for static hosting
`meno-filter`	Client-side filtering with data attributes	`filter`
`meno-filter-api`	MenoFilter JavaScript API for programmatic control	`filter-api`

/add-node-type

Scaffolds a new node type in the Meno core codebase. This is for contributors working on the editor itself, not for end-user projects.

Example Workflows

Here are practical examples of using Claude Code with a Meno project:

Create a component:

> Create a Testimonial component with name (string), quote (rich-text),
  avatar (file), and role (string) props. Add hover styles that lift the card.

Set up a CMS blog:

> Set up a blog CMS collection with title, slug, date, excerpt, content,
  and category fields. Create the template page and a listing page at /blog.

Add filtering to a listing page:

> Add category filter buttons and a search input to the blog listing page.
  Include pagination with 6 posts per page.

Style elements with interactive states:

> /meno-docs styling
> Add a hover effect to all cards on the homepage -- scale up slightly
  and add a subtle shadow transition.

CLAUDE

The CLAUDE file at the project root is read automatically by Claude Code at the start of every session. It contains:

Project structure overview
Node text content rules (use children, not text)
Image attribute patterns
Component interface prop types (string, number, boolean, select, link, file, rich-text)
Common mistakes to avoid (no image type -- use file with accept)
JSON strictness requirements (no trailing commas, no comments)

This ensures Claude Code follows Meno conventions without needing extra prompting.

Next Steps

AI Assistant -- the built-in chat panel in the editor
Building Components -- create reusable components
CMS -- manage dynamic content with collections
MenoFilter -- client-side filtering and sorting