@Files
Use@Files to attach files from your codebase to the Kombai chat.
Use cases
Ask specific questions
Ask specific questions
- Explain the logic in
@auth.ts. - Break
@ProjectSection.tsxinto smaller components.
Provide references
Provide references
Use
@theme.ts as a style guide for new code generation.You can also drag and drop files into the input box, or type
@ to quickly select from your three most recently opened files.@Folders
Use@Folders to attach codebase folders containing multiple files to the Kombai chat.
Use cases
Broad code generation
Broad code generation
Reference a folder before asking Kombai to scaffold a new feature based on that structure.
Multi-file understanding
Multi-file understanding
Ask questions that require connecting logic across several components.
We recommend adding folders that don’t have too many files within them. If your
folder has too many files, add sub-folders instead.
@Figma
Use@Figma to attach Figma links to the Kombai chat.
Use cases
Generate code from design
Generate code from design
Reference the Figma link for which you want to generate the code.
State management
State management
Tag different frames to explain how the app should look in different states (e.g., Loading, Error, Success).
Design queries
Design queries
Ask questions specifically about the layout, spacing, or colors in your linked design.
@Resources
Use@Resources to attach external frontend resources from our design library to the Kombai chat.
Use cases
Import design elements
Import design elements
Instruct Kombai to use a specific library (like Magic UI or Google Fonts) when generating code.
Consult documentation
Consult documentation
Ask questions about how to implement specific components from these libraries.
Supported resources
| Category | Sub-category | Resource name | Access using |
|---|---|---|---|
| UI library | UI library | Magic UI | @Resources |
| UI library | UI library | Aceternity UI | @Resources |
| UI library | UI library | Badtz UI | @Resources |
| UI library | UI library | Kokonut UI | @Resources |
| UI library | UI library | Hover | @Resources |
| UI library | UI library | Animate UI | @Resources |
| UI library | UI library | Smooth UI | @Resources |
| Design inspiration | Design inspiration | Saasframe | @Resources |
| Design inspiration | Design inspiration | Framer | @Resources |
| Design inspiration | Design inspiration | One Page Love | @Resources |
| Design inspiration | Design inspiration | Mobbin | @Resources |
| Colors | Palette generator | Coolors | @Resources |
| Colors | Palette generator | Goodpalette | @Resources |
| Colors | Palette library | Brandcolors | @Resources |
| Colors | Palette library | Coolors Palette | @Resources |
| Colors | Palette library | Color Hunt | @Resources |
| Colors | Gradient library | Colortopia | @Resources |
| Colors | Gradient library | Gradient Page | @Resources |
| Typography | Font library | Google Fonts | @Resources |
| Typography | Font pair library | Fontpair | @Resources |
| Typography | Font pair generator | Font Pairing Studio | @Resources |
| Animation library | Animation library | GSAP | @Resources |
| Animation library | Animation library | Framer Motion | @Resources |
| Animation library | Animation library | Codepen (GSAP) | @Resources |
| Assets | Illustration library | StreamlineHQ | Resource library button |
| Assets | Logo library | Brandlogos | Resource library button |
| Assets | Logo library | Logo.dev | Resource library button |