Skip to main content

Use frontend skills

  1. Launch Kombai extension in your IDE.
  2. Type a slash / in the chat input box to check the supported frontend skills.
  3. Select the skill you want to run.
  4. Add any other instructions you want to add to Kombai.
  5. Press Enter or click the
    button to run the skill.

Usage examples

Type /create-wireframes in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to create wireframes.

Example prompts

  1. /create-wireframes I want to improve the hero section of the website. Can you create some wireframe options that can match this website’s hero section?
  2. /create-wireframes Generate some wireframes for the About section of my app.
Type /review-design in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to review design.

Example prompts

  1. /review-design Can you help me review the Settings page layout of my app?
  2. /review-design Do a design review of my website’s testimonal section.
Type /suggest-themes in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to suggest themes.

Example prompts

  1. /suggest-themes I am building an app thats fitness focused. Can you suggest some themes that will match?
  2. /suggest-themes Recommend me some themes that are considered best practices while designing for a website’s Pricing page.
Type /audit-accessibility in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to audit Accessibility.

Example prompts

  1. /audit-accessibility Check accessibility of the /app page.
  2. /audit-accessibility Check if the /deploy page is keyboard accessible or not.
Type /audit-seo in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to audit SEO.

Example prompts

  1. /audit-seo Run a SEO audit for my homepage
  2. /audit-seo Check if the blogposts are crawlable or not.
Type /improve-accessibility in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to improve Accessibility.

Example prompts

  1. /improve-accessibility Improve accessibility of the /app page.
  2. /improve-accessibility Fix accessibility issues in the /deploy page.
Type /improve-seo in the Kombai’s chat input box, press Enter, and type the path or URL for which you want to improve SEO.

Example prompts

  1. /improve-seo Audit my site homepage and features page.
  2. /improve-seo Audit and fix any indexability issues in the /blog page.

Supported skills

CategorySkillDescription
Design/create-wireframesGenerates low fidelity wireframes for your app sections or pages. Prompt Kombai to iterate and improve. Choose from the suggested options and ask Kombai to implement it in your app.
Design/review-designAsk Kombai to review your app UI/UX. Select from the recommended best practices and ask Kombai to implement it in your app.
Design/suggest-themesGenerates themes for your app. Prompt Kombai to iterate on colors and typography. Choose from the suggested options and ask Kombai to implement it in your app.
Web vitals/audit-accessibilityAudits your project’s accessibility based on WCAG 2.0, 2.1, and 2.2 accessibility standards and generates a report of the issues found, along with suggestions to resolve them.
Web vitals/audit-seoAudits your project’s SEO and generates a detailed report of all crawlability and indexability issues found, along with suggestions to resolve them.
Web vitals/improve-accessibilityAudits and identifies accessibility issues in your codebase based on WCAG 2.0, 2.1, and 2.2 accessibility standards, fixes them, and generates a final audit report.
Web vitals/improve-seoAudits and identifies crawlability and indexability issues in your codebase, fixes them, and generates a final audit report.

Audit standards

SEO

Kombai performs a comprehensive audit of on-page and technical SEO elements to ensure your project is indexable and ready to rank. Here are the SEO issues that Kombai detects:
  • Crawlable anchors: Validates that anchor tags are accessible and indexable, flagging issues like empty hrefs, javascript:void(0) targets, off-screen positioning, negative tabindex, and more.
  • Canonical URL: Detects invalid canonical URLs, multiple conflicting canonical URLs, root canonical URLs on subpages, and more.
  • Legibility: Audits for visual accessibility, ensuring text meets WCAG contrast standards and maintains legible sizes on mobile viewports.
  • Hreflang tags: Detects malformed language codes and non-absolute links in your international SEO tags.
  • Link text: Identifies generic anchor text (e.g., “click here,” “read more”) to ensure links provide valuable context for search engines.
  • Page indexability: Validates that the page is technically accessible to search bots by auditing HTTP status codes, robots.txt syntax, and exclusion directives (like noindex or X-Robots-Tag), while also ensuring essential meta descriptions are populated.

Accessibility

Kombai uses the Axe-core engine to detect accessibility issues. When running /improve-accessibility, Kombai also fixes the identified issues. Here are a few examples of accessibility issues that Kombai detects:
  • ARIA attributes: Validates that elements only use ARIA attributes supported by their specific role (e.g., ensuring a heading doesn’t have a checkbox attribute).
  • Keyboard scrollability: Identifies scrollable containers missing a tabindex attribute, which prevents keyboard-only users from accessing hidden content.
  • Video captions: Verifies that <video> elements include caption tracks, ensuring content is accessible to users with hearing impairments and indexable by search engines.
  • Touch target size: Ensures interactive elements (buttons, links) are large enough and spaced appropriately so mobile users can tap them without accidentally hitting neighboring elements.
  • Image alt text: Detects images missing alt attributes or valid presentation roles, which are critical for accessibility compliance.
For the complete list, please refer to the Axe-core documentation.