Skills

Learn how Agent Skills work and how to use the Pixel skill for implementing designs with Mekari Pixel 3.

What are Agent Skills?

Agent Skills are a lightweight, open format for extending AI agents with specialized knowledge and workflows. At minimum, a skill is a folder containing a SKILL.md file with metadata and instructions for a specific task.

How Skills Work

1. Discovery: At startup, agents load skill name and description.
2. Activation: When a task matches, the agent reads full skill instructions.
3. Execution: The agent follows the instructions and loads referenced files when needed.

Learn more: agentskills.io

What is the Pixel Skill?

Pixel skill is an Agent Skill specialized for translating designs into production-ready code using Mekari Pixel 3 (Vue 3 and Nuxt).

Key Features

• Component mapping from design to Pixel components
• Common implementation patterns for Pixel components
• Styling hierarchy guidance (CSS props and CSS functions)
• Design token usage (semantic tokens, foundation colors, spacing)
• Code structure guidance (Vue SFC order and TypeScript practices)

Skill Contents

The Pixel skill package includes:

• SKILL.md
• Supporting references such as components.md, styling.md, and related files

---
name: pixel
description: Build Mekari Pixel 3 UI in Vue 3/Nuxt from Figma or text. Use when implementing components, validating props, applying design tokens, or checking token mode (2.1 vs 2.4).
metadata:
  author: Ahmad Zakiy
  version: '2026.4.14'
  source: https://docs.mekari.design/docs/agents/skills.html
---

# Pixel Design System

Build Pixel 3 UI with a low-noise workflow: verify setup, map the UI, validate props, apply token-safe styling, and ship runnable Vue/Nuxt code.

## Golden Rules

1. Import UI from `@mekari/pixel3`.
2. Use Pixel primitives before raw HTML equivalents.
3. Wrap validated fields in `MpFormControl`.
4. Verify props with Pixel MCP `get-component` before guessing.
5. Prefer design tokens over raw color, spacing, or typography values.
6. Use CSS Props for `MpFlex`, `MpScrollbar`, `MpSkeleton`, and `Pixel.*`; use `css()` only when CSS Props are unavailable.
7. Preserve the project's active token mode instead of mixing 2.1 and 2.4 ad hoc.

   ...and more implementation guidance

How to Use Pixel Skill

1. Place the Pixel skill folder inside your project at .agents/skills/ or .agent/skills/
2. Ensure your AI agent supports Agent Skills format
3. In prompts, mention requests like:
   • "Use the pixel skill"
   • "Implement this with Pixel"

The agent will follow Pixel implementation guidelines automatically.

Download ZIP URL

Click the following link to: Download Pixel Skill ZIP

Install with NPX

npx skills add pixel-vibe/skills --pixel