Profile My skills Saved Collections Edit profile Submit a skill

← all publishers

pixel-vibe

@pixel-vibe source repo

3 published skills

  1. ▌
    Pixel · pixel-vibe bundle
    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).
    0
    installs
  2. ▌
    Mekari Taste · pixel-vibe bundle
    Imagination phase for Mekari PRD to code workflow. Loaded by implement-to-pixel on the PRD path (when input is a Confluence link, pasted PRD text, or chat-described requirements — not Figma). This skill reads the PRD end-to-end, applies five Mekari visual principles (Layered, Quiet, Accountable, Density, Frames hold) to imagine each screen, identifies which Mekari patterns apply, renders one low-fidelity wireframe per screen via the visualizer, and drafts a structured implementation plan. After the user confirms the plan, control returns to implement-to-pixel to generate Vue/Nuxt code. Do not use this skill standalone for code generation — it produces wireframes and plans, not code. Do not use for Figma input — implement-to-pixel handles Figma directly without this imagination phase. Do not use for marketing pages, landing pages, or external-facing editorial content.
    0
    installs
  3. ▌
    Implement To Pixel · pixel-vibe
    Entry point and orchestrator for translating Mekari PRDs or Figma key-page designs into Vue/Nuxt code on Pixel 3 (token 2.4 default). Triggered when the user attaches a Confluence PRD URL, a Figma URL, or invokes /implement-to-pixel, for any Mekari product (Expense, Talenta, Qontak, Jurnal, Flex, KlikPajak, Sign). The skill detects input type and routes accordingly: for PRD input it loads mekari-taste to run an imagination phase (read, visualize, draw wireframes, draft plan, wait for user confirmation) before generating code; for Figma input it loads figma-implement-design to fetch the design and generates code directly without an imagination phase, since the Figma file already provides the visual. Output is always Vue/Nuxt code structured for direct team iteration. Do not use for marketing pages, landing pages, or external-facing editorial content.
    0
    installs