Kombai uses the Create Wireframes skill to generate wireframes aligned with your specific information architecture and data presentation needs.When you run Create Wireframes, Kombai asks clarifying questions to gather more details about the specific layout options you want to consider. It asks questions to understand your intent, such as:
Primary goal of the page
Layout structure
Content density
Navigation patterns
Responsiveness priority (Mobile-first vs. Desktop-first)
Kombai also provides multiple options to choose from. If the current options don’t fit your needs, you can provide your own answer.Based on your responses, Kombai generates a Suggested Wireframe Block with three different wireframes. By default, it opens these wireframes in the Kombai Browser so you can easily visualize them and select the one you want to use.If Kombai thinks it can reuse a component from your repo for a specific element in the wireframe, it will mark the element with a dotted border and label it with the component name and a Reuse badge. For new elements, Kombai will label them with the component name and a New badge.You can follow up with Kombai to further iterate on the wireframes. Once you are happy with an option, ask Kombai to implement it in your app.Here are some examples of Create Wireframes:
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?
Create Wireframes Generate some wireframes for the About section of my website.
Create Wireframes I need wireframes for an e-commerce product listing page with filters and sorting.
Create Wireframes Generate layouts for my blog post page with sidebar navigation and related articles.
Kombai uses the Review Design skill to generate a comprehensive review report of the complete UI/UX design of your app. This helps you ensure the design is visually appealing, user-friendly, responsive, and highlights the brand identity.When you run Review Design for a particular page or route, Kombai asks clarifying questions to gather more details about the specific design aspects you want to review. It asks questions to understand your intent, such as:
Purpose of the wireframe
Specific design aspects to prioritize in review
Any existing problems that you are already aware of
Kombai also provides multiple options to choose from. If the current options don’t fit your needs, you can provide your own answer.Based on your responses, Kombai generates a detailed report of the design aspects that need to be improved. In some cases where you want to completely reimagine the design, Kombai also creates wireframes, as it does in the Create Wireframes skill.You can follow up with Kombai to further iterate on the review report. Once you are happy with the report, ask Kombai to implement the changes in your app.Here are some of the design aspects that Kombai reviews:
Visual Design: Reviews visual fidelity by reviewing color palettes, typography scales, and spacing tokens to ensure the implementation matches the aesthetic intent.
UX/Usability: Reviews navigation patterns and information hierarchy to ensure logical user flows and intuitive usability across the application.
Responsive/Mobile: Reviews layout adaptation across various breakpoints, ensuring mobile-optimized layouts and accessible touch targets for handheld devices.
Accessibility: Reviews compliance with WCAG standards by checking contrast ratios, ARIA attributes, and ensuring full keyboard navigation support with visible focus states.
Micro-interactions/Motion: Reviews interactive elements to ensure hover states, animations, and transitions are present and fluidly implemented.
Consistency: Reviews deviations in design usage across multiple pages to ensure strict adherence to your design system and component library.
Performance: Reviews the design’s impact on rendering, flagging potential bundle size issues and optimization opportunities for a smoother user experience.
Here are some examples of Review Design:
Review Design Can you help me review the settings page layout of my app?
Review Design Do a design review of my website’s testimonial section.
Review Design I need a design review focusing on the mobile responsiveness of my checkout flow.
Review Design Review the overall design consistency across my landing page.
Kombai uses the Suggest Themes skill to recommend design options that refresh your project’s look and feel. It offers suggestions to improve readability and structure, helping you fix UI issues and align with your brand identity.When you run Suggest Themes, Kombai asks clarifying questions to gather more details about the specific UI elements you want to improve, e.g., spacing, colors, typography, etc. It asks questions to understand your intent, such as:
Project type (for new themes)
Specific UI aspects to prioritize in theme suggestion
Color palette preferences
Mood of the theme
Kombai also provides multiple options to choose from. If the current options don’t fit your needs, you can provide your own answer.Based on your responses, Kombai generates a Suggested Theme Block with three different themes. By default, it opens these themes in the Kombai Browser so you can easily visualize them and select the one you want to use.You can follow up with Kombai to further iterate on the theme suggestions. Once you are happy with a theme, ask Kombai to implement it in your app.Here are some of the theme customization options Kombai considers while generating themes:
Color alignment: Recommends refreshed color palettes when the current ones feel outdated or don’t match the brand, ensuring a cohesive and modern look.
Typography: Suggests font choices and scaling to resolve issues where text is hard to read or appears unprofessional.
Spacing and layout: Adjusts spatial relationships to fix interfaces that feel cramped or inconsistent, creating a balanced composition.
Visual hierarchy: Suggests component styling enhancements to establish clear importance and structure where visual hierarchy is lacking.
Dark mode: Suggests a robust dark mode implementation where it is currently poor or missing, with options to set Light or Dark as the default preference.
Audience fit: Suggests refinements to the overall aesthetic so the design language resonates effectively with your specific target audience.
Theme mood: Recommends configuring the visual atmosphere to match your desired feeling, offering presets such as Professional & Corporate, Creative & Energetic, Calm & Minimal, Luxurious & Premium, Modern & Tech, and Warm & Friendly.
Here are some examples of Suggest Themes:
Suggest Themes I am building an app that’s fitness focused. Can you suggest some themes that will match?
Suggest Themes Recommend color and typography themes for my portfolio website.
Suggest Themes My landing page feels outdated. Can you recommend modern color palettes and typography?
Suggest Themes Suggest themes with a Luxurious & Premium feel for a high-end e-commerce site.
Kombai uses the Improve SEO skill to analyze your project’s on-page and technical SEO elements and generate a detailed report of all crawlability and indexability issues found, along with suggestions to resolve them.When you run Improve SEO for a particular page or route, Kombai opens the URL in the Kombai Browser, interacts with the page, and reads the content, along with performance metrics from the browser dev tools, to analyze SEO issues.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.
Search visibility: 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.
Here are some examples of Improve SEO:
Improve SEO Check if all product pages have proper meta descriptions and canonical URLs.
Improve SEO Verify hreflang implementation for our multi-language site.
Improve SEO Check if all the documentation pages are crawlable.
Improve SEO Check for generic anchor text like “click here” and “read more” across the site.
Improve SEO Verify that robots.txt and meta tags are not blocking important pages from indexing.
Kombai runs the Improve Accessibility skill to analyze your project’s accessibility based on WCAG 2.0, 2.1, and 2.2 accessibility standards and generate a report of the issues found, along with suggestions to resolve them.When you run Improve Accessibility for a particular page or route, Kombai opens the URL in the Kombai Browser, interacts with the page, and reads the DOM element code from the browser dev tools to analyze accessibility issues.Under the hood, Kombai uses the Axe-core engine to detect accessibility 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.Here are some examples of Improve Accessibility:
Improve Accessibility Check if all form inputs have proper labels and ARIA attributes.
Improve Accessibility Check for color contrast issues and add missing alt text to the homepage images.
Improve Accessibility Verify that our modal dialogs are keyboard navigable and screen reader friendly.
Improve Accessibility Check if the /blog page is fully accessible with proper headings and ARIA attributes.
