Four production-ready Sitecore components built to extend Miller School's content authoring system. Each one began as an AI-prototyped baseline, then was refined to match University of Miami brand standards and meet WCAG 2.2 accessibility guidelines.
The setup. Who the work was for, what was made, who it served, who built it, and how long it took.
The University of Miami Miller School of Medicine is one of the largest academic medical centers in the Southeast, with hundreds of pages spanning patient care, research, and education across med.miami.edu. Their Sitecore site is built and maintained for them by Aegis Digital LLC, the agency I work for as a developer.
For the Fall 2025 semester, my assignment was to expand Miller School's library of authoring components: small, self-contained building blocks that content authors can drop into any page without writing a line of code. I shipped four of them under the working title of the UHealth Sitecore Component Library.
The existing Sitecore library covered the basics: hero banners, accordions, CTA cards. It stopped short of richer storytelling formats. Authors were left pasting screenshots into rich-text fields, asking developers for one-off builds, or settling for layouts that didn't match the polish of the rest of med.miami.edu. The library needed components that could surface treatments, showcase research data, highlight social media content, and present galleries — all without authors writing a line of code, and all on brand with the existing UHealth design system.
Built each component end to end. Owned the technical architecture, brand application, accessibility audit, Sitecore integration, and deployment to the live showcase. That's me.
My direct boss. Made design decisions and reviewed every iteration of every component, surfacing UX adjustments and brand-alignment notes before passing work upstream.
Adam's boss and the final sign-off on every component. Approved the production-ready version of each piece before it was considered shipped.
The Miller School site serves four distinct audiences, each arriving with different goals. The components had to read clearly to all of them.
Researching treatments, finding specialists, understanding care options at one of the region's largest academic medical centers.
Exploring M.D., Ph.D., and dual-degree programs, evaluating fit, and looking for proof points like research output and faculty quality.
Reviewing the school's published work, finding collaborators, and verifying credentials of programs and labs.
Internal Sitecore users — the secondary audience. Components have to be authoring-friendly so the public-facing experience stays consistent.
The work itself. Process, methods, constraints, and the deliverables that came out the other side.
Every component followed the same loop. The defining method of this engagement was AI as a development accelerator: I prompted Claude to build a working baseline of each component, then took ownership of brand application, accessibility, Sitecore integration, and the review cycle.
Adam defined the content gap, target page, and reference examples. I confirmed scope and acceptance criteria.
Worked with Claude to generate a functional vanilla HTML, CSS, and JS baseline that hit the spec without any branding applied.
Replaced placeholder colors, fonts, and spacing with University of Miami tokens from the UHealth style guide.
Hardened for production: WCAG 2.2 AA accessibility, Sitecore-safe CSS isolation, IIFE-scoped JS, edge-case handling.
Adam reviewed every iteration. I revised, then routed final output to Tauffyt for sign-off.
Pushed to Sitecore, then mirrored to a public showcase at um-fall-components-2025.madelinecole.com.
The AI baseline saved hours of writing scaffolding code, but always needed real engineering judgment afterward: enforcing CSS isolation in Sitecore's shared style environment, applying brand tokens consistently, fixing accessibility gaps the model missed, and adapting markup to match patterns the rest of the Miller School library already used. The result is faster delivery without compromising on craft or accountability.
Components generated by Claude were functional but visually neutral: default fonts, placeholder colors, generic spacing. They looked nothing like the rest of med.miami.edu.
Used the UHealth style guide as the source of truth. Replaced every placeholder with a brand token: green #005030, orange #F47321, blue #59A1CD, plus the approved typography scale. Treated the AI output as scaffolding and the brand application as the real engineering work.
Sitecore loads global stylesheets that aggressively style every element on the page. New components were inheriting unwanted padding, font sizes, and border styles from the parent theme.
Adopted a strict naming convention. Every component prefixed all classes with a unique slug like .uhealth-az-d5__. For elements that needed to fight inheritance, used all: unset to reset everything before applying component styles.
Sitecore pages render asynchronously, with components sometimes injected after DOMContentLoaded. Initial scripts ran before their target elements existed, breaking the gallery and slider.
Wrapped each component's JavaScript in an IIFE and added a defensive querySelector guard before initializing. Components fail silently if their root element is missing, rather than throwing console errors that break the whole page.
The 3D video slider and hover-revealed gallery captions both posed accessibility risks. Keyboard users couldn't trigger reveals, and screen reader users had no way to announce slide changes.
Added focus states that mirror hover states, ARIA roles for the carousel (role="region", aria-label), full keyboard navigation with arrow keys, and visible focus outlines on every interactive element. Tested with VoiceOver and keyboard-only flows.
A scannable, alphabetized treatment directory with sticky letter navigation and a visual distinction between linked and unlinked entries. Replaces a flat 3-column unordered list that visitors couldn't scan.
An editorial image gallery with alternating 2:1 and 1:2 row ratios, GLightbox integration, and hover-revealed captions. Designed to feel curated rather than gridded.
A counter component for showcasing research metrics, faculty stats, and student outcomes. Numbers animate from zero on scroll, using IntersectionObserver and a cubic ease-out curve.
A 3D perspective carousel for embedded Instagram Reels, with a click-to-open lightbox player. Solves the problem of how to feature student life and #MedCanes content directly on med.miami.edu.
Four self-contained components in HTML, CSS, and vanilla JavaScript. Each one drops into Sitecore as a single block of markup.
WCAG 2.2 AA verified. Keyboard navigation, focus states, ARIA roles, contrast ratios, and reduced-motion preferences all addressed.
Each component deployed to the Miller School Sitecore environment, ready for content authors to drop into any page.
Live demo at um-fall-components-2025.madelinecole.com, showing every component in isolation with full interactivity.
Closing the loop. A summary of what shipped, what I learned, and what should come next.
Across the Fall 2025 semester, the Miller School Sitecore library grew by four production-ready components: an A-Z Treatment List, a Staggered Rows Gallery, an Animated Stats Display, and an Instagram Video Slider. Each one closed a specific content gap that had been forcing authors into workarounds, and each one shipped on brand and on accessibility standard.
The defining characteristic of the engagement was the division of labor between AI and engineer. Letting Claude generate the structural baseline meant I could spend my time on the work that actually moves a project from "functional" to "production": brand fidelity, accessibility, CMS-specific edge cases, and reviewer feedback. Adam reviewed every iteration; Tauffyt approved every final build. The result is live at um-fall-components-2025.madelinecole.com and inside the Miller School Sitecore environment.
Claude generated functional baselines fast, but the gap between "works" and "ready for med.miami.edu" was always significant. The brand application, accessibility hardening, and Sitecore-specific fixes were where my time and judgment actually mattered.
Having the UHealth tokens documented in advance meant brand application was mechanical, not interpretive. Every color, font weight, and spacing value had a canonical source. That removed an entire category of subjective debate from review cycles.
Rather than over-documenting up front, the team relied on Adam reviewing each iteration and Tauffyt approving the final cut. Small loops with two reviewers caught issues earlier than a heavy spec ever would have.
Strict CSS prefixes and IIFE-wrapped JavaScript looked like overkill on a single component. Across four components on the same page, they were the difference between a library and a pile of conflicting code.