Skip to main content
affpapa.org
RU EN
rule

html-tailwind-css-javascript-cursorrules-prompt-fi — Cursor rule

A Cursor rule for HTML, Tailwind CSS, and vanilla JavaScript work. Use it when an agent needs clear coding constraints for frontend files.

Install into Cursor · Manually: put the files in place All methods and platforms ↓ 
.cursor/rules/html-tailwind-css-javascript-cursorrules-prompt-fi.mdc
Open on GitHub

What html-tailwind-css-javascript-cursorrules-prompt-fi does

This rule guides Cursor toward current HTML, Tailwind CSS, and vanilla JavaScript practices. It tells the assistant to follow requirements closely, confirm the task before coding, favor readable code, and finish the requested functionality without leaving placeholders.

The instructions also cover security, performance, concise replies, and focused edits to existing code. When changing a file, Cursor should show the relevant replacement lines instead of repeating the whole listing. The rule targets **/*, while alwaysApply: false means it is not enabled for every request by default.

What it helps with

  • build an HTML page with Tailwind CSS
  • add vanilla JavaScript behavior without a framework
  • edit existing code without repeating the full file
  • check frontend code for readability and missing pieces
  • apply security requirements to browser code

Example prompts for the agent

  • Build the page in index.html with Tailwind CSS and add its behavior in vanilla JavaScript.
  • Confirm the task first, then implement the HTML form with no unfinished sections.
  • Update this code and show only the lines around the changes I need to make.

How to install html-tailwind-css-javascript-cursorrules-prompt-fi

Manually: put the files in place

.cursor/rules/html-tailwind-css-javascript-cursorrules-prompt-fi.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about html-tailwind-css-javascript-cursorrules-prompt-fi

How do I install html-tailwind-css-javascript-cursorrules-prompt-fi in Cursor?

Place the rule file at .cursor/rules/html-tailwind-css-javascript-cursorrules-prompt-fi.mdc in the Cursor project.

What does html-tailwind-css-javascript-cursorrules-prompt-fi do?

It directs Cursor to work on HTML, Tailwind CSS, and vanilla JavaScript with readable, complete, concise code and focused edits.

Does the rule apply to every request automatically?

Its file pattern is **/*, but alwaysApply is set to false, so it is not automatically active for every request.

Source text

html-tailwind-css-javascript-cursorrules-prompt-fi.mdc · CC0-1.0 
---
description: "Cursor rules for HTML development with Tailwind CSS and JavaScript integration."
globs: **/*
alwaysApply: false
---
You are an expert AI programming assistant that primarily focuses on producing clear, readable HTML, Tailwind CSS and vanilla JavaScript code.

You always use the latest version of HTML, Tailwind CSS and vanilla JavaScript, and you are familiar with the latest features and best practices.

You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.

- Follow the user’s requirements carefully & to the letter.
- Confirm, then write code!
- Suggest solutions that I didn't think about-anticipate my needs
- Treat me as an expert
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Be concise. Minimize any other prose.
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.
- If I ask for adjustments to code, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make.

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →
tailwind-css PaulRBerg Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection. CX Codex +1 3,000installs html-css-style-color-guide official github This rule guides color choices for HTML and CSS, from backgrounds and text to gradients. Use it when editing browser-facing styles and checking contrast. ★ 40,451repo stars tailwind-css-patterns giuseppe-trisciuoglio A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. Useful when it styles React, Vue or Svelte components. CX Codex +1 17,700installs tailwind-design-system Seth Hobson Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns. CX Codex 70,180installs tailwind-4 prowler-cloud A skill that sets how the agent styles with Tailwind CSS 4: which classes go in className, when to use style, and when to build classes with cn(). CX Codex +1 612installs material-ui-tailwind mui This skill explains how to combine Material UI with Tailwind CSS, handle CSS layer order, pass utility classes to components, and work with Tailwind v3. CX Codex +1 365installs

From the same set210

htmx-go-basic-cursorrules-prompt-file Guides Cursor when building Go web apps with HTMX. Enforces standard project layout, html/template rendering, and idiomatic request handling. ★ 41,024repo stars htmx-flask-cursorrules-prompt-file A Cursor rule for HTMX projects built with Flask. It sets guidance for templates, forms, routes, database access, and project layout. ★ 41,024repo stars htmx-django-cursorrules-prompt-file A Cursor rule that keeps the agent on Django rails while it writes HTMX code: templates, forms, CSRF, class-based views. ★ 41,024repo stars htmx-basic-cursorrules-prompt-file Guides Cursor when building HTMX interfaces with server templates, clean folder layouts around app.py, and standard request attributes. ★ 41,024repo stars how-to-documentation-cursorrules-prompt-file A Cursor rule that turns technical steps, test scripts and screenshots into step-by-step guides for non-technical users. Useful when you write How To docs for a feature. ★ 41,024repo stars hol-hedera-typescript-cursorrules-prompt-file Cursor rules for building decentralized Hedera AI agents with Hashgraph Online SDK in TypeScript. Enforces strict typing and TDD workflow. ★ 41,024repo stars harmony-arkts A Cursor rule for HarmonyOS ArkTS code covering components, state, resources, layout, lifecycle, and accessibility. Useful for .ets projects. ★ 41,024repo stars graphical-apps-development-cursorrules-prompt-file A Cursor rule that feeds the agent the Pyllments context: graph-based LLM apps in Python built on Panel and Langchain. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor