From designer-agent
Quick search for Mekari Pixel components. Look up component documentation, check if a component exists, or find the right component for a use case. Triggers on: "pixel lookup", "find component", "search components", "show me pixel", "what components", "component docs", "is there a component for", "what widget for", or when the user wants to explore the Mekari Pixel design system.
How this skill is triggered — by the user, by Claude, or both
Slash command
/designer-agent:pixel-lookupThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Quick search and documentation lookup for Mekari Pixel components.
Quick search and documentation lookup for Mekari Pixel components.
Before proceeding, verify the Mekari Pixel MCP server is available by calling mekari_pixel_list_components().
If the MCP server is not available:
.mcp.json exists and has the mobile-pixel-mcp server configured<SECRET_TOKEN> or missing, ask the user:"The Mekari Pixel MCP server requires authentication. Please provide your API token so I can update
.mcp.json."
.mcp.json and inform the user to restart MCP with /mcp.Determine the query type:
| Query Pattern | Action |
|---|---|
Starts with Mp or looks like a component name | mekari_pixel_get(name: "<name>") |
| "list all", "show all", "all components", category name | mekari_pixel_list_components() |
| Use case description | mekari_pixel_query(query: "<user query>", n_results: 10) |
For component name lookup:
mekari_pixel_get(name: "MpButton")
Returns full documentation including constructor, parameters, variants.
For listing all components:
mekari_pixel_list_components()
Returns list of all components with kind, name, library, file_name.
For semantic search:
mekari_pixel_query(query: "notification banner that shows success messages", n_results: 5)
Returns ranked results with similarity scores.
For each component found, display:
## <ComponentName>
- **Kind**: class / enum / mixin
- **Tier**: Atom / Component / Template / Page
- **Library**: mekari_pixel / mekari_pixel_icons / mekari_pixel_illustrations
- **File**: <file_name>
### Constructor
<constructor signature from MCP response>
### Key Parameters
<list of important parameters with types>
### Description
<description from MCP response>
### Variants
<list of variants/factories if applicable>
After presenting results:
/design-ui for that."User: "What button components are available?"
-> Call mekari_pixel_query(query: "button", n_results: 10)
-> Display MpButton (primary/secondary/tertiary/ghost/danger), MpButtonIcon, MpIconButton, MpFloatingActionButton
User: "MpToast"
-> Call mekari_pixel_get(name: "MpToast")
-> Display full docs including all variants (done/error/greetings/information/warning)
User: "Show me all atoms"
-> Call mekari_pixel_list_components()
-> Filter and display components where tier = Atom
User: "What component should I use for a date range picker?"
-> Call mekari_pixel_query(query: "date range picker", n_results: 5)
-> Display MpDatePickerField, MpDatePickerRangeField, MpDatePicker with recommendations
User: "Is there a card component?"
-> Call mekari_pixel_query(query: "card", n_results: 5)
-> Report: No dedicated MpCard exists. Recommend using Flutter's Card widget styled with MpRadius.large + MpElevations.xs + MpColors.bg.surface
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub iqbal-mekari/claude-plugins --plugin designer-agent