# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a simple XML requirements viewer application consisting of:
- `xml_requirements_viewer.html` - A standalone HTML application for viewing XML requirements
- `sample_requirements.xml` - A sample XML file containing formatted requirements

## Architecture

The project is a single-page HTML application with embedded CSS and JavaScript. No build process, dependencies, or server is required - it runs entirely in the browser.

### Core Components

- **HTML Structure**: Standard HTML5 with responsive design
- **CSS Styling**: Embedded styles with dark mode support via `@media (prefers-color-scheme: dark)`
- **JavaScript Functionality**: 
  - Drag-and-drop file handling
  - XML parsing using DOMParser
  - Dynamic DOM manipulation for requirements display

### XML Structure

The viewer expects XML files with this structure:
```xml
<requirements>
    <requirement id="REQ-XXX">
        <title>Title</title>
        <priority>High/Medium/Low</priority>
        <category>Category</category>
        <text>HTML-formatted requirement text with custom tags</text>
        <status>Active/Draft</status>
    </requirement>
</requirements>
```

### Custom XML Tags Supported

The viewer supports various custom formatting tags within `<text>` elements:
- Text formatting: `<strong>`, `<em>`, `<u>`, `<del>`, `<sup>`, `<sub>`, `<mark>`, `<small>`
- Code elements: `<code>`, `<kbd>`, `<samp>`, `<var>`, `<pre>`
- Semantic tags: `<critical>`, `<optional>`, `<deprecated>`, `<todo>`
- Technical tags: `<value>`, `<unit>`, `<term>`, `<acronym>`, `<version>`
- Structure: `<br>`, `<hr>`, `<ul>`, `<ol>`, `<li>`, `<blockquote>`
- References: `<ref>`, `<url>`, `<link>`

## Usage

Open `xml_requirements_viewer.html` in a web browser and drag/drop or select XML files to view formatted requirements.