# Ak Elementor Studio

> >

- **Type:** Skill
- **Install:** `agentstack add skill-abanoubkhaliil-ak-elementor-studio-ak-elementor-studio`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [abanoubkhaliil](https://agentstack.voostack.com/s/abanoubkhaliil)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [abanoubkhaliil](https://github.com/abanoubkhaliil)
- **Source:** https://github.com/abanoubkhaliil/Ak-Elementor-Studio
- **Website:** https://akstudio.me

## Install

```sh
agentstack add skill-abanoubkhaliil-ak-elementor-studio-ak-elementor-studio
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# AK Elementor Studio
### by [Abanoub Khalil](https://akstudio.me) — Senior WordPress & Webflow Developer

---

## RULE #1 — THE MOST IMPORTANT RULE IN THIS SKILL

```
HTML WIDGET = JAVASCRIPT  TAGS ONLY.

The html widget has exactly one valid use:
  → Embedding a  tag for JavaScript behavior

That is ALL. Nothing else ever goes in the html widget.
Not headings. Not text. Not badges. Not nav links.
Not cards. Not layouts. Not pricing. Not timelines.
Not icons. Not stats. Not ANY visual content.

Every visual element has a native Elementor widget. Use it.
```

---

## RULE #2 — ABSOLUTE JSON RULES

```
1. NO COMMENTS — /* */ and // both break JSON parsing
   ❌ { /* hero */ "id": "a1b2c3d4" }    ✅ { "id": "a1b2c3d4" }

2. NO TRAILING COMMAS
   ❌ { "a": 1, "b": 2, }               ✅ { "a": 1, "b": 2 }

3. IDs = UNIQUE 8-CHAR HEX ONLY
   ❌ "id": "hero_section"              ✅ "id": "a1b2c3d4"

4. EVERY ELEMENT MUST HAVE "elements": []
   ❌ { "widgetType": "heading", "settings": {} }
   ✅ { "widgetType": "heading", "settings": {}, "elements": [] }

5. isInner RULE
   Direct children of "content": []        → "isInner": false
   Containers nested inside containers      → "isInner": true
   Widgets (inside any container)           → "isInner": false

6. HEX COLORS ONLY — never color names
   ❌ "background_color": "white"       ✅ "background_color": "#FFFFFF"
```

---

## STEP 0 — Pre-Flight Interview

Ask all in ONE message. Never skip.

```
👋 Quick details before I start:

1. SITEMAP — Pages? (I generate one .json per page)

2. ELEMENTOR VERSION — Free or Pro?
   Pro: Theme Builder header/footer, custom CSS, sticky, scroll effects
   Free: header/footer = regular sections inside each page

3. CUSTOM POST TYPES — Any CPTs?
   (Services, Portfolio, Plugins, Team, Testimonials → I'll generate ACF JSON)

4. OUTPUT FORMAT
   a) Individual .json files — import one-by-one via Templates → Saved Templates (always works, Free + Pro)
   b) Elementor native export ZIP — import via Elementor → Tools → Import Kit (no extra plugin needed)
   c) Envato Template Kit ZIP — requires "Template Kit Import" plugin installed on WordPress
   d) Individual .json + ACF field group files

5. BRAND — Hex color codes + Google Fonts?
   (Or I extract from the design)
```

---

## STEP 1 — Input Detection

| Input | Pipeline |
|---|---|
| HTML/CSS/JS | Code Pipeline |
| PNG/JPG/WebP/screenshot/mockup/Figma | Visual Pipeline |
| PDF | PDF Pipeline |
| Words only | Description Pipeline |
| Existing Elementor JSON | Edit Pipeline |
| Mixed | Both pipelines, merged |

---

## COMPLETE WIDGET REFERENCE — Native Widgets for Every Element

### Text & Numbers
| Element | Widget |
|---|---|
| h1 / h2 / h3 / h4 / h5 / h6 | `heading` |
| Paragraph / body text | `text-editor` |
| Animated counter (500+, 10K) | `counter` |
| Progress / skill bar | `progress` |

### Actions
| Element | Widget |
|---|---|
| Button / CTA / link-as-button | `button` |
| FAQ / collapsible rows | `accordion` |
| Tab navigation | `tabs` |
| Alert / info banner | `alert` |

### Media
| Element | Widget |
|---|---|
| Photo / image | `image` |
| YouTube / Vimeo / video | `video` |
| Image grid | `image-gallery` |
| Image slider / carousel | `image-carousel` |

### Cards & Lists
| Element | Widget |
|---|---|
| Icon + title + description | `icon-box` |
| Bulleted list with icons | `icon-list` |
| Photo + title + text | `image-box` |
| Customer quote | `testimonial` |

### Layout Helpers
| Element | Widget |
|---|---|
| Horizontal line / separator | `divider` |
| Vertical blank space | `spacer` |

### Utilities
| Element | Widget |
|---|---|
| Social media icons | `social-icons` |
| Map embed | `google-maps` |
| Plugin/form shortcode | `shortcode` |

---

## SOLVING COMPLEX ELEMENTS WITHOUT html WIDGET

### Navigation Bar
```
Structure: flex container (row, space-between)
  └── image widget          ← logo
  └── icon-list widget      ← nav links (set icon to "none", each item = a page link)
      OR multiple button widgets (size: xs, style: link/ghost, one per nav item)
  └── button widget         ← CTA button
```

### Badge / Status Pill / Tag
```
Option A: button widget
  text: "FULL-TIME", size: "xs", border_radius: 100px
  button_text_color: "#00D4C8", button_background_color: "rgba(0,212,200,0.1)"
  no link href (or link to "#")

Option B: alert widget
  type: "success" / "info" / "warning"
  alert_title: "WordPress Developer"
  (style with custom CSS if Pro)
```

### Career Timeline / Work History Entry
```
Structure: inner container (column, border-left: 2px solid accent)
  └── inner container (row, gap: 8px)   ← date + status row
      └── text-editor widget            ← "OCT 2024 — PRESENT"
      └── button widget (xs, pill)      ← "FULL-TIME" badge
  └── heading widget (h3/h4)            ← "Senior WordPress & Webflow Developer"
  └── text-editor widget                ← "InVitro Capital — Cairo, Egypt"
  └── text-editor widget                ← description paragraph
  └── inner container (row, wrap)       ← tech tags row
      └── button widget (xs, ghost)     ← "WordPress"
      └── button widget (xs, ghost)     ← "Webflow"
      └── button widget (xs, ghost)     ← "CMS"
```

### Contact Info Panel
```
Structure: styled container (background: #141628, border-radius: 12px, padding: 32px)
  └── inner container (row) per info row:
      └── text-editor widget    ← label "LOCATION" (small, muted)
      └── text-editor widget    ← value "Cairo, Egypt"
  └── inner container (row) per clickable row:
      └── text-editor widget    ← label "EMAIL"
      └── button widget         ← "hello@akstudio.me" (style: link, href: mailto:)
  └── alert widget              ← "Currently available" status
  └── button widget             ← "Book a discovery call" CTA
```

### Skill Depth / Progress Bars
```
Structure: container (column)
  └── text-editor widget   ← "SKILL DEPTH" heading
  └── per skill: inner container (row)
      └── text-editor     ← "WP" label
      └── progress widget ← percent: 95, type: line, bar_color: accent
      └── text-editor     ← "Expert" label
```

### Pricing Card
```
Structure: inner container (column, background: #141628, border-radius: 12px, padding: 40px)
  └── text-editor widget    ← plan tier label
  └── heading widget (h2)   ← "$99" price
  └── text-editor widget    ← "/month" period
  └── divider widget
  └── icon-list widget      ← feature list (checkmark icons)
  └── button widget         ← "Get Started" CTA (full width)
```

### Testimonial Card
```
Use testimonial widget (handles everything natively):
  image: avatar URL, name: "Client Name", title: "CEO, Company"
  content: "Quote text here"

OR custom layout:
  inner container (column)
    └── icon-list widget (1 item, star icon × 5)  ← star rating
    └── text-editor widget                         ← quote text
    └── inner container (row)
        └── image widget (border-radius: 50%)      ← avatar
        └── inner container (column)
            └── heading widget (h5)                ← name
            └── text-editor widget                 ← title/company
```

### Logo Cloud / Partner Logos
```
Use image-carousel widget:
  slides: [logo1, logo2, logo3, logo4, logo5]
  slides_to_show: 5, autoplay: yes, navigation: none
  image_size: medium
```

### Footer Column Structure
```
Column 1 (brand col):
  └── image widget          ← logo
  └── text-editor widget    ← tagline
  └── social-icons widget   ← LinkedIn, GitHub, Twitter

Columns 2-4 (link cols):
  └── heading widget (h5)   ← "Quick Links" / "Services" / "Contact"
  └── icon-list widget      ← links (icon: none or arrow, one per link)

Bottom bar:
  └── container (row, space-between)
      └── text-editor       ← "© 2025 Abanoub Khalil"
      └── text-editor       ← privacy / terms links (inline  tags)
```

---

## Code Pipeline

### Step 1 — Inventory
For every element: name it, declare its native widget, explain why. If you considered html widget, apply the JS-only self-check first.

### Step 2 — Widget Assignment
Zero visual content in html widget. Apply the Complete Widget Reference above.

### Step 3 — CSS Extraction
Map CSS → Elementor settings (`references/style-map.md`). CSS variables → resolve to hex.

### Step 4 — JSON Build
Section by section. Validate as you write.

### Step 5 — Output
One `.json` per page. No comments. All IDs unique 8-char hex.

---

## Visual Pipeline

### Phase 1 — Inventory (top to bottom)

```
NAVBAR:
  Logo: [position / type: image or text]
  Nav links: [list each] → icon-list items OR button widgets
  CTA button(s): [text / color hex]
  Background: [#HEX or transparent]

HERO:
  BG: [solid #HEX / gradient #X→#Y Ndeg / image overlay / video]
  Layout: [centered / text-left+image-right]
  Min-height: [100vh / fixed px]
  Elements:
    [badge?] → alert widget or button widget (xs, pill)
    [h1] → heading widget
    [h3/subtitle] → heading widget
    [description] → text-editor widget
    [CTA buttons] → button widgets
    [image] → image widget

SECTION N:
  Purpose: [features / stats / about / timeline / contact panel / testimonials / CTA]
  Layout: [1-col / 2-col / 3-col / 4-col]
  Background: [#HEX]
  Per column: list native widget for each element

FOOTER: [N columns, content per column]
```

### Phase 2 — Colors
Extract hex for: primary, secondary, accent, heading text, body text, muted, light bg, dark bg, card bg, border.
→ Full reference table in `references/visual-analysis.md`

### Phase 3 — Typography
Heading font, body font, label font — family, weight, desktop/tablet/mobile sizes.

### Phase 4 — Layout Mapping
Use container grid in `references/section-patterns.md`.

### Phase 5 — Widget Assignment
Apply Complete Widget Reference. Zero html widgets for visual content.

### Phase 6 — Spacing
Section pad: 60-80px standard, 100-120px hero. Card pad: 24-32px. Gap: 20-30px.

### Phase 7 — Analysis Summary + JSON

```markdown
## 🔍 Visual Analysis — [Page]

**Pages detected:** [list]
**Style:** [Dark/Light/Bold/Minimal]

| Token | Value |
|---|---|
| Primary | #______ |
| Accent | #______ |
| Heading text | #______ |
| Body text | #______ |
| Background | #______ |
| Heading font | Inter 700 |

**Widget map:**
1. Navbar → image + icon-list + button
2. Hero → alert (badge) + heading + text-editor + button + image
3. Stats → N× counter widgets
4. Timeline → N× [text-editor + button (badge) + heading + text-editor + button row] per entry
5. Contact panel → styled container + text-editor rows + button links + alert + button
6. Footer → image + text-editor + social-icons + icon-list columns

**html widgets used:** [List ONLY  JS uses. If none: "None."]

**Assumptions:** [list all approximations]
**⚠️ After import:** replace placeholder images, update nav links
```

---

## PDF Pipeline
Single PDF → Visual Pipeline. Multi-page → one template per page. Selectable text → extract exact copy.

## Description Pipeline
Ask page type. Apply Widget Reference. Use defaults: primary `#1A1A2E`, accent `#005AFF`, font `Inter`.

## Edit Pipeline
Parse → locate → change → re-output full valid JSON → summarize.

---

## Core Schemas

### Section Container
```json
{
  "id": "a1b2c3d4",
  "elType": "container",
  "isInner": false,
  "settings": {
    "content_width": "full",
    "flex_direction": "column",
    "flex_align_items": "center",
    "flex_justify_content": "flex-start",
    "flex_gap": { "unit": "px", "column": "30", "row": "30", "isLinked": true },
    "padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false },
    "padding_tablet": { "unit": "px", "top": "50", "right": "30", "bottom": "50", "left": "30", "isLinked": false },
    "padding_mobile": { "unit": "px", "top": "40", "right": "20", "bottom": "40", "left": "20", "isLinked": false },
    "background_background": "classic",
    "background_color": "#FFFFFF"
  },
  "elements": []
}
```

### Inner Container (column)
```json
{
  "id": "b2c3d4e5",
  "elType": "container",
  "isInner": true,
  "settings": {
    "width": { "unit": "%", "size": 50 },
    "width_tablet": { "unit": "%", "size": 100 },
    "width_mobile": { "unit": "%", "size": 100 },
    "flex_direction": "column",
    "flex_align_items": "flex-start",
    "padding": { "unit": "px", "top": "20", "right": "20", "bottom": "20", "left": "20", "isLinked": true }
  },
  "elements": []
}
```

### Widget
```json
{
  "id": "c3d4e5f6",
  "elType": "widget",
  "widgetType": "heading",
  "isInner": false,
  "settings": {},
  "elements": []
}
```

---

## CSS → Elementor (Quick Reference)
Full table in `references/style-map.md`.

```json
"padding": { "unit": "px", "top": "80", "right": "60", "bottom": "80", "left": "60", "isLinked": false }
"_padding": { "unit": "px", "top": "0", "right": "0", "bottom": "20", "left": "0", "isLinked": false }
"_margin": { "unit": "px", "top": "0", "right": "auto", "bottom": "30", "left": "auto", "isLinked": false }
"typography_typography": "custom", "typography_font_family": "Inter",
"typography_font_size": { "unit": "px", "size": 48 },
"typography_font_size_tablet": { "unit": "px", "size": 36 },
"typography_font_size_mobile": { "unit": "px", "size": 24 },
"typography_font_weight": "700",
"typography_line_height": { "unit": "em", "size": 1.3 },
"typography_letter_spacing": { "unit": "px", "size": -0.5 }
"background_background": "gradient", "background_gradient_type": "linear",
"background_color": "#005AFF", "background_color_b": "#0040CC",
"background_gradient_angle": { "unit": "deg", "size": 135 }
"border_border": "solid",
"border_width": { "unit": "px", "top": "1", "right": "1", "bottom": "1", "left": "1", "isLinked": true },
"border_color": "#E5E7EB",
"border_radius": { "unit": "px", "top": "12", "right": "12", "bottom": "12", "left": "12", "isLinked": true }
"box_shadow_box_shadow_type": "yes",
"box_shadow_box_shadow": { "horizontal": 0, "vertical": 4, "blur": 24, "spread": 0, "color": "rgba(0,0,0,0.08)" }
```

---

## Responsive
```json
"width": { "unit": "%", "size": 33 },
"width_tablet": { "unit": "%", "size": 50 },
"width_mobile": { "unit": "%", "size": 100 }
```

---

## Multi-Page Output
1. One `.json` per page
2. Elementor Pro → `header.json` + `footer.json` (type: `"header"` / `"footer"`)
3. Elementor Free → header/footer as regular container sections inside each page

---

## ✅ Import Methods — Tested & Verified

⚠️ CRITICAL: Three completely different ZIP formats exist. Using the wrong one causes
"Couldn't use the .zip file" in Elementor's importer. Match the format to the method.

---

### Method 1 — Individual .json per template (ALWAYS WORKS — Free + Pro)
```
Recommended default. No plugins required. Works on any Elementor version.

Steps:
  1. Elementor → Templates → Saved Templates → Import Templates (↑ icon)
  2. Upload one .json file at a time → Import Now
  3. Repeat for each page (global-styles first, then header/footer, then pages)
  4. Create a WordPress page → Edit with Elementor
     → folder icon (My Templates) → find template → Insert

Each .json file envelope format (single template):
{
  "version": "0.4",
  "title": "Page Name",
  "type": "page",          ← "page" | "header" | "footer" | "kit-styles"
  "content": [...],        ← the elements array from your page JSON
  "page_settings": {},
  "settings": {}
}
```

---

### Method 2 — Elementor Native Export ZIP (no extra plugin needed)
```
Works via: Elementor → Tools → Import Kit
Does NOT require Template Kit Import plugin.
This is what Elementor exports natively when you use Tools → Export Kit.

⚠️ Do NOT confuse manifest.json with Envato's kit.json — they are different formats.

ZIP structure:
kit-export.zip
├── manifest.json                    ← required, exact format below
├── ak-header/
│   └── template.json
├── ak-footer/
│   └── template.json
├── ak-home/
│   └── template.json
└── ak-about/
    └── template.json                (one folder per template, folder name is arbitrary)

manifest.json format:
{
  "name": "Kit Name",
  "title": "Kit

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [abanoubkhaliil](https://github.com/abanoubkhaliil)
- **Source:** [abanoubkhaliil/Ak-Elementor-Studio](https://github.com/abanoubkhaliil/Ak-Elementor-Studio)
- **License:** MIT
- **Homepage:** https://akstudio.me

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-abanoubkhaliil-ak-elementor-studio-ak-elementor-studio
- Seller: https://agentstack.voostack.com/s/abanoubkhaliil
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.