modus-angular-semantic-html

A markup rule for an Angular and Vite application that requires div elements for content, with i elements allowed for icons. Semantic HTML means elements such as headings, paragraphs, and navigation tags that describe their purpose.

In plain words
What is it for?
Use it when creating page layouts, text blocks, navigation areas, headers, footers, or other interface content in this application.
Why use it?
It keeps the project's markup consistent with its Tailwind CSS setup and avoids unwanted browser styling.

Cursor rule for Cursor

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add rules/julianoczkowski/create-trimble-app/modus-angular-semantic-html
Clone the repo
git clone --depth 1 https://github.com/julianoczkowski/create-trimble-app

Made for: Cursor.

Per session 0 Nothing until a file matches its globs; then the whole rule loads.
When invoked 668 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00668
Opus 5 $0.00000 $0.00334
Sonnet 5 $0.00000 $0.00134
Haiku 4.5 $0.00000 $0.00067

Measured 2d ago against content hash 6880e0eddfec, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

modus-angular-semantic-html scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

templates/angular/.cursor/rules/modus-angular-semantic-html.mdc · 82 lines

How it starts

The opening of the file, as written. The whole thing — 82 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Semantic HTML Usage in Angular + Vite

CRITICAL: Use Div Elements Only

MANDATORY: This Angular + Vite application uses div elements exclusively for all content (except <i> for icons) to avoid conflicts with Tailwind CSS default browser styles.

Rule: Use div elements with Tailwind classes instead of semantic HTML elements.

FORBIDDEN: Semantic HTML Elements

<!-- WRONG: Semantic HTML elements -->
<h1 class="text-4xl font-bold">Title</h1>
<p class="text-base">Paragraph text</p>
<section class="mb-8 p-4">Content section</section>
<header class="bg-background">Header content</header>
<footer class="bg-muted">Footer content</footer>
<nav class="flex space-x-4">Navigation</nav>
<span class="text-sm">Inline text</span>

CORRECT: Div Elements with Tailwind

<!-- CORRECT: Div elements with Tailwind classes -->
<div class="text-4xl font-bold">Title</div>
<div class="text-base">Paragraph text</div>
<div class="mb-8 p-4">Content section</div>
<div class="bg-background">Header content</div>
<div class="bg-muted">Footer content</div>
<div class="flex space-x-4">Navigation</div>
<div class="text-sm">Inline text</div>

Component Patterns

Page Layout with Divs

@Component({
  selector: 'page-layout',
  template: `
    <div class="min-h-screen flex flex-col">
      <div class="bg-background border-b border-default">
        <div class="container mx-auto px-4 py-4">
          <div class="text-2xl font-bold text-foreground">App Title</div>
        </div>
      </div>

      <div class="flex-1">
        <ng-content />
      </div>

      <div class="bg-muted border-t border-default">
        <div class="container mx-auto px-4 py-4">
          <div class="text-sm text-foreground-60">Footer content</div>
        </div>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageLayoutComponent {}

Semantic HTML Compliance Checklist

  • No Semantic Elements: No h1, h2, p, section, header, footer, nav, main, aside, article, span
  • Div Elements Only: All content uses div elements
  • Icon Exception: Only <i> elements allowed for icons
  • Tailwind Styling: All styling through Tailwind classes

Read the full file on GitHub · 82 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 82 lines · 0 tokens per session scan A 6880e0eddfec

Subscribe to this mod's changes

modus-angular-semantic-html is a cursor rule published in the GitHub repository julianoczkowski/create-trimble-app (3 stars, last pushed 1mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 668 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.