Frontend Skills

​

Supported skills

​

Design Skills

​

Create Wireframes

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 label the element 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.

​

Create Wireframes Excalidraw

Kombai uses the Create Wireframes Excalidraw skill to generate wireframes as Excalidraw diagrams that you can open, edit, and paste back into Kombai’s chat to continue iterating. See Open Excalidraw diagrams for details. 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:

• Page or application type
• Layout structure preference
• Content density
• Navigation patterns
• Responsiveness priority

By default, Kombai generates three wireframe options, each offering a genuinely different layout approach. Here’s what to expect from the generated wireframes:

• Grayscale and low-fidelity: Wireframes are rendered in a simple, sketch-like style using only grayscale tones, keeping the focus on structure and layout rather than visual styling.
• Component annotations: Each section is clearly labeled. Reusable components from your repo are marked with a [REUSE] badge, while new components are marked with a [NEW] badge.
• Realistic content: Wireframes use meaningful placeholder content instead of generic filler text. For example, actual table headers, form field labels, and card descriptions that reflect what the real UI would display.

You can follow up with Kombai to iterate on the wireframes. Either ask Kombai to make changes directly in the Excalidraw diagram, or update it yourself and paste the updated design back into the chat. Once you are happy with an option, ask Kombai to implement it in your app. Here are some examples of Create Wireframes Excalidraw:

• Create Wireframes Excalidraw I want to redesign the dashboard layout. Generate some wireframe options.
• Create Wireframes Excalidraw Create wireframes for a settings page with tabbed navigation and form sections.
• Create Wireframes Excalidraw Generate wireframes for a pricing page with comparison tables.
• Create Wireframes Excalidraw I need wireframe options for an onboarding flow with a multi-step wizard.

​

Open Excalidraw diagrams

To open a generated Excalidraw diagram for manual editing:

1. Hover over the generated diagram to reveal action icons on the top-right corner. Click the maximize icon to open a full preview in a new tab, or click the external link icon to get the Excalidraw link.
2. Copy the link, or click the Open button to directly open it in your browser.

3. Make your changes — move elements around, resize sections, add new shapes or text, or remove parts you don’t need.
4. Once done, drag your cursor to select all the relevant elements of your updated diagram.
5. Copy the selection (Ctrl + C on Windows or Cmd + C on Mac).
6. Paste it back into Kombai’s chat input (Ctrl + V on Windows or Cmd + V on Mac) and send a follow-up message describing the changes you made or what you’d like Kombai to do next.

​

Review Design

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. 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.

​

Suggest Themes

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.

​

Improve UI

Kombai uses the Improve UI skill to upgrade your project’s aesthetic quality and interactive feel. It transforms plain or generic interfaces into world-class user experiences by applying professional design principles across typography, color systems, layout structure, and motion, tailored specifically to your app’s unique context.

​

How Improve UI works

Kombai follows a guided, step-by-step process rather than jumping straight from your request to changes. The depth of the process adapts to the scope of what you ask for:

• A small, specific change (e.g., “make the header sticky”) is applied directly, exactly as requested.
• A focused improvement (e.g., “improve this card”) is refined within your app’s existing design language.
• An open-ended redesign (e.g., “improve the UI”, “make it modern”) triggers the full process, where Kombai re-imagines structure and visuals while staying true to your product’s character.

The process generally moves through these stages:

1. Look at the real UI first. Kombai never works from an imagined interface. It uses a screenshot or running URL you provide, or — with your permission — runs the app and views it directly. If the app can’t be run, it reconstructs the UI from your codebase and confirms that reconstruction with you.
2. Understand the current state. Kombai reviews all relevant pages and states (empty, loading, error, filled, and edge cases), extracts your existing design system (colors, typography, spacing, radii, shadows), and maps the information architecture and navigation.
3. Diagnose and confirm. Kombai produces a problem list of concrete issues tied to specific screens and components, then shares it with you for confirmation before proposing anything. This is also where you can lock in hard constraints such as a fixed palette, dark mode requirement, or a reference app to take cues from.
4. Propose directions you choose from. You own the design language. For a redesign, Kombai presents 2–3 complete design directions — each a representative screen with its own palette, typography, layout/navigation, and density applied — using the same sample data so they’re easy to compare. One is marked as a recommended default, and you can pick one, mix across them, describe your own, or ask to see them rendered on the canvas before deciding. For a focused improvement, Kombai presents a single refined proposal within your current language.
5. Implement. Kombai tells you which files it will change and why, reuses your existing tokens and components, installs any missing dependencies, and sources real colors, fonts, and imagery instead of inventing placeholders. It verifies each category of change against the running app as it goes.
6. Verify. Once done, Kombai checks the result against the confirmed problem list and your product’s domain and tone before declaring it finished.

Throughout, every proposal is held to two equal standards: how much it improves on the current design, and how well it fits your product and audience. A bold direction that doesn’t fit the domain is rejected — for example, a finance app stays trustworthy, legible, and data-dense rather than playful or novelty. Here are some of the design aspects that Improve UI addresses:

• Typography & Scale: Upgrading to premium font scales and high-quality typefaces tailored to your context.
• Color System & Tokens: Replacing generic palettes with neutral bases, refined accents, and advanced shadow diffusion for a modern, polished look.
• Layout Restructuring: Converting basic grids into engaging asymmetric bento grids, zig-zag sections, or split-screen heroes while fixing h-screen usage.
• Flair & Personality: Applying intentional design “edge” through oversized display type, deliberately broken grids, or unique media layering.
• Micro-interactions & Motion: Implementing fluid CSS transitions or spring-physics-based animations for elements that resize or reorder.
• Glassmorphism Upgrade: Replacing shallow background blurs with full refraction for a more premium glass effect.
• Asset & Content Realism: Replacing generic placeholders with realistic figures, contextually relevant names, and high-quality media seeds.
• Interactive States: Adding missing loading skeletons, empty states, and tactile feedback (like :active scaling) for all interactive elements.

Here are some examples of Improve UI:

• Improve UI Upgrade the generic component defaults with custom radii, shadows, and refined typography to make it look more premium.
• Improve UI Convert standard feature rows into asymmetric bento grids or alternating zig-zag layouts.
• Improve UI The dashboard feels cluttered. Suggest some improvements to the visual hierarchy and spacing.
• Improve UI Add more personality and “flair” to my portfolio showcase.
• Improve UI Review the checkout flow and make the interactions feel more fluid and high-end.

​

Generate Image

Kombai uses the Generate Image skill to generate AI images from a text prompt. You can configure the model, aspect ratio, and output resolution before generation, and Kombai shows you the estimated cost per image upfront so there are no surprises. When you run Generate Image, Kombai opens an Image Parameters panel where you configure the generation settings:

• Model: Choose from three image generation models:

  Model
  seedream 4
  nano banana pro
  gpt image 2
  flux 2 klein 9b

• Aspect Ratio: Select the output dimensions — 1:1, 16:9, 9:16, 4:3, or 3:4 — to match your target use case (social media, hero banners, portraits, etc.).
• Output Resolution: Choose between 1K and 2K output resolution depending on the quality and file size you need.
• Cost estimate: Before you proceed, Kombai displays the estimated cost per image based on your selected model and resolution, so you can make an informed decision.

Once you’re happy with the settings, click Proceed to generate the image, or Cancel to go back. Here are some examples of Generate Image:

• Generate Image A minimalist hero illustration of a developer working at a desk with floating code snippets.
• Generate Image A dark-themed abstract background with glowing grid lines for a SaaS landing page.
• Generate Image A friendly robot assistant waving, suitable for an onboarding screen.
• Generate Image A photorealistic product mockup of a mobile app on a smartphone, in portrait orientation.

​

Generate Video

Kombai uses the Generate Video skill to generate short AI videos from a text prompt. You can configure the model, aspect ratio, resolution, duration, and audio before generation, and Kombai shows you the estimated cost upfront so you know exactly what you’ll be charged. When you run Generate Video, Kombai opens a Video Parameters panel where you configure the generation settings:

• Model: Choose from four video generation models:

  Model
  veo 3.1
  veo 3.1 fast
  kling video v3 4k
  veo 3.1 lite

• Aspect Ratio: Choose between 16:9 (landscape) or 9:16 (portrait) to match your target format.
• Output Resolution: Select 720p, 1080p, or 4k depending on the quality and file size you need.
• Duration: Choose the length of the generated video — 4s, 6s, or 8s.
• Audio: Toggle audio enabled or disabled for the generated video.
• Reference Image URL (optional): Provide a publicly accessible image URL (ending in .png, .jpg, .jpeg, etc.) to use as the starting frame or visual reference for the video.
• Cost estimate: Before you proceed, Kombai displays the estimated cost based on your selected resolution, audio setting, and duration:
  • 720p / 1080p without audio: $0.20 per second
  • 720p / 1080p with audio: $0.40 per second
  • 4k without audio: $0.40 per second
  • 4k with audio: $0.60 per second

Once you’re happy with the settings, click Proceed to generate the video, or Cancel to go back. Here are some examples of Generate Video:

• Generate Video A slow cinematic pan across a futuristic city skyline at night, in 16:9.
• Generate Video An animated logo reveal for a SaaS product, clean and minimal, 4s.
• Generate Video A looping abstract background with flowing gradient waves, suitable for a hero section.
• Generate Video A short product demo clip showing a mobile app interface in portrait orientation.

​

Web Dev Skills

​

Improve SEO

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.

​

Improve Accessibility

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.

​

Other Skills

​

Create Architectural Diagram Excalidraw

Kombai uses the Create Architectural Diagram Excalidraw skill to generate architectural diagrams as Excalidraw diagrams that visualize your system’s architecture, data flow, component relationships, or infrastructure layout. The generated diagrams are fully editable. See Open Excalidraw diagrams for how to open, edit, and paste them back. When you run Create Architectural Diagram Excalidraw, Kombai analyzes your project structure — scanning for services, modules, APIs, routes, infrastructure configuration files (Docker, Kubernetes, Terraform, etc.), external services, databases, and third-party integrations. It then asks clarifying questions to understand:

• Diagram type (system overview, data flow, infrastructure, component/module, or sequence diagram)
• Level of detail (high-level overview, medium, or detailed)
• Scope (full system, frontend only, backend only, or a specific subsystem)

Kombai also provides multiple options to choose from. If the current options don’t fit your needs, you can provide your own answer. Here’s what to expect from the generated diagrams:

• Professional color coding: Components are color-coded by type for easy identification:

  Component Type	Color
  Frontend	Light blue
  Backend services	Light green
  Databases	Light orange
  External services	Light purple
  Infrastructure	Light gray

• Labeled connections: Arrows are labeled with protocols and communication methods (HTTP, gRPC, WebSocket, etc.) to show how components interact. Port numbers and endpoints are included where relevant.
• Logical layout: Components are arranged in logical layers (presentation → application → data) with consistent flow direction, minimized arrow crossings, and boundary boxes grouping related components.
• Clear annotations: Each component is labeled with its name and type, with brief descriptions where helpful.

You can follow up with Kombai to iterate on the diagram, add or remove components, adjust the level of detail, or change the layout. Here are some examples of Create Architectural Diagram Excalidraw:

• Create Architectural Diagram Excalidraw Generate a high-level system architecture diagram for my project.
• Create Architectural Diagram Excalidraw Create a data flow diagram showing how user requests move through the backend.
• Create Architectural Diagram Excalidraw Visualize the infrastructure and deployment setup of my app.
• Create Architectural Diagram Excalidraw Generate a component diagram showing the frontend module dependencies.

​

Create Mermaid

Kombai uses the Create Mermaid skill to generate diagrams using Mermaid syntax. Mermaid diagrams are rendered as interactive visual diagrams directly in Kombai’s chat, making them easy to review at a glance. You can follow up with Kombai to iterate on the diagram, modify the structure, add or remove nodes, or change the diagram type. Here are some examples of Create Mermaid:

• Create Mermaid Generate a sequence diagram showing the authentication flow in my app.
• Create Mermaid Create a flowchart of the checkout process.
• Create Mermaid Visualize the database schema as an ER diagram.
• Create Mermaid Generate a diagram for the models in my project.

​

Create Command

Kombai uses the Create Command skill to create reusable commands that encode repeatable tasks you or your team perform regularly. When you run Create Command, Kombai asks a few clarifying questions to ensure the command is tailored to your exact needs:

• Purpose: What does the command do, and when should it be invoked?
• Scope: Should the command be available globally or only in the current repository?
• Inputs: What information is required from the user each time the command runs?
• Output: What is the intended deliverable (e.g., a new file, code refactors, or a shell sequence)?
• Constraints & edge cases: Are there validation rules or naming conventions to follow?
• Boundaries: What is explicitly out of scope, and what actions should the command strictly avoid?

Based on your answers, Kombai generates a structured Markdown file for your command. Once created, the command appears in your slash / command list. You can then use it to automate the task or publish it to share with your team. Here are some examples of Create Command:

• Create Command I want to generate unit tests for a React component using Vitest.
• Create Command Help me refactor old class components into functional components with hooks.
• Create Command Create a reusable command for generating API documentation from source code comments.
• Create Command I want you to standardize the creation of new feature modules in my project.

​

Create Rule

Kombai uses the Create Rule skill to author rule files that encode coding standards, architectural patterns, and team conventions for the agent to follow across all conversations. When you run Create Rule, Kombai asks a few clarifying questions to ensure the rule is tailored to your exact needs:

• Purpose: What behavior should Kombai always exhibit or avoid?
• Scope: Should this rule apply globally or only in the current repository?
• Trigger conditions: When should this rule apply (e.g., always, during code reviews, or for specific file types)?
• Specificity: Should the rule be broad (“always prefer composition over inheritance”) or narrow (“never use any in files under src/api/”)?
• Examples: Can you provide good or bad examples to illustrate the desired behavior?

Based on your answers, Kombai generates a structured Markdown rule file in your specified rules directory. Here are some examples of Create Rule:

• Create Rule I want to enforce a rule that all API service files must use a specific error-handling wrapper.
• Create Rule Create a rule that prefers composition over inheritance in our React component library.
• Create Rule Forbid the use of any in files under the src/api/ directory.
• Create Rule All new UI components must include basic ARIA attributes for accessibility.

​

Create Skill

Kombai uses the Create Skill skill to author custom, high-quality skills for your specific needs. Unlike rules, which are always on, skills are contextual instruction sets that Kombai fetches on demand when they match the domain of your task. When you run Create Skill, Kombai asks a few clarifying questions to ensure the skill is tailored to your exact needs:

• Purpose & domain: What task or domain does this skill cover, and when should Kombai fetch and use it?
• Scope: Should this skill be available globally or only in the current repository?
• Workflow steps: What step-by-step process should Kombai follow when the skill is active?
• Constraints & quality criteria: What rules and standards must the output adhere to?
• Examples: Can you provide reference implementations or expected output examples?

Based on your answers, Kombai generates a structured SKILL.md file within a dedicated kebab-case folder in your specified skills directory. Once created, the skill is automatically detected and activated whenever a task matches its description. Here are some examples of Create Skill:

• Create Skill I want to create a skill for adding new GraphQL resolvers following our team’s schema patterns.
• Create Skill Help me author a skill for migrating legacy CSS files to Tailwind CSS utility classes.
• Create Skill Create a skill that encodes our internal process for setting up new microservices in the monorepo.
• Create Skill Standardize how we document and generate stories for our UI component library.

​

Summarize

Kombai uses the Summarize skill to produce a concise summary of your current conversation thread and save it as a Markdown file in .kombai/summaries/. This is useful for handoffs, archival, or maintaining a decision log. When you run Summarize, Kombai asks a few clarifying questions to understand your intent and the desired scope of the summary, such as:

• Intent: Why do you need this summary? Options include continuing work in a new thread, handing off to a teammate, archiving a completed task, or creating a decision-log entry.
• Scope: Should the summary cover the entire thread or only a specific portion (e.g., “from the point where we started the refactor”)?
• Detail level: Any specific emphasis or exclusions you’d like to make (e.g., “focus on the rationale behind the API design decisions”).

Based on your answers, Kombai generates a contextual kebab-case filename based on the subject matter (e.g., auth-flow-debugging.md). It analyzes the thread to extract only non-trivial information—context that another agent or person cannot easily rediscover by reading the code or searching the repo. Here are some examples of Summarize:

• Summarize I’m finished with the refactor. Can you summarize this thread for my teammate?
• Summarize Summarize our discussion about the authentication flow from the point where we started debugging the JWT issue.
• Summarize Create a decision-log entry from this conversation regarding the choice of GSAP for animations.
• Summarize I want to continue this work in a fresh thread. Please summarize the current state and open TODOs.