Ai

Agent Skills

Install the EletroDS Agent Skill to help AI assistants build Mercado Eletrônico UIs with @mercadoeletronico/eds-next.

Install the EletroDS Agent Skill to help AI assistants choose the right Me* components, compose app shells, and follow Mercado Eletrônico conventions when building with @mercadoeletronico/eds-next.

About Agent Skills

Agent Skills are reusable instruction packages that teach AI assistants how to work with a specific library or workflow. Unlike MCP, which provides live documentation lookups, skills encode design decisions, composition patterns, and conventions that help the model pick the right building blocks before writing code.

When a skill is installed, the AI can load targeted reference files based on the task — for example, choosing inputs vs filters, composing a list page, or wiring a login flow — without loading the entire documentation set.

How Skills Work

When an Agent Skill is available to an AI tool, the model can use it during response generation:

  • The AI reads the skill's routing table to decide which reference files are relevant to the current task.
  • The AI applies core rules (naming, imports, i18n, tree-shaking) consistently across the session.
  • The AI defers API details (props, slots, events) to the EletroDS MCP server when needed.

For example, if a user asks to build a list page with filters and a header, the AI can load the app-shell and data-views references, use MeLayout and MeListView correctly, and call MCP only when it needs exact prop definitions.

EletroDS Skill

The eds-next skill lives in the repository at skills/eds-next/ and covers:

AreaWhat it provides
GuidelinesWhen to use Me* vs Nuxt UI primitives, field inputs, and library conventions
LayoutsApp shell patterns with MeLayout, MeHeader, and page structure
RecipesData views, navigation, auth, and filter criteria patterns
CatalogIndex of all Me* pieces by capability
Skills + MCP: Use the skill for when and how to compose EletroDS pieces. Use the MCP server for what each component accepts — props, slots, events, and full documentation pages.

Setup

Install the skill from the GitLab repository using the skills CLI.

Cursor

Terminal
npx skills add https://gitlab.miisy.me/frontend/eds-next.git

Or manually copy skills/eds-next/ from the repository to .cursor/skills/eds-next/ in your project, or add the repository URL in Settings → Skills.

Claude Code

Install globally for all projects:

Terminal
npx skills add https://gitlab.miisy.me/frontend/eds-next.git --global --agent claude-code

Other Agents

The npx skills add command supports multiple AI assistants. Run without --agent to see available options.

Usage Example

Once installed, you can ask your AI assistant to build EletroDS screens and it will follow the skill's routing table:

Example prompt: "Create a list page with a header, filter criteria, and a data table using EletroDS."The AI will load the app-shell, navigation, filters, and data-views references, compose MeLayout with the correct slots, and call MCP get-component when it needs exact API details for MeTableView or MeCriterionInput.

Next Steps

MCP Server

Connect your AI tools to live EletroDS documentation for props, slots, and events.

LLMs Integration

Generate AI-ready content files using the Nuxt LLMs module.

Components

Explore all available EletroDS components.