diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4ff7e73 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/playground/** +!playground/.gitkeep diff --git a/FINDINGS.md b/FINDINGS.md new file mode 100644 index 0000000..a1c3f22 --- /dev/null +++ b/FINDINGS.md @@ -0,0 +1,4 @@ +# Findings + +## Gemini CLI +- Didn't understand that the goal was to create a compliant HTML webpages. It just copy and pasted components from ./components together. diff --git a/GEMINI.md b/GEMINI.md new file mode 100644 index 0000000..5a7f94f --- /dev/null +++ b/GEMINI.md @@ -0,0 +1,485 @@ +# 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. + +--- + +## 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 +``` diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..fa141ef --- /dev/null +++ b/Makefile @@ -0,0 +1,6 @@ + +prepare: + cp -R ./template/* ./playground + +clean: + cd ./playground && find . ! -name '.gitkeep' -delete diff --git a/README.md b/README.md new file mode 100644 index 0000000..b399790 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# Tailwind-AI + +An lab to run experiments using agentic coding tools to use Tailwind Plus Components. + +## Setup + +The setup assumes you have `tailwindcss` installed globally on your machine. + +## How to run an experiment + +A makefile is present with the commands `prepare` and `clean`. Note these are destructive commands and will wipe the current contents of the `./playground` directory. + +Each experiment you want to run should be done within the `./playground` directory. Simply `make prepare` the directory then run your agentic coding tool within that directory as the target for changes. + +## Resources + +- [Gemini-cli Cheatsheet](https://www.philschmid.de/gemini-cli-cheatsheet) +- [Tailwind 4 Features](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration) diff --git a/basic_html.html b/basic_html.html deleted file mode 100644 index d1431ab..0000000 --- a/basic_html.html +++ /dev/null @@ -1,12 +0,0 @@ - - -
- - -