# Dmvcframework UI > DMVCFramework — UI layer (Bootstrap 5.3 + style.css) - Skill: `danieleteti/dmvcframework-ui` (Agent Skill) - Install (CLI): `npx skillmds@latest add danieleteti/dmvcframework-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/danieleteti/dmvcframework-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: danieleteti (https://skillmd.com/u/danieleteti) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/danieleteti/dmvcframework-ui --- # DMVCFramework — UI layer (Bootstrap 5.3 + style.css) The wizard's web application ships a complete presentation layer. **Use it — do not invent one.** Before writing any markup or CSS, know these three facts: 1. **Bootstrap 5.3 is already loaded** from CDN in `baselayout.html` (CSS in ``, `bootstrap.bundle.min.js` before ``). Every stock component — grid, cards, navbar, buttons, forms, alerts, badges, modals, spinners, toasts — is available. Do not add another CSS framework, and do not hand-roll what Bootstrap has. 2. **`style.css` is deliberately small** (~100 lines). It is *not* a design system: it sets brand tokens, repaints Bootstrap's primary colour, and adds four helpers. Read it before adding anything to it. 3. **Dark mode is Bootstrap's**, driven by `data-bs-theme` on ``. Never write a `.dark-mode` class or a `prefers-color-scheme` media query — use Bootstrap's theme-aware variables and they follow the toggle for free. **STOP — this skill works inside a wizard-generated project.** It describes the layout and stylesheet the DMVCFramework IDE wizard produces. If there is no wizard project in the current folder (no `bin/templates/baselayout.html`, no `bin/www/css/style.css`), stop and tell the user to create one first (**Delphi IDE → File → New → Other → Delphi Projects → DelphiMVCFramework → New DMVCFramework Application**, preset **Web Application**, defaults accepted — the server backend is **Indy Direct**), then `cd` into the folder and start you there. **Read `baselayout.html` and `style.css` before writing any markup or CSS.** **COMPANION SKILL:** `dmvcframework-webapp` — the server side (TemplatePro syntax, `RenderView`, `ViewData`, HTMX, controllers). This skill is only about what the browser renders. --- ## When in doubt about an API — verify it, never guess Never invent an identifier or answer from memory. If you need a signature this skill does not cover, ask the user for the path to their **DelphiMVCFramework checkout** and read `sources/` (and the matching `samples/` project); failing that, read the official repository — [sources](https://github.com/danieleteti/delphimvcframework/tree/master/sources) · [samples](https://github.com/danieleteti/delphimvcframework/tree/master/samples). If you still cannot verify it, **say so**. Where a skill and a sample disagree, **the sample wins**. --- ## 1. What `baselayout.html` gives you Every page does `{{extends "../baselayout.html"}}` and fills blocks. The layout already provides the ``, ``, the navbar, `

`, the footer, the toast container, Bootstrap's JS, the theme toggle and the no-flash theme restore script. **Blocks you override:** | Block | Purpose | |-------|---------| | `title` | Page title in the browser tab | | `body` | The page content — this is the one you always fill | | `extra_css` | Extra ``/`