soflyy/builder-kit
Teaches your agent how to build sites and complete WooCommerce stores with Oxygen 6 or Breakdance: pages, templates, dynamic data, shop and product pages, cart, checkout and account.
Core guidance for building or editing pages, sections, headers, footers and templates with the Oxygen 6 or Breakdance builder MCP tools - the preferred html-to-page build path, the design-system rules, editing versus building, interactions, animations, forms, reusable components, verification, and how to talk to the site owner. Load this for any work done through the builder's MCP tools.
Build reusable Oxygen 6 or Breakdance templates - single post, page and product layouts, archives and loops, site headers and footers - that render against live WordPress content and apply to the right places via template conditions, plus element display conditions and reusable components. Use when the user wants a layout reused across many posts ("design my blog post template", "build an archive for my Events", "create a site header/footer") rather than a one-off page.
The default workflow for building a new site, store or set of pages with Oxygen 6 or Breakdance - design the whole thing first as plain HTML and CSS files, review and iterate until they read as finished, then convert mocks to builder markers and push each page and template through html-to-page. Use when the user asks to build a new site, a new store, a redesign, or several new pages at once; not for editing an existing page (that is edit-post on the live tree).
Bind Oxygen 6 or Breakdance elements to live WordPress content - post titles, images, links, custom fields, product and term data - with bd-bind / bd-href / bd-src markers in html-to-page HTML or with [breakdance_dynamic ...] shortcodes in edit-post, including the companion _dynamic_meta object the builder needs. Use when building templates, loops, author boxes, or any element whose text, link or image should come from the database instead of being typed in.
Design and build custom mega menus and department navigation with the Oxygen 6 or Breakdance builder - Amazon-style "All" flyouts with a department list and subcategory pane, Walmart-style department dropdowns, full-width multi-column category panels with promo tiles, tabbed mega panels, and the matching mobile drawer - driven by live product categories through nested term loops, with hover, click, keyboard and touch behaviour handled. Use when the user says "mega menu", "department menu", "navigation like Amazon/Walmart/Target", "category dropdown", "flyout menu", "shop by department", or wants a header navigation richer than a row of links.
A Relume-style library of numbered, copy-ready layout patterns for the Oxygen 6 or Breakdance builder - navbars and mega menus, product page headers, the sections that come after them, product grids, the cart, checkout and My Account pages, faceted filters, accordion / FAQ sections, and CSS-only designs for the WooCommerce quantity stepper, the loop add-to-cart button states and the WooCommerce notices - each with a when-to-use line, the layout, and complete HTML plus CSS for html-to-page. Use when the user asks for "a few options", "variants", "patterns", "like Relume", "give me layouts for X", or when you need a proven starting layout for a product page, a navigation bar, a product grid, an FAQ or the quantity input instead of inventing one.
Design and build the WooCommerce cart page, checkout page and order received (thank you) page with the Oxygen 6 or Breakdance builder to a current ecommerce standard - card-style cart rows with a sticky summary, free-shipping progress, designed empty cart, numbered checkout sections with a sticky order summary and a slim secure-checkout header, payment methods as rows, a receipt-style confirmation - plus the header mini cart and promo bars. Use when the user says "design my cart", "checkout page", "make checkout look better", "one-page checkout", "thank you page", "mini cart", "cart drawer", "cart icon in the header", or anything about the purchase flow. For the account area (My Account, login, registration, order tracking) use the woocommerce-my-account skill.
Design and build WooCommerce product filtering with the Oxygen 6 or Breakdance builder - the Faceted Filters element in a sidebar, as a top bar, or behind a mobile drawer, with price sliders, checkbox lists, attribute swatches, rating stars, stock status, active-filter chips and a clear button, restyled from WooCommerce's block markup and wired for no-reload filtering. Use when the user says "filters", "faceted search", "filter by price", "filter sidebar", "refine", "shop filters", "filter by colour or size", or the shop needs to narrow a catalog.
Design and build the WooCommerce My Account area with the Oxygen 6 or Breakdance builder to a current standard - a welcome band, a sidebar navigation with icons, order history as cards with colour-coded status pills, receipt-style order details, address and payment cards, a clean account form - plus the login and registration pages (centred card, split screen, or a dedicated login page with the Login Form element), lost password, the header account link, and logged-in/logged-out content with display conditions. Use when the user says "my account page", "customer account", "login page", "register page", "order history", "account dashboard", "customer portal", or wants the account area to match the store.
Design and build the WooCommerce single product template (product detail page) with the Oxygen 6 or Breakdance builder - gallery with thumbnails and zoom, buy box with price, variations, quantity and add to cart, trust lines, description and specs, reviews, related products - and handle simple, variable, grouped, external, sale and out-of-stock products. Use when the user says "design my product page", "product template", "product detail page", "PDP", "add to cart button", "product gallery", "variation swatches", "product reviews", or wants any change to how a product is presented.
Design and build the WooCommerce shop page, product category and tag archives, product search results, product filters and sorting, and product card grids for the Oxygen 6 or Breakdance builder, plus category tile grids and product rows on other pages. Use when the user says "design my shop page", "product listing", "category page", "product grid", "product cards", "add filters to the shop", "sort products", "featured products on the homepage", or anything about how products are listed.
Build a complete, conversion-ready WooCommerce store with the Oxygen 6 or Breakdance builder MCP tools - store design system, header with mini cart and search, shop and category archives, single product template, cart, checkout, account, and a merchandised homepage - in the right order and to a professional standard. Use when the user wants to "build my store", "set up my shop", "design my WooCommerce site", "make my store look professional", or asks for any store-wide ecommerce work. For one piece only, see the woocommerce-shop-archive, woocommerce-product-page, woocommerce-cart-checkout and woocommerce-my-account skills, which this skill sequences.