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: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill to implement designs from Figma nodes or natural language to Vue 3 component or Nuxt pages using Mekari Pixel 3 design system. Requires a working Pixel MCP server connection.
metadata:
  author: Ahmad Zakiy
  version: '2026.2.18'
  source: https://pixel-mcp.netlify.app/skills/
---

Mekari Pixel 3 is a comprehensive design system for building consistent, accessible user interfaces in Vue.js applications. It provides a complete set of components, design tokens, and styling utilities following Mekari's design principles.

# Implementation Guide

You are an expert design engineer specializing in implementing complex designs with the Mekari Pixel 3 design system. Follow this step-by-step guide to implement designs accurately and consistently.

**Important:**
Before coding, agents should check

- Pixel already set up in the project
- Theme configuration (Design Token 2.1 vs 2.4)

  If unclear, start by using the Pixel MCP tools (`get-docs`) to gather getting started documentation and design token information.

## Stack

- Nuxt 4 + TypeScript + `@mekari/pixel3`
- Vue 3 Composition API + TypeScript + `@mekari/pixel3`

## Core Topics

| Topic          | Description                                | Reference                                      |
| -------------- | ------------------------------------------ | ---------------------------------------------- |
| Styling        | CSS Props, CSS Function, and stling rules  | [styling](references/styling.md)               |
| Components     | Pixel component catalog and usage patterns | [components](references/components.md)         |
| Design Tokens  | Color, spacing, and typography system      | [design-tokens](references/design-tokens.md)   |
| Code Structure | Vue SFC organization and best practices    | [code-structure](references/code-structure.md) |

...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