> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Glossary

> Understand the key terms to effectively navigate and build with Lumi.

## Key Concepts

* AI (Artificial Intelligence): Technology that enables machines to simulate human intelligence, allowing them to learn, reason, and problem-solve.
* Prompt: A text-based command used to instruct an AI model. Within Lumi, prompts are the fundamental tool you will use to create and modify every component of your application.

## Lumi-Specific Terms

* **Discuss Mode:** More than a code generator, Lumi acts as an interactive development partner. It guides you through planning, debugging, and shipping, helping you build with confidence.
* **Edit Mode:** The environment for making direct changes to your application's code and content.
* **Edit:** An AI-powered tool with Tailwind-native visual controls for precise and intuitive refinement.
* **Remix:** Duplicate any project to use as a new starting point. Remixing allows you to experiment with changes and explore ideas while preserving the original version.
* **Preview:** A live, interactive view for testing features and content before publishing your changes.

## Product & Development

### **Product Management & Strategy**

* **MVP (Minimum Viable Product):** The simplest version of a product with just enough features to attract early users and validate the core idea.
* **Roadmap:** A high-level plan that outlines a product's vision, direction, and upcoming features over time.
* **Feature Request:** A suggestion from users or stakeholders for a new capability or improvement.
* **User Story:** A brief, simple feature description from the end user's perspective.
* **User Journey:** The path a user takes to accomplish a goal within your product.
* **Persona:** A detailed, fictional profile of a target user, created from research to guide design and development decisions.

### **Engineering Concepts**

* **PRD (Product Requirements Document):** A document that details a product's purpose, features, and technical specifications to guide the development team.
* **API (Application Programming Interface):** A set of rules that allows different software applications to communicate and exchange data. Common types include REST and GraphQL APIs.
* **Refactor:** The process of restructuring code to improve its quality and maintainability without changing its functionality.
* **GitHub:** A popular platform for version control and collaborative software development.

### **Data & Analytics**

* **A/B Testing:** Comparing two versions of a webpage or feature to see which one performs better.
* **Conversion Rate:** The percentage of users who complete a specific goal, like signing up or making a purchase.
* **Churn Rate:** The percentage of users who stop using your product over a specific period.
* **Retention Rate:** The percentage of users who continue to use your product over time.
* **Event Tracking:** Monitoring specific user actions (like clicks or form submissions) to understand engagement.

## **UI/UX & Frontend Development**

### **Frontend Development**

* **Frontend:** The part of an application that users see and interact with, including the user interface and overall experience.
* **React:** A popular JavaScript library for building dynamic user interfaces, especially for single-page applications.
* **Gradient:** A smooth transition between two or more colors.
* **Tailwind CSS:** A utility-first CSS framework for rapidly building custom designs directly in your HTML.
* **Design System:** A standardized collection of reusable components and guidelines that ensures design consistency across a product.

### **UI/UX Design Concepts**

* **Accent Color:** A contrasting color used to highlight key elements like buttons or links.
* **Theme:** The overall look and feel of an application, defined by its color scheme, typography, and layout.
* **Responsive Design:** An approach that ensures your application looks and works great on any device, from desktops to mobile phones.
* **Above the Fold:** The content visible on a webpage without scrolling. It's prime real estate for important information.
* **CTA (Call to Action):** A prompt, like a button or link, that encourages users to take a specific action (e.g., "Sign Up," "Buy Now").

### **Page Structure & Navigation**

* **Headings:** Titles (H1, H2, etc.) that structure content and establish a clear visual hierarchy.
* **Footer:** The section at the bottom of a webpage, typically containing links, contact information, and legal notices.
* **Breadcrumb:** A navigation trail that shows a user's current location on a site (e.g., Home > Products > Laptops).
* **Favicon:** The small icon representing your website in a browser tab or bookmarks.
* **Meta Title:** The page title displayed in search engine results and browser tabs, crucial for SEO.
* **Meta Description:** The short summary of a webpage shown in search results to attract clicks.
* **Canonical URL:** A tag that tells search engines the preferred version of a page to avoid duplicate content issues.
* **URL Slug:** The user-friendly part of a URL that identifies a specific page (e.g., `/about-us`).
* **Sitemap:** A file that lists all pages on your website to help search engines index them effectively.
* **Navigation Bar (Nav Bar):** The main menu that provides links to key sections of your website.
* **Skip Links:** Accessibility links that allow users to bypass navigation and jump directly to the main content.
* **Pagination:** A system for dividing long lists of content into separate pages.
* **Anchor Link:** A link that scrolls the user to a specific section on the same page.
* **404 Page:** A custom error page shown when a user tries to access a URL that doesn't exist.

### **Notifications & Feedback**

* **Toast:** A small, temporary notification that provides brief feedback on an action.
* **Snackbar:** Similar to a toast, but often appears at the bottom of the screen and may include an action button (e.g., "Undo").
* **Tooltip:** A pop-up box with extra information that appears when hovering over an element.
* **Badge:** A small visual marker on an icon or button to indicate a count, status, or notification.
* **Loading Spinner:** An animated icon indicating that a process is running in the background.
* **Progress Bar:** A visual bar that shows the completion progress of a task.
* **Skeleton Loader:** A placeholder UI that mimics the final content's layout, improving the perception of loading speed.

### **Overlays & Pop-Ups**

* **Popover:** An overlay that provides additional context or options related to a specific element.
* **Dialog (Modal):** A window that appears over the main content, requiring user interaction to be dismissed.
* **Drawer (Sidebar Panel):** A panel that slides in from the side, typically containing navigation or settings.
* **Lightbox:** A modal window that displays media like images in a focused, enlarged view.
* **Alert Box:** A system message that informs users about critical information, errors, or warnings.

### **Navigation & Selection**

* **Button:** A clickable element that triggers an action.
* **Switch (Toggle):** A control that lets users switch between two states, like on and off.
* **Tabs:** A component that organizes content into different views that a user can switch between.
* **Stepper (Wizard):** A guided, multi-step process that shows users their progress.
* **Accordion:** A series of collapsible panels used to organize and reveal content.
* **Dropdown Menu:** A list of options that appears when a user interacts with a button or field.

### **Forms & Input**

* **Form:** A set of fields for collecting user data, such as a signup or contact form.
* **Radio Group:** A set of options where the user can select only one.
* **Checkbox:** A control that allows users to select one or more options from a list.
* **Text Field:** A standard input box for single-line text entry.
* **Text Area:** A larger input box for multi-line text, like comments or messages.
* **Select (Dropdown Select Box):** A dropdown list for choosing one option from a predefined set.
* **Date Picker:** A calendar interface that allows users to select a date easily.
* **Slider:** A control for selecting a value from a continuous range.
* **File Upload:** A component that allows users to upload files from their device.
* **Autocomplete:** An input field that suggests results as the user types.

### **Design Styles & Trends**

Use these terms in your prompts to define the aesthetic you want to achieve.

* **Neobrutalism:** A raw, high-contrast design style with bold typography and unrefined elements.
* **Retro:** A design that evokes nostalgia by using styles from past decades.
* **Hacker:** An aesthetic inspired by terminal interfaces, featuring dark backgrounds and monospaced fonts.
* **Glassmorphism:** A style that uses translucent, frosted glass-like layers to create depth.
* **Nudy:** A minimalist approach using soft, neutral color palettes for an understated look.

## **Backend Development & Databases**

### **Backend Fundamentals**

* **Backend:** The server-side of an application that handles data, logic, and core operations.
* **Webhooks:** Automated messages sent from apps when something happens, allowing for real-time data exchange.

### **Database Management**

* **CRUD (Create, Read, Update, Delete):** The four fundamental operations for managing data.
* **SQL (Structured Query Language):** The standard language for managing and querying data in relational databases.
* **PostgreSQL:** A powerful, open-source relational database known for its reliability and advanced features.

### **Security & Authentication**

* **OAuth:** An authentication standard that allows users to sign in with third-party accounts like Google or GitHub.
* **Two-Factor Authentication (2FA):** A security layer that requires users to provide two forms of identification to log in.
* **CORS (Cross-Origin Resource Sharing):** A security mechanism that controls how resources on your server can be accessed from other domains.