Skip to main content

Introducing Mosaic Agent Skills

· 3 min read
Ruwan Xaviour Fernando
Ruwan Xaviour Fernando
Product Architect

We're excited to release Mosaic Agent Skills - AI-powered code generation for Mosaic development, delivered as an MCP (Model Context Protocol) server (@axinom/mosaic-agent-skills). It generates production-ready code from simple prompts, working with Claude Code, GitHub Copilot, and other MCP-enabled AI agents.

From Hours to Minutes​

Mosaic's comprehensive architecture ensures consistency and quality across your application - but following all the conventions and patterns can be time-consuming. What typically takes hours of careful implementation can now be done in minutes with simple prompts like:

using the mosaic-agent-skills, generate an explorer station for the entity AudioBook.

The AI agent discovers your project structure, analyzes your GraphQL schema, and generates production-ready code following Mosaic best practices - automatically.

Key Design Decisions​

AI Agent Agnostic - Built on the Model Context Protocol (MCP), these skills work with Claude Code, GitHub Copilot, and other MCP-enabled agents. Your team isn't locked into a specific vendor.

Self-Contained and Reliable - Each skill includes everything needed to generate consistent code: conventions, templates, and step-by-step workflows. We've implemented techniques to ensure reliable, repeatable outputs across different AI models.

Domain Agnostic - The skills discover your project structure and adapt to your GraphQL schema. As long as your project uses the Mosaic stack, they work without modification.

Learning by Example - Beyond automation, the skills serve as learning tools, demonstrating Mosaic patterns that developers can understand and apply manually when needed.

What's Available Now​

The initial release includes skills for frontend station generation:

  • Explorer Stations - Entity browsing with lists, filters, sorting, pagination, real-time updates, bulk-edit, and quick edit integration
  • Create Stations - Entity creation forms with validation
  • Details Stations - Comprehensive editing interfaces with update/delete actions, image/video management, and resource management

All generated code includes GraphQL operations, TypeScript components, form validation, route registration, breadcrumbs, and integration with existing stations.

Getting Started​

Configure the MCP server in your AI agent:

{
  "mcpServers": {
    "mosaic-agent-skills": {
      "type": "stdio",
      "command": "npx",
      "args": ["@axinom/mosaic-agent-skills"]
    }
  }
}

Then start generating stations with simple prompts. Check out our comprehensive documentation for setup instructions and usage examples.

Roadmap​

Planned additions:

  • More Skills - Backend generation, brownfield updates
  • Extensibility - Tools to create project-specific skills
  • Customizability - Adapt core skills to match your team's patterns

We're looking forward to seeing how teams use these skills. Share your feedback and help us shape the future of AI-assisted Mosaic development.

Resources: