菜单
Use when building or reviewing UI components for accessibility (a11y). Covers WCAG 2.1 compliance, semantic HTML, keyboard navigation, ARIA attributes, color contrast, focus management, and screen reader testing. Use when creating forms, modals, dropdowns, navigation, or any user-facing HTML.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Bring a franchise partner storefront (Ghana .com.gh, Malaysia .com.my, or a new country) to full parity with Singapore for NON-WSQ courses — import courses, mirror the category tree + mega-menu, sync product↔category assignments, category banners/descriptions, currency switcher, remove SG-only funding text, fix fonts/banners, WhatsApp, contact/footer/trainer info, and the blog. Use when asked to "make GH same as Singapore", "port courses to the partner site", "the <country> categories/menu/blog/footer are different from SG", "add currency switcher / WhatsApp to <country>", "remove funding on <country>", or when onboarding/refreshing a franchisee site. Everything here is PARTNER-DB-ONLY (never a repo/code change, never touch SG).
Enforce the storefront category listing order — WSQ (TGS- SKU) courses first, then non-WSQ (C- SKU) courses ALPHABETICALLY by course name, then partner (M-prefix / other) last — in EVERY category. Also covers DISABLING an empty category (no products on the storefront). Use when asked to "sort courses in a category", "WSQ first", "list WSQ courses before non-WSQ", "order the category alphabetically", "fix the course order on a category page", "disable this empty category", "hide the empty category", or after adding/renaming a course that must slot into the right place in its category listing. Delivered as an idempotent migrations/NNN-*.sql that renumbers catalog_category_product.position AND mirrors it into catalog_category_product_index. Partner-safe (no SKU list; prefix convention holds on every site).
Control the Infortis UltraMegamenu dropdown structure on the storefront — which category levels render as MEGA multi-column panels vs CLASSIC vertical lists, via the umm_dd_type category attribute. Use when asked to "make the menu classical", "convert the mega menu", "nested dropdown should be a plain list", "child categories are missing from the menu", "the menu column is empty", "fix the mega menu", or when a category flyout renders as a grid with empty columns. Covers the level map, the level-3 trap that hides all children, the EAV+flat dual write, and the reindex/flush needed for the menu to re-render.
Review OpenMage 1.x / Magento 1 LTS code in this LMS repo. Use when reviewing a PR, before committing custom-module changes, when asked "is this Magento-correct?", or proactively after writing PHP/XML/phtml in app/code/local/MMD/* or app/design/*. Covers OpenMage 1.x conventions (not Magento 2 — DI XML, service contracts, declare(strict_types) do NOT apply here). Enforces local-codepool overrides, ACL invariants, and migration patterns specific to this repo.
Ensure every SG course (WSQ TGS- and non-WSQ C-) shows at least 5 "Recommended Courses" on its product page, topping up any shortfall with related WSQ courses. Use when the user says "recommended courses", "related courses", "upsell", "make sure courses have 5 recommendations", "the recommended courses section is empty/short", "add related courses", or after bulk-importing/enabling courses that may lack upsells. SG production only (partner sites are a no-op).
Design and continuously improve the SG agentic-flyer newsletter (the MailerLite course flyer). Use when writing/curating a course's flyer pitch, adding a per-course pitch or accent/logo, changing the flyer copy or layout, or working the open-rate/click-rate improvement loop (pre-design + post-blast hooks, learnings log). Covers the HARD RULES, the per-course pitch registry, colour/logo variation, and the data-driven optimisation process. SG-only; the render/flow code is MMD_Marketing.
| name | web-accessibility |
| description | Use when building or reviewing UI components for accessibility (a11y). Covers WCAG 2.1 compliance, semantic HTML, keyboard navigation, ARIA attributes, color contrast, focus management, and screen reader testing. Use when creating forms, modals, dropdowns, navigation, or any user-facing HTML. |
| metadata | {"version":"1.0.0","domain":"frontend","triggers":"accessibility, a11y, WCAG, ARIA, keyboard navigation, screen reader, form, modal"} |
Ensure all UI components are accessible to users with disabilities, following WCAG 2.1 guidelines.
<button>, <nav>, <main>, <header>, <footer> — not <div> for everythingh1 through h6)<label> with <input> via for attributetabindex="0" for custom focusable elements, tabindex="-1" for programmatic focus| Attribute | Purpose |
|---|---|
aria-label | Define element name when no visible text |
aria-labelledby | Reference another element as label |
aria-describedby | Additional description (errors, help text) |
aria-live | Announce dynamic content changes |
aria-hidden="true" | Hide decorative elements from screen readers |
aria-expanded | Toggle state for dropdowns/accordions |
aria-required | Mark required form fields |
aria-invalid | Mark fields with validation errors |
role="dialog" | Identify modal dialogs |
outline)alt attribute (descriptive for meaningful, alt="" for decorative)<label> or aria-labeloutline: none is forbidden without visible replacement)tabindex > 0 (breaks DOM focus order)placeholder as sole label for inputs<div> or <span> for interactive elements without role and keyboard handlersaria-live)