# Gemini CLI Configuration for Project Components This document provides context and instructions for the Gemini CLI when working with this project. --- ## Project Context This project utilizes a `components/` directory at its root, which contains a collection of Tailwind CSS-based HTML partials. These components are organized hierarchically by their intended purpose (e.g., `application_ui`, `marketing`). **The files within the `components/` directory are intended as a library of examples and building blocks.** They should **never be directly modified or edited** by the Gemini CLI. ### Development Sandbox **All file modifications must be confined to the `./playground` directory**. This is the designated area for all development and coding work. The Gemini CLI must not, under any circumstances, attempt to create, modify, or delete files outside of the `./playground` --- ## Component Utilization Strategy When generating or modifying HTML, the Gemini CLI should refer to the examples provided in the `components/` directory to understand patterns, styles, and structures for various UI elements. **For any request involving a UI element that closely resembles a component in `components/`, the CLI should:** 1. **Identify relevant component(s):** Search the `components/` directory for the most appropriate and similar HTML partials. 2. **Adapt and integrate:** Extract the necessary HTML and Tailwind classes from the identified component(s) and adapt them to fit the specific requirements of the user's request. This involves: * Copying and pasting relevant HTML structures. * Applying or adjusting Tailwind classes as needed. * Modifying content (text, images, links) to match the request. * Combining elements from multiple components if necessary to fulfill a complex request. 3. **Generate new code:** The adapted code should be generated in the target file specified by the user's request, *not* within the `components/` directory. --- ## Component Directory Structure The following is an overview of the `components/` directory structure for reference: ``` components/ ├── application_ui │   ├── application_shells │   │   ├── multi_column_layouts │   │   │   ├── constrained_three_column.html │   │   │   ├── constrained_with_sticky_columns.html │   │   │   ├── full_width_secondary_column_on_right.html │   │   │   ├── full_width_three_column.html │   │   │   ├── full_width_with_narrow_sidebar_and_header.html │   │   │   └── full_width_with_narrow_sidebar.html │   │   ├── sidebar_layouts │   │   │   ├── brand_sidebar.html │   │   │   ├── brand_sidebar_with_headers.html │   │   │   ├── dark_sidebar.html │   │   │   ├── dark_sidebar_with_header.html │   │   │   ├── light_sidebar.html │   │   │   ├── light_sidebar_with_constrained_content_area.html │   │   │   ├── light_sidebar_with_header.html │   │   │   └── light_sidebar_with_off_white_background.html │   │   └── stacked_layouts │   │   ├── branded_nav_with_compact_page_header.html │   │   ├── branded_nav_with_white_page_header.html │   │   ├── brand_nav_with_overlap.html │   │   ├── dark_nav_with_compact_white_page_header.html │   │   ├── dark_nav_with_overlap.html │   │   ├── dark_nav_with_white_page_header.html │   │   ├── light_nav_on_gray_background.html │   │   ├── light_nav_with_bottom_border.html │   │   └── two_row_navigation_with_overlap.html │   ├── data_display │   │   ├── calendars │   │   │   ├── borderless_side_by_side.html │   │   │   ├── bordlerless_stacked.html │   │   │   ├── day_view.html │   │   │   ├── double.html │   │   │   ├── month_view.html │   │   │   ├── small_with_meetings.html │   │   │   ├── week_view.html │   │   │   └── year_view.html │   │   ├── description_lists │   │   │   ├── left_aligned.html │   │   │   ├── left_aligned_in_card.html │   │   │   ├── left_aligned_on_dark.html │   │   │   ├── left_aligned_striped.html │   │   │   ├── left_aligned_with_inline_actions.html │   │   │   ├── narrow_with_hidden_labels.html │   │   │   └── two_column.html │   │   └── stats │   │   ├── simple.html │   │   ├── simple_in_cards.html │   │   ├── with_brand_icon.html │   │   ├── with_shared_borders.html │   │   └── with_trending.html │   ├── elements │   │   ├── avatars │   │   │   ├── avatar_group_stacked_botton_to_top.html │   │   │   ├── avatar_group_stacked_top_to_bottom.html │   │   │   ├── circular_avatars.html │   │   │   ├── circular_avatars_with_bottom_notification.html │   │   │   ├── circular_avatars_with_placeholder_icon.html │   │   │   ├── circular_avatars_with_placeholder_initials.html │   │   │   ├── circular_avatars_with_top_notification.html │   │   │   ├── rounded_avatars.html │   │   │   ├── rounded_avatars_with_bottom_notification.html │   │   │   ├── rounded_avatars_with_top_notification.html │   │   │   └── with_text.html │   │   ├── badges │   │   │   ├── flat.html │   │   │   ├── flat_pill.html │   │   │   ├── flat_pill_with_dot.html │   │   │   ├── flat_with_dot.html │   │   │   ├── flat_with_remove_button.html │   │   │   ├── pill_with_border_and_dot.html │   │   │   ├── pill_with_border.html │   │   │   ├── small_flat.html │   │   │   ├── small_flat_pill.html │   │   │   ├── small_flat_pill_with_dot.html │   │   │   ├── small_flat_with_dot.html │   │   │   ├── small_pill_with_border.html │   │   │   ├── small_with_border.html │   │   │   ├── with_border_and_dot.html │   │   │   ├── with_border_and_dot_on_dark.html │   │   │   ├── with_border_and_remove_button.html │   │   │   ├── with_border.html │   │   │   └── with_border_on_dark.html │   │   ├── button_groups │   │   │   ├── basic.html │   │   │   ├── icon_only.html │   │   │   ├── with_checkbox_and_dropdown.html │   │   │   ├── with_dropdown.html │   │   │   └── with_stat.html │   │   ├── buttons │   │   │   ├── buttons_with_leading_icon.html │   │   │   ├── buttons_with_trailing_icon.html │   │   │   ├── circular_buttons.html │   │   │   ├── primary_buttons.html │   │   │   ├── primary_buttons_on_dark.html │   │   │   ├── rounded_primary_buttons.html │   │   │   ├── rounded_secondary_buttons.html │   │   │   ├── secondary_buttons.html │   │   │   ├── secondary_buttons_on_dark.html │   │   │   └── soft_buttons.html │   │   └── dropdowns │   │   ├── simple.html │   │   ├── with_dividers.html │   │   ├── with_icons.html │   │   ├── with_minimal_menu_icon.html │   │   └── with_simple_header.html │   ├── feedback │   │   ├── alerts │   │   │   ├── with_accent_border.html │   │   │   ├── with_actions.html │   │   │   ├── with_description.html │   │   │   ├── with_dismiss_button.html │   │   │   ├── with_link_on_right.html │   │   │   └── with_list.html │   │   └── empty_states │   │   ├── simple.html │   │   ├── with_dashed_border.html │   │   ├── with_recommendation_grids.html │   │   ├── with_recommendations.html │   │   ├── with_starting_points.html │   │   └── with_templates.html │   ├── forms │   │   ├── action_panels │   │   │   ├── simple.html │   │   │   ├── simple_well.html │   │   │   ├── with_button_at_top_right.html │   │   │   ├── with_button_on_right.html │   │   │   ├── with_input.html │   │   │   ├── with_link.html │   │   │   ├── with_toggle.html │   │   │   └── with_well.html │   │   ├── checkboxes │   │   │   ├── list_with_checkbox_on_right.html │   │   │   ├── list_with_description.html │   │   │   ├── list_with_inline_description.html │   │   │   └── simple_list_with_heading.html │   │   ├── comboboxes │   │   │   ├── simple.html │   │   │   ├── with_image.html │   │   │   ├── with_secondary_text.html │   │   │   └── with_status_indicator.html │   │   ├── form_layouts │   │   │   ├── labels_on_left.html │   │   │   ├── stacked.html │   │   │   ├── stacked_on_dark.html │   │   │   ├── two_column.html │   │   │   └── two_column_with_cards.html │   │   ├── input_groups │   │   │   ├── inpout_with_disabled_state.html │   │   │   ├── inputs_with_inset_labels_and_shared_borders.html │   │   │   ├── inputs_with_shared_borders.html │   │   │   ├── input_with_addon.html │   │   │   ├── input_with_corner_hint.html │   │   │   ├── input_with_gray_background_and_bottom_border.html │   │   │   ├── input_with_hidden_label.html │   │   │   ├── input_with_inline_addon.html │   │   │   ├── input_with_inline_leading_addon_and_trailing_dropdown.html │   │   │   ├── input_with_inline_leading_and_trailing_addons.html │   │   │   ├── input_with_inline_leading_dropdown.html │   │   │   ├── input_with_inset_label.html │   │   │   ├── input_with_keyboard_shortcut.html │   │   │   ├── input_with_label_and_help_text.html │   │   │   ├── input_with_label.html │   │   │   ├── input_with_leading_icon_and_trailing_button.html │   │   │   ├── input_with_leading_icon.html │   │   │   ├── input_with_overlapping_label.html │   │   │   ├── input_with_pill_shape.html │   │   │   ├── input_with_trailing_icon.html │   │   │   └── input_with_validation_error.html │   │   ├── radio_groups │   │   │   ├── cards.html │   │   │   ├── color_picker.html │   │   │   ├── list_with_description.html │   │   │   ├── list_with_descriptions_in_panel.html │   │   │   ├── list_with_inline_description.html │   │   │   ├── list_with_radio_on_right.html │   │   │   ├── simple_inline_list.html │   │   │   ├── simple_list.html │   │   │   ├── simple_list_with_radio_on_right.html │   │   │   ├── simple_table.html │   │   │   ├── small_cards.html │   │   │   └── stacked_cards.html │   │   ├── select_menus │   │   │   ├── branded_with_supported_text.html │   │   │   ├── custom_with_avatar.html │   │   │   ├── custom_with_check_on_left.html │   │   │   ├── custom_with_status_indicator.html │   │   │   ├── simple_custom.html │   │   │   ├── simple_native.html │   │   │   └── with_secondary_text.html │   │   ├── signin_and_registration │   │   │   ├── simple_card.html │   │   │   ├── simple.html │   │   │   ├── simple_no_labels.html │   │   │   ├── simple_on_dark.html │   │   │   └── split_screen.html │   │   ├── textareas │   │   │   ├── simple.html │   │   │   ├── with_avatar_and_actions.html │   │   │   ├── with_preview_button.html │   │   │   ├── with_title_and_pill_actions.html │   │   │   └── with_underline_and_actions.html │   │   └── toggles │   │   ├── short_toggle.html │   │   ├── simple_toggle.html │   │   ├── toggle_with_icon.html │   │   ├── with_left_label_and_description.html │   │   └── with_right_label.html │   ├── headings │   │   ├── card_headings │   │   │   ├── simple.html │   │   │   ├── with_action.html │   │   │   ├── with_avatar_and_actions.html │   │   │   ├── with_avatar_meta_and_dropdown.html │   │   │   ├── with_description_and_action.html │   │   │   └── with_description.html │   │   ├── page_headings │   │   │   ├── card_with_avatar_and_stats.html │   │   │   ├── with_actions_and_breadcrumbs.html │   │   │   ├── with_actions_and_breadcrumbs_on_dark.html │   │   │   ├── with_actions.html │   │   │   ├── with_actions_on_dark.html │   │   │   ├── with_avatar_and_actions.html │   │   │   ├── with_banner_image.html │   │   │   ├── with_filters_and_action.html │   │   │   ├── with_logo_meta_and_actions.html │   │   │   ├── with_meta_actions_and_breadcrumbs.html │   │   │   ├── with_meta_actions_and_breadcrumbs_on_dark.html │   │   │   ├── with_meta_and_actions.html │   │   │   └── with_meta_and_actions_on_dark.html │   │   └── section_headings │   ├── layout │   │   ├── cards │   │   │   ├── basic_card.html │   │   │   ├── card_edge_to_edge_on_mobile.html │   │   │   ├── card_with_footer.html │   │   │   ├── card_with_gray_body.html │   │   │   ├── card_with_gray_footer.html │   │   │   ├── card_with_header.html │   │   │   ├── card_with_heeader_and_footer.html │   │   │   ├── well_edge_to_edge_on_mobile.html │   │   │   ├── well.html │   │   │   └── well_on_gray.html │   │   ├── containers │   │   │   ├── constrained_to_br_with_padded_content.html │   │   │   ├── constrained_with_padded_content.html │   │   │   ├── full_mobil_constrained_to_br_with_padded_content.html │   │   │   ├── full_mobile_constrained_with_padded_content_above.html │   │   │   └── narrow_constrained_with_padded_content.html │   │   ├── dividers │   │   │   ├── with_button.html │   │   │   ├── with_icon.html │   │   │   ├── with_label.html │   │   │   ├── with_label_on_left.html │   │   │   ├── with_title_and_button.html │   │   │   ├── with_title.html │   │   │   ├── with_title_on_left.html │   │   │   └── with_toolbar.html │   │   ├── list_containers │   │   │   ├── card_with_dividers_full_width_on_mobile.html │   │   │   ├── card_with_dividers.html │   │   │   ├── flat_card_with_dividers.html │   │   │   ├── separate_cards_full_width_on_mobile.html │   │   │   ├── separate_cards.html │   │   │   ├── simple_with_dividers_full_width_on_mobile.html │   │   │   └── simple_with_dividers.html │   │   └── media_objects │   │   ├── aligned_to_bottom.html │   │   ├── aligned_to_center.html │   │   ├── basic.html │   │   ├── basic_responsive.html │   │   ├── media_on_right.html │   │   ├── nested.html │   │   ├── stretched_to_fit.html │   │   └── wide_responsive.html │   ├── lists │   │   ├── feeds │   │   │   ├── simple_with_icons.html │   │   │   ├── with_comments.html │   │   │   └── with_multiple_items_types.html │   │   ├── grid_lists │   │   │   ├── actions_with_shared_borders.html │   │   │   ├── contact_cards.html │   │   │   ├── contact_cards_with_small_portraits.html │   │   │   ├── horizontal_link_cards.html │   │   │   ├── images_with_details.html │   │   │   ├── logo_cards_with_description_list.html │   │   │   └── simple_cards.html │   │   ├── stacked_lists │   │   │   ├── full_width_with_constrained_content.html │   │   │   ├── full_width_with_links.html │   │   │   ├── in_card_with_links.html │   │   │   ├── narrow.html │   │   │   ├── narrow_with_actions.html │   │   │   ├── narrow_with_badges_on_dark.html │   │   │   ├── narrow_with_small_avatars.html │   │   │   ├── narrow_with_small_avatars_on_dark.html │   │   │   ├── narrow_with_sticky_headings.html │   │   │   ├── narrow_with_truncated_content.html │   │   │   ├── simple.html │   │   │   ├── simple_on_dark.html │   │   │   ├── two_columns_with_links.html │   │   │   ├── with_badges_buttons_and_action_menu.html │   │   │   ├── with_inline_links_and_actions_menu.html │   │   │   ├── with_inline_links_and_avatar_group.html │   │   │   └── with_links.html │   │   └── tables │   │   ├── full_width.html │   │   ├── full_width_with_avatars_on_dark.html │   │   ├── full_width_with_constrained_content.html │   │   ├── simple.html │   │   ├── simple_in_card.html │   │   ├── simple_on_dark.html │   │   ├── with_avatars_and_multi_line_content.html │   │   ├── with_border.html │   │   ├── with_checkboxes.html │   │   ├── with_condensed_content.html │   │   ├── with_grouped_rows.html │   │   ├── with_hidden_columns_on_mobile.html │   │   ├── with_hidden_headings.html │   │   ├── with_sortable_headings.html │   │   ├── with_stacked_columns_on_mobile.html │   │   ├── with_sticky_header.html │   │   ├── with_striped_rows.html │   │   ├── with_summary_rows.html │   │   ├── with_uppercase_headings.html │   │   └── with_veritcal_lines.html │   ├── navigation │   │   ├── breadcrumbs │   │   │   ├── contained.html │   │   │   ├── full_width_bar.html │   │   │   ├── simple_with_chevrons.html │   │   │   └── simple_with_slashes.html │   │   ├── command_palettes │   │   │   ├── dark_with_icons.html │   │   │   ├── semi_transparent_with_icons.html │   │   │   ├── simple.html │   │   │   ├── simple_with_padding.html │   │   │   ├── with_footer.html │   │   │   ├── with_groups.html │   │   │   ├── with_icons.html │   │   │   ├── with_images_and_descriptions.html │   │   │   └── with_preview.html │   │   ├── navbars │   │   │   ├── dark_with_quick_action.html │   │   │   ├── dark_with_search.html │   │   │   ├── simple_dark.html │   │   │   ├── simple_dark_with_menu_button_on_left.html │   │   │   ├── simple.html │   │   │   ├── simple_with_menu_button_on_left.html │   │   │   ├── with_centered_search_and_secondary_links_dark.html │   │   │   ├── with_centered_search_and_secondary_links.html │   │   │   ├── with_quick_action.html │   │   │   ├── with_search.html │   │   │   └── with_search_in_column_layout.html │   │   ├── pagination │   │   │   ├── card_footer_with_page_buttons.html │   │   │   ├── centered_page_numbers.html │   │   │   └── simple_card_footer.html │   │   ├── progress_bars │   │   │   ├── bullets_and_text.html │   │   │   ├── bullets.html │   │   │   ├── circles.html │   │   │   ├── circles_with_text.html │   │   │   ├── panels.html │   │   │   ├── panels_with_border.html │   │   │   ├── progress_bar.html │   │   │   └── simple.html │   │   ├── sidebar_navigation │   │   │   ├── brand.html │   │   │   ├── dark.html │   │   │   ├── light.html │   │   │   ├── with_expandable_sections.html │   │   │   └── with_secondary_navigation.html │   │   ├── tabs │   │   │   ├── bar_with_underline.html │   │   │   ├── full_width_tabs_with_underline.html │   │   │   ├── simple_on_dark.html │   │   │   ├── tabs_in_pills.html │   │   │   ├── tabs_in_pills_on_gray.html │   │   │   ├── tabs_in_pills_with_brand_color.html │   │   │   ├── tabs_with_underline_and_badges.html │   │   │   ├── tabs_with_underline_and_icons.html │   │   │   └── tabs_with_underline.html │   │   └── vertical_navigation │   │   ├── on_gray.html │   │   ├── simple.html │   │   ├── with_badges.html │   │   ├── with_icons_and_badges.html │   │   ├── with_icons.html │   │   └── with_secondary_navigation.html │   ├── overlays │   │   ├── drawers │   │   │   ├── contact_list_example.html │   │   │   ├── create_project_form_example.html │   │   │   ├── empty.html │   │   │   ├── file_details_example.html │   │   │   ├── user_profile_example.html │   │   │   ├── wide_create_project_from_example.html │   │   │   ├── wide_empty.html │   │   │   ├── wide_horizontal_user_profile_example.html │   │   │   ├── with_background_overly.html │   │   │   ├── with_branded_header.html │   │   │   ├── with_clone_button_on_outside.html │   │   │   └── with_sticky_footer.html │   │   ├── modal_dialogs │   │   │   ├── centered_with_sinlge_action.html │   │   │   ├── centered_with_wide_buttons.html │   │   │   ├── simple_alert.html │   │   │   ├── simple_alerts_with_left_aligned_buttons.html │   │   │   ├── simple_with_dismiss_button.html │   │   │   └── simple_with_gray_footer.html │   │   └── notifications │   │   ├── condensed.html │   │   ├── simple.html │   │   ├── with_actions_below.html │   │   ├── with_avatar.html │   │   ├── with_buttons_below.html │   │   └── with_split_buttons.html │   └── page_examples │   ├── detail_screens │   │   ├── index.html │   │   ├── sidebar_on_dark.html │   │   └── stacked.html │   ├── home_screens │   │   ├── sidebar_on_dark.html │   │   └── stacked.html │   └── settings_screens │   ├── sidebar_on_dark.html │   └── stacked.html └── marketing └── page_sections └── hero_sections ├── simple_centered.html ├── simple_centered_with_background_image.html ├── split_with_bordered_screenshot.html ├── split_with_code_example.html ├── split_with_image.html ├── split_with_screenshot.html ├── with_angled_image_on_right.html ├── with_app_screen_shot.html ├── with_bordered_app_screenshot.html ├── with_image_tiles.html ├── with_offset_image.html └── with_phone_mockup.html 65 directories, 382 files ```