The Wayne State app stack, project 0

Same frame.Every app.

WayneUI is the design system every Wayne State application hangs in: one set of brand tokens, one set of components, and four ways to use them. It replaces the Bootstrap 3 and jQuery package that has been in these applications since 2017.

Pick your path See every component

Overview Documentation Repository

Course Registration

Select courses

Credits enrolled12

Holds1

Advising hold

Meet an advisor before registering for more than 12 credits.

Available courses
Course	Seats	Status
CSC 2110	12 of 40	Open
MAT 2010	0 of 35	Closed
ENG 3050	4 of 25	Waitlist

Vehicles
Plate	Lot	Status
DJK 4821	Lot 5	Active
BQR 0937	Lot 2	Expired

Directory results
Name	Office	Availability
Jane Rivera	Advising	In
Marcus Webb	Registrar	Out
Priya Nair	Help Desk	Remote

Registration

Select courses

Credits enrolled12

CSC 2110 open

ENG 3050 waitlist

consumer paths, one set of markup: 4
components in the gallery: 50
color pairings measured every build: 74
brand green on white, gated in CI: 8.82:1
accessibility tests, none allowed to fail: 1084

What it is

One contract. Four ways to hang it.

The static HTML templates are the contract. Vue, Blade and the framework-free PHP helpers are each tested against the markup extracted from them, not against anyone's memory, so all four emit the same classes, the same ARIA and the same data-wsu-* hooks. Pick the path you are already on; the page is the same.

One set of tokens

Brand green and gold, type, space and contrast, declared once and read by every path. A color added without a declared pairing is a color that fails the build.

One set of components

50 of them, from Alert to Window, each with its accessibility reasoning written next to it.

One contract

202 classes extracted from the two templates. A component is not finished until all four paths emit the same thing.

<link rel="stylesheet" href="wayne-ui.css">
<script src="wayne-ui-theme.js" type="module"></script>

<button class="wsu-btn wsu-btn--primary">Add course</button>

<?php require 'wayne-ui.php'; ?>

<?= wsu_app_shell_open(['title' => 'Course Registration']) ?>
  <?= wsu_button('Add course', ['variant' => 'primary']) ?>
<?= wsu_app_shell_close() ?>

<x-wsu::app-shell title="Course Registration">
    <x-wsu::page-header title="Select courses" />
    <x-wsu::button variant="primary">Add course</x-wsu::button>
</x-wsu::app-shell>

<AppShell>
  <PageHeader title="Select courses" />
  <Button variant="primary">Add course</Button>
</AppShell>

What every one of them emits

<button class="wsu-btn wsu-btn--primary">

Static HTML agrees
Raw PHP agrees
Blade agrees
Vue agrees

The Wayne State app stack

Wayne's World, stack edition

WayneUI is project 0, the interface layer: the page every one of these applications renders. The other members hang around it. Each one is a small frame with its own mark on a gold tab, and a line on how it touches WayneUI.

HELMETsets security headers
SESAMEsigns the user in
WayneUIrenders the page
PROCTORchecks the code
Preflightruns CI
Squiredeploys

Start here

Pick the path you are already on

WayneUI does not ask an application to change how it is built. Least infrastructure first.

Static HTML

No build step, no framework, no package manager.

><link rel="stylesheet" href="https://wayneui.apps.wayne.edu/v2/wayne-ui.css">><script type="module" src="https://wayneui.apps.wayne.edu/v2/wayne-ui-theme.js"></script>

Static HTML guide

Raw PHP

One require. No Composer, no autoloader, no container.

>require the standalone helpers.

Raw PHP guide

Laravel and Blade

A provider, 28 Blade components, request-scoped breadcrumbs.

$composer require waynestate/wayne-ui$php artisan wayne-ui:install

Blade guide

Laravel, Inertia and Vue

35 Vue 3 components, no CSS emitted, one plugin.

$pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css

Inertia and Vue guide

Starting a new app instead? WELD and Sourdough start one with WayneUI already wired in. The two page shells, internal and publicly accessible, are on the templates page.

Accessibility is a gate

Hang it straight, then prove it.

These are pipeline jobs, not intentions. Nothing in the accessibility stages is allowed to fail, and no job downgrades a violation to a warning. A color added to the tokens without a declared contrast pairing fails the build.

The numbers in full

Contrast: 74 pairings, 52 held to 7:1
axe-core: Zero violations, in both themes at 320, 768 and 1440 pixels
Lighthouse: 100, and a lower score stops the build
Markup contract: 202 classes, checked on all four paths

Still on 1.x?

Same frame, new picture

The WayneUI before this one was written in 2017 as a Laravel package. It shipped Bootstrap 3.2.0 and jQuery 1.11.1, had one consumer path, and the last functional change was in 2019. It stopped, and the applications standing on it did not.

WayneUI 2

Select courses

OpenWaitlist

Advising hold

Measured contrast, both themes, one contract.

What changed between the 2017 package and this one
What	2017 to 2019	Now
Consumer paths	One, and only if you were on Laravel	Four, from one set of markup
Front end dependencies	Bootstrap 3.2.0 and jQuery 1.11.1, copied in and frozen there	Tailwind and daisyUI, declared and updated like anything else
The university masthead	A copy, pasted once in 2017	A dependency, updated when they update it
Accessibility	Asserted	Measured every release, in both themes
Last functional change	2019	This release

Today
Read MIGRATING.md. It is the spec: the layout, the navigation helper, the breadcrumb calls and a class-name mapping.
This is a rewrite
There is no compatibility shim and migrating is real work, because carrying the old class names forward would have meant carrying the reasons they were wrong.
Shipped
Booster 1.7.0 has a wayneui-1-to-2 hop, opt-in with --wayneui, that rewrites what can be rewritten and lists the rest.
Shipped
PROCTOR 0.3.0 warns about an outdated WayneUI (wayneui-outdated) and about forked views (wayneui-forked-views), and can fail the build on vendored copies when you opt in.

Hand it to your agent

Job tickets

One prompt for whatever coding agent you use. Copy it, or open it in your agent. It says what WayneUI already provides, what the agent must leave alone, and to ask you before it guesses.

Ticket U-1 · An app that is not on WayneUI yet

Get started with WayneUI

Finds which of the four paths the app is on, installs WayneUI the way that path says, and renders one page in the shell. It won't touch your existing styles.

You are a coding agent helping a Wayne State University developer start using WayneUI, the Wayne State design system, in an existing application. The job is to install it and prove it renders, nothing more.

Read first:
- https://wayneui.apps.wayne.edu/llms.txt, the index of WayneUI's pages, each one as Markdown. Fetch the pages you need; do not work from memory.
- ADVISOR, the stack's MCP server, if it is connected: use it for the stack's rules and docs. If it is not connected, say so and work from the pages. How to add it: https://advisor.apps.wayne.edu/llms.txt
- The app's layout and one existing page, to see which of WayneUI's four consumer paths it is on: static HTML, raw PHP, Laravel with Blade, or Laravel with Inertia and Vue.

Task:
1. Say which path the app is on and why. If it could be two, ask me.
2. Install WayneUI the way that path says. For Laravel with Blade that is `composer require waynestate/wayne-ui` and then `php artisan wayne-ui:install`. For Vue it is `pnpm add @waynestate/wayne-ui-vue @waynestate/wayne-ui-css`. For static HTML and raw PHP, follow the guide on the page for that path.
3. Render one new page in WayneUI's page shell, using its components, so I can see it working.
4. Run the app's own checks, and report every line that is not a pass.

Constraints:
- Do not copy WayneUI's views or stylesheet into the app. Use the package or the hosted stylesheet.
- Do not restyle or remove anything that is already there. Add one page.
- Ask me before you guess, and before you add a Composer or npm package other than WayneUI.

Output: the path you chose, what you ran and what it said, the files you changed, then your questions.

Ticket U-2 · Any consumer path

Add a WayneUI page to my app

Adds one page to an existing app using WayneUI's components, then runs the app's own checks. It won't restyle anything you did not ask about.

You are a coding agent adding one page to an existing Wayne State University application, using WayneUI, the Wayne State design system.

Read first:
- https://wayneui.apps.wayne.edu/llms.txt, the index of WayneUI's pages, each one as Markdown. Fetch the pages you need; do not work from memory.
- ADVISOR, the stack's MCP server, if it is connected: use it for the stack's rules and docs. If it is not connected, say so and work from the pages.
- The app's existing layout and one existing page, to see which of WayneUI's four consumer paths it is on: static HTML, raw PHP, Laravel with Blade, or Laravel with Inertia and Vue.

Task:
1. If I have not said what the page is for, its URL and who may see it, ask.
2. Build the page on the path the app is already on, using WayneUI's components and its page shell. Do not hand-write styles, and do not use a color or a size that is not a WayneUI token.
3. Use the same markup the other paths emit: WayneUI's static templates are the contract.
4. Run the app's own checks, and report every line that is not a pass.

Constraints:
- Do not copy WayneUI's views or stylesheet into the app. Use the package or the hosted stylesheet.
- Keep the page accessible: every control has a name, nothing relies on color alone, and the page works at 320 pixels wide and in the dark theme.
- Ask me before you guess, and before you add a Composer or npm package.

Output: the files you changed, the result of the checks, then your questions.

Also for agents: this page as Markdown, llms.txt and everything in one file.