| name | build-destiny-page |
| description | Build an HTML page or view using the destiny-ui-css framework (Destiny 1/2 style UI). Use when asked to create a page, screen, mockup or component composition with this framework — e.g. "build a vendor screen", "make a loadout page", "create a Destiny-style form". |
Build a page with destiny-ui-css
Reference first
Read docs/llms.txt — it is the complete markup reference: setup, every component's
canonical HTML, the class-name vocabulary (rarity/damage names reused across
components), theming tokens, and composition patterns for full screens. Follow it
exactly; do not invent class names.
Page skeleton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="<path>/destiny2-full-framework.min.css" rel="stylesheet" />
</head>
<body class="destiny">
…
</body>
</html>
- The
destiny class on a wrapper is mandatory; nothing works outside it.
- Use
dist/destiny2-full-framework.min.css (or the expanded .css) from this repo.
For pages inside docs/, link dist/destiny2-full-framework.css (that copy is
rebuilt by npm run build-css).
- Keep the page background very dark; the framework assumes it.
Working rules
- Compose from existing components before writing custom CSS. If custom page-layout
CSS is needed, put it in a separate page stylesheet — never edit framework files for
a page's needs, and never override framework internals with custom selectors.
- To change colors, override
--d2-* custom properties on .destiny (see the
Theming section of docs/llms.txt); do not hardcode replacement colors.
- Interactivity (tab switching, hold-to-confirm, progress updates) is plain JS you
write; the framework only provides state classes (
active, selected, disabled)
and native :checked styling. docs/demos.html contains working reference JS for
a screen switcher, hold-to-confirm buttons, tooltip rendering from data attributes,
and animated progress bars — copy those patterns rather than reinventing.
Verify
Render the page in a browser (headless is fine) and screenshot it before declaring it
done. Check: the destiny scope is applied (uppercased, letter-spaced buttons are the
tell), rarity/damage colors look right, and hover/checked states work. If Playwright is
available, load the page via a file:// URL and screenshot each major section.
