HTML Tailwind CSS Guide .cursorrules prompt file

Chance

NEW

HTML Tailwind CSS Guide .cursorrules prompt file

Certainly! Here's the updated YAML file, aligned with your new goals of minimizing JavaScript usage and incorporating AlpineJS or HTMX if interactivity is needed.

# Cursor Guidelines for Building the Multi-Page Websiteproject:  name: "Primordial Groove Website"  description: "A multi-page website for the Primordial Groove community, built with HTML, Tailwind CSS, minimal JavaScript, and hosted on GitHub Pages."# Guidelines for Structure and Organizationstructure:- Ensure that each page (Home, About, Events, Contact, etc.) has its own HTML file.- Use relative paths for internal links between pages.- Keep a clear, hierarchical folder structure. Example:  - /index.html  - /about.html  - /events.html  - /contact.html  - /assets/css (for any custom stylesheets)  - /assets/images (for images from past events)- Limit the use of unnecessary directories and files to maintain simplicity.- **Mobile-first principle**: Prioritize structuring pages to render well on mobile screens first, and then adjust for larger devices using responsive utilities.# Naming Conventionsnaming_conventions:- Use kebab-case for all filenames (e.g., index.html, about.html, events.html, contact.html).- Ensure HTML element class names in Tailwind CSS follow descriptive patterns (e.g., `bg-gray-800`, `text-center`).- Keep naming clear and meaningful for IDs or custom classes, e.g., use `main-hero` instead of `div1`.- Tailwind class prefixes like `sm:`, `md:`, `lg:` should only be used when enhancing the layout for larger screens (mobile-first).# Styling Guidelines (Tailwind CSS)styling:- Utilize Tailwind CSS for all page styling. Avoid inline styles or additional CSS unless necessary.- Stick to utility-first classes from Tailwind for rapid development and maintainability.- **Mobile-first responsiveness**: Use base Tailwind classes for mobile devices and apply responsive breakpoints (`sm:`, `md:`, `lg:`, etc.) to modify styles on larger screens.- Prioritize `flex`, `grid`, and other responsive utility classes to ensure flexible layouts that adapt from mobile to desktop smoothly.- Use Tailwind's predefined color palette or customize via config if needed to reflect the Primordial Groove ethos.- Minimize custom CSS usage. If required, custom styles should go in `/assets/css/styles.css`.# JavaScript Usage Guidelinesjavascript:- Aim to minimize JavaScript usage throughout the website.- If interactivity or dynamic behavior is needed, prefer using **AlpineJS** or **HTMX**.- Include AlpineJS or HTMX via CDN to avoid increasing build complexity.- Avoid heavy JavaScript frameworks or libraries.- Place any custom JavaScript at the bottom of the ``<body>`` tag or in separate JS files if needed.- Ensure that the site functions correctly even if JavaScript is disabled (progressive enhancement).# Accessibility and Semanticsaccessibility:- All images must include `alt` attributes for accessibility purposes.- Use semantic HTML elements where possible (e.g., ``<nav>``, ``<section>``, ``<header>``, ``<footer>``, ``<main>``, ``<article>``).- Ensure all text content is readable on any background by using sufficient color contrast (e.g., `bg-gray-800 text-white`).- **Mobile-first considerations**: Ensure that tap targets (buttons, links) are large enough for mobile users (44x44 pixels minimum) and that content is accessible without zooming or horizontal scrolling.- Use ARIA attributes where necessary to enhance accessibility.# Best Practices for HTMLhtml_practices:- Keep HTML files clean and well-indented for readability.- **Avoid inline JavaScript and event handlers** (e.g., `onclick`). Use data attributes with AlpineJS or HTMX for interactivity.- **Mobile-first meta tag**: Ensure each HTML file includes a meta tag for responsive design:  ```html  `<meta name="viewport" content="width=device-width, initial-scale=1.0">`

Use proper <title> and <meta> descriptions for each page.
Keep the HTML5 doctype declaration at the top of every file:
```
`<!DOCTYPE html>`
```
Ensure the design adapts naturally to mobile devices first, then apply enhancements for larger screens.

Version Control Guidelines

version_control:

Commit changes frequently with meaningful commit messages.
Each commit should represent a logical and cohesive set of changes (e.g., "Added about page content").
Keep the main branch clean; create feature branches for significant changes.
Use .gitignore to exclude unnecessary files like temporary backups or node_modules (if used in the future).

Content and Branding

content:

Ensure consistency in tone and messaging across all pages.
Use a unified design style (e.g., consistent colors, typography, and layout) that reflects the Primordial Groove ethos.
Integrate the tagline "Find Your Tribe, Find Your Rhythm" prominently on the homepage.
Use images from past events to showcase the community and authenticity.
Avoid filler text—every section must have meaningful and relevant content.
Mobile-first content flow: Ensure text, images, and other media scale correctly on mobile devices. Start by testing on smaller screens and progressively enhance for larger devices.

Deployment Guidelines

deployment:

Ensure all necessary files (HTML, CSS, images) are committed to GitHub before deployment.
Test all internal and external links before deploying.
After deployment to GitHub Pages, test responsiveness and functionality on various devices and browsers.
If you make changes, ensure they are reflected on GitHub Pages by pushing new commits.
Mobile-first testing: Prioritize testing on mobile devices (smartphones, tablets) and ensure smooth navigation and usability before expanding to desktop devices.

Performance Optimization

performance:

Minimize the number of HTTP requests (e.g., by combining assets where possible).
Optimize all images to reduce load times (use web-optimized formats like .webp where applicable).
Leverage Tailwind CSS's purging capability to remove unused CSS classes if necessary.
Mobile-first optimizations: Focus on reducing page load times and minimizing asset sizes for mobile users. Optimize for mobile network performance by compressing images and limiting heavy resources.
Include AlpineJS or HTMX via CDN to avoid increasing the bundle size.

Future-Proofing and Scalability

scalability:

Keep the website modular to allow easy expansion (adding more pages or sections).
Maintain a consistent structure so others can easily contribute to the project if needed.
Plan for potential enhancements like adding more interactivity using AlpineJS or HTMX while keeping JavaScript minimal.
Mobile-first mindset: Ensure the project can scale for future mobile-focused features, such as progressive web app (PWA) support, offline access, or further mobile optimizations.

This updated YAML file aligns with your new goals of minimizing JavaScript usage and preferring **AlpineJS** or **HTMX** for any required interactivity. It emphasizes building a website that reflects the ethos of **Primordial Groove** while maintaining simplicity and performance, especially on mobile devices.---**Key Updates:**- **JavaScript Usage Guidelines**: Added a new section specifying the use of **AlpineJS** or **HTMX** for minimal JavaScript needs.- **Content and Branding**: Emphasized using images from past events to showcase community authenticity.- **Performance Optimization**: Included notes on loading AlpineJS or HTMX via CDN to keep the bundle size small.- **Best Practices for HTML**: Adjusted guidelines to avoid inline JavaScript and use data attributes for interactivity with AlpineJS or HTMX.- **Scalability**: Planned for future enhancements using AlpineJS or HTMX while keeping JavaScript minimal.

stack:

HTML Tailwind CSS Guide .cursorrules prompt file

Chance

About .cursorrules prompt file

What you can build

Minimal Web Builder: A tool that allows users to create multi-page websites with a focus on using Tailwind CSS and minimizing JavaScript, integrating AlpineJS or HTMX for interactivity.
Accessible Website Checker: An app that scans websites to ensure they meet accessibility standards, including mobile-first considerations and proper semantic HTML usage as outlined in the guidelines.
Mobile-First Tester: A service that tests websites for mobile-first design principles, ensuring smooth navigation and usability prioritizing mobile devices.
Tailwind CSS Optimization Service: A tool to help optimize Tailwind CSS usage, including purging unused styles and implementing responsive design best practices.
GitHub Pages Deployment Tool: A service that facilitates deploying multi-page websites on GitHub Pages, ensuring all links and responsive designs are functional.
Content Consistency Analyzer: An application that checks for consistency in tone, messaging, and design style across web pages, supporting the goals of the Primordial Groove project.
Semantic HTML Validator: A website that checks if a page is using semantic HTML tags and assists in correcting any issues found.
Image Optimization Platform: A service to optimize images for web formats like .webp, reducing load times and improving performance for mobile users.
Performance Monitoring Tool: An app that tracks website performance metrics, specifically designed to help maintain a minimal and efficient mobile-first experience.
Modular Web Design Framework: A framework aimed at ensuring modular and easily expandable web design, allowing for future enhancements and scalability across mobile platforms.

Benefits

Emphasizes a mobile-first approach across guidelines, ensuring optimal performance and usability on smartphones before scaling for larger screens.
Prioritizes minimal JavaScript usage, suggesting AlpineJS or HTMX for necessary interactivity to maintain simplicity and performance.
Ensures community authenticity by using images from past events and emphasizes consistent, meaningful content with a unified design style.

Synopsis

Developers aiming to create efficient, easily maintainable websites with minimal JavaScript will benefit from these guidelines, enabling them to build a performant, accessible, multi-page web application.

Overview of .cursorrules prompt

The .cursorrules file provides a comprehensive set of guidelines for building a multi-page website for the Primordial Groove community. It focuses on using HTML and Tailwind CSS while minimizing JavaScript, instead preferring AlpineJS or HTMX for interactivity if needed. The file includes directives for structure, styling, version control, accessibility, content, deployment, and performance, emphasizing a mobile-first approach. It also ensures consistency in tone, responsive design, and adheres to best practices in web development. Additionally, it outlines plans for scalability and future enhancements, ensuring the website remains lightweight and efficient on various devices.

HTML Tailwind CSS Guide .cursorrules prompt file

HTML Tailwind CSS Guide .cursorrules prompt file

HTML Tailwind CSS Guide .cursorrules prompt file

About .cursorrules prompt file

What you can build

Benefits

Synopsis

Overview of .cursorrules prompt

Tags

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

JavaScript CSS HTML Obsidian .cursorrules prompt file

ReactJS Front-End Developer .cursorrules prompt file

Tanstack Start TypeScript State Mgmt .cursorrules prompt file

Hugo Static Websites .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

Python FastAPI Scalable API .cursorrules prompt file

Flask-RESTful JWT RESTX .cursorrules prompt file

Cursor AI React TypeScript Shadcn UI .cursorrules prompt file

Next.js React TypeScript .cursorrules prompt file

Python Pytest Typer .cursorrules prompt file

Next.js Tailwind CSS Obsidian Plugin .cursorrules prompt file

Next.js TypeScript Clerk Stripe Vercel Setup .cursorrules prompt file

React TypeScript Care Project .cursorrules prompt file

Elixir Code Guidelines .cursorrules prompt file

.cursorrules file Cursor AI Python FastAPI API

SvelteKit TailwindCSS TypeScript .cursorrules prompt file

JavaScript TypeScript Code Quality .cursorrules prompt file

Plasticode Telegram API .cursorrules prompt file

ES Module Node.js Guidelines .cursorrules prompt file

Cursor Tip

Here is a quick example of leveraging the .cursorrules file (sys

Cursor Tip

Cursor Tip

Cursor Tip

Create a Chrome Extension Fast: Cursor AI Tutorial

Build ChatGPT with Python: Cursor AI Tutorial Guide

Build AI Voice Notes App: Cursor AI Tutorial Guide

Cursor AI Tutorial: Easy Loading Page with Shadcn Components