fix(inertia-sails): inject inertiaContext middleware when order is not configured (#194)

* feat: added skills for beautiful-ui

* fix(inertia-sails): inject inertiaContext middleware when order is not configured

When sails.config.http.middleware.order is not explicitly defined (the
default for all Sails apps), the hook skipped injecting the
inertiaContext middleware entirely. This caused sails.inertia.share()
calls in routes.before handlers to run outside AsyncLocalStorage
context, silently dropping shared props.

Initialize the middleware order with Sails' defaults when undefined,
then inject inertiaContext before the router as intended.

Closes #193

Author: DominusKelvin

packages/inertia-sails/index.js

@@ -128,7 +128,22 @@ module.exports = function defineInertiaHook(sails) {
       // the request is already wrapped in AsyncLocalStorage context.
       if (sails.config.http && sails.config.http.middleware) {
         const mw = sails.config.http.middleware
-        if (mw.order && mw.order.indexOf('inertiaContext') === -1) {
+        // When order is not explicitly configured, Sails uses a default order
+        // internally. We need to set it here so we can inject inertiaContext
+        // before the router middleware.
+        if (!mw.order) {
+          mw.order = [
+            'cookieParser',
+            'session',
+            'bodyParser',
+            'compress',
+            'poweredBy',
+            'router',
+            'www',
+            'favicon'
+          ]
+        }
+        if (mw.order.indexOf('inertiaContext') === -1) {
           const routerIdx = mw.order.indexOf('router')
           if (routerIdx !== -1) {
             mw.order.splice(routerIdx, 0, 'inertiaContext')

skills/beautiful-ui/README.md

@@ -0,0 +1,48 @@
+# Beautiful UI Skills for Claude Code
+
+Write meaningful, accessible, responsive markup in The Boring JavaScript Stack with Claude Code.
+
+## Installation
+
+```bash
+npx skills add sailscastshq/boring-stack/skills/beautiful-ui
+```
+
+## Usage
+
+After installing, Claude will automatically apply beautiful UI best practices when you build page layouts, forms, and component markup:
+
+> "Build a settings page with a sidebar navigation"
+
+> "Create a pricing page with feature comparison"
+
+> "Add a blog post layout with author info and related articles"
+
+> "Build a responsive dashboard with stats cards and a data table"
+
+> "Add a signup form with validation"
+
+## Skills Included
+
+- **semantic-html** - Element selection guide: when to use which HTML element and why
+- **accessibility** - ARIA roles, live regions, skip links, focus management, keyboard navigation, contrast, reduced motion
+- **responsive-patterns** - Mobile-first breakpoints, container queries, responsive grids, navigation, tables, touch targets, viewport units
+- **typography** - Type scale, font stacks, line height, line length, letter spacing, font weight hierarchy, text color, prose, truncation, tabular numbers
+- **form-ux** - Form layout, labels, validation timing, error presentation, submit buttons, optional fields, destructive actions
+
+## What is Beautiful UI?
+
+Beautiful UI means building interfaces that are meaningful, accessible, and structurally correct. A `<nav>` tells screen readers "this is navigation." An `<article>` tells Reader Mode "this is the main content." A top-aligned label is completed fastest. A `tabular-nums` class aligns your pricing table. A `min-h-svh` replaces `h-screen` so mobile users don't have content hidden behind the address bar.
+
+The goal is to eliminate div soup, fix accessibility gaps, make layouts responsive by default, establish typographic hierarchy, and build forms that are fast to complete and forgiving of mistakes. These patterns draw from Refactoring UI, Nielsen Norman Group, WCAG, and MDN best practices.
+
+## Links
+
+- [The Boring JavaScript Stack](https://docs.sailscasts.com/boring-stack)
+- [MDN HTML Elements Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+
+## License
+
+MIT

skills/beautiful-ui/SKILL.md

@@ -0,0 +1,55 @@
+---
+name: beautiful-ui
+description: >
+  Beautiful UI patterns for modern web development — semantic HTML, accessible markup, responsive design, typography,
+  and form UX. Use this skill when building page layouts, structuring content, choosing semantic elements, implementing
+  navigation, building forms, creating data tables, handling accessibility, designing responsive layouts, establishing
+  typographic hierarchy, or any markup and styling that should be meaningful, accessible, and well-structured.
+  Works with React, Vue, and Svelte with Tailwind CSS.
+metadata:
+  author: sailscastshq
+  version: '1.0.0'
+  tags: beautiful-ui, semantic-html, accessibility, a11y, responsive, typography, form-ux, landmarks, aria, navigation, forms, tables, headings, tailwind, mobile-first, container-queries
+---
+
+# Beautiful UI
+
+Beautiful UI is the practice of building interfaces that are meaningful, accessible, and structurally correct. Every element should carry semantic weight — describing what content _is_, not just how it _looks_. Every layout should respond to the user's device. Every form should be fast to complete and forgiving of mistakes. Beautiful UI fills the gap between "it looks right" and "it _is_ right."
+
+## When to Use
+
+Use this skill when:
+
+- Building page layouts with `<header>`, `<main>`, `<aside>`, `<footer>` landmarks
+- Structuring content sections with `<article>`, `<section>`, `<nav>`
+- Choosing between `<div>` / `<span>` and a more meaningful element
+- Writing navigation menus, breadcrumbs, and pagination
+- Building forms with proper labels, fieldsets, validation timing, and error presentation
+- Creating data tables with `<thead>`, `<tbody>`, `<caption>`, and `<scope>`
+- Establishing heading hierarchy (`<h1>` through `<h6>`)
+- Using interactive elements like `<details>`, `<dialog>`, `<menu>`
+- Embedding media with `<figure>`, `<figcaption>`, `<picture>`, `<video>`
+- Adding ARIA roles, live regions, skip links, or focus management
+- Making keyboard navigation work for tabs, menus, and custom widgets
+- Respecting `prefers-reduced-motion` and color contrast requirements
+- Building responsive layouts with Tailwind breakpoints and container queries
+- Creating responsive navigation (hamburger menus, off-canvas sidebars)
+- Making tables responsive (scroll, card transformation, priority columns)
+- Establishing typographic hierarchy with size, weight, and color
+- Using `tabular-nums` for data alignment, `text-balance` for headings
+- Configuring font stacks, custom fonts, and the prose/typography plugin
+- Designing form layouts (single-column, multi-column for related fields)
+- Implementing "reward early, punish late" validation with Inertia.js
+- Choosing between radio buttons and select menus
+- Building destructive action confirmations (type-to-confirm)
+
+## Rules
+
+Read individual rule files for detailed explanations and code examples:
+
+- [rules/semantic-html.md](rules/semantic-html.md) - Element selection guide: when to use which HTML element and why
+- [rules/accessibility.md](rules/accessibility.md) - ARIA roles, live regions, skip links, focus management, keyboard navigation, screen reader announcements, contrast, and reduced motion
+- [rules/responsive-patterns.md](rules/responsive-patterns.md) - Mobile-first breakpoints, container queries, responsive grids, navigation, tables, forms, touch targets, and viewport units
+- [rules/typography.md](rules/typography.md) - Type scale, font stacks, line height, line length, letter spacing, font weight hierarchy, text color, prose styling, truncation, tabular numbers, and dark mode
+- [rules/form-ux.md](rules/form-ux.md) - Form layout, label placement, input sizing, validation timing, error presentation, submit buttons, optional fields, help text, and destructive action confirmation
+- [rules/spacing-over-dividers.md](rules/spacing-over-dividers.md) - Default to spacing over borders and dividers — fewer lines, more whitespace, cleaner interfaces

skills/beautiful-ui/metadata.json

@@ -0,0 +1,20 @@
+{
+  "version": "1.0.0",
+  "organization": "Sailscasts",
+  "date": "March 2026",
+  "abstract": "Beautiful UI patterns for modern web development with React, Vue, and Svelte using Tailwind CSS. Covers semantic HTML element selection, document landmarks, heading hierarchy, navigation patterns, form structure, data tables, interactive disclosure elements, media embedding, accessibility (ARIA roles, live regions, skip links, focus management, keyboard navigation, screen reader announcements, color contrast, reduced motion), responsive design (mobile-first breakpoints, container queries, responsive grids, navigation, tables, touch targets, viewport units), typography (type scale, font stacks, line height, line length, letter spacing, font weight hierarchy, text color, prose styling, truncation, tabular numbers, dark mode), and form UX (layout, labels, validation timing, error presentation, submit buttons, optional fields, destructive actions).",
+  "references": [
+    "https://developer.mozilla.org/en-US/docs/Web/HTML/Element",
+    "https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML",
+    "https://www.w3.org/WAI/tutorials/page-structure/",
+    "https://html.spec.whatwg.org/multipage/sections.html",
+    "https://www.w3.org/WAI/ARIA/apg/",
+    "https://www.w3.org/WAI/WCAG21/Understanding/",
+    "https://tailwindcss.com/docs/responsive-design",
+    "https://tailwindcss.com/docs/font-size",
+    "https://github.com/tailwindlabs/tailwindcss-typography",
+    "https://www.nngroup.com/articles/web-form-design/",
+    "https://refactoringui.com/",
+    "https://inertiajs.com"
+  ]
+}