diff --git a/packages/site_shared/lib/_sass/components/_ide-explorer.scss b/packages/site_shared/lib/_sass/components/_ide-explorer.scss
new file mode 100644
index 00000000000..fd9a6b96a1e
--- /dev/null
+++ b/packages/site_shared/lib/_sass/components/_ide-explorer.scss
@@ -0,0 +1,533 @@
+@use '../base/mixins';
+@use '../base/breakpoints';
+
+// ============================================================================
+// Variables
+// ============================================================================
+
+// Spacing
+$ide-spacing-xs: 0.25rem;
+$ide-spacing-sm: 0.3rem;
+$ide-spacing-md: 0.4rem;
+$ide-spacing-lg: 0.5rem;
+$ide-spacing-xl: 0.6rem;
+$ide-spacing-2xl: 0.75rem;
+$ide-spacing-3xl: 0.85rem;
+$ide-spacing-4xl: 1rem;
+$ide-spacing-5xl: 1.25rem;
+$ide-spacing-6xl: 1.5rem;
+
+// Icon sizes
+$ide-icon-xs: 0.55rem;
+$ide-icon-sm: 0.9rem;
+$ide-icon-md: 1.1rem;
+$ide-icon-lg: 1.5rem;
+$ide-icon-xl: 1.75rem;
+
+// Font sizes
+$ide-font-xs: 0.6875rem;
+$ide-font-sm: 0.75rem;
+$ide-font-md: 0.8125rem;
+$ide-font-lg: 0.9rem;
+$ide-font-xl: 0.9375rem;
+$ide-font-2xl: 1.25rem;
+
+// Border radius
+$ide-radius-sm: 0.2rem;
+$ide-radius-md: 0.3rem;
+$ide-radius-lg: 1rem;
+
+// Other sizes
+$ide-button-size: 1.75rem;
+$ide-folder-arrow-width: 1.25rem;
+$ide-folder-arrow-height: 1.5rem;
+
+// Badge colors map
+$badge-colors: (
+  'info': var(--site-alert-info-color),
+  'tip': var(--site-alert-tip-color),
+  'important': var(--site-alert-important-color),
+  'warning': var(--site-alert-warning-color),
+  'error': var(--site-alert-error-color),
+);
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin no-shrink {
+  flex-shrink: 0;
+}
+
+@mixin reset-list {
+  margin: 0;
+  list-style: none;
+}
+
+@mixin interactive-hover {
+  &:hover {
+    @include mixins.interaction-style(4%);
+  }
+}
+
+@mixin ide-button-base {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  @include interactive-hover;
+}
+
+@mixin uppercase-label {
+  font-size: $ide-font-xs;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+.ide-explorer {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  height: min(600px, 80vh);
+  margin-block: 1.71em;
+  border: 1px solid var(--site-outline);
+  border-radius: var(--site-radius);
+  background-color: var(--site-base-bgColor);
+  font-family: var(--site-ui-fontFamily);
+
+
+  @include breakpoints.screen-below('md') {
+    flex-direction: column;
+    height: auto;
+  }
+}
+
+.ide-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: min(15rem, 35%);
+  border-right: 1px solid var(--site-outline);
+  background-color: var(--site-raised-bgColor-translucent);
+
+  @include breakpoints.screen-below('md') {
+    width: auto;
+    max-height: 14rem;
+    border-right: none;
+    border-bottom: 1px solid var(--site-outline);
+  }
+}
+
+.ide-root-tabs {
+  @include flex-center;
+  gap: $ide-spacing-xs;
+  padding: 0.375rem;
+  border-bottom: 1px solid var(--site-outline-variant);
+
+  &.ide-root-tabs-single {
+    justify-content: flex-end;
+  }
+}
+
+.ide-root-tab {
+  @include ide-button-base;
+  flex: 1;
+  padding: $ide-spacing-sm 0;
+  border-radius: $ide-radius-sm;
+  color: var(--site-base-fgColor-alt);
+  font-size: $ide-font-sm;
+  font-weight: 500;
+
+  &.active {
+    background-color: var(--site-base-bgColor);
+    color: var(--site-primary-color);
+  }
+}
+
+.ide-toggle-all {
+  @include no-shrink;
+  @include flex-center;
+  @include ide-button-base;
+  justify-content: center;
+  width: $ide-button-size;
+  height: $ide-button-size;
+  border-radius: $ide-radius-sm;
+  color: var(--site-base-fgColor-alt);
+
+  .material-symbols {
+    font-size: $ide-icon-md;
+  }
+}
+
+.ide-tree {
+  display: none;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.375rem 0;
+
+  &.active {
+    display: block;
+  }
+
+  ul {
+    @include reset-list;
+    padding-inline-start: 0.9rem;
+  }
+
+  > ul {
+    padding-inline-start: 0;
+  }
+
+  ul > li.ide-node:last-child {
+    margin-bottom: $ide-spacing-lg;
+  }
+
+  li.ide-node {
+    margin-bottom: 0;
+  }
+
+  details {
+    margin: 0;
+  }
+
+  details[open] > summary {
+    margin: 0;
+  }
+
+  summary {
+    @include flex-center;
+    width: 100%;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    cursor: default;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .ide-folder-arrow {
+    @include no-shrink;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $ide-folder-arrow-width;
+    height: $ide-folder-arrow-height;
+    padding: 0;
+    padding-inline-start: 0.35rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      @include no-shrink;
+      width: $ide-icon-xs;
+      height: $ide-icon-xs;
+      background-color: var(--site-base-fgColor-alt);
+      clip-path: polygon(15% 0%, 100% 50%, 15% 100%);
+      transition: transform 0.1s ease;
+    }
+
+    &:hover::before {
+      background-color: var(--site-base-fgColor);
+    }
+  }
+
+  details[open] > summary .ide-folder-arrow::before {
+    transform: rotate(90deg);
+  }
+
+  .ide-node-row {
+    @include flex-center;
+    @include ide-button-base;
+    flex: 1;
+    min-width: 0;
+    padding: $ide-spacing-xs $ide-spacing-xl;
+    border-radius: $ide-radius-sm;
+    color: inherit;
+    font-family: var(--site-code-fontFamily);
+    font-size: $ide-font-md;
+    text-align: left;
+    outline-offset: -2px;
+
+    &.active {
+      background-color: var(--site-primary-color-highlight);
+      color: var(--site-primary-color);
+      font-weight: 500;
+    }
+
+    svg {
+      @include no-shrink;
+      width: $ide-icon-sm;
+      height: $ide-icon-sm;
+      margin-inline-end: $ide-spacing-md;
+    }
+  }
+
+  li.ide-node-file {
+    @include flex-center;
+    width: 100%;
+
+    > .ide-node-row {
+      margin-inline-start: $ide-folder-arrow-width;
+    }
+  }
+
+  .ide-node-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.ide-badge-dot {
+  @include no-shrink;
+  width: $ide-spacing-md;
+  height: $ide-spacing-md;
+  margin-inline-start: $ide-spacing-md;
+  border-radius: 50%;
+  background-color: var(--site-base-fgColor-alt);
+}
+
+.ide-badge {
+  @include no-shrink;
+  padding: 0.1rem $ide-spacing-lg;
+  border-radius: $ide-radius-lg;
+  background-color: var(--site-raised-bgColor);
+  color: var(--site-base-fgColor-alt);
+  font-family: var(--site-ui-fontFamily);
+  font-size: $ide-font-xs;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+// Generate badge color variants
+@each $name, $color in $badge-colors {
+  .ide-badge-color-#{$name} {
+    &.ide-badge-dot {
+      background-color: $color;
+    }
+
+    &.ide-badge {
+      background-color: color-mix(in srgb, $color 12%, transparent);
+      color: $color;
+    }
+  }
+}
+
+// Neutral badge color (special case)
+.ide-badge-color-neutral {
+  &.ide-badge-dot {
+    background-color: var(--site-base-fgColor-alt);
+  }
+
+  &.ide-badge {
+    background-color: var(--site-raised-bgColor);
+    color: var(--site-base-fgColor-alt);
+  }
+}
+
+.ide-detail {
+  flex: 1;
+  min-width: 0;
+  padding: $ide-spacing-5xl $ide-spacing-6xl;
+  overflow-y: auto;
+
+  @include breakpoints.screen-below('md') {
+    padding: $ide-spacing-4xl;
+  }
+}
+
+.ide-detail-panel {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+
+  > :last-child {
+    margin-block-end: 0;
+  }
+}
+
+.ide-path {
+  margin-block-end: $ide-spacing-lg;
+  color: var(--site-base-fgColor-alt);
+  font-family: var(--site-code-fontFamily);
+  font-size: $ide-font-sm;
+}
+
+.ide-path-sep {
+  margin-inline: $ide-spacing-sm;
+  color: var(--site-outline);
+}
+
+.ide-detail-header {
+  display: flex;
+  align-items: flex-start;
+  gap: $ide-spacing-xl;
+  margin-block-end: $ide-spacing-4xl;
+  padding-bottom: $ide-spacing-4xl;
+  border-bottom: 0.5px solid;
+
+  svg {
+    @include no-shrink;
+    width: $ide-icon-lg;
+    height: $ide-icon-lg;
+    margin-block-start: 0.15rem;
+  }
+}
+
+.ide-detail-heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.ide-detail-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ide-detail-title {
+  font-family: var(--site-code-fontFamily);
+  font-size: $ide-font-2xl;
+  font-weight: 600;
+}
+
+.ide-detail-subtitle {
+  margin-block-start: 0.15rem;
+  color: var(--site-base-fgColor-alt);
+  font-size: $ide-font-xl;
+}
+
+.ide-note {
+  padding: $ide-spacing-xl $ide-spacing-2xl;
+  margin-block-end: $ide-spacing-4xl;
+  border-radius: $ide-radius-md;
+  background-color: var(--site-inset-bgColor);
+  color: var(--site-inset-fgColor);
+  font-size: $ide-font-lg;
+
+  p {
+    margin: 0;
+  }
+}
+
+.ide-note-title {
+  @include uppercase-label;
+  margin-block-end: 0.2rem;
+  color: var(--site-base-fgColor-alt);
+}
+
+.ide-description {
+  margin-block-end: $ide-spacing-4xl;
+}
+
+.ide-tips {
+  padding: $ide-spacing-xl $ide-spacing-3xl;
+  margin-block-end: $ide-spacing-4xl;
+  border: 1px solid var(--site-outline-variant);
+  border-radius: $ide-radius-md;
+
+  ul {
+    @include reset-list;
+    padding-inline-start: 1.1rem;
+  }
+
+  li {
+    margin-block-end: $ide-spacing-xs;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+.ide-tips-title {
+  @include uppercase-label;
+  margin-block-end: $ide-spacing-md;
+  color: var(--site-primary-color);
+}
+
+.ide-example {
+  margin-block-end: $ide-spacing-4xl;
+}
+
+.ide-docs-link {
+  @include flex-center;
+  display: inline-flex;
+  gap: $ide-spacing-sm;
+  padding: $ide-spacing-sm $ide-spacing-2xl;
+  margin-block-end: $ide-spacing-4xl;
+  border-radius: $ide-radius-lg;
+  background-color: var(--site-primary-color-highlight);
+  color: var(--site-primary-color);
+  font-size: $ide-font-md;
+  font-weight: 600;
+  text-decoration: none;
+
+  .material-symbols {
+    font-size: $ide-spacing-4xl;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.ide-contents-title {
+  @include uppercase-label;
+  margin-block-end: $ide-spacing-lg;
+  color: var(--site-base-fgColor-alt);
+}
+
+.ide-contents-list {
+  display: flex;
+  flex-direction: column;
+  gap: $ide-spacing-xs;
+}
+
+.ide-content-link {
+  @include flex-center;
+  @include ide-button-base;
+  gap: $ide-spacing-lg;
+  padding: $ide-spacing-md $ide-spacing-xl;
+  border-radius: $ide-radius-md;
+  background-color: var(--site-raised-bgColor-translucent);
+  color: inherit;
+  font-family: var(--site-code-fontFamily);
+  font-size: $ide-font-md;
+  text-align: left;
+
+  svg {
+    @include no-shrink;
+    width: $ide-icon-sm;
+    height: $ide-icon-sm;
+  }
+
+  .ide-content-one-liner {
+    overflow: hidden;
+    color: var(--site-base-fgColor-alt);
+    font-family: var(--site-ui-fontFamily);
+    font-size: $ide-font-sm;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
\ No newline at end of file
diff --git a/packages/site_shared/lib/components/common/ide_explorer/ide_explorer.dart b/packages/site_shared/lib/components/common/ide_explorer/ide_explorer.dart
new file mode 100644
index 00000000000..7bfc1f2a04c
--- /dev/null
+++ b/packages/site_shared/lib/components/common/ide_explorer/ide_explorer.dart
@@ -0,0 +1,707 @@
+// Copyright 2026 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:collection/collection.dart';
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/components/file_icon.dart';
+
+import '../../../util.dart';
+import '../material_icon.dart';
+
+/// A single top-level file tree shown by an [IdeExplorer], which may
+/// have multiple roots to represent multiple packages
+/// (e.g. "Project" and "Shared").
+///
+/// When multiple roots are provided, they are rendered as tabs that can be
+/// switched between.
+class IdeExplorerProjectRoot {
+  const IdeExplorerProjectRoot({
+    required this.id,
+    this.label = '',
+    this.children = const [],
+  });
+
+  final String id;
+  final String label;
+  final List<IdeTreeNode> children;
+}
+
+/// A single file or folder entry in an [IdeExplorer] tree.
+class IdeTreeNode {
+  const IdeTreeNode({
+    required this.id,
+    required this.label,
+    this.isDefaultPage = false,
+    this.startsClosed = true,
+    this.badge,
+    this.badgeColor,
+    this.subtitle,
+    this.title,
+    this.children = const [],
+  });
+
+  final String id;
+  final String label;
+  final bool isDefaultPage;
+  final bool startsClosed;
+  final String? badge;
+  final IdeBadgeColor? badgeColor;
+  final String? title;
+  final String? subtitle;
+  final List<IdeTreeNode> children;
+
+  bool get isFolder => children.isNotEmpty || label.endsWith('/');
+}
+
+/// Corresponds to colors used for badges on an [IdeTreeNode].
+enum IdeBadgeColor {
+  neutral,
+  info,
+  tip,
+  important,
+  warning,
+  error;
+
+  static IdeBadgeColor fromString(String? data) {
+    if (data == null) return IdeBadgeColor.neutral;
+    return switch (data.toLowerCase()) {
+      'info' => IdeBadgeColor.info,
+      'tip' => IdeBadgeColor.tip,
+      'important' => IdeBadgeColor.important,
+      'warning' => IdeBadgeColor.warning,
+      'error' => IdeBadgeColor.error,
+      _ => IdeBadgeColor.neutral,
+    };
+  }
+}
+
+/// A flattened [IdeTreeNode] paired with the path of ancestor labels
+/// leading to it, used to render the breadcrumb in its detail pane.
+typedef _BreadcrumbNode = ({
+  IdeTreeNode node,
+  String domId,
+  List<String> path,
+});
+
+/// Generates a unique DOM id for an IDE tree node.
+String _ideDomId(String instanceId, String nodeId) => 'ide-$instanceId-$nodeId';
+
+// ---------------------------------------------------------------------------
+// Main Explorer Component
+// ---------------------------------------------------------------------------
+
+/// An interactive file-tree explorer, similar to an IDE's sidebar.
+///
+/// Renders a clickable directory tree next to a detail pane that shows
+/// per-file/folder documentation. Clicking an entry in the tree swaps which
+/// detail pane is shown.
+class IdeExplorer extends StatelessComponent {
+  const IdeExplorer({
+    super.key,
+    required this.roots,
+    this.instanceId,
+    this.customContents = const {},
+  });
+
+  static int _nextInstanceId = 0;
+
+  final List<IdeExplorerProjectRoot> roots;
+  final String? instanceId;
+  final Map<String, Component> customContents;
+
+  @override
+  Component build(BuildContext context) {
+    if (roots.isEmpty) {
+      return const Component.empty();
+    }
+
+    final effectiveInstanceId = instanceId ?? '${_nextInstanceId++}';
+
+    final flatNodesByRoot = _buildFlatNodesByRoot(effectiveInstanceId);
+    final allFlatNodes = flatNodesByRoot.values
+        .expand((nodes) => nodes)
+        .toList(growable: false);
+
+    final defaultFlatNode = _findDefaultNode(allFlatNodes);
+    final activeRootId = _determineActiveRoot(
+      defaultFlatNode,
+      flatNodesByRoot,
+    );
+    final selectedNodeDomId = _determineSelectedNode(
+      defaultFlatNode,
+      flatNodesByRoot,
+      activeRootId,
+    );
+
+    return div(classes: 'ide-explorer not-content', [
+      _IdeSidebar(
+        roots: roots,
+        activeRootId: activeRootId,
+        effectiveInstanceId: effectiveInstanceId,
+        selectedNodeDomId: selectedNodeDomId,
+      ),
+      _IdeDetailPane(
+        allFlatNodes: allFlatNodes,
+        customContents: customContents,
+        effectiveInstanceId: effectiveInstanceId,
+        selectedNodeDomId: selectedNodeDomId,
+      ),
+    ]);
+  }
+
+  /// Builds a map of flattened nodes organized by root ID.
+  Map<String, List<_BreadcrumbNode>> _buildFlatNodesByRoot(
+    String effectiveInstanceId,
+  ) {
+    return {
+      for (final root in roots)
+        root.id: _flatten(
+          root.children,
+          instanceId: effectiveInstanceId,
+          path: root.label.isEmpty ? [] : [root.label],
+        ),
+    };
+  }
+
+  /// Finds the first node marked as the default page.
+  _BreadcrumbNode? _findDefaultNode(List<_BreadcrumbNode> allFlatNodes) {
+    return allFlatNodes.firstWhereOrNull(
+      (flat) => flat.node.isDefaultPage,
+    );
+  }
+
+  /// Determines which root should be active based on the default node.
+  String _determineActiveRoot(
+    _BreadcrumbNode? defaultFlatNode,
+    Map<String, List<_BreadcrumbNode>> flatNodesByRoot,
+  ) {
+    if (defaultFlatNode == null) {
+      return roots.first.id;
+    }
+
+    final rootWithDefault = roots.firstWhereOrNull(
+      (r) =>
+          flatNodesByRoot[r.id]?.any(
+            (n) => n.domId == defaultFlatNode.domId,
+          ) ??
+          false,
+    );
+
+    return rootWithDefault?.id ?? roots.first.id;
+  }
+
+  /// Determines which node should be selected initially.
+  String? _determineSelectedNode(
+    _BreadcrumbNode? defaultFlatNode,
+    Map<String, List<_BreadcrumbNode>> flatNodesByRoot,
+    String activeRootId,
+  ) {
+    return defaultFlatNode?.domId ??
+        flatNodesByRoot[activeRootId]?.firstOrNull?.domId;
+  }
+
+  List<_BreadcrumbNode> _flatten(
+    List<IdeTreeNode> nodes, {
+    required String instanceId,
+    required List<String> path,
+  }) {
+    final result = <_BreadcrumbNode>[];
+    for (final node in nodes) {
+      final nodePath = [...path, node.label];
+      result.add((
+        node: node,
+        domId: _ideDomId(instanceId, node.id),
+        path: path,
+      ));
+      result.addAll(
+        _flatten(
+          node.children,
+          instanceId: instanceId,
+          path: nodePath,
+        ),
+      );
+    }
+    return result;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar Components
+// ---------------------------------------------------------------------------
+
+/// The left sidebar containing the root switcher tabs and directory trees.
+class _IdeSidebar extends StatelessComponent {
+  const _IdeSidebar({
+    required this.roots,
+    required this.activeRootId,
+    required this.effectiveInstanceId,
+    required this.selectedNodeDomId,
+  });
+
+  final List<IdeExplorerProjectRoot> roots;
+  final String activeRootId;
+  final String effectiveInstanceId;
+  final String? selectedNodeDomId;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'ide-sidebar', [
+      if (roots.length > 1)
+        _IdeRootTabs(roots: roots, activeRootId: activeRootId)
+      else
+        const div(classes: 'ide-root-tabs ide-root-tabs-single', [
+          _IdeToggleAllButton(),
+        ]),
+      for (final root in roots)
+        _IdeTree(
+          root: root,
+          isActive: root.id == activeRootId,
+          effectiveInstanceId: effectiveInstanceId,
+          selectedNodeDomId: selectedNodeDomId,
+        ),
+    ]);
+  }
+}
+
+/// The tab list for switching between project roots, plus toggle-all button.
+class _IdeRootTabs extends StatelessComponent {
+  const _IdeRootTabs({
+    required this.roots,
+    required this.activeRootId,
+  });
+
+  final List<IdeExplorerProjectRoot> roots;
+  final String activeRootId;
+
+  @override
+  Component build(BuildContext context) {
+    return div(
+      classes: 'ide-root-tabs',
+      attributes: {'role': 'tablist'},
+      [
+        for (final root in roots)
+          button(
+            classes: [
+              'ide-root-tab',
+              if (root.id == activeRootId) 'active',
+            ].toClasses,
+            attributes: {
+              'data-ide-root': root.id,
+              'role': 'tab',
+              'aria-selected': '${root.id == activeRootId}',
+            },
+            [.text(root.label.isEmpty ? root.id : root.label)],
+          ),
+        const _IdeToggleAllButton(),
+      ],
+    );
+  }
+}
+
+/// A button that expands or collapses all folders in the active tree.
+class _IdeToggleAllButton extends StatelessComponent {
+  const _IdeToggleAllButton();
+
+  @override
+  Component build(BuildContext context) {
+    return const button(
+      classes: 'ide-toggle-all',
+      type: ButtonType.button,
+      attributes: {
+        'data-ide-toggle-all': '',
+        'title': 'Expand or collapse all folders',
+        'aria-label': 'Expand or collapse all folders',
+      },
+      [
+        MaterialIcon('unfold_more', label: 'Expand or collapse all folders'),
+      ],
+    );
+  }
+}
+
+/// A single root file tree in the sidebar.
+class _IdeTree extends StatelessComponent {
+  const _IdeTree({
+    required this.root,
+    required this.isActive,
+    required this.effectiveInstanceId,
+    required this.selectedNodeDomId,
+  });
+
+  final IdeExplorerProjectRoot root;
+  final bool isActive;
+  final String effectiveInstanceId;
+  final String? selectedNodeDomId;
+
+  @override
+  Component build(BuildContext context) {
+    return div(
+      classes: [
+        'ide-tree',
+        if (isActive) 'active',
+      ].toClasses,
+      attributes: {'data-ide-root': root.id},
+      [
+        ul([
+          for (final node in root.children)
+            _IdeTreeNode(
+              node: node,
+              instanceId: effectiveInstanceId,
+              selectedDomId: selectedNodeDomId,
+            ),
+        ]),
+      ],
+    );
+  }
+}
+
+/// An individual file or folder node in the directory tree.
+class _IdeTreeNode extends StatelessComponent {
+  const _IdeTreeNode({
+    required this.node,
+    required this.instanceId,
+    required this.selectedDomId,
+  });
+
+  final IdeTreeNode node;
+  final String instanceId;
+  final String? selectedDomId;
+
+  bool _hasSelectedChild(IdeTreeNode parent) {
+    if (selectedDomId == null) return false;
+    for (final child in parent.children) {
+      if (_ideDomId(instanceId, child.id) == selectedDomId) return true;
+      if (_hasSelectedChild(child)) return true;
+    }
+    return false;
+  }
+
+  @override
+  Component build(BuildContext context) {
+    final domId = _ideDomId(instanceId, node.id);
+    final isSelected = domId == selectedDomId;
+    final row = _IdeNodeRow(node: node, domId: domId, isSelected: isSelected);
+
+    if (!node.isFolder) {
+      return li(classes: 'ide-node ide-node-file', [row]);
+    }
+
+    final isOpen = !node.startsClosed || _hasSelectedChild(node);
+
+    return li(classes: 'ide-node ide-node-folder', [
+      details(
+        open: isOpen,
+        [
+          summary(
+            classes: 'ide-folder-summary',
+            [
+              const span(
+                classes: 'ide-folder-arrow',
+                attributes: {'aria-hidden': 'true'},
+                [],
+              ),
+              row,
+            ],
+          ),
+          ul([
+            for (final child in node.children)
+              _IdeTreeNode(
+                node: child,
+                instanceId: instanceId,
+                selectedDomId: selectedDomId,
+              ),
+          ]),
+        ],
+      ),
+    ]);
+  }
+}
+
+/// The clickable button row for a file or folder node in the tree.
+class _IdeNodeRow extends StatelessComponent {
+  const _IdeNodeRow({
+    required this.node,
+    required this.domId,
+    required this.isSelected,
+  });
+
+  final IdeTreeNode node;
+  final String domId;
+  final bool isSelected;
+
+  @override
+  Component build(BuildContext context) {
+    final icon = node.isFolder
+        ? FileIcon.folderIcon
+        : FileIcon.forFile(node.label);
+    final classesList = ['ide-node-row', if (isSelected) 'active'].toClasses;
+    final attributesMap = {
+      'data-ide-select': domId,
+      if (isSelected) 'aria-current': 'true',
+    };
+    final childrenList = [
+      icon,
+      span(classes: 'ide-node-label', [.text(node.label)]),
+      _IdeBadgeDot(
+        badge: node.badge,
+        color: node.badgeColor ?? IdeBadgeColor.neutral,
+      ),
+    ];
+
+    if (node.isFolder) {
+      return span(
+        classes: classesList,
+        attributes: attributesMap,
+        childrenList,
+      );
+    }
+
+    return button(
+      classes: classesList,
+      type: ButtonType.button,
+      attributes: attributesMap,
+      childrenList,
+    );
+  }
+}
+
+/// A colored indicator dot indicating status or category on a node row.
+class _IdeBadgeDot extends StatelessComponent {
+  const _IdeBadgeDot({
+    required this.badge,
+    this.color = IdeBadgeColor.neutral,
+  });
+
+  final String? badge;
+  final IdeBadgeColor color;
+
+  @override
+  Component build(BuildContext context) {
+    if (badge == null) return const Component.empty();
+
+    return span(
+      classes: [
+        'ide-badge-dot',
+        'ide-badge-color-${color.name}',
+      ].toClasses,
+      attributes: {
+        'role': 'img',
+        'aria-label': badge!,
+        'title': badge!,
+      },
+      [],
+    );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Detail Pane Components
+// ---------------------------------------------------------------------------
+
+/// The right-side container holding detail panels for all tree nodes.
+class _IdeDetailPane extends StatelessComponent {
+  const _IdeDetailPane({
+    required this.allFlatNodes,
+    required this.customContents,
+    required this.effectiveInstanceId,
+    required this.selectedNodeDomId,
+  });
+
+  final List<_BreadcrumbNode> allFlatNodes;
+  final Map<String, Component> customContents;
+  final String effectiveInstanceId;
+  final String? selectedNodeDomId;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'ide-detail', [
+      for (final flat in allFlatNodes)
+        _IdeDetailPanel(
+          flat: flat,
+          customBody: customContents[flat.node.id],
+          instanceId: effectiveInstanceId,
+          isActive: flat.domId == selectedNodeDomId,
+        ),
+    ]);
+  }
+}
+
+/// An individual documentation panel for a selected file or folder.
+///
+/// ```text
+/// ┌──────────────────────────────────────────────────────────┐
+/// │ [Path / Breadcrumbs]                                     │
+/// │ [Icon] Title                           [Optional Badge]  │
+/// │ Subtitle text...                                         │
+/// ├──────────────────────────────────────────────────────────┤
+/// │  _IdePageBody:                                           │
+/// │  Custom markdown explanation and code blocks...          │
+/// ├──────────────────────────────────────────────────────────┤
+/// │  _IdeFolderContentsSection (if folder has children):     │
+/// │  CONTENTS                                                │
+/// │  [📁 lib/]           Application source code             │
+/// │  [📁 test/]          Target directory for widget tests   │
+/// │  [📄 pubspec.yaml]   Project manifest...                 │
+/// └──────────────────────────────────────────────────────────┘
+/// ```
+class _IdeDetailPanel extends StatelessComponent {
+  const _IdeDetailPanel({
+    required this.flat,
+    required this.customBody,
+    required this.instanceId,
+    required this.isActive,
+  });
+
+  final _BreadcrumbNode flat;
+  final Component? customBody;
+  final String instanceId;
+  final bool isActive;
+
+  @override
+  Component build(BuildContext context) {
+    final node = flat.node;
+
+    return div(
+      classes: ['ide-detail-panel', if (isActive) 'active'].toClasses,
+      attributes: {'data-ide-panel': flat.domId},
+      [
+        if (flat.path.isNotEmpty) _IdeBreadcrumb(path: flat.path),
+        _IdePageHeader(node: node),
+        if (customBody != null) _IdePageBody(child: customBody!),
+        if (node.isFolder && node.children.isNotEmpty)
+          _IdeFolderContentsSection(
+            children: node.children,
+            instanceId: instanceId,
+          ),
+      ],
+    );
+  }
+}
+
+/// The breadcrumb path displayed above the detail header.
+class _IdeBreadcrumb extends StatelessComponent {
+  const _IdeBreadcrumb({required this.path});
+
+  final List<String> path;
+
+  @override
+  Component build(BuildContext context) {
+    return div(
+      classes: 'ide-path',
+      [
+        for (final (i, segment) in path.indexed) ...[
+          if (i > 0) const span(classes: 'ide-path-sep', [.text('/')]),
+          span([.text(segment.replaceFirst(RegExp(r'/$'), ''))]),
+        ],
+      ],
+    );
+  }
+}
+
+/// The header of a detail panel showing the file/folder icon, title, badge,
+/// and subtitle.
+class _IdePageHeader extends StatelessComponent {
+  const _IdePageHeader({required this.node});
+
+  final IdeTreeNode node;
+
+  @override
+  Component build(BuildContext context) {
+    final icon = node.isFolder
+        ? FileIcon.folderIcon
+        : FileIcon.forFile(node.label);
+
+    return div(classes: 'ide-detail-header', [
+      icon,
+      div(classes: 'ide-detail-heading', [
+        div(classes: 'ide-detail-title-row', [
+          div(classes: 'ide-detail-title', [
+            .text(node.title ?? node.label),
+          ]),
+          if (node.badge case final badge?)
+            span(
+              classes: [
+                'ide-badge',
+                'ide-badge-color-${node.badgeColor?.name ?? 'neutral'}',
+              ].toClasses,
+              [.text(badge)],
+            ),
+        ]),
+        if (node.subtitle case final subtitle?)
+          div(classes: 'ide-detail-subtitle', [.text(subtitle)]),
+      ]),
+    ]);
+  }
+}
+
+/// Container for the custom markdown prose and code blocks of a page/folder.
+class _IdePageBody extends StatelessComponent {
+  const _IdePageBody({required this.child});
+
+  final Component child;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'ide-custom-body', [child]);
+  }
+}
+
+/// The automatic "Contents" section shown on folder detail panels, listing
+/// clickable shortcut links to all child files and subfolders.
+class _IdeFolderContentsSection extends StatelessComponent {
+  const _IdeFolderContentsSection({
+    required this.children,
+    required this.instanceId,
+  });
+
+  final List<IdeTreeNode> children;
+  final String instanceId;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'ide-contents', [
+      const div(classes: 'ide-contents-title', [.text('Contents')]),
+      div(classes: 'ide-contents-list', [
+        for (final child in children)
+          _IdeContentLink(child: child, instanceId: instanceId),
+      ]),
+    ]);
+  }
+}
+
+/// A clickable link card within the folder "Contents" listing.
+class _IdeContentLink extends StatelessComponent {
+  const _IdeContentLink({
+    required this.child,
+    required this.instanceId,
+  });
+
+  final IdeTreeNode child;
+  final String instanceId;
+
+  @override
+  Component build(BuildContext context) {
+    final icon = child.isFolder
+        ? FileIcon.folderIcon
+        : FileIcon.forFile(child.label);
+
+    return button(
+      classes: 'ide-content-link',
+      type: ButtonType.button,
+      attributes: {
+        'data-ide-select': _ideDomId(instanceId, child.id),
+      },
+      [
+        icon,
+        span(classes: 'ide-node-label', [.text(child.label)]),
+        if (child.subtitle case final subtitle?)
+          span(
+            classes: 'ide-content-one-liner',
+            [.text(subtitle)],
+          ),
+      ],
+    );
+  }
+}
diff --git a/packages/site_shared/lib/components/common/ide_explorer/markdown_component.dart b/packages/site_shared/lib/components/common/ide_explorer/markdown_component.dart
new file mode 100644
index 00000000000..b5ff66d74de
--- /dev/null
+++ b/packages/site_shared/lib/components/common/ide_explorer/markdown_component.dart
@@ -0,0 +1,241 @@
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+
+import '../../../util.dart';
+import 'ide_explorer.dart';
+
+/// A custom markdown component that parses `<IdeExplorer>` and its
+/// `<IdeProjectRoot>`, `<IdeFolder>`, and `<IdePage>` children. Defers
+/// building the IDE html to the [IdeExplorer] component.
+class IdeExplorerMarkdownComponent extends CustomComponent {
+  const IdeExplorerMarkdownComponent() : super.base();
+
+  // Tag name constants
+  static const String _tagIdeExplorer = 'IdeExplorer';
+  static const String _tagIdeProjectRoot = 'IdeProjectRoot';
+  static const String _tagIdeFolder = 'IdeFolder';
+  static const String _tagIdePage = 'IdePage';
+
+  // Attribute name constants
+  static const String _attrId = 'id';
+  static const String _attrLabel = 'label';
+  static const String _attrIsDefaultPage = 'is-default-page';
+  static const String _attrStartsClosed = 'starts-closed';
+  static const String _attrBadge = 'badge';
+  static const String _attrBadgeColor = 'badge-color';
+  static const String _attrSubtitle = 'subtitle';
+
+  // Default values
+  static const String _defaultRootPrefix = 'root';
+  static const String _defaultNodePrefix = 'node';
+
+  @override
+  Component? create(Node node, NodesBuilder builder) {
+    if (node is! ElementNode || node.tag != _tagIdeExplorer) {
+      return null;
+    }
+
+    final projectRootElements = node.children
+        ?.whereType<ElementNode>()
+        .where((n) => n.tag == _tagIdeProjectRoot)
+        .toList();
+
+    if (projectRootElements == null || projectRootElements.isEmpty) {
+      print(
+        '[ERROR] <$_tagIdeExplorer> requires at '
+        'least one <$_tagIdeProjectRoot> child element.',
+      );
+      return const Component.empty();
+    }
+
+    final customContents = <String, Component>{};
+    final roots = <IdeExplorerProjectRoot>[];
+    for (final (index, rootEl) in projectRootElements.indexed) {
+      final rootId = _generateNodeId(
+        rootEl.attributes,
+        _defaultRootPrefix,
+        index,
+      );
+      roots.add(
+        IdeExplorerProjectRoot(
+          id: rootId,
+          label: rootEl.attributes[_attrLabel] ?? '',
+          children: _parseTreeNodes(
+            rootEl.children,
+            builder,
+            customContents,
+            rootId,
+          ),
+        ),
+      );
+    }
+
+    return IdeExplorer(
+      roots: roots,
+      customContents: customContents,
+    );
+  }
+
+  /// Generates a node ID from attributes or creates a default one.
+  String _generateNodeId(
+    Map<String, String> attributes,
+    String prefix,
+    int index, [
+    String? parentId,
+  ]) {
+    if (attributes[_attrId] != null) {
+      return attributes[_attrId]!;
+    }
+    final label = attributes[_attrLabel];
+    final localId = (label != null && label.isNotEmpty)
+        ? slugify(label)
+        : '$prefix-$index';
+    return parentId != null ? '$parentId-$localId' : localId;
+  }
+
+  List<IdeTreeNode> _parseTreeNodes(
+    List<Node>? nodes,
+    NodesBuilder builder,
+    Map<String, Component> customContents,
+    String parentId,
+  ) {
+    if (nodes == null || nodes.isEmpty) return const [];
+
+    final result = <IdeTreeNode>[];
+
+    for (final (index, child) in nodes.whereType<ElementNode>().indexed) {
+      if (child.tag != _tagIdeFolder && child.tag != _tagIdePage) {
+        continue;
+      }
+
+      final treeNode = _buildTreeNodeFromElement(
+        child,
+        index,
+        builder,
+        customContents,
+        parentId,
+      );
+
+      result.add(treeNode);
+    }
+
+    return result;
+  }
+
+  /// Builds a single [IdeTreeNode] from an [ElementNode].
+  IdeTreeNode _buildTreeNodeFromElement(
+    ElementNode element,
+    int index,
+    NodesBuilder builder,
+    Map<String, Component> customContents,
+    String parentId,
+  ) {
+    final attributes = element.attributes;
+    final label = attributes[_attrLabel] ?? '';
+    final id = _generateNodeId(attributes, _defaultNodePrefix, index, parentId);
+
+    // Parse boolean attributes
+    final isDefaultPage = _getBoolAttribute(
+      attributes,
+      _attrIsDefaultPage,
+      defaultValue: false,
+    );
+    final startsClosed = _getBoolAttribute(
+      attributes,
+      _attrStartsClosed,
+      defaultValue: true,
+    );
+
+    // Parse badge attributes
+    final badge = attributes[_attrBadge];
+    final badgeColor = attributes[_attrBadgeColor] != null
+        ? IdeBadgeColor.fromString(attributes[_attrBadgeColor])
+        : null;
+
+    final subtitle = attributes[_attrSubtitle];
+
+    // Recursively parse children
+    final nestedTreeNodes = _parseTreeNodes(
+      element.children,
+      builder,
+      customContents,
+      id,
+    );
+
+    // Extract and store custom body content if present
+    _storeCustomContentIfPresent(
+      element.children,
+      id,
+      builder,
+      customContents,
+    );
+
+    return IdeTreeNode(
+      id: id,
+      label: label,
+      isDefaultPage: isDefaultPage,
+      startsClosed: startsClosed,
+      badge: badge,
+      badgeColor: badgeColor,
+      subtitle: subtitle,
+      children: nestedTreeNodes,
+    );
+  }
+
+  /// Parses a boolean attribute value, returning [defaultValue] if not present.
+  bool _getBoolAttribute(
+    Map<String, String> attributes,
+    String key, {
+    required bool defaultValue,
+  }) {
+    final value = attributes[key];
+    return value != null ? value == 'true' : defaultValue;
+  }
+
+  /// Checks if a node represents body content (not a folder/page structure).
+  bool _isBodyContent(Node node) {
+    if (node is ElementNode &&
+        (node.tag == _tagIdeFolder || node.tag == _tagIdePage)) {
+      return false;
+    }
+    if (node is TextNode && node.text.trim().isEmpty) {
+      return false;
+    }
+    return true;
+  }
+
+  /// Extracts non-structural content nodes from children.
+  List<Node> _extractContentNodes(List<Node> children) {
+    return children
+        .where((n) {
+          if (n is ElementNode &&
+              (n.tag == _tagIdeFolder || n.tag == _tagIdePage)) {
+            return false;
+          }
+          return true;
+        })
+        .toList(growable: false);
+  }
+
+  /// Stores custom body content for a node if it exists.
+  void _storeCustomContentIfPresent(
+    List<Node>? children,
+    String nodeId,
+    NodesBuilder builder,
+    Map<String, Component> customContents,
+  ) {
+    if (!_hasCustomBodyContent(children)) {
+      return;
+    }
+
+    final contentNodes = _extractContentNodes(children!);
+    if (contentNodes.isNotEmpty) {
+      customContents[nodeId] = builder.build(contentNodes);
+    }
+  }
+
+  /// Checks if a node has custom body content.
+  bool _hasCustomBodyContent(List<Node>? children) {
+    return children?.any(_isBodyContent) ?? false;
+  }
+}
diff --git a/sites/docs/lib/_sass/_site.scss b/sites/docs/lib/_sass/_site.scss
index 99092c6a676..f4b54f2cc41 100644
--- a/sites/docs/lib/_sass/_site.scss
+++ b/sites/docs/lib/_sass/_site.scss
@@ -14,6 +14,7 @@
 @use 'components/content';
 @use 'components/expansion-list';
 @use 'components/filter-search';
+@use 'components/filterable-index';
 @use 'components/footer';
 @use 'components/header';
 @use 'components/icons';
@@ -37,6 +38,7 @@
 @use 'package:site_shared/_sass/components/code';
 @use 'package:site_shared/_sass/components/cookie-notice';
 @use 'package:site_shared/_sass/components/dropdown';
+@use 'package:site_shared/_sass/components/ide-explorer';
 @use 'package:site_shared/_sass/components/menu-toggle';
 @use 'package:site_shared/_sass/components/progress-ring';
 @use 'package:site_shared/_sass/components/quiz';
@@ -48,10 +50,13 @@
 @use 'package:site_shared/_sass/components/tooltip';
 
 // Styles for specific pages, alphabetically ordered.
+@use 'pages/cuj-index';
+@use 'pages/flutter-bench';
 @use 'pages/glossary';
 @use 'pages/learning-resources-index';
 @use 'pages/not-found';
 @use 'pages/search';
+@use 'pages/story-layout';
 
 // Must be imported last to ensure that
 // the print overrides take priority over earlier defined styles.
diff --git a/sites/docs/lib/_sass/components/_filterable-index.scss b/sites/docs/lib/_sass/components/_filterable-index.scss
new file mode 100644
index 00000000000..1d881c23a3c
--- /dev/null
+++ b/sites/docs/lib/_sass/components/_filterable-index.scss
@@ -0,0 +1,224 @@
+// Layout and controls shared by the filterable index pages: the learning
+// resources index and the critical user journey index.
+//
+// The markup comes from the `FiltersSidebar` and `FilterSearchGroup`
+// components in `filterable_index.dart`, so everything here is keyed off
+// classes. Each page styles its own results list separately, keyed off the
+// id of that list.
+
+$mobile-breakpoint: 839px;
+$sidebar-width: 220px;
+
+.filterable-index {
+  display: flex;
+  flex-direction: row;
+
+  .left-col {
+    margin-right: 1rem;
+    flex: 2;
+  }
+
+  .right-col {
+    width: $sidebar-width;
+  }
+}
+
+// The sidebar follows the page as it scrolls on wide screens, and becomes an
+// off-canvas drawer on narrow ones. Everything within it, including any
+// page-specific footer, slides in and out as a single unit.
+.filter-sidebar {
+  position: sticky;
+  top: calc(var(--site-header-height) + 1rem);
+}
+
+.filter-group-wrapper {
+  border: 1px solid var(--site-inset-borderColor);
+  background-color: var(--site-inset-bgColor);
+  border-radius: var(--site-radius);
+  overflow: hidden;
+}
+
+// Only shown while the sidebar is a drawer, to close it again.
+.filter-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1rem;
+  z-index: 10;
+}
+
+.close-icon {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: var(--site-base-fgColor-alt);
+  transition: all 0.2s ease;
+  position: absolute;
+  right: 1rem;
+  top: 75%;
+  transform: translateY(-50%);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: var(--site-primary-color);
+  }
+
+  .material-symbols {
+    font-size: 20px;
+  }
+}
+
+.filter-group {
+  .table-title {
+    text-align: center;
+    color: var(--site-base-fgColor-alt);
+    background-color: var(--site-raised-bgColor);
+    font-family: var(--site-ui-fontFamily);
+    font-weight: 600;
+    font-size: .925rem;
+    padding: .5rem;
+    border-bottom: 1px solid var(--site-inset-borderColor);
+  }
+
+  .table-content {
+    padding: 1rem;
+  }
+
+  ul {
+    padding-left: 0;
+    margin-bottom: .5rem;
+
+    li {
+      list-style: none;
+      padding-left: 0;
+      padding-bottom: .25rem;
+      display: flex;
+      align-items: center;
+
+      label {
+        padding-left: .35rem;
+        font-size: .9rem;
+      }
+    }
+  }
+
+  h4 {
+    margin: 0 0 .5rem;
+    padding: 0;
+  }
+
+  button {
+    color: var(--site-primary-color);
+    margin: 0 0 2rem;
+    padding: .5rem 0 1rem 1rem;
+
+    &:hover {
+      color: var(--site-onPrimary-color);
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+}
+
+.filter-search-group {
+  display: flex;
+  flex-direction: column;
+
+  button.show-filters-button {
+    @media (min-width: $mobile-breakpoint + 1) {
+      display: none;
+    }
+  }
+
+  .label-row {
+    display: flex;
+    justify-content: space-between;
+    font-size: .925rem;
+
+    label {
+      font-family: var(--site-ui-fontFamily);
+      color: var(--site-base-fgColor-lighter);
+
+      padding: .25rem 1rem 0 0;
+      margin: 0;
+      text-align: end;
+    }
+
+    button {
+      padding: .25rem;
+      color: var(--site-primary-color);
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        color: var(--site-onPrimary-color-light);
+      }
+
+      &:disabled,
+      &[disabled] {
+        color: var(--site-inset-bgColor-translucent);
+        cursor: default;
+      }
+    }
+  }
+}
+
+// On narrow screens the sidebar becomes a drawer that slides in from the
+// right. Opening and closing is driven entirely by the hidden
+// `#open-filter-toggle` checkbox that precedes it.
+@media (max-width: $mobile-breakpoint) {
+  .filterable-index {
+    flex-direction: column;
+  }
+
+  .left-col {
+    margin-right: 0;
+  }
+
+  // The drawer itself is fixed-positioned, so this column no longer needs to
+  // reserve width for it in the flex layout.
+  .right-col {
+    width: auto;
+  }
+
+  .filter-header {
+    display: block;
+  }
+
+  .filter-sidebar {
+    position: fixed;
+    top: var(--site-header-height);
+    bottom: 0;
+    right: -$sidebar-width;
+    width: $sidebar-width;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--site-inset-bgColor);
+    border-left: 1px solid var(--site-inset-borderColor);
+    transition: right 0.3s ease-in-out;
+    z-index: 1000;
+  }
+
+  #open-filter-toggle:checked + .filter-sidebar {
+    right: 0;
+  }
+
+  // Fill the drawer rather than floating within it as a card,
+  // and scroll on its own so any footer stays in view.
+  .filter-group-wrapper {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    border: none;
+    border-radius: 0;
+  }
+
+  .filter-group .table-title {
+    background-color: var(--site-raised-bgColor-translucent);
+  }
+}
diff --git a/sites/docs/lib/_sass/pages/_cuj-index.scss b/sites/docs/lib/_sass/pages/_cuj-index.scss
new file mode 100644
index 00000000000..e38e28722f3
--- /dev/null
+++ b/sites/docs/lib/_sass/pages/_cuj-index.scss
@@ -0,0 +1,142 @@
+@use 'sass:color';
+@use 'flutter-bench' as *;
+
+// The critical user journey index reuses the two column layout, search field,
+// and filter sidebar of the learning resources index, which are styled in
+// `_filterable-index.scss`.
+//
+// The journeys themselves render as full-width expandable cards, following
+// the glossary in `_glossary.scss`. Expanding and collapsing is wired up
+// by the `_setUpExpandableCards` global script.
+
+// The feedback button is the sidebar footer, so it sits below the filter card
+// and slides in with it when the sidebar becomes a drawer.
+.cuj-feedback {
+  margin-block-start: $spacing-md;
+
+  .outlined-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  @media (max-width: 839px) {
+    margin-block-start: 0;
+    padding: 0.75rem;
+    border-top: 1px solid var(--site-inset-borderColor);
+  }
+}
+
+#all-cujs-list {
+  margin-block-start: $spacing-md;
+
+  .cuj-card {
+    height: auto;
+    padding: 0.75rem $spacing-md;
+    gap: $spacing-xs;
+
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: $spacing-sm;
+    }
+
+    .cuj-card-heading {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.4rem;
+      // Allow long goals to wrap instead of widening the flex item.
+      min-width: 0;
+    }
+
+    .card-title {
+      display: block;
+      margin: 0;
+      font-family: var(--site-ui-fontFamily);
+      font-size: 1.1rem;
+      font-weight: 500;
+      line-height: 1.35;
+      text-wrap: pretty;
+    }
+
+    .card-header-buttons {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: $spacing-xs;
+      flex-shrink: 0;
+
+      .icon-button {
+        border-radius: $spacing-lg;
+
+        > span {
+          font-size: $font-size-xl;
+        }
+      }
+    }
+
+    .cuj-task-count {
+      margin: 0;
+      font-size: $font-size-sm;
+      color: var(--site-base-fgColor-lighter);
+    }
+
+    // The shared card styles lay `.card-content` out as a centered row.
+    // Journeys need a plain block so the task list stacks below the divider.
+    .card-content {
+      display: block;
+      border-top: 0.05rem solid var(--site-inset-borderColor);
+      margin-block-start: $spacing-sm;
+      padding-block-start: $spacing-sm;
+    }
+
+    &.collapsed {
+      .card-content {
+        display: none;
+      }
+
+      .expand-button {
+        transform: rotate(180deg);
+      }
+    }
+
+    .expand-button {
+      &:hover,
+      &:focus-within {
+        transition: transform $transition-normal;
+      }
+    }
+
+    .cuj-task-list {
+      margin: 0;
+      padding-left: 1.15rem;
+
+      li {
+        padding-left: 0;
+        margin-block-end: $spacing-sm;
+        font-size: $font-size-sm;
+        line-height: 1.45;
+        color: var(--site-base-fgColor-alt);
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+    }
+
+    // Two additional persona colors, following the `.pill-sm` modifiers.
+    // TODO(parlough): Consider if these colors can be shared and if
+    // compatible with dark mode.
+    .pill-sm.magenta {
+      color: color.scale(#FBD9EF, $lightness: 10%);
+      background: #9A2E6E;
+    }
+
+    .pill-sm.amber {
+      color: color.scale(#FCEBC8, $lightness: 10%);
+      background: $color-dx;
+    }
+  }
+}
diff --git a/sites/docs/lib/_sass/pages/_flutter-bench.scss b/sites/docs/lib/_sass/pages/_flutter-bench.scss
new file mode 100644
index 00000000000..d5a949be860
--- /dev/null
+++ b/sites/docs/lib/_sass/pages/_flutter-bench.scss
@@ -0,0 +1,1388 @@
+@use 'sass:color';
+@use 'package:site_shared/_sass/base/breakpoints';
+
+// Styles for FlutterBench and Methodology pages
+
+// -----------------------------------------------------------------------------
+// Variables & Theme
+// -----------------------------------------------------------------------------
+
+// Core Category Colors
+// NOTE: These colors are intentionally coordinated with _story-layout.scss
+// chapter accent colors to maintain visual consistency across FlutterBench pages
+$color-outcome: #059669;     // Green - successful outcomes
+$color-quality: #6366f1;     // Indigo - code quality metrics
+$color-dx: #d97706;          // Amber - developer experience
+$color-functional: #0284c7;  // Sky blue - functional correctness
+$color-llm: #7c3aed;         // Violet - LLM grading
+$color-heuristic: #2563eb;   // Blue - heuristic grading
+$color-poor: #ea580c;        // Orange - poor performance
+$color-failure: #e11d48;     // Rose - failures
+$color-grey: #64748b;        // Slate - neutral/baseline
+
+// Hero & Special Colors
+$color-white: #ffffff;
+$color-gold: #fbbf24;
+$hero-bg-light: linear-gradient(135deg, #0d2040 0%, #1e1b4b 50%, #0f172a 100%);
+$hero-bg-dark: linear-gradient(135deg, #091728 0%, #131230 50%, #090e17 100%);
+$north-star-bg-light: linear-gradient(135deg, #102a4e 0%, #1e1b4b 100%);
+$north-star-bg-dark: linear-gradient(135deg, #0d1e38 0%, #151433 100%);
+
+// Typography Scale
+$font-size-xs: 0.75rem;
+$font-size-sm: 0.875rem;
+$font-size-md: 1rem;
+$font-size-lg: 1.25rem;
+$font-size-xl: 1.5rem;
+$font-size-xxl: 2.5rem;
+
+// Spacing Scale
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 1rem;
+$spacing-lg: 1.5rem;
+$spacing-xl: 2rem;
+
+// Dimensions & Layout
+$border-width: 2px;
+$icon-size: 2.75rem;
+$card-width: 280px;
+$bench-content-max-width: 1000px;
+
+// Shadows & Transitions
+$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+$shadow-hero: 0 4px 12px rgba(0, 0, 0, 0.2);
+$shadow-hero-dark: 0 4px 12px rgba(0, 0, 0, 0.4);
+$transition-normal: 0.2s ease;
+
+// -----------------------------------------------------------------------------
+// Mixins
+// -----------------------------------------------------------------------------
+
+// Centers content with consistent max-width
+@mixin bench-element-width($max-width: $bench-content-max-width) {
+  width: 100%;
+  max-width: $max-width;
+  margin-left: $spacing-sm;
+  margin-right: $spacing-sm;
+}
+
+// Consistent scrollbar styling across components
+@mixin custom-scrollbar($orientation: 'vertical') {
+  scrollbar-width: thin;
+  scrollbar-color: var(--site-inset-borderColor) transparent;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    @if $orientation == 'horizontal' {
+      height: 6px;
+    } @else {
+      width: 6px;
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--site-inset-borderColor);
+    border-radius: 3px;
+  }
+}
+
+// Category badge styling with optional border
+@mixin category-badge($with-border: false) {
+  font-size: $font-size-xs;
+  font-weight: 600;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: var(--site-radius, $spacing-xs);
+
+  &.badge-outcome,
+  &.outcome {
+    background: rgba($color-outcome, 0.12);
+    color: $color-outcome;
+    @if $with-border {
+      border: 1px solid rgba($color-outcome, 0.25);
+    }
+  }
+
+  &.badge-quality,
+  &.quality {
+    background: rgba($color-quality, 0.12);
+    color: $color-quality;
+    @if $with-border {
+      border: 1px solid rgba($color-quality, 0.25);
+    }
+  }
+
+  &.badge-dx,
+  &.dx {
+    background: rgba($color-dx, 0.12);
+    color: $color-dx;
+    @if $with-border {
+      border: 1px solid rgba($color-dx, 0.25);
+    }
+  }
+
+  &.badge-functional,
+  &.badge-blue {
+    background: rgba($color-functional, 0.12);
+    color: $color-functional;
+    @if $with-border {
+      border: 1px solid rgba($color-functional, 0.25);
+    }
+  }
+
+  &.badge-llm {
+    background: rgba($color-llm, 0.12);
+    color: $color-llm;
+    @if $with-border {
+      border: 1px solid rgba($color-llm, 0.25);
+    }
+  }
+
+  &.badge-heuristic {
+    background: rgba($color-heuristic, 0.12);
+    color: $color-heuristic;
+    @if $with-border {
+      border: 1px solid rgba($color-heuristic, 0.25);
+    }
+  }
+
+  &.badge-poor {
+    background: rgba($color-poor, 0.12);
+    color: $color-poor;
+    @if $with-border {
+      border: 1px solid rgba($color-poor, 0.25);
+    }
+  }
+
+  &.badge-failure {
+    background: rgba($color-failure, 0.12);
+    color: $color-failure;
+    @if $with-border {
+      border: 1px solid rgba($color-failure, 0.25);
+    }
+  }
+
+  &.badge-grey {
+    background: rgba($color-grey, 0.12);
+    color: $color-grey;
+    @if $with-border {
+      border: 1px solid rgba($color-grey, 0.25);
+    }
+  }
+
+  &.badge-deterministic {
+    background: rgba($color-outcome, 0.12);
+    color: $color-outcome;
+    @if $with-border {
+      border: 1px solid rgba($color-outcome, 0.25);
+    }
+  }
+
+  &.badge-perfect,
+  &.badge-green {
+    background: rgba($color-outcome, 0.12);
+    color: $color-outcome;
+    @if $with-border {
+      border: 1px solid rgba($color-outcome, 0.25);
+    }
+  }
+
+  &.badge-purple {
+    background: rgba($color-quality, 0.12);
+    color: $color-quality;
+    @if $with-border {
+      border: 1px solid rgba($color-quality, 0.25);
+    }
+  }
+
+  &.badge-amber {
+    background: rgba($color-dx, 0.12);
+    color: $color-dx;
+    @if $with-border {
+      border: 1px solid rgba($color-dx, 0.25);
+    }
+  }
+}
+
+// Icon background with category colors
+@mixin category-icon-background {
+  width: $icon-size;
+  height: $icon-size;
+  border-radius: $spacing-sm;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.outcome,
+  &.variant-outcome {
+    background-color: rgba($color-outcome, 0.15);
+    color: $color-outcome;
+  }
+
+  &.quality,
+  &.variant-quality {
+    background-color: rgba($color-quality, 0.15);
+    color: $color-quality;
+  }
+
+  &.dx,
+  &.variant-dx {
+    background-color: rgba($color-dx, 0.15);
+    color: $color-dx;
+  }
+
+  &.variant-blue {
+    background-color: rgba($color-functional, 0.12);
+    color: $color-functional;
+  }
+
+  &.variant-grey {
+    background-color: rgba($color-grey, 0.15);
+    color: $color-grey;
+  }
+
+  .material-symbols {
+    font-size: $font-size-xl;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Component Styles
+// -----------------------------------------------------------------------------
+
+.methodology-hero {
+  background: $hero-bg-light;
+  color: $color-white;
+  border-radius: var(--site-radius);
+  padding: $spacing-xl;
+  box-shadow: $shadow-hero;
+
+  h1,
+  .hero-title {
+    color: $color-white;
+    font-weight: 700;
+    margin: 0 0 $spacing-sm 0;
+  }
+
+  p {
+    color: #e2e8f0;
+    font-size: $font-size-sm;
+    margin: 0;
+    max-width: 48rem;
+
+    code {
+      background: rgba(15, 23, 42, 0.8);
+      color: #93c5fd;
+      border: 1px solid rgba(59, 130, 246, 0.3);
+      padding: $spacing-xs $spacing-sm;
+      border-radius: var(--site-radius);
+    }
+
+    strong {
+      color: $color-white;
+    }
+  }
+}
+
+// Three Core Dimensions Grid
+.dimension-cards-grid {
+  @include bench-element-width;
+  max-width: 700px;
+  margin-block: $spacing-lg $spacing-xl;
+
+  .dimension-card {
+    background-color: var(--site-inset-bgColor);
+    border: 1px solid var(--site-inset-borderColor);
+    border-radius: var(--site-radius);
+    padding: $spacing-md;
+    margin-bottom: $spacing-md;
+    display: flex;
+    flex-direction: column;
+
+    .card-header-row {
+      display: flex;
+      align-items: center;
+
+      .card-icon-wrap {
+        @include category-icon-background;
+        margin: 0 $spacing-md $spacing-md 0;
+      }
+
+      h4 {
+        flex: 2;
+        font-size: $font-size-md;
+        font-weight: 600;
+        margin: 0 0 $spacing-sm 0;
+        color: var(--site-base-fgColor);
+      }
+    }
+
+    p {
+      font-size: $font-size-sm;
+      color: var(--site-base-fgColor-alt);
+      margin: 0;
+      flex-grow: 1;
+    }
+
+    .card-footer-info {
+      margin-top: $spacing-md;
+      padding-top: $spacing-sm;
+      border-top: 1px solid var(--site-inset-borderColor);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: $font-size-xs;
+      color: var(--site-base-fgColor-lighter);
+
+      .badge {
+        @include category-badge;
+      }
+    }
+  }
+}
+
+// Grader Matrix Carousel
+.grader-matrix {
+  @include bench-element-width;
+  background-color: var(--site-inset-bgColor);
+  border: 1px solid var(--site-inset-borderColor);
+  border-radius: var(--site-radius);
+  padding: $spacing-md;
+  margin-block: $spacing-md;
+  position: relative;
+
+  .matrix-header {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+    margin-bottom: $spacing-md;
+
+    @include breakpoints.screen('md') {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .matrix-title-area {
+      h3 {
+        margin: 0 0 $spacing-xs 0;
+        font-size: $font-size-lg;
+        font-weight: 600;
+        color: var(--site-base-fgColor);
+      }
+
+      p {
+        margin: 0;
+        font-size: $font-size-sm;
+        color: var(--site-base-fgColor-alt);
+      }
+    }
+
+    .matrix-filters {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $spacing-xs;
+      background-color: var(--site-raised-bgColor);
+      padding: $spacing-xs;
+      border-radius: $spacing-sm;
+
+      .filter-btn {
+        background: transparent;
+        border: none;
+        border-radius: var(--site-radius);
+        padding: $spacing-xs $spacing-sm;
+        font-size: $font-size-xs;
+        font-weight: 500;
+        color: var(--site-base-fgColor-alt);
+        cursor: pointer;
+        transition: $transition-normal;
+
+        &:hover {
+          color: var(--site-base-fgColor);
+        }
+
+        &.active {
+          background-color: var(--site-base-bgColor);
+          color: var(--site-primary-color);
+          font-weight: 600;
+          box-shadow: $shadow-sm;
+        }
+      }
+    }
+  }
+
+  .grader-carousel-wrapper {
+    position: relative;
+    width: 100%;
+
+    .carousel-nav-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      border-radius: 50%;
+      border: 1px solid var(--site-inset-borderColor);
+      background-color: var(--site-base-bgColor);
+      color: var(--site-base-fgColor);
+      cursor: pointer;
+      transition: $transition-normal;
+      box-shadow: $shadow-sm;
+      z-index: var(--site-z-floating, 10);
+
+      &.prev {
+        left: -$spacing-md;
+      }
+
+      &.next {
+        right: -$spacing-md;
+      }
+
+      &:hover:not(:disabled) {
+        background-color: var(--site-raised-bgColor);
+        border-color: var(--site-primary-color);
+        color: var(--site-primary-color);
+        transform: translateY(-50%) scale(1.05);
+      }
+
+      &:active:not(:disabled) {
+        transform: translateY(-50%) scale(0.95);
+      }
+
+      &:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+      }
+
+      .material-symbols {
+        font-size: $font-size-xl;
+      }
+    }
+
+    .grader-cards-track {
+      @include custom-scrollbar('horizontal');
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      gap: $spacing-md;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+      padding: $spacing-sm;
+      background-color: var(--site-base-bgColor);
+      border-radius: var(--site-radius);
+      // Preserves padding when overflow-x clips it
+      border-left: $spacing-sm solid var(--site-base-bgColor);
+      border-right: $spacing-sm solid var(--site-base-bgColor);
+
+      .grader-card {
+        flex: 0 0 $card-width;
+        max-width: $card-width;
+        min-width: 260px;
+        scroll-snap-align: start;
+        background-color: var(--site-base-bgColor);
+        border: 1px solid var(--site-inset-borderColor);
+        border-radius: var(--site-radius);
+        padding: $spacing-md;
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-sm;
+        transition: border-color $transition-normal;
+
+        &:hover {
+          border-color: var(--site-primary-color);
+        }
+
+        &.hidden {
+          display: none !important;
+        }
+
+        .grader-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: $spacing-sm;
+
+          .grader-cat {
+            font-size: $font-size-xs;
+            font-weight: 700;
+            text-transform: uppercase;
+
+            &.outcome {
+              color: $color-outcome;
+            }
+
+            &.quality {
+              color: $color-quality;
+            }
+
+            &.dx {
+              color: $color-dx;
+            }
+          }
+
+          .grader-badge {
+            @include category-badge(true);
+            border-radius: 9999px;
+          }
+        }
+
+        h4 {
+          font-size: $font-size-md;
+          font-weight: 600;
+          margin: 0;
+          color: var(--site-base-fgColor);
+        }
+
+        p {
+          font-size: $font-size-sm;
+          color: var(--site-base-fgColor-alt);
+          margin: 0;
+          flex-grow: 1;
+
+          code {
+            font-size: 0.9em;
+            background-color: rgba(0, 0, 0, 0.05);
+            padding: $spacing-xs;
+            border-radius: var(--site-radius);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Multi-Run Reliability
+.reliability-comparison-grid {
+  @include bench-element-width;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+  gap: $spacing-md;
+  margin-block: $spacing-lg $spacing-xl;
+
+  .reliability-card {
+    background-color: var(--site-inset-bgColor);
+    border: 1px solid var(--site-inset-borderColor);
+    border-radius: var(--site-radius);
+    padding: $spacing-lg;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    .reliability-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .tag {
+        font-size: $font-size-xs;
+        font-weight: 700;
+        text-transform: uppercase;
+        color: var(--site-primary-color);
+      }
+
+      .math-pill {
+        font-family: var(--site-code-fontFamily, monospace);
+        font-size: $font-size-sm;
+        font-weight: 700;
+        background-color: rgba(4, 104, 215, 0.1);
+        color: var(--site-primary-color);
+        padding: $spacing-xs $spacing-sm;
+        border-radius: var(--site-radius);
+      }
+    }
+
+    h4 {
+      font-size: $font-size-lg;
+      font-weight: 600;
+      margin: 0;
+      color: var(--site-base-fgColor);
+    }
+
+    p {
+      font-size: $font-size-sm;
+      color: var(--site-base-fgColor-alt);
+      margin: 0;
+
+      strong,
+      em {
+        color: var(--site-base-fgColor);
+      }
+    }
+
+    &.north-star {
+      background: $north-star-bg-light;
+      border: 1px solid rgba(59, 130, 246, 0.4);
+      color: $color-white;
+      box-shadow: $shadow-md;
+
+      .reliability-header {
+        .tag {
+          color: $color-gold;
+          display: flex;
+          align-items: center;
+          gap: $spacing-xs;
+
+          .material-symbols {
+            font-size: $font-size-md;
+          }
+        }
+
+        .math-pill {
+          background-color: rgba(59, 130, 246, 0.25);
+          border: 1px solid rgba(147, 197, 253, 0.4);
+          color: #bfdbfe;
+        }
+      }
+
+      h4 {
+        color: $color-white;
+      }
+
+      p {
+        color: #e2e8f0;
+
+        strong,
+        em {
+          color: $color-white;
+        }
+      }
+    }
+  }
+}
+
+// Interactive Detail Card & Score Triage
+.interactive-detail-card,
+.score-triage {
+  @include bench-element-width;
+  background-color: var(--site-inset-bgColor);
+  border: 1px solid var(--site-inset-borderColor);
+  border-radius: var(--site-radius);
+  padding: $spacing-lg;
+  margin-block: $spacing-lg $spacing-xl;
+
+  .card-header-area,
+  .triage-header {
+    margin-bottom: $spacing-md;
+
+    h3 {
+      font-size: $font-size-lg;
+      font-weight: 600;
+      margin: 0 0 $spacing-xs 0;
+      color: var(--site-base-fgColor);
+    }
+
+    p {
+      font-size: $font-size-sm;
+      color: var(--site-base-fgColor-alt);
+      margin: 0;
+    }
+  }
+
+  .card-tabs-grid,
+  .triage-tiers-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
+    gap: $spacing-sm;
+    margin-bottom: $spacing-md;
+
+    .card-tab-btn,
+    .triage-tier-btn {
+      background-color: var(--site-base-bgColor);
+      border: 1px solid var(--site-inset-borderColor);
+      border-radius: var(--site-radius);
+      padding: $spacing-sm $spacing-md;
+      text-align: left;
+      cursor: pointer;
+      transition: $transition-normal;
+      opacity: 0.75;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      .tab-primary-label,
+      .tier-score {
+        font-size: $font-size-sm;
+        font-weight: 800;
+      }
+
+      .tab-secondary-label,
+      .tier-name {
+        font-size: $font-size-xs;
+        font-weight: 600;
+        margin-top: $spacing-xs;
+        color: var(--site-base-fgColor);
+      }
+
+      // Color variants for tabs
+      &.variant-perfect,
+      &.tier-perfect {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-outcome;
+        }
+
+        &.active {
+          border: $border-width solid $color-outcome;
+          background-color: rgba($color-outcome, 0.08);
+          opacity: 1;
+        }
+      }
+
+      &.variant-functional,
+      &.variant-blue,
+      &.tier-functional {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-functional;
+        }
+
+        &.active {
+          border: $border-width solid $color-functional;
+          background-color: rgba($color-functional, 0.08);
+          opacity: 1;
+        }
+      }
+
+      &.variant-quality,
+      &.variant-purple {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-quality;
+        }
+
+        &.active {
+          border: $border-width solid $color-quality;
+          background-color: rgba($color-quality, 0.08);
+          opacity: 1;
+        }
+      }
+
+      &.variant-partial,
+      &.variant-dx,
+      &.variant-amber,
+      &.tier-partial {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-dx;
+        }
+
+        &.active {
+          border: $border-width solid $color-dx;
+          background-color: rgba($color-dx, 0.08);
+          opacity: 1;
+        }
+      }
+
+      &.variant-poor,
+      &.tier-poor {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-poor;
+        }
+
+        &.active {
+          border: $border-width solid $color-poor;
+          background-color: rgba($color-poor, 0.08);
+          opacity: 1;
+        }
+      }
+
+      &.variant-failure,
+      &.tier-failure {
+        .tab-primary-label,
+        .tier-score {
+          color: $color-failure;
+        }
+
+        &.active {
+          border: $border-width solid $color-failure;
+          background-color: rgba($color-failure, 0.08);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .card-panels-container,
+  .triage-detail-card {
+    @include custom-scrollbar;
+    background-color: var(--site-base-bgColor);
+    border: 1px solid var(--site-inset-borderColor);
+    border-radius: var(--site-radius);
+    padding: $spacing-md;
+    position: relative;
+    min-height: 220px;
+    max-height: 380px;
+    overflow-y: auto;
+
+    .card-panel,
+    .triage-panel {
+      display: none;
+      flex-direction: column;
+      gap: $spacing-sm;
+
+      &.active {
+        display: flex;
+      }
+
+      .panel-heading {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $spacing-sm;
+
+        h4 {
+          font-size: $font-size-md;
+          font-weight: 700;
+          margin: 0;
+          color: var(--site-base-fgColor);
+        }
+
+        .panel-badge {
+          @include category-badge;
+        }
+      }
+
+      .panel-overview,
+      .criteria-text {
+        font-size: $font-size-sm;
+        color: var(--site-base-fgColor-alt);
+        margin: 0;
+      }
+
+      .panel-items-section,
+      .actions-section {
+        border-top: 1px solid var(--site-inset-borderColor);
+        padding-top: $spacing-sm;
+
+        .items-label,
+        .actions-label {
+          font-size: $font-size-xs;
+          font-weight: 700;
+          text-transform: uppercase;
+          color: var(--site-base-fgColor);
+          margin-bottom: $spacing-xs;
+        }
+
+        ul {
+          margin: 0;
+          padding-left: $spacing-md;
+
+          li {
+            font-size: $font-size-sm;
+            color: var(--site-base-fgColor);
+            margin-bottom: $spacing-xs;
+
+            strong {
+              color: var(--site-primary-color);
+            }
+
+            code {
+              font-size: 0.85em;
+              background-color: var(--site-raised-bgColor);
+              padding: $spacing-xs;
+              border-radius: var(--site-radius);
+            }
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+          }
+        }
+      }
+
+      .panel-footer-text {
+        font-size: $font-size-sm;
+        color: var(--site-base-fgColor-alt);
+        margin: $spacing-sm 0 0 0;
+        font-style: italic;
+      }
+    }
+  }
+}
+
+// Styled tables for FlutterBench pages
+#page-content:has(.methodology-hero, .grader-matrix, .dimension-cards-grid) {
+  .table-wrapper:not(.task-specs-list *) {
+    @include bench-element-width;
+    background-color: var(--site-base-bgColor);
+    border: 1px solid var(--site-inset-borderColor);
+    border-radius: var(--site-radius);
+    margin-block: $spacing-md $spacing-lg;
+    overflow-x: auto;
+    box-shadow: $shadow-sm;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border-spacing: 0;
+      margin: 0;
+
+      thead {
+        background-color: var(--site-raised-bgColor);
+        border-bottom: 1px solid var(--site-inset-borderColor);
+
+        tr {
+          th {
+            padding: $spacing-sm $spacing-md;
+            font-family: var(--site-ui-fontFamily);
+            font-size: $font-size-xs;
+            font-weight: 700;
+            text-transform: uppercase;
+            color: var(--site-base-fgColor);
+            border: none;
+            text-align: left;
+
+            &:first-child {
+              padding-left: $spacing-md;
+            }
+
+            &:last-child {
+              padding-right: $spacing-md;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          background-color: var(--site-base-bgColor);
+          border-top: 1px solid var(--site-inset-borderColor);
+          transition: background-color $transition-normal;
+
+          &:first-child {
+            border-top: none;
+          }
+
+          &:hover {
+            background-color: var(--site-inset-bgColor);
+          }
+
+          td {
+            padding: $spacing-sm $spacing-md;
+            font-size: $font-size-sm;
+            color: var(--site-base-fgColor-alt);
+            border: none;
+            vertical-align: top;
+
+            strong {
+              font-family: var(--site-ui-fontFamily);
+              font-size: $font-size-sm;
+              font-weight: 600;
+              color: var(--site-base-fgColor);
+            }
+
+            code {
+              font-size: 0.85em;
+              background-color: var(--site-raised-bgColor);
+              padding: $spacing-xs $spacing-sm;
+              border-radius: var(--site-radius);
+            }
+
+            &:first-child {
+              padding-left: $spacing-md;
+              font-weight: 600;
+              color: var(--site-base-fgColor);
+              white-space: nowrap;
+            }
+
+            &:last-child {
+              padding-right: $spacing-md;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// CUJ Diagram Component
+.cuj-diagram-card {
+  @include bench-element-width;
+  background-color: var(--site-base-bgColor);
+  border: 1px solid var(--site-inset-borderColor);
+  border-radius: var(--site-radius);
+  padding: $spacing-md;
+  margin-block: $spacing-lg $spacing-xl;
+  box-shadow: $shadow-sm;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
+  .cuj-diagram-section {
+    background-color: var(--site-inset-bgColor);
+    border: 1px solid var(--site-inset-borderColor);
+    border-radius: var(--site-radius);
+    padding: $spacing-md $spacing-lg;
+    display: grid;
+    grid-template-columns: 4.5rem 1fr;
+    align-items: center;
+    gap: $spacing-md;
+
+    @include breakpoints.screen-below('sm') {
+      grid-template-columns: 1fr;
+      justify-items: center;
+      text-align: center;
+      padding: $spacing-md;
+      gap: $spacing-sm;
+    }
+
+    .section-sidebar {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: $spacing-xs;
+
+      .section-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .material-symbols {
+          font-size: $font-size-xxl;
+          font-variation-settings: 'FILL' 1;
+        }
+
+        &.variant-grey,
+        &.variant-blue {
+          color: $color-functional;
+        }
+
+        &.variant-amber {
+          color: $color-dx;
+        }
+
+        &.variant-green {
+          color: $color-outcome;
+        }
+
+        &.variant-purple {
+          color: $color-quality;
+        }
+      }
+
+      .section-label {
+        font-family: var(--site-ui-fontFamily);
+        font-size: $font-size-sm;
+        font-weight: 700;
+        color: var(--site-base-fgColor);
+      }
+    }
+
+    .section-items {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-sm;
+      width: 100%;
+
+      .cuj-pill {
+        width: 100%;
+        padding: $spacing-md $spacing-lg;
+        border-radius: 9999px;
+        font-size: $font-size-sm;
+        font-weight: 500;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform $transition-normal;
+
+        &.pill-grey {
+          background-color: #d1d5db;
+          border: $border-width solid #858d99;
+          color: #1f2937;
+        }
+
+        &.pill-blue {
+          background-color: #bae6fd;
+          border: $border-width solid $color-functional;
+          color: #0c4a6e;
+        }
+
+        &.pill-amber {
+          background-color: #fef08a;
+          border: $border-width solid #eab308;
+          color: #713f12;
+        }
+
+        &.pill-green {
+          background-color: #bbf7d0;
+          border: $border-width solid #16a34a;
+          color: #14532d;
+        }
+
+        &.pill-purple {
+          background-color: #e9d5ff;
+          border: $border-width solid #9333ea;
+          color: #581c87;
+        }
+      }
+    }
+  }
+}
+
+// Task Specifications Expansion Panels
+.task-specs-list {
+  @include bench-element-width;
+  background-color: var(--site-inset-bgColor);
+  border: 1px solid var(--site-inset-borderColor);
+  border-radius: var(--site-radius);
+  margin-block: $spacing-lg $spacing-xl;
+  overflow: hidden;
+  box-shadow: $shadow-sm;
+
+  .task-spec-panel {
+    border-bottom: 1px solid var(--site-inset-borderColor);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    >a.collapsible {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: $spacing-md $spacing-lg;
+      background-color: var(--site-base-bgColor);
+      color: var(--site-base-fgColor);
+      text-decoration: none;
+      cursor: pointer;
+      gap: $spacing-md;
+      transition: background-color $transition-normal;
+
+      &:hover {
+        background-color: var(--site-inset-bgColor);
+        text-decoration: none;
+      }
+
+      &:not(.collapsed) {
+        background-color: var(--site-inset-bgColor);
+
+        &::after {
+          transform: rotate(180deg);
+        }
+      }
+
+      &::after {
+        content: 'keyboard_arrow_down';
+        content: 'keyboard_arrow_down' / '';
+        font-family: var(--site-icon-fontFamily);
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        font-weight: normal;
+        font-style: normal;
+        font-size: $font-size-xl;
+        transition: transform $transition-normal;
+        color: var(--site-base-fgColor-lighter);
+        flex-shrink: 0;
+      }
+
+      .panel-header-left {
+        display: flex;
+        align-items: center;
+        gap: $spacing-md;
+        flex: 1;
+        min-width: 0;
+
+        @include breakpoints.screen-below('sm') {
+          align-items: flex-start;
+        }
+
+        .panel-icon-wrap {
+          @include category-icon-background;
+          flex-shrink: 0;
+        }
+
+        .panel-header-content {
+          display: flex;
+          flex-direction: column;
+          gap: $spacing-xs;
+          flex: 1;
+          min-width: 0;
+
+          .panel-title-row {
+            display: flex;
+            align-items: center;
+            gap: $spacing-sm;
+            flex-wrap: wrap;
+
+            h4 {
+              font-family: var(--site-ui-fontFamily);
+              font-size: $font-size-md;
+              font-weight: 600;
+              margin: 0;
+              color: var(--site-base-fgColor);
+            }
+
+            .badge {
+              @include category-badge;
+            }
+          }
+
+          .panel-description {
+            font-size: $font-size-sm;
+            color: var(--site-base-fgColor-alt);
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    .task-spec-body {
+      padding: $spacing-md $spacing-lg;
+      background-color: var(--site-base-bgColor);
+      border-top: 1px solid var(--site-inset-borderColor);
+      display: none;
+
+      &.show {
+        display: block;
+      }
+
+      .lead-text {
+        margin: 0 0 $spacing-md 0;
+
+        code {
+          font-size: 0.85em;
+          background-color: var(--site-raised-bgColor);
+          padding: $spacing-xs $spacing-sm;
+          border-radius: var(--site-radius);
+        }
+      }
+
+      .table-subheading {
+        font-size: $font-size-sm;
+        font-weight: 700;
+        margin: $spacing-md 0 $spacing-xs 0;
+
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
+
+      .table-wrapper {
+        table.spec-table,
+        table {
+          width: 100%;
+          border-spacing: $spacing-sm;
+          border: none;
+          font-size: $font-size-sm;
+
+          tbody {
+            background: transparent;
+            border: none;
+
+            tr {
+              td {
+                vertical-align: top;
+
+                strong {
+                  font-weight: 600;
+                }
+
+                code {
+                  font-size: 0.85em;
+                  padding: $spacing-xs $spacing-sm;
+                  border-radius: var(--site-radius);
+                }
+
+                &:first-child {
+                  padding-left: 0;
+                  font-weight: 600;
+                  width: 200px;
+                }
+
+                &:last-child {
+                  color: var(--site-base-fgColor-alt);
+                  padding-right: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .footer-text {
+        font-size: $font-size-sm;
+        color: var(--site-base-fgColor-alt);
+        margin: $spacing-sm 0 0 0;
+        font-style: italic;
+
+        code {
+          font-size: 0.85em;
+          background-color: var(--site-raised-bgColor);
+          padding: $spacing-xs $spacing-sm;
+          border-radius: var(--site-radius);
+          font-style: normal;
+        }
+      }
+    }
+  }
+}
+
+// Dark mode overrides
+body.dark-mode {
+  .methodology-hero {
+    background: $hero-bg-dark;
+    box-shadow: $shadow-hero-dark;
+  }
+
+  .cuj-diagram-card {
+    .cuj-diagram-section {
+      background-color: rgba(255, 255, 255, 0.04);
+      border-color: rgba(255, 255, 255, 0.08);
+
+      .section-items {
+        .cuj-pill {
+          &.pill-grey {
+            background-color: rgba(148, 163, 184, 0.18);
+            border-color: rgba(148, 163, 184, 0.45);
+            color: #f1f5f9;
+          }
+
+          &.pill-blue {
+            background-color: rgba(56, 189, 248, 0.18);
+            border-color: rgba(56, 189, 248, 0.55);
+            color: #e0f2fe;
+          }
+
+          &.pill-amber {
+            background-color: rgba(234, 179, 8, 0.18);
+            border-color: rgba(234, 179, 8, 0.55);
+            color: #fef08a;
+          }
+
+          &.pill-green {
+            background-color: rgba(34, 197, 94, 0.18);
+            border-color: rgba(34, 197, 94, 0.55);
+            color: #dcfce7;
+          }
+
+          &.pill-purple {
+            background-color: rgba(168, 85, 247, 0.18);
+            border-color: rgba(168, 85, 247, 0.55);
+            color: #f3e8ff;
+          }
+        }
+      }
+    }
+  }
+
+  .grader-matrix {
+    .grader-cards-track .grader-card.cat-llm,
+    .grader-cards-grid .grader-card.cat-llm {
+      background-color: rgba($color-llm, 0.08);
+    }
+  }
+
+  .reliability-comparison-grid .reliability-card.north-star {
+    background: $north-star-bg-dark;
+    border-color: rgba(59, 130, 246, 0.35);
+  }
+}
diff --git a/sites/docs/lib/_sass/pages/_learning-resources-index.scss b/sites/docs/lib/_sass/pages/_learning-resources-index.scss
index 0e6581adbd5..5d316703d11 100644
--- a/sites/docs/lib/_sass/pages/_learning-resources-index.scss
+++ b/sites/docs/lib/_sass/pages/_learning-resources-index.scss
@@ -1,235 +1,8 @@
 @use 'package:site_shared/_sass/base/mixins';
 
-#resource-filter-group-wrapper {
-  border: 1px solid var(--site-inset-borderColor);
-  background-color: var(--site-inset-bgColor);
-  border-radius: var(--site-radius);
-  overflow: hidden;
-  position: sticky;
-  top: calc(var(--site-header-height) + 1rem);
-}
-
-.filter-header {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 0.75rem 1rem;
-  z-index: 10;
-}
-
-.close-icon {
-  cursor: pointer;
-  padding: 0.25rem;
-  border-radius: 4px;
-  background: none;
-  border: none;
-  color: var(--site-base-fgColor-alt);
-  transition: all 0.2s ease;
-  position: absolute;
-  right: 1rem;
-  top: 75%;
-  transform: translateY(-50%);
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: var(--site-primary-color);
-  }
-
-  .material-symbols {
-    font-size: 20px;
-  }
-}
-
-// Mobile screen customizations.
-@media (max-width: 839px) {
-  .filter-header {
-    display: block;
-  }
-
-  #resource-filter-group-wrapper {
-    position: fixed;
-    top: var(--site-header-height);
-    bottom: 0;
-    right: -220px;
-    width: 220px;
-    border-bottom: none;
-    height: 100%;
-    border-radius: 0;
-    transition: right 0.3s ease-in-out;
-    z-index: 1000;
-  }
-
-  #open-filter-toggle:not(:checked)+#resource-filter-group-wrapper {
-    right: -220px;
-  }
-
-  #open-filter-toggle:checked+#resource-filter-group-wrapper {
-    right: 0;
-  }
-}
-
-//Desktop screens
-@media (min-width: 840px) {
-  #resource-filter-group {
-    position: static !important;
-    right: auto !important;
-  }
-
-  .filter-header {
-    display: none !important;
-  }
-}
-
-#resource-index-content {
-  display: flex;
-  flex-direction: row;
-
-  .left-col {
-    margin-right: 1rem;
-    flex: 2;
-  }
-
-  .right-col {
-    width: 220px;
-
-    @media (max-width: 840px) {
-      position: fixed;
-      top: var(--site-header-height);
-      bottom: 0;
-      right: -15rem;
-      box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.2);
-      border-radius: 0.4rem;
-      width: 220px;
-
-      @keyframes slidein {
-        0% {
-          right: -10rem;
-        }
-
-        100% {
-          right: 0;
-        }
-      }
-
-      &.show {
-        animation-duration: 500ms;
-        animation-delay: 200ms;
-        animation-name: slidein;
-        animation-iteration-count: 1;
-        animation-timing-function: ease;
-        animation-fill-mode: forwards;
-      }
-    }
-  }
-}
-
-#resource-filter-group {
-  .table-title {
-    text-align: center;
-    color: var(--site-base-fgColor-alt);
-    background-color: var(--site-raised-bgColor);
-    font-family: var(--site-ui-fontFamily);
-    font-weight: 600;
-    font-size: .925rem;
-    padding: .5rem;
-    border-bottom: 1px solid var(--site-inset-borderColor);
-  }
-
-  .table-content {
-    padding: 1rem;
-  }
-
-  ul {
-    padding-left: 0;
-    margin-bottom: .5rem;
-
-    li {
-      list-style: none;
-      padding-left: 0;
-      padding-bottom: .25rem;
-      display: flex;
-      align-items: center;
-
-      label {
-        padding-left: .35rem;
-        font-size: .9rem;
-      }
-    }
-  }
-
-  h4 {
-    margin: 0 0 .5rem;
-    padding: 0;
-  }
-
-  button {
-    color: var(--site-primary-color);
-    margin: 0 0 2rem;
-    padding: .5rem 0 1rem 1rem;
-
-    &:hover {
-      color: var(--site-onPrimary-color);
-    }
-  }
-
-  @media (max-width: 840px) {
-    border-bottom: none;
-    height: 100%;
-    border-radius: 0;
-
-    .table-title {
-      background-color: var(--site-raised-bgColor-translucent);
-    }
-  }
-
-  .hidden {
-    display: none;
-  }
-}
-
-#resource-search-group {
-  display: flex;
-  flex-direction: column;
-
-  button.show-filters-button {
-    @media (min-width: 840px) {
-      display: none;
-    }
-  }
-
-  .label-row {
-    display: flex;
-    justify-content: space-between;
-    font-size: .925rem;
-
-    label {
-      font-family: var(--site-ui-fontFamily);
-      color: var(--site-base-fgColor-lighter);
-
-      padding: .25rem 1rem 0 0;
-      margin: 0;
-      text-align: end;
-    }
-
-    button {
-      padding: .25rem;
-      color: var(--site-primary-color);
-      display: flex;
-      align-items: center;
-
-      &:hover {
-        color: var(--site-onPrimary-color-light);
-      }
-
-      &:disabled,
-      &[disabled] {
-        color: var(--site-inset-bgColor-translucent);
-        cursor: default;
-      }
-    }
-  }
-}
+// The learning resources index shares its two column layout, search field,
+// and filter sidebar with the critical user journey index, so those styles
+// live in `_filterable-index.scss`.
 
 #all-resources-grid {
   margin-block-start: 1rem;
diff --git a/sites/docs/lib/_sass/pages/_story-layout.scss b/sites/docs/lib/_sass/pages/_story-layout.scss
new file mode 100644
index 00000000000..0aa2e2ae373
--- /dev/null
+++ b/sites/docs/lib/_sass/pages/_story-layout.scss
@@ -0,0 +1,314 @@
+@use 'sass:color';
+@use 'package:site_shared/_sass/base/breakpoints';
+
+// -----------------------------------------------------------------------------
+// Storytelling Layout Styles
+// -----------------------------------------------------------------------------
+
+// Color palette shared with _flutter-bench.scss for visual consistency
+// NOTE: These colors intentionally match the FlutterBench category colors
+$story-progress-gradient: linear-gradient(90deg, #0284c7 0%, #6366f1 50%, #059669 100%);
+
+$chapter-colors: (
+  (rgb: "2, 132, 199", hex: #0284c7),
+  // Sky blue (functional)
+  (rgb: "5, 150, 105", hex: #059669),
+  // Green (outcome)
+  (rgb: "124, 58, 237", hex: #7c3aed),
+  // Violet (llm)
+  (rgb: "99, 102, 241", hex: #6366f1),
+  // Indigo (quality)
+  (rgb: "217, 119, 6", hex: #d97706),
+  // Amber (dx)
+  (rgb: "100, 116, 139", hex: #64748b) // Slate (grey)
+);
+
+// Scroll-Driven Reading Progress Line
+.story-reading-progress {
+  position: sticky;
+  top: var(--site-header-height, 4rem);
+  width: 100%;
+  height: 3px;
+  z-index: var(--site-z-top, 1000);
+  background: rgb(216, 216, 216);
+  pointer-events: none;
+
+  .story-reading-progress-bar {
+    height: 100%;
+    width: 100%;
+    transform-origin: 0% 50%;
+    transform: scaleX(0);
+    background: $story-progress-gradient;
+    box-shadow: 0 1px 4px rgba(2, 132, 199, 0.25);
+
+    @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
+      animation: story-reading-progress-grow linear both;
+      animation-timeline: scroll(root block);
+    }
+  }
+}
+
+@keyframes story-reading-progress-grow {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+// A layout that provides generous space and visual cues to
+// encourage reading a longer doc page.
+body.layout-story {
+  scroll-padding-top: calc(var(--site-header-height, 4rem) + 1.5rem);
+
+  #page-content article {
+    max-width: 1240px;
+    width: 100%;
+
+    >#site-content-title,
+    >.site-breadcrumbs,
+    >p.description,
+    >.prev-next-nav,
+    >.trailing-content {
+      max-width: 800px;
+      width: 100%;
+    }
+  }
+
+  .story-canvas {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  // Chapter Sections
+  .story-chapter {
+    position: relative;
+    padding-block: 3rem;
+    scroll-snap-align: start;
+    scroll-margin-top: calc(var(--site-header-height, 4rem) + 1.5rem);
+    transition: background-color 0.4s ease, border-color 0.4s ease;
+
+    // Default fallback accent color
+    --chapter-accent: #0284c7;
+    --chapter-accent-rgb: 2, 132, 199;
+    --chapter-next-rgb: 5, 150, 105;
+
+    // Generate chapter accent colors from palette
+    @for $i from 0 through 20 {
+      $formatted: if($i < 10, "0#{$i}", "#{$i}");
+      $curr-idx: (
+        $i % length($chapter-colors)) + 1;
+      $next-idx: (
+        ($i + 1) % length($chapter-colors)) + 1;
+
+      $curr: nth($chapter-colors, $curr-idx
+      );
+    $next: nth($chapter-colors, $next-idx);
+
+    &[data-chapter="#{$formatted}"] {
+      --chapter-accent: #{map-get($curr, hex)};
+      --chapter-accent-rgb: #{map-get($curr, rgb)};
+      --chapter-next-rgb: #{map-get($next, rgb)};
+    }
+  }
+
+  // Ambient atmosphere vignette
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -2rem;
+    right: -2rem;
+    height: 100%;
+    background:
+      // Main section gradient
+      radial-gradient(650px circle at 50% 0%, rgba(var(--chapter-accent-rgb), 0.08), transparent 90%),
+      // Ease into next chapter's gradient
+      radial-gradient(650px circle at 50% 100%, rgba(var(--chapter-next-rgb), 0.08), transparent 90%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  &:first-of-type {
+    padding-top: clamp(2rem, 5vh, 4rem);
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+    padding-bottom: clamp(6rem, 12vh, 12rem);
+  }
+
+  // Prologue (intro content before chapter 01)
+  &.story-prologue {
+    min-height: auto;
+    padding-bottom: clamp(3rem, 6vh, 5rem);
+  }
+
+  // Sticky Chapter Header & Eyebrow Waypoint
+  .chapter-header-group {
+    position: sticky;
+    top: calc(var(--site-header-height, 4rem) + 3px);
+    z-index: var(--site-z-floating, 10);
+    padding-block: 0.85rem 0.5rem;
+    margin-bottom: 2rem;
+    border-bottom: 1px solid var(--site-outline-variant);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+
+    .chapter-kicker,
+    >.header-wrapper {
+      width: 100%;
+      margin-inline: auto;
+    }
+
+    .chapter-kicker {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 0.35rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      font-size: 0.75rem;
+      font-weight: 700;
+      color: var(--chapter-accent);
+
+      .chapter-number {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.15rem 0.55rem;
+        border-radius: 9999px;
+        background: rgba(var(--chapter-accent-rgb), 0.08);
+        border: 1px solid rgba(var(--chapter-accent-rgb), 0.25);
+        font-family: var(--site-code-fontFamily);
+        font-size: 0.8rem;
+        line-height: 1.2;
+        color: var(--chapter-accent);
+      }
+
+      .chapter-rule {
+        display: inline-block;
+        width: 2rem;
+        height: 1px;
+        background: currentColor;
+        opacity: 0.35;
+      }
+    }
+
+    >.header-wrapper {
+      margin: 0;
+
+      h2 {
+        font-weight: 700;
+      }
+    }
+  }
+
+  // Prose Centering vs. Component Breakouts
+  .chapter-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+
+    // Body prose, lists, blockquotes, tables, notes centered in narrow column
+    >p,
+    >ul,
+    >ol,
+    >blockquote,
+    >.table-wrapper,
+    >.alert,
+    >.callout,
+    >.katex-display,
+    >math {
+      width: 100%;
+      max-width: 700px;
+      line-height: 1.75;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+    }
+
+    >p.description {
+      font-size: 1.2rem;
+      line-height: 1.65;
+      color: var(--site-base-fgColor-alt);
+      max-width: 800px;
+    }
+
+    // Sub-headings inside chapter centered to match prose
+    >.header-wrapper {
+      width: 100%;
+
+      h3 {
+        font-size: clamp(1.3rem, 1.8vw, 1.55rem);
+        font-weight: 600;
+        margin-top: 2rem;
+        margin-bottom: 0.5rem;
+      }
+
+      h4 {
+        font-size: 1.15rem;
+        font-weight: 600;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+}
+}
+
+// Dark mode adjustments
+body.layout-story.dark-mode {
+  .story-reading-progress {
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  .story-chapter {
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+
+    .chapter-header-group {
+      background: var(--site-base-bgColor);
+      border-bottom-color: rgba(255, 255, 255, 0.08);
+    }
+
+    &::before {
+      background: transparent;
+    }
+
+    .chapter-kicker .chapter-number {
+      background: rgba(var(--chapter-accent-rgb), 0.15);
+      border-color: rgba(var(--chapter-accent-rgb), 0.35);
+    }
+  }
+}
+
+// Accessibility: Respect user motion preferences
+@media (prefers-reduced-motion: reduce) {
+  html:has(body.layout-story) {
+    scroll-snap-type: none;
+  }
+
+  body.layout-story {
+    scroll-behavior: auto;
+
+    .story-reading-progress .story-reading-progress-bar {
+      animation: none !important;
+      display: none;
+    }
+
+    .story-chapter {
+      transition: none !important;
+
+      .chapter-header-group {
+        position: static;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/sites/docs/lib/main.client.options.dart b/sites/docs/lib/main.client.options.dart
index 23c1b571e81..3547ffcfd5b 100644
--- a/sites/docs/lib/main.client.options.dart
+++ b/sites/docs/lib/main.client.options.dart
@@ -14,6 +14,10 @@ import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
     deferred as _pagenav;
 import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     deferred as _archive_table;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj_filters.dart'
+    deferred as _cuj_filters;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj_filters_sidebar.dart'
+    deferred as _cuj_filters_sidebar;
 import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
     deferred as _glossary_search_section;
 import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
@@ -96,6 +100,14 @@ ClientOptions get defaultClientOptions => ClientOptions(
       ),
       loader: _archive_table.loadLibrary,
     ),
+    'cuj_filters': ClientLoader(
+      (p) => _cuj_filters.CujFilters(),
+      loader: _cuj_filters.loadLibrary,
+    ),
+    'cuj_filters_sidebar': ClientLoader(
+      (p) => _cuj_filters_sidebar.CujFiltersSidebar(),
+      loader: _cuj_filters_sidebar.loadLibrary,
+    ),
     'glossary_search_section': ClientLoader(
       (p) => _glossary_search_section.GlossarySearchSection(),
       loader: _glossary_search_section.loadLibrary,
diff --git a/sites/docs/lib/main.server.dart b/sites/docs/lib/main.server.dart
index 2738c1fd439..b54c97360f2 100644
--- a/sites/docs/lib/main.server.dart
+++ b/sites/docs/lib/main.server.dart
@@ -8,6 +8,7 @@ import 'package:jaspr_content/jaspr_content.dart';
 import 'package:jaspr_content/theme.dart';
 import 'package:path/path.dart' as path;
 import 'package:site_shared/components/common/card.dart';
+import 'package:site_shared/components/common/ide_explorer/markdown_component.dart';
 import 'package:site_shared/components/common/material_icon.dart';
 import 'package:site_shared/components/common/tabs.dart';
 import 'package:site_shared/components/common/youtube_embed.dart';
@@ -27,13 +28,16 @@ import 'src/components/common/code_preview.dart';
 import 'src/components/common/dash_image.dart';
 import 'src/components/pages/architecture_recommendations.dart';
 import 'src/components/pages/archive_table.dart';
+import 'src/components/pages/cuj_index.dart';
 import 'src/components/pages/devtools_release_notes_index.dart';
 import 'src/components/pages/expansion_list.dart';
+import 'src/components/pages/flutter_bench_components.dart';
 import 'src/components/pages/learning_resource_index.dart';
 import 'src/components/pages/platforms_grid.dart';
 import 'src/components/pages/widget_catalog.dart';
 import 'src/extensions/registry.dart';
 import 'src/layouts/doc_layout.dart';
+import 'src/layouts/story_layout.dart';
 import 'src/layouts/toc_layout.dart';
 import 'src/layouts/tutorial_layout.dart';
 import 'src/loaders/data_processor.dart';
@@ -77,6 +81,7 @@ Component get _docsFlutterDevSite => ContentApp.custom(
     components: _embeddableComponents,
     layouts: const [
       DocLayout(),
+      StoryLayout(),
       TocLayout(),
       TutorialLayout(),
     ],
@@ -99,6 +104,7 @@ List<CustomComponent> get _embeddableComponents => [
   const CodePreview(),
   const YoutubeEmbed(),
   const FileTree(),
+  const IdeExplorerMarkdownComponent(),
   const Quiz(),
   const ProgressRing(),
   const SummaryCard(),
@@ -116,6 +122,15 @@ List<CustomComponent> get _embeddableComponents => [
   defineComponent('OSSelector', const OsSelector()),
   defineComponentWithChild('Card', Card.fromAttributes),
   defineComponent('LearningResourceIndex', const LearningResourceIndex()),
+  defineComponent('CujIndex', const CujIndex()),
+  defineComponent('ThreeDimensionsCards', const ThreeDimensionsCards()),
+  defineComponent('GraderMatrix', const GraderMatrix()),
+  defineComponent('ReliabilityCards', const ReliabilityCards()),
+  defineComponent('ScoreTriage', const ScoreTriage()),
+  defineComponent('EvaluationMatrix', const EvaluationMatrixTabs()),
+  defineComponent('EvaluationMatrixTabs', const EvaluationMatrixTabs()),
+  defineComponent('CujDiagram', const CujDiagram()),
+  defineComponent('TaskSpecifications', const TaskSpecifications()),
   defineComponentWithAttrs('ArchiveTable', ArchiveTable.fromAttributes),
   defineComponentWithAttrs(
     'DownloadLatestButton',
diff --git a/sites/docs/lib/main.server.options.dart b/sites/docs/lib/main.server.options.dart
index fcbd5e0a090..1c131de872a 100644
--- a/sites/docs/lib/main.server.options.dart
+++ b/sites/docs/lib/main.server.options.dart
@@ -13,6 +13,10 @@ import 'package:docs_flutter_dev_site/src/components/layout/client/pagenav.dart'
     as _pagenav;
 import 'package:docs_flutter_dev_site/src/components/pages/archive_table.dart'
     as _archive_table;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj_filters.dart'
+    as _cuj_filters;
+import 'package:docs_flutter_dev_site/src/components/pages/cuj_filters_sidebar.dart'
+    as _cuj_filters_sidebar;
 import 'package:docs_flutter_dev_site/src/components/pages/glossary_search_section.dart'
     as _glossary_search_section;
 import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters.dart'
@@ -80,6 +84,13 @@ ServerOptions get defaultServerOptions => ServerOptions(
       'archive_table',
       params: __archive_tableArchiveTable,
     ),
+    _cuj_filters.CujFilters: ClientTarget<_cuj_filters.CujFilters>(
+      'cuj_filters',
+    ),
+    _cuj_filters_sidebar.CujFiltersSidebar:
+        ClientTarget<_cuj_filters_sidebar.CujFiltersSidebar>(
+          'cuj_filters_sidebar',
+        ),
     _glossary_search_section.GlossarySearchSection:
         ClientTarget<_glossary_search_section.GlossarySearchSection>(
           'glossary_search_section',
diff --git a/sites/docs/lib/src/client/global_scripts.dart b/sites/docs/lib/src/client/global_scripts.dart
index caa9bf379de..07f3a31c622 100644
--- a/sites/docs/lib/src/client/global_scripts.dart
+++ b/sites/docs/lib/src/client/global_scripts.dart
@@ -20,6 +20,9 @@ void setUpSite() {
   _setUpPlatformKeys();
   _setUpToc();
   _setUpSteppers();
+  _setUpIdeExplorers();
+  _setUpGraderMatrix();
+  _setUpInteractiveDetailCards();
 }
 
 void _setUpSearchKeybindings() {
@@ -477,3 +480,341 @@ void _scrollTo(web.Element element, {required bool smooth}) {
     ),
   );
 }
+
+/// Set up interactivity of the file/detail explorer created with
+/// the `<IdeExplorer>` custom component.
+void _setUpIdeExplorers() {
+  final explorers = web.document.querySelectorAll('.ide-explorer');
+  for (var i = 0; i < explorers.length; i++) {
+    _setUpIdeExplorer(explorers.item(i) as web.Element);
+  }
+}
+
+void _setUpIdeExplorer(web.Element explorer) {
+  void selectIdeNode(String domId) {
+    final selectTargets = explorer.querySelectorAll('[data-ide-select]');
+    web.Element? sidebarTarget;
+    for (var i = 0; i < selectTargets.length; i++) {
+      final target = selectTargets.item(i) as web.Element;
+      final isMatch = target.getAttribute('data-ide-select') == domId;
+      target.classList.toggle('active', isMatch);
+      if (isMatch && target.closest('.ide-tree') != null) {
+        sidebarTarget = target;
+      }
+    }
+
+    final panels = explorer.querySelectorAll('[data-ide-panel]');
+    for (var i = 0; i < panels.length; i++) {
+      final panel = panels.item(i) as web.Element;
+      panel.classList.toggle(
+        'active',
+        panel.getAttribute('data-ide-panel') == domId,
+      );
+    }
+
+    // Expand every ancestor folder so the selected item stays visible.
+    final ownDetails = sidebarTarget?.closest('details');
+    final isFolderSelf =
+        sidebarTarget?.parentElement?.tagName.toLowerCase() == 'summary';
+    var current = isFolderSelf ? ownDetails?.parentElement : ownDetails;
+    while (current != null) {
+      final ancestorDetails = current.closest('details');
+      if (ancestorDetails == null) break;
+      (ancestorDetails as web.HTMLDetailsElement).open = true;
+      current = ancestorDetails.parentElement;
+    }
+  }
+
+  void switchIdeRoot(String rootId) {
+    final tabs = explorer.querySelectorAll('.ide-root-tab');
+    for (var i = 0; i < tabs.length; i++) {
+      final tab = tabs.item(i) as web.Element;
+      tab.classList.toggle(
+        'active',
+        tab.getAttribute('data-ide-root') == rootId,
+      );
+    }
+
+    final trees = explorer.querySelectorAll('.ide-tree');
+    web.Element? activeTree;
+    for (var i = 0; i < trees.length; i++) {
+      final tree = trees.item(i) as web.Element;
+      final isMatch = tree.getAttribute('data-ide-root') == rootId;
+      tree.classList.toggle('active', isMatch);
+      if (isMatch) activeTree = tree;
+    }
+
+    final firstDomId = activeTree
+        ?.querySelector('[data-ide-select]')
+        ?.getAttribute('data-ide-select');
+    if (firstDomId != null) {
+      selectIdeNode(firstDomId);
+    }
+  }
+
+  void toggleAllIdeFolders() {
+    final activeTree =
+        explorer.querySelector('.ide-tree.active') ??
+        explorer.querySelector('.ide-tree');
+    if (activeTree == null) return;
+
+    final allDetails = activeTree.querySelectorAll('details');
+    var anyClosed = false;
+    for (var i = 0; i < allDetails.length; i++) {
+      if (!(allDetails.item(i) as web.HTMLDetailsElement).open) {
+        anyClosed = true;
+        break;
+      }
+    }
+
+    for (var i = 0; i < allDetails.length; i++) {
+      (allDetails.item(i) as web.HTMLDetailsElement).open = anyClosed;
+    }
+  }
+
+  void handleClick(web.Event event) {
+    final target = event.target as web.Element?;
+    if (target == null) return;
+
+    final selectTarget = target.closest('[data-ide-select]');
+    if (selectTarget != null) {
+      final domId = selectTarget.getAttribute('data-ide-select');
+      if (domId != null) selectIdeNode(domId);
+      event.preventDefault();
+      return;
+    }
+
+    final rootTab = target.closest('.ide-root-tab');
+    if (rootTab != null) {
+      final rootId = rootTab.getAttribute('data-ide-root');
+      if (rootId != null) switchIdeRoot(rootId);
+      return;
+    }
+
+    if (target.closest('[data-ide-toggle-all]') != null) {
+      toggleAllIdeFolders();
+    }
+  }
+
+  explorer.addEventListener('click', handleClick.toJS);
+}
+
+/// Set up interactivity for the FlutterBench grader matrix component.
+void _setUpGraderMatrix() {
+  final matrices = web.document.querySelectorAll('.grader-matrix');
+  for (var i = 0; i < matrices.length; i++) {
+    _setUpSingleGraderMatrix(matrices.item(i) as web.Element);
+  }
+}
+
+void _setUpSingleGraderMatrix(web.Element matrix) {
+  final buttons = matrix.querySelectorAll('.matrix-filters .filter-btn');
+  final cards = matrix.querySelectorAll('.grader-cards-track .grader-card');
+  final track = matrix.querySelector('.grader-cards-track') as web.HTMLElement?;
+  final prevBtn =
+      matrix.querySelector('.carousel-nav-btn.prev') as web.HTMLElement?;
+  final nextBtn =
+      matrix.querySelector('.carousel-nav-btn.next') as web.HTMLElement?;
+
+  if (track == null) return;
+
+  List<web.HTMLElement> getVisibleCards() {
+    final list = <web.HTMLElement>[];
+    for (var i = 0; i < cards.length; i++) {
+      final card = cards.item(i) as web.HTMLElement;
+      if (!card.classList.contains('hidden')) {
+        list.add(card);
+      }
+    }
+    return list;
+  }
+
+  void scrollNext() {
+    final visibleCards = getVisibleCards();
+    if (visibleCards.isEmpty) return;
+
+    final maxScroll = track.scrollWidth - track.clientWidth;
+    final currentScroll = track.scrollLeft;
+
+    // Find the first visible card that starts after currentScroll + 10px.
+    var scrolled = false;
+    for (final card in visibleCards) {
+      final cardOffset = card.offsetLeft - track.offsetLeft;
+      if (cardOffset > currentScroll + 10) {
+        track.scrollTo(
+          web.ScrollToOptions(
+            left: cardOffset.toDouble(),
+            behavior: 'smooth',
+          ),
+        );
+        scrolled = true;
+        break;
+      }
+    }
+
+    // If already at or near the end, rotate back to the start.
+    if (!scrolled || currentScroll >= maxScroll - 10) {
+      track.scrollTo(
+        web.ScrollToOptions(
+          left: 0,
+          behavior: 'smooth',
+        ),
+      );
+    }
+  }
+
+  void scrollPrev() {
+    final visibleCards = getVisibleCards();
+    if (visibleCards.isEmpty) return;
+
+    final maxScroll = track.scrollWidth - track.clientWidth;
+    final currentScroll = track.scrollLeft;
+
+    // If at or near the beginning, rotate to the end.
+    if (currentScroll <= 10) {
+      track.scrollTo(
+        web.ScrollToOptions(
+          left: maxScroll.toDouble(),
+          behavior: 'smooth',
+        ),
+      );
+      return;
+    }
+
+    // Find the last visible card that starts before currentScroll - 10px.
+    for (var i = visibleCards.length - 1; i >= 0; i--) {
+      final card = visibleCards[i];
+      final cardOffset = card.offsetLeft - track.offsetLeft;
+      if (cardOffset < currentScroll - 10) {
+        track.scrollTo(
+          web.ScrollToOptions(
+            left: cardOffset.toDouble(),
+            behavior: 'smooth',
+          ),
+        );
+        return;
+      }
+    }
+
+    track.scrollTo(
+      web.ScrollToOptions(
+        left: 0,
+        behavior: 'smooth',
+      ),
+    );
+  }
+
+  if (nextBtn != null) {
+    nextBtn.addEventListener(
+      'click',
+      ((web.Event e) {
+        e.preventDefault();
+        scrollNext();
+      }).toJS,
+    );
+  }
+
+  if (prevBtn != null) {
+    prevBtn.addEventListener(
+      'click',
+      ((web.Event e) {
+        e.preventDefault();
+        scrollPrev();
+      }).toJS,
+    );
+  }
+
+  for (var i = 0; i < buttons.length; i++) {
+    final btn = buttons.item(i) as web.HTMLElement;
+    final filter = btn.dataset['filter'];
+
+    void handleClick(web.Event event) {
+      event.preventDefault();
+      for (var j = 0; j < buttons.length; j++) {
+        (buttons.item(j) as web.Element).classList.remove('active');
+      }
+      btn.classList.add('active');
+
+      for (var k = 0; k < cards.length; k++) {
+        final card = cards.item(k) as web.HTMLElement;
+        if (filter == 'all') {
+          card.classList.remove('hidden');
+        } else if (filter == 'llm') {
+          card.classList.toggle('hidden', !card.classList.contains('cat-llm'));
+        } else if (filter == 'deterministic') {
+          card.classList.toggle(
+            'hidden',
+            !card.classList.contains('cat-deterministic'),
+          );
+        } else {
+          card.classList.toggle(
+            'hidden',
+            !card.classList.contains('cat-$filter'),
+          );
+        }
+      }
+
+      // Reset scroll position to beginning on filter change.
+      track.scrollTo(
+        web.ScrollToOptions(
+          left: 0,
+          behavior: 'smooth',
+        ),
+      );
+    }
+
+    btn.addEventListener('click', handleClick.toJS);
+  }
+}
+
+/// Set up interactivity for FlutterBench interactive detail cards
+/// (e.g. ScoreTriage and EvaluationMatrix).
+void _setUpInteractiveDetailCards() {
+  final cards = web.document.querySelectorAll(
+    '.interactive-detail-card, .score-triage',
+  );
+  for (var i = 0; i < cards.length; i++) {
+    _setUpSingleInteractiveDetailCard(cards.item(i) as web.Element);
+  }
+}
+
+void _setUpSingleInteractiveDetailCard(web.Element card) {
+  final buttons = card.querySelectorAll(
+    '.card-tabs-grid .card-tab-btn, .triage-tiers-grid .triage-tier-btn',
+  );
+  final panels = card.querySelectorAll(
+    '.card-panels-container .card-panel, .triage-detail-card .triage-panel',
+  );
+  final detailCard = card.querySelector(
+    '.card-panels-container, .triage-detail-card',
+  ) as web.HTMLElement?;
+
+  for (var i = 0; i < buttons.length; i++) {
+    final btn = buttons.item(i) as web.HTMLElement;
+    final tabAttr = btn.dataset['tab'];
+    final tabId = tabAttr.isNotEmpty ? tabAttr : btn.dataset['tier'];
+
+    void handleClick(web.Event event) {
+      event.preventDefault();
+      for (var j = 0; j < buttons.length; j++) {
+        (buttons.item(j) as web.Element).classList.remove('active');
+      }
+      btn.classList.add('active');
+
+      for (var k = 0; k < panels.length; k++) {
+        final panel = panels.item(k) as web.HTMLElement;
+        final panelTabAttr = panel.dataset['tab'];
+        final panelId = panelTabAttr.isNotEmpty
+            ? panelTabAttr
+            : panel.dataset['tier'];
+        panel.classList.toggle('active', panelId == tabId);
+      }
+
+      if (detailCard != null) {
+        detailCard.scrollTop = 0;
+      }
+    }
+
+    btn.addEventListener('click', handleClick.toJS);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/comparison_cards_grid.dart b/sites/docs/lib/src/components/common/comparison_cards_grid.dart
new file mode 100644
index 00000000000..5bb77660d61
--- /dev/null
+++ b/sites/docs/lib/src/components/common/comparison_cards_grid.dart
@@ -0,0 +1,81 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:site_shared/util.dart';
+
+import '../../utils/inline_code.dart';
+
+/// Data model for an individual card in [ComparisonCardsGrid].
+final class ComparisonCardItem {
+  const ComparisonCardItem({
+    required this.tag,
+    this.tagIcon,
+    required this.mathPill,
+    required this.title,
+    this.isFeatured = false,
+    this.descriptionParts = const [],
+    this.description,
+  });
+
+  final String tag;
+  final String? tagIcon;
+  final String mathPill;
+  final String title;
+  final bool isFeatured;
+  final List<Map<String, Object?>> descriptionParts;
+  final String? description;
+}
+
+/// A responsive comparison grid for metrics, benchmarks, or feature
+/// evaluations.
+final class ComparisonCardsGrid extends StatelessComponent {
+  const ComparisonCardsGrid({
+    required this.cards,
+    this.classes = 'reliability-comparison-grid',
+    super.key,
+  });
+
+  final List<ComparisonCardItem> cards;
+  final String classes;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      for (final card in cards)
+        div(
+          classes: [
+            'reliability-card',
+            if (card.isFeatured) 'north-star',
+          ].toClasses,
+          [
+            div(classes: 'reliability-header', [
+              span(classes: 'tag', [
+                if (card.tagIcon case final icon?) ...[
+                  MaterialIcon(icon),
+                  const .text(' '),
+                ],
+                .text(card.tag),
+              ]),
+              span(classes: 'math-pill', [.text(card.mathPill)]),
+            ]),
+            h4([.text(card.title)]),
+            if (card.descriptionParts.isNotEmpty)
+              p([
+                for (final part in card.descriptionParts) ...[
+                  if (part['text'] case final String text) .text(text),
+                  if (part['em'] case final String emText) em([.text(emText)]),
+                  if (part['strong'] case final String strongText)
+                    strong([.text(strongText)]),
+                ],
+              ])
+            else if (card.description case final description?)
+              p([renderDescriptionWithCode(description)]),
+          ],
+        ),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/dimension_cards_grid.dart b/sites/docs/lib/src/components/common/dimension_cards_grid.dart
new file mode 100644
index 00000000000..12bf29a6011
--- /dev/null
+++ b/sites/docs/lib/src/components/common/dimension_cards_grid.dart
@@ -0,0 +1,73 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:site_shared/util.dart';
+
+import '../../utils/inline_code.dart';
+
+/// Data model for an individual card in [DimensionCardsGrid].
+final class DimensionCardItem {
+  const DimensionCardItem({
+    required this.title,
+    required this.icon,
+    required this.description,
+    this.category,
+    this.footerItems,
+    this.badge,
+  });
+
+  final String title;
+  final String icon;
+  final String description;
+  final String? category;
+  final String? footerItems;
+  final String? badge;
+}
+
+/// A grid of cards displaying key dimensions, categories, or metrics.
+final class DimensionCardsGrid extends StatelessComponent {
+  const DimensionCardsGrid({
+    required this.cards,
+    this.classes = 'dimension-cards-grid',
+    super.key,
+  });
+
+  final List<DimensionCardItem> cards;
+  final String classes;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      for (final card in cards)
+        div(classes: 'dimension-card', [
+          div(classes: 'card-header-row', [
+            div(
+              classes: [
+                'card-icon-wrap',
+                ?card.category,
+              ].toClasses,
+              [MaterialIcon(card.icon)],
+            ),
+            h4([.text(card.title)]),
+          ]),
+          p([renderDescriptionWithCode(card.description)]),
+          if (card.footerItems != null || card.badge != null)
+            div(classes: 'card-footer-info', [
+              if (card.footerItems case final footer?) span([.text(footer)]),
+              if (card.badge case final badge?)
+                span(
+                  classes: [
+                    'badge',
+                    ?card.category,
+                  ].toClasses,
+                  [.text(badge)],
+                ),
+            ]),
+        ]),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/interactive_detail_card.dart b/sites/docs/lib/src/components/common/interactive_detail_card.dart
new file mode 100644
index 00000000000..61358fbf38a
--- /dev/null
+++ b/sites/docs/lib/src/components/common/interactive_detail_card.dart
@@ -0,0 +1,140 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/util.dart';
+
+import '../../utils/inline_code.dart';
+
+/// Model for a single tab and corresponding detail panel within
+/// [InteractiveDetailCard].
+final class InteractiveDetailTab {
+  const InteractiveDetailTab({
+    required this.id,
+    required this.primaryLabel,
+    required this.secondaryLabel,
+    required this.heading,
+    this.badge,
+    this.variant = 'blue',
+    required this.overview,
+    this.itemsLabel,
+    this.items = const [],
+    this.footerText,
+  });
+
+  final String id;
+  final String primaryLabel;
+  final String secondaryLabel;
+  final String heading;
+  final String? badge;
+  final String variant;
+  final String overview;
+  final String? itemsLabel;
+  final List<InteractiveDetailItem> items;
+  final String? footerText;
+}
+
+/// Key-value item displayed within [InteractiveDetailTab].
+final class InteractiveDetailItem {
+  const InteractiveDetailItem({
+    required this.label,
+    required this.detail,
+  });
+
+  final String label;
+  final String detail;
+}
+
+/// A reusable interactive card featuring selectable tabs and responsive detail
+/// panels.
+final class InteractiveDetailCard extends StatelessComponent {
+  const InteractiveDetailCard({
+    required this.title,
+    required this.description,
+    required this.tabs,
+    this.classes = 'interactive-detail-card',
+    super.key,
+  });
+
+  final String title;
+  final String description;
+  final List<InteractiveDetailTab> tabs;
+  final String classes;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      div(classes: 'card-header-area triage-header', [
+        h3([.text(title)]),
+        p([.text(description)]),
+      ]),
+      div(classes: 'card-tabs-grid triage-tiers-grid', [
+        for (var i = 0; i < tabs.length; i++)
+          button(
+            classes: [
+              'card-tab-btn',
+              'triage-tier-btn',
+              'variant-${tabs[i].variant}',
+              'tier-${tabs[i].variant}',
+              if (i == 0) 'active',
+            ].toClasses,
+            attributes: {'data-tab': tabs[i].id, 'data-tier': tabs[i].id},
+            [
+              div(
+                classes: 'tab-primary-label tier-score',
+                [.text(tabs[i].primaryLabel)],
+              ),
+              div(
+                classes: 'tab-secondary-label tier-name',
+                [.text(tabs[i].secondaryLabel)],
+              ),
+            ],
+          ),
+      ]),
+      div(classes: 'card-panels-container triage-detail-card', [
+        for (var i = 0; i < tabs.length; i++)
+          div(
+            classes: [
+              'card-panel',
+              'triage-panel',
+              if (i == 0) 'active',
+            ].toClasses,
+            attributes: {'data-tab': tabs[i].id, 'data-tier': tabs[i].id},
+            [
+              div(classes: 'panel-heading', [
+                h4([.text(tabs[i].heading)]),
+                if (tabs[i].badge case final badge?)
+                  span(
+                    classes: 'panel-badge badge-${tabs[i].variant}',
+                    [.text(badge)],
+                  ),
+              ]),
+              p(
+                classes: 'panel-overview criteria-text',
+                [renderDescriptionWithCode(tabs[i].overview)],
+              ),
+              if (tabs[i].items.isNotEmpty)
+                div(classes: 'panel-items-section actions-section', [
+                  if (tabs[i].itemsLabel case final label?)
+                    div(classes: 'items-label actions-label', [.text(label)]),
+                  ul([
+                    for (final item in tabs[i].items)
+                      li([
+                        strong([.text('${item.label}: ')]),
+                        renderDescriptionWithCode(item.detail),
+                      ]),
+                  ]),
+                ]),
+              if (tabs[i].footerText case final footer?)
+                p(
+                  classes: 'panel-footer-text',
+                  [renderDescriptionWithCode(footer)],
+                ),
+            ],
+          ),
+      ]),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/journey_diagram.dart b/sites/docs/lib/src/components/common/journey_diagram.dart
new file mode 100644
index 00000000000..1f8cfccfc7d
--- /dev/null
+++ b/sites/docs/lib/src/components/common/journey_diagram.dart
@@ -0,0 +1,70 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+
+/// Reusable section model for [JourneyDiagram].
+final class JourneySection {
+  const JourneySection({
+    required this.label,
+    required this.icon,
+    this.variant = 'blue',
+    required this.items,
+  });
+
+  factory JourneySection.fromMap(Map<String, Object?> map) {
+    return JourneySection(
+      label: map['label'] as String? ?? '',
+      icon: map['icon'] as String? ?? 'info',
+      variant: map['variant'] as String? ?? 'blue',
+      items: (map['items'] as List<Object?>? ?? const [])
+          .map((item) => item.toString())
+          .toList(),
+    );
+  }
+
+  final String label;
+  final String icon;
+  final String variant;
+  final List<String> items;
+}
+
+/// Backwards-compatible alias for [JourneySection].
+typedef CujDiagramSection = JourneySection;
+
+/// A structured, reusable diagram component visualizing a user journey flow
+/// or step sequence across configurable sections and nested item pills.
+final class JourneyDiagram extends StatelessComponent {
+  const JourneyDiagram({
+    required this.sections,
+    this.classes = 'cuj-diagram-card',
+    super.key,
+  });
+
+  final List<JourneySection> sections;
+  final String classes;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      for (final section in sections)
+        div(classes: 'cuj-diagram-section', [
+          div(classes: 'section-sidebar', [
+            div(classes: 'section-icon variant-${section.variant}', [
+              MaterialIcon(section.icon),
+            ]),
+            span(classes: 'section-label', [.text(section.label)]),
+          ]),
+          div(classes: 'section-items', [
+            for (final item in section.items)
+              div(classes: 'cuj-pill pill-${section.variant}', [
+                .text(item),
+              ]),
+          ]),
+        ]),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/matrix_carousel.dart b/sites/docs/lib/src/components/common/matrix_carousel.dart
new file mode 100644
index 00000000000..83fc98e192d
--- /dev/null
+++ b/sites/docs/lib/src/components/common/matrix_carousel.dart
@@ -0,0 +1,135 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:site_shared/util.dart';
+
+import '../../utils/inline_code.dart';
+
+/// Data model for a filter tab in [MatrixCarousel].
+final class MatrixFilterItem {
+  const MatrixFilterItem({
+    required this.id,
+    required this.label,
+  });
+
+  final String id;
+  final String label;
+}
+
+/// Data model for an individual card in [MatrixCarousel].
+final class MatrixCardItem {
+  const MatrixCardItem({
+    required this.title,
+    required this.description,
+    this.category,
+    this.categoryLabel,
+    this.type,
+    this.typeLabel,
+  });
+
+  final String title;
+  final String description;
+  final String? category;
+  final String? categoryLabel;
+  final String? type;
+  final String? typeLabel;
+}
+
+/// An interactive, filterable carousel displaying a matrix of cards with
+/// categorizations and badges.
+final class MatrixCarousel extends StatelessComponent {
+  const MatrixCarousel({
+    required this.title,
+    required this.description,
+    this.filters = const [],
+    required this.cards,
+    this.classes = 'grader-matrix',
+    this.previousAriaLabel = 'Previous card',
+    this.nextAriaLabel = 'Next card',
+    super.key,
+  });
+
+  final String title;
+  final String description;
+  final List<MatrixFilterItem> filters;
+  final List<MatrixCardItem> cards;
+  final String classes;
+  final String previousAriaLabel;
+  final String nextAriaLabel;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      div(classes: 'matrix-header', [
+        div(classes: 'matrix-title-area', [
+          h3([.text(title)]),
+          p([renderDescriptionWithCode(description)]),
+        ]),
+        if (filters.isNotEmpty)
+          div(classes: 'matrix-filters', [
+            for (var i = 0; i < filters.length; i++)
+              button(
+                classes: i == 0 ? 'filter-btn active' : 'filter-btn',
+                attributes: {'data-filter': filters[i].id},
+                [.text(filters[i].label)],
+              ),
+          ]),
+      ]),
+      div(classes: 'grader-carousel-wrapper', [
+        button(
+          classes: 'carousel-nav-btn prev',
+          attributes: {
+            'aria-label': previousAriaLabel,
+            'title': previousAriaLabel,
+          },
+          const [MaterialIcon('chevron_left')],
+        ),
+        div(classes: 'grader-cards-track', [
+          for (final card in cards)
+            div(
+              classes: [
+                'grader-card',
+                if (card.category case final category?) 'cat-$category',
+                if (card.type case final type?) 'cat-$type',
+              ].toClasses,
+              [
+                if (card.categoryLabel != null || card.typeLabel != null)
+                  div(classes: 'grader-header', [
+                    if (card.categoryLabel case final categoryLabel?)
+                      span(
+                        classes: [
+                          'grader-cat',
+                          ?card.category,
+                        ].toClasses,
+                        [.text(categoryLabel)],
+                      ),
+                    if (card.typeLabel case final typeLabel?)
+                      span(
+                        classes: [
+                          'grader-badge',
+                          if (card.type case final type?) 'badge-$type',
+                        ].toClasses,
+                        [.text(typeLabel)],
+                      ),
+                  ]),
+                h4([.text(card.title)]),
+                p([renderDescriptionWithCode(card.description)]),
+              ],
+            ),
+        ]),
+        button(
+          classes: 'carousel-nav-btn next',
+          attributes: {
+            'aria-label': nextAriaLabel,
+            'title': nextAriaLabel,
+          },
+          const [MaterialIcon('chevron_right')],
+        ),
+      ]),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/common/specification_panels.dart b/sites/docs/lib/src/components/common/specification_panels.dart
new file mode 100644
index 00000000000..690a3c759a6
--- /dev/null
+++ b/sites/docs/lib/src/components/common/specification_panels.dart
@@ -0,0 +1,157 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:site_shared/util.dart';
+
+import '../../utils/inline_code.dart';
+
+/// Data model for a single row within [SpecTableItem].
+final class SpecTableRowItem {
+  const SpecTableRowItem({
+    required this.label,
+    required this.description,
+  });
+
+  final String label;
+  final String description;
+}
+
+/// Data model for a specification table with optional title and rows.
+final class SpecTableItem {
+  const SpecTableItem({
+    this.title = '',
+    this.headers = const [],
+    this.rows = const [],
+  });
+
+  final String title;
+  final List<String> headers;
+  final List<SpecTableRowItem> rows;
+}
+
+/// Data model for an individual panel within [SpecificationPanels].
+final class SpecPanelItem {
+  const SpecPanelItem({
+    required this.id,
+    required this.title,
+    this.badge = '',
+    this.badgeVariant = 'blue',
+    this.icon = 'info',
+    this.expanded = false,
+    this.description = '',
+    this.leadText = '',
+    this.footerText = '',
+    this.tables = const [],
+  });
+
+  final String id;
+  final String title;
+  final String badge;
+  final String badgeVariant;
+  final String icon;
+  final bool expanded;
+  final String description;
+  final String leadText;
+  final String footerText;
+  final List<SpecTableItem> tables;
+}
+
+/// A collapsible list of specification panels with embedded tables and details.
+final class SpecificationPanels extends StatelessComponent {
+  const SpecificationPanels({
+    required this.panels,
+    this.classes = 'task-specs-list',
+    this.idPrefix = 'task-spec',
+    super.key,
+  });
+
+  final List<SpecPanelItem> panels;
+  final String classes;
+  final String idPrefix;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: classes, [
+      for (final spec in panels)
+        div(classes: 'task-spec-panel', [
+          a(
+            classes: [
+              'collapsible',
+              if (!spec.expanded) 'collapsed',
+            ].toClasses,
+            href: '#$idPrefix-${spec.id}',
+            attributes: {
+              'data-toggle': 'collapse',
+              'data-target': '#$idPrefix-${spec.id}',
+              'role': 'button',
+              'aria-expanded': spec.expanded ? 'true' : 'false',
+              'aria-controls': '#$idPrefix-${spec.id}',
+            },
+            [
+              div(classes: 'panel-header-left', [
+                div(
+                  classes: [
+                    'panel-icon-wrap',
+                    'variant-${spec.badgeVariant}',
+                  ].toClasses,
+                  [MaterialIcon(spec.icon)],
+                ),
+                div(classes: 'panel-header-content', [
+                  div(classes: 'panel-title-row', [
+                    h4([.text(spec.title)]),
+                    if (spec.badge.isNotEmpty)
+                      span(
+                        classes: 'badge badge-${spec.badgeVariant}',
+                        [.text(spec.badge)],
+                      ),
+                  ]),
+                  if (spec.description.isNotEmpty)
+                    p(classes: 'panel-description', [
+                      .text(spec.description),
+                    ]),
+                ]),
+              ]),
+            ],
+          ),
+          div(
+            id: '$idPrefix-${spec.id}',
+            classes: [
+              'task-spec-body collapse',
+              if (spec.expanded) 'show',
+            ].toClasses,
+            [
+              if (spec.leadText.isNotEmpty)
+                p(classes: 'lead-text', [
+                  renderDescriptionWithCode(spec.leadText),
+                ]),
+              for (final tableData in spec.tables) ...[
+                if (tableData.title.isNotEmpty)
+                  h5(classes: 'table-subheading', [.text(tableData.title)]),
+                div(classes: 'table-wrapper', [
+                  table(classes: 'spec-table', [
+                    tbody([
+                      for (final row in tableData.rows)
+                        tr([
+                          td([
+                            strong([.text(row.label)]),
+                          ]),
+                          td([renderDescriptionWithCode(row.description)]),
+                        ]),
+                    ]),
+                  ]),
+                ]),
+              ],
+              if (spec.footerText.isNotEmpty)
+                p(classes: 'footer-text', [
+                  renderDescriptionWithCode(spec.footerText),
+                ]),
+            ],
+          ),
+        ]),
+    ]);
+  }
+}
diff --git a/sites/docs/lib/src/components/pages/cuj_filters.dart b/sites/docs/lib/src/components/pages/cuj_filters.dart
new file mode 100644
index 00000000000..85264d10797
--- /dev/null
+++ b/sites/docs/lib/src/components/pages/cuj_filters.dart
@@ -0,0 +1,131 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:universal_web/web.dart' as web;
+
+import '../../models/cuj_model.dart';
+import 'cuj_filters_sidebar.dart';
+import 'filterable_index.dart';
+
+/// The id of the search field, so its result count can label it.
+const _searchId = 'cuj-search';
+
+@client
+class CujFilters extends StatefulComponent {
+  const CujFilters({super.key});
+
+  @override
+  State<CujFilters> createState() => _CujFiltersState();
+}
+
+class _CujFiltersState extends State<CujFilters> {
+  String searchQuery = '';
+
+  CujFiltersNotifier get filters => CujFiltersSidebar.filters;
+
+  final List<Cuj> cujs = [];
+  int filteredCujCount = 0;
+
+  @override
+  void initState() {
+    super.initState();
+
+    if (kIsWeb) {
+      filters.addListener(setFilters);
+
+      final cujList = web.document.getElementById('all-cujs-list');
+      if (cujList == null) {
+        return;
+      }
+
+      recreateCujs(cujList.querySelectorAll('.card'));
+    }
+  }
+
+  void recreateCujs(web.NodeList cujCards) {
+    for (var i = 0; i < cujCards.length; i++) {
+      final element = cujCards.item(i) as web.Element;
+      cujs.add(Cuj.fromElement(element));
+    }
+    filteredCujCount = cujs.length;
+  }
+
+  /// Update the filter state and re-evaluate which journeys to show.
+  ///
+  /// Use like the `setState` method by passing a callback that updates
+  /// the relevant state variables.
+  void setFilters([void Function()? callback]) {
+    setState(callback ?? () {});
+
+    final cujsToShow = filters.filterCujs(cujs, searchQuery);
+    filteredCujCount = cujsToShow.length;
+    for (final cuj in cujs) {
+      final element =
+          web.document.getElementById(cuj.elementId) as web.HTMLElement?;
+      if (element == null) {
+        continue;
+      }
+
+      if (cujsToShow.contains(cuj)) {
+        element.classList.remove('hidden');
+      } else {
+        element.classList.add('hidden');
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    if (kIsWeb) {
+      filters.removeListener(setFilters);
+    }
+    super.dispose();
+  }
+
+  @override
+  Component build(BuildContext context) {
+    return FilterSearchGroup(
+      searchId: _searchId,
+      placeholder: 'Try "testing" or "architecture"...',
+      label: 'Search critical user journeys by goal, persona, and task',
+      value: searchQuery,
+      onInput: (value) {
+        setFilters(() {
+          searchQuery = value;
+        });
+      },
+      children: [
+        div(classes: 'label-row', [
+          label(
+            attributes: {'for': _searchId},
+            [
+              const .text('Showing '),
+              span([.text('$filteredCujCount')]),
+              const .text(' / '),
+              span([.text('${cujs.length}')]),
+            ],
+          ),
+          button(
+            attributes: {
+              if (searchQuery.isEmpty && filters.selectedPersonas.isEmpty)
+                'disabled': 'true',
+            },
+            onClick: () {
+              // No setState needed, since resetting filters will trigger it.
+              searchQuery = '';
+              filters.reset();
+            },
+            [
+              const MaterialIcon('close_small'),
+              const span([.text('Clear filters')]),
+            ],
+          ),
+        ]),
+      ],
+    );
+  }
+}
diff --git a/sites/docs/lib/src/components/pages/cuj_filters_sidebar.dart b/sites/docs/lib/src/components/pages/cuj_filters_sidebar.dart
new file mode 100644
index 00000000000..3fa24490f91
--- /dev/null
+++ b/sites/docs/lib/src/components/pages/cuj_filters_sidebar.dart
@@ -0,0 +1,127 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/button.dart';
+
+import '../../models/cuj_model.dart';
+import 'cuj_filters.dart';
+import 'filterable_index.dart';
+
+// TODO(ewindmill): Replace with the real feedback destination once it exists.
+const _feedbackUrl = 'https://github.com/flutter/evals/issues';
+
+@client
+class CujFiltersSidebar extends StatelessComponent {
+  const CujFiltersSidebar({super.key});
+
+  /// The filter state for the critical user journey list.
+  ///
+  /// This is static so that [CujFilters] can access it,
+  /// since both client components don't share a common ancestor.
+  static CujFiltersNotifier filters = CujFiltersNotifier();
+
+  @override
+  Component build(BuildContext context) {
+    return FiltersSidebar(
+      footer: const [
+        div(classes: 'cuj-feedback', [
+          Button(
+            href: _feedbackUrl,
+            content: 'Feedback',
+            style: ButtonStyle.outlined,
+            title: 'Leave feedback or suggest new CUJs',
+            attributes: {
+              'target': '_blank',
+              'rel': 'noopener',
+            },
+          ),
+        ]),
+      ],
+      children: [
+        ListenableBuilder(
+          listenable: filters,
+          builder: (context) {
+            return div(classes: 'table-content', [
+              const h4([.text('Persona')]),
+              ul([
+                for (final persona in CujPersona.values)
+                  li([
+                    input(
+                      type: InputType.checkbox,
+                      attributes: {
+                        'role': 'checkbox',
+                        'name': 'cuj-filter-${persona.name}',
+                      },
+                      id: 'cuj-filter-${persona.name}',
+                      checked: filters.selectedPersonas.contains(persona),
+                      onChange: (checked) {
+                        filters.setPersona(persona, checked as bool);
+                      },
+                    ),
+                    label(
+                      attributes: {'for': 'cuj-filter-${persona.name}'},
+                      [.text(persona.label)],
+                    ),
+                  ]),
+              ]),
+            ]);
+          },
+        ),
+      ],
+    );
+  }
+}
+
+/// Notifier to manage the state of the critical user journey filters.
+class CujFiltersNotifier extends ChangeNotifier {
+  Set<CujPersona> selectedPersonas = {};
+
+  void setPersona(CujPersona persona, bool isSelected) {
+    if (isSelected) {
+      selectedPersonas.add(persona);
+    } else {
+      selectedPersonas.remove(persona);
+    }
+    notifyListeners();
+  }
+
+  void reset() {
+    selectedPersonas.clear();
+    notifyListeners();
+  }
+
+  Set<Cuj> filterCujs(List<Cuj> cujs, String searchQuery) {
+    searchQuery = searchQuery.trim().toLowerCase();
+
+    if (searchQuery.isEmpty && selectedPersonas.isEmpty) {
+      // No filters applied, return all journeys.
+      return cujs.toSet();
+    }
+
+    final cujsToShow = <Cuj>{};
+
+    for (final cuj in cujs) {
+      final matchesPersona =
+          selectedPersonas.isEmpty || selectedPersonas.contains(cuj.persona);
+      if (!matchesPersona) {
+        continue;
+      }
+
+      final matchesSearchQuery =
+          searchQuery.isEmpty ||
+          cuj.goal.toLowerCase().contains(searchQuery) ||
+          (cuj.persona?.label.toLowerCase().contains(searchQuery) ?? false) ||
+          cuj.tasks.any((t) => t.task.toLowerCase().contains(searchQuery));
+      if (!matchesSearchQuery) {
+        continue;
+      }
+
+      cujsToShow.add(cuj);
+    }
+
+    return cujsToShow;
+  }
+}
diff --git a/sites/docs/lib/src/components/pages/cuj_index.dart b/sites/docs/lib/src/components/pages/cuj_index.dart
new file mode 100644
index 00000000000..76c120e48b4
--- /dev/null
+++ b/sites/docs/lib/src/components/pages/cuj_index.dart
@@ -0,0 +1,103 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+import 'package:site_shared/components/common/button.dart';
+import 'package:site_shared/components/common/card.dart';
+
+import '../../models/cuj_model.dart';
+import 'cuj_filters.dart';
+import 'cuj_filters_sidebar.dart';
+
+final class CujIndex extends StatelessComponent {
+  const CujIndex({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final cujData = context.page.data['cujs'] as List<Object?>?;
+
+    final cujs = <Cuj>[
+      for (final cuj in cujData ?? const [])
+        Cuj.fromMap(cuj as Map<String, Object?>),
+    ];
+
+    return div(classes: 'filterable-index', [
+      div(classes: 'left-col', [
+        const CujFilters(),
+        div(classes: 'card-list', id: 'all-cujs-list', [
+          for (final cuj in cujs) _CujCard(cuj),
+        ]),
+      ]),
+      const CujFiltersSidebar(),
+    ]);
+  }
+}
+
+final class _CujCard extends StatelessComponent {
+  const _CujCard(this.cuj);
+
+  final Cuj cuj;
+
+  @override
+  Component build(BuildContext context) {
+    final cardId = cuj.elementId;
+    final taskCount = cuj.tasks.length;
+
+    // Expanding and collapsing is handled for every `.expandable-card`
+    // by the `_setUpExpandableCards` global script.
+    return Card.expandable(
+      id: cardId,
+      outlined: true,
+      additionalClasses: 'cuj-card',
+      initiallyExpanded: false,
+      attributes: {
+        'data-persona': cuj.persona?.name ?? '',
+        'data-goal': cuj.goal,
+        'data-tasks': cuj.taskData,
+      },
+      header: [
+        div(classes: 'cuj-card-heading', [
+          if (cuj.persona case final persona?)
+            span(classes: 'pill-sm ${persona.pillClass}', [
+              .text(persona.label),
+            ]),
+          h2(classes: 'card-title', [.text(cuj.goal)]),
+        ]),
+        div(classes: 'card-header-buttons', [
+          Button(
+            href: '#$cardId',
+            icon: 'tag',
+            classes: const ['share-button'],
+            title: 'Link to journey',
+            attributes: {
+              'aria-label': 'Link to the "${cuj.goal}" journey',
+            },
+          ),
+          Button(
+            icon: 'keyboard_arrow_up',
+            classes: const ['expand-button'],
+            title: 'Expand or collapse tasks',
+            attributes: {
+              'aria-expanded': 'false',
+              'aria-controls': '$cardId-content',
+              'aria-label': 'Expand or collapse the tasks for "${cuj.goal}"',
+            },
+          ),
+        ]),
+      ],
+      collapsedContent: [
+        p(classes: 'cuj-task-count', [
+          .text(taskCount == 1 ? '1 task' : '$taskCount tasks'),
+        ]),
+      ],
+      expandedContent: [
+        ul(classes: 'cuj-task-list', [
+          for (final task in cuj.tasks) li([.text(task.task)]),
+        ]),
+      ],
+    );
+  }
+}
diff --git a/sites/docs/lib/src/components/pages/filterable_index.dart b/sites/docs/lib/src/components/pages/filterable_index.dart
new file mode 100644
index 00000000000..9f6cc824959
--- /dev/null
+++ b/sites/docs/lib/src/components/pages/filterable_index.dart
@@ -0,0 +1,153 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/// The shell components shared by the filterable index pages:
+/// the learning resources index and the critical user journey index.
+///
+/// The pages provide their own filter controls and results list,
+/// but the surrounding layout, search field, and sidebar are the same,
+/// and are styled by `_filterable-index.scss`.
+library;
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:site_shared/components/common/material_icon.dart';
+import 'package:site_shared/components/common/search.dart';
+import 'package:site_shared/components/utils/global_event_listener.dart';
+import 'package:universal_web/web.dart' as web;
+
+/// The id of the hidden checkbox that opens and closes the filter sidebar
+/// while it is a drawer on narrow screens.
+///
+/// The drawer is CSS-only: `_filterable-index.scss` keys off the checkbox's
+/// `:checked` state, and the close button within the sidebar is a `<label>`
+/// pointing back at it.
+const _drawerToggleId = 'open-filter-toggle';
+
+/// Selects the whole sidebar, so that clicks anywhere within the open drawer,
+/// including in its [FiltersSidebar.footer], don't close it.
+const _sidebarSelector = '.filter-sidebar';
+
+/// The right hand column of a filterable index page.
+///
+/// Renders [children] within a card titled 'Filter by', with [footer] pinned
+/// below it. On narrow screens the card and footer become a drawer that slides
+/// in from the right, toggled by the [FilterSearchGroup] search field.
+class FiltersSidebar extends StatelessComponent {
+  const FiltersSidebar({
+    required this.children,
+    this.footer = const [],
+    super.key,
+  });
+
+  /// The filter controls, rendered within the filter card.
+  final List<Component> children;
+
+  /// Optional page-specific content, rendered below the filter card.
+  final List<Component> footer;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'right-col', [
+      const input(
+        type: InputType.checkbox,
+        id: _drawerToggleId,
+        attributes: {'hidden': 'true'},
+      ),
+      div(classes: 'filter-sidebar', [
+        div(classes: 'filter-group-wrapper', [
+          div(classes: 'filter-group', [
+            const div(classes: 'filter-header', [
+              label(
+                attributes: {'for': _drawerToggleId, 'aria-hidden': 'true'},
+                classes: 'close-icon',
+                [MaterialIcon('close')],
+              ),
+            ]),
+            const div(classes: 'table-title', [.text('Filter by')]),
+            ...children,
+          ]),
+        ]),
+        ...footer,
+      ]),
+    ]);
+  }
+}
+
+/// The search field of a filterable index page,
+/// followed by the page-specific [children], such as a result count.
+///
+/// On narrow screens, the field also contains the button
+/// that opens the [FiltersSidebar] drawer.
+class FilterSearchGroup extends StatelessComponent {
+  const FilterSearchGroup({
+    required this.searchId,
+    required this.placeholder,
+    required this.label,
+    required this.value,
+    required this.onInput,
+    required this.children,
+    super.key,
+  });
+
+  /// The id of the search field, so the page can label it.
+  final String searchId;
+
+  final String placeholder;
+  final String label;
+  final String value;
+  final void Function(String) onInput;
+
+  /// Content rendered below the search field.
+  final List<Component> children;
+
+  @override
+  Component build(BuildContext context) {
+    return div(classes: 'filter-search-group', [
+      SearchBar(
+        placeholder: placeholder,
+        label: label,
+        value: value,
+        id: searchId,
+        onInput: onInput,
+        trailing: const _DrawerToggleButton(),
+      ),
+      ...children,
+    ]);
+  }
+}
+
+/// The button that opens the filter drawer on narrow screens.
+///
+/// Also closes the drawer again when anything outside of it is clicked.
+class _DrawerToggleButton extends StatelessComponent {
+  const _DrawerToggleButton();
+
+  static web.HTMLInputElement? get _toggle =>
+      web.document.getElementById(_drawerToggleId) as web.HTMLInputElement?;
+
+  @override
+  Component build(BuildContext context) {
+    return GlobalEventListener(
+      onClick: (event) {
+        final target = event.target as web.Element?;
+        if (target?.closest(_sidebarSelector) == null &&
+            target?.closest('.show-filters-button') == null) {
+          _toggle?.checked = false;
+        }
+      },
+      button(
+        classes: 'icon-button show-filters-button',
+        onClick: () {
+          if (_toggle case final toggle?) {
+            toggle.checked = !toggle.checked;
+          }
+        },
+        [
+          const MaterialIcon('filter_list'),
+        ],
+      ),
+    );
+  }
+}
diff --git a/sites/docs/lib/src/components/pages/flutter_bench_components.dart b/sites/docs/lib/src/components/pages/flutter_bench_components.dart
new file mode 100644
index 00000000000..d4a69b57d5c
--- /dev/null
+++ b/sites/docs/lib/src/components/pages/flutter_bench_components.dart
@@ -0,0 +1,442 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+
+import '../common/comparison_cards_grid.dart';
+import '../common/dimension_cards_grid.dart';
+import '../common/interactive_detail_card.dart';
+import '../common/journey_diagram.dart';
+import '../common/matrix_carousel.dart';
+import '../common/specification_panels.dart';
+
+export '../common/comparison_cards_grid.dart';
+export '../common/dimension_cards_grid.dart';
+export '../common/interactive_detail_card.dart';
+export '../common/journey_diagram.dart';
+export '../common/matrix_carousel.dart';
+export '../common/specification_panels.dart';
+
+/// Cards displaying the Three Core Dimensions of FlutterBench evaluation.
+final class ThreeDimensionsCards extends StatelessComponent {
+  const ThreeDimensionsCards({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    return DimensionCardsGrid(
+      cards: [
+        for (final dim in data.dimensions)
+          DimensionCardItem(
+            title: dim.title,
+            icon: dim.icon,
+            category: dim.category,
+            description: dim.description,
+            footerItems: dim.footerItems,
+            badge: dim.badge,
+          ),
+      ],
+    );
+  }
+}
+
+/// Interactive filterable Grader Matrix showing evaluation graders in a
+/// carousel.
+final class GraderMatrix extends StatelessComponent {
+  const GraderMatrix({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    final matrixData = data.graderMatrix;
+
+    return MatrixCarousel(
+      title: matrixData.title,
+      description: matrixData.description,
+      previousAriaLabel: 'Previous grader card',
+      nextAriaLabel: 'Next grader card',
+      filters: [
+        for (final filter in matrixData.filters)
+          MatrixFilterItem(
+            id: filter.id,
+            label: filter.label,
+          ),
+      ],
+      cards: [
+        for (final grader in matrixData.graders)
+          MatrixCardItem(
+            title: grader.name,
+            description: grader.description,
+            category: grader.category,
+            categoryLabel: grader.categoryLabel,
+            type: grader.type,
+            typeLabel: grader.typeLabel,
+          ),
+      ],
+    );
+  }
+}
+
+/// Comparison cards for Capability (pass@k) vs Consistency (pass^k).
+final class ReliabilityCards extends StatelessComponent {
+  const ReliabilityCards({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    return ComparisonCardsGrid(
+      cards: [
+        for (final card in data.reliability.cards)
+          ComparisonCardItem(
+            tag: card.tag,
+            tagIcon: card.tagIcon,
+            mathPill: card.mathPill,
+            title: card.title,
+            isFeatured: card.isNorthStar,
+            descriptionParts: card.descriptionParts,
+          ),
+      ],
+    );
+  }
+}
+
+/// Interactive score interpretation and engineering triage matrix.
+final class ScoreTriage extends StatelessComponent {
+  const ScoreTriage({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    final triage = data.scoreTriage;
+
+    return InteractiveDetailCard(
+      title: triage.title,
+      description: triage.description,
+      classes: 'interactive-detail-card score-triage',
+      tabs: [
+        for (final tier in triage.tiers)
+          InteractiveDetailTab(
+            id: tier.id,
+            primaryLabel: tier.score,
+            secondaryLabel: tier.name,
+            heading: tier.heading,
+            badge: tier.badge,
+            variant: tier.id,
+            overview: tier.criteria,
+            itemsLabel: tier.actionsLabel,
+            items: [
+              for (final action in tier.actions)
+                InteractiveDetailItem(
+                  label: action.label,
+                  detail: action.detail,
+                ),
+            ],
+          ),
+      ],
+    );
+  }
+}
+
+/// Interactive 4-axis evaluation test matrix tabs component.
+final class EvaluationMatrixTabs extends StatelessComponent {
+  const EvaluationMatrixTabs({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    final matrix = data.evaluationMatrix;
+
+    return InteractiveDetailCard(
+      title: matrix.title,
+      description: matrix.description,
+      classes: 'interactive-detail-card evaluation-matrix-card',
+      tabs: [
+        for (final axis in matrix.axes)
+          InteractiveDetailTab(
+            id: axis.id,
+            primaryLabel: axis.tabLabel,
+            secondaryLabel: axis.tabSublabel,
+            heading: axis.heading,
+            badge: axis.badge,
+            variant: axis.variant,
+            overview: axis.overview,
+            itemsLabel: axis.itemsLabel,
+            items: [
+              for (final item in axis.items)
+                InteractiveDetailItem(
+                  label: item.label,
+                  detail: item.detail,
+                ),
+            ],
+            footerText: axis.footerText,
+          ),
+      ],
+    );
+  }
+}
+
+/// Expansion panels displaying Task Structure, Categories, Tiers, and Quality
+/// Assurance.
+final class TaskSpecifications extends StatelessComponent {
+  const TaskSpecifications({super.key});
+
+  @override
+  Component build(BuildContext context) {
+    final data = FlutterBenchData.fromContext(context);
+    final specs = data.taskSpecifications;
+
+    return SpecificationPanels(
+      panels: [
+        for (final spec in specs)
+          SpecPanelItem(
+            id: spec.id,
+            title: spec.title,
+            badge: spec.badge,
+            badgeVariant: spec.badgeVariant,
+            icon: spec.icon,
+            expanded: spec.expanded,
+            description: spec.description,
+            leadText: spec.leadText,
+            footerText: spec.footerText,
+            tables: [
+              for (final table in spec.tables)
+                SpecTableItem(
+                  title: table.title,
+                  headers: table.headers,
+                  rows: [
+                    for (final row in table.rows)
+                      SpecTableRowItem(
+                        label: row.label,
+                        description: row.description,
+                      ),
+                  ],
+                ),
+            ],
+          ),
+      ],
+    );
+  }
+}
+
+/// A structured diagram component visualizing a user journey flow
+/// across configurable sections and nested elements.
+final class CujDiagram extends StatelessComponent {
+  const CujDiagram({
+    super.key,
+    this.sections,
+  });
+
+  final List<JourneySection>? sections;
+
+  @override
+  Component build(BuildContext context) {
+    final effectiveSections =
+        sections ?? FlutterBenchData.fromContext(context).cujExampleSections;
+
+    return JourneyDiagram(sections: effectiveSections);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Data Model & Extension Types
+// -----------------------------------------------------------------------------
+
+/// Root data model for FlutterBench content loaded from `src/data/flutterbench.yml`.
+extension type FlutterBenchData._(Map<String, Object?> _data) {
+  static FlutterBenchData fromContext(BuildContext context) {
+    final raw =
+        context.page.data['flutterbench'] as Map<String, Object?>? ?? const {};
+    return FlutterBenchData._(raw);
+  }
+
+  List<TaskSpecificationData> get taskSpecifications =>
+      (_data['task_specifications'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(TaskSpecificationData._)
+          .toList();
+
+  List<JourneySection> get cujExampleSections =>
+      (_data['cuj_example'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(JourneySection.fromMap)
+          .toList();
+
+  List<DimensionData> get dimensions =>
+      (_data['dimensions'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(DimensionData._)
+          .toList();
+
+  GraderMatrixData get graderMatrix => GraderMatrixData._(
+    _data['grader_matrix'] as Map<String, Object?>? ?? const {},
+  );
+
+  ReliabilityData get reliability => ReliabilityData._(
+    _data['reliability'] as Map<String, Object?>? ?? const {},
+  );
+
+  ScoreTriageData get scoreTriage => ScoreTriageData._(
+    _data['score_triage'] as Map<String, Object?>? ?? const {},
+  );
+
+  EvaluationMatrixData get evaluationMatrix => EvaluationMatrixData._(
+    _data['evaluation_matrix'] as Map<String, Object?>? ?? const {},
+  );
+}
+
+extension type EvaluationMatrixData._(Map<String, Object?> _data) {
+  String get title => _data['title'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+  List<EvaluationMatrixAxisData> get axes =>
+      (_data['axes'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(EvaluationMatrixAxisData._)
+          .toList();
+}
+
+extension type EvaluationMatrixAxisData._(Map<String, Object?> _data) {
+  String get id => _data['id'] as String? ?? '';
+  String get tabLabel => _data['tab_label'] as String? ?? '';
+  String get tabSublabel => _data['tab_sublabel'] as String? ?? '';
+  String get heading => _data['heading'] as String? ?? '';
+  String get badge => _data['badge'] as String? ?? '';
+  String get variant => _data['variant'] as String? ?? 'blue';
+  String get overview => _data['overview'] as String? ?? '';
+  String get itemsLabel => _data['items_label'] as String? ?? '';
+  String get footerText => _data['footer_text'] as String? ?? '';
+  List<EvaluationMatrixItemData> get items =>
+      (_data['items'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(EvaluationMatrixItemData._)
+          .toList();
+}
+
+extension type EvaluationMatrixItemData._(Map<String, Object?> _data) {
+  String get label => _data['label'] as String? ?? '';
+  String get detail => _data['detail'] as String? ?? '';
+}
+
+extension type TaskSpecificationData._(Map<String, Object?> _data) {
+  String get id => _data['id'] as String? ?? '';
+  String get title => _data['title'] as String? ?? '';
+  String get badge => _data['badge'] as String? ?? '';
+  String get badgeVariant => _data['badge_variant'] as String? ?? 'blue';
+  String get icon => _data['icon'] as String? ?? 'info';
+  bool get expanded => _data['expanded'] as bool? ?? false;
+  String get description => _data['description'] as String? ?? '';
+  String get leadText => _data['lead_text'] as String? ?? '';
+  String get footerText => _data['footer_text'] as String? ?? '';
+  List<TaskSpecTableData> get tables =>
+      (_data['tables'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(TaskSpecTableData._)
+          .toList();
+}
+
+extension type TaskSpecTableData._(Map<String, Object?> _data) {
+  String get title => _data['title'] as String? ?? '';
+  List<String> get headers => (_data['headers'] as List<Object?>? ?? const [])
+      .map((h) => h.toString())
+      .toList();
+  List<TaskSpecTableRowData> get rows =>
+      (_data['rows'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(TaskSpecTableRowData._)
+          .toList();
+}
+
+extension type TaskSpecTableRowData._(Map<String, Object?> _data) {
+  String get label => _data['label'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+}
+
+extension type DimensionData._(Map<String, Object?> _data) {
+  String get title => _data['title'] as String? ?? '';
+  String get icon => _data['icon'] as String? ?? '';
+  String get category => _data['category'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+  String get footerItems => _data['footer_items'] as String? ?? '';
+  String get badge => _data['badge'] as String? ?? '';
+}
+
+extension type GraderMatrixData._(Map<String, Object?> _data) {
+  String get title => _data['title'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+  List<GraderFilterData> get filters =>
+      (_data['filters'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(GraderFilterData._)
+          .toList();
+  List<GraderCardData> get graders =>
+      (_data['graders'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(GraderCardData._)
+          .toList();
+}
+
+extension type GraderFilterData._(Map<String, Object?> _data) {
+  String get id => _data['id'] as String? ?? '';
+  String get label => _data['label'] as String? ?? '';
+}
+
+extension type GraderCardData._(Map<String, Object?> _data) {
+  String get name => _data['name'] as String? ?? '';
+  String get category => _data['category'] as String? ?? '';
+  String get categoryLabel => _data['category_label'] as String? ?? '';
+  String get type => _data['type'] as String? ?? '';
+  String get typeLabel => _data['type_label'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+}
+
+extension type ReliabilityData._(Map<String, Object?> _data) {
+  List<ReliabilityCardData> get cards =>
+      (_data['cards'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(ReliabilityCardData._)
+          .toList();
+}
+
+extension type ReliabilityCardData._(Map<String, Object?> _data) {
+  String get tag => _data['tag'] as String? ?? '';
+  String? get tagIcon => _data['tag_icon'] as String?;
+  String get mathPill => _data['math_pill'] as String? ?? '';
+  String get title => _data['title'] as String? ?? '';
+  bool get isNorthStar => _data['is_north_star'] as bool? ?? false;
+  List<Map<String, Object?>> get descriptionParts =>
+      (_data['description_parts'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .toList();
+}
+
+extension type ScoreTriageData._(Map<String, Object?> _data) {
+  String get title => _data['title'] as String? ?? '';
+  String get description => _data['description'] as String? ?? '';
+  List<ScoreTierData> get tiers =>
+      (_data['tiers'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(ScoreTierData._)
+          .toList();
+}
+
+extension type ScoreTierData._(Map<String, Object?> _data) {
+  String get id => _data['id'] as String? ?? '';
+  String get score => _data['score'] as String? ?? '';
+  String get name => _data['name'] as String? ?? '';
+  String get heading => _data['heading'] as String? ?? '';
+  String get badge => _data['badge'] as String? ?? 'Criteria & Triage';
+  String get criteria => _data['criteria'] as String? ?? '';
+  String get actionsLabel =>
+      _data['actions_label'] as String? ?? 'Engineering Triage Actions:';
+  List<ScoreTierActionData> get actions =>
+      (_data['actions'] as List<Object?>? ?? const [])
+          .cast<Map<String, Object?>>()
+          .map(ScoreTierActionData._)
+          .toList();
+}
+
+extension type ScoreTierActionData._(Map<String, Object?> _data) {
+  String get label => _data['label'] as String? ?? '';
+  String get detail => _data['detail'] as String? ?? '';
+}
diff --git a/sites/docs/lib/src/components/pages/learning_resource_filters_sidebar.dart b/sites/docs/lib/src/components/pages/learning_resource_filters_sidebar.dart
index cf512193009..4f14e5c8d9b 100644
--- a/sites/docs/lib/src/components/pages/learning_resource_filters_sidebar.dart
+++ b/sites/docs/lib/src/components/pages/learning_resource_filters_sidebar.dart
@@ -9,6 +9,7 @@ import 'package:site_shared/components/common/material_icon.dart';
 import 'package:site_shared/util.dart';
 
 import '../../models/learning_resource_model.dart';
+import 'filterable_index.dart';
 import 'learning_resource_filters.dart';
 
 @client
@@ -23,89 +24,74 @@ class LearningResourceFiltersSidebar extends StatelessComponent {
 
   @override
   Component build(BuildContext context) {
-    return div(classes: 'right-col', [
-      const input(
-        type: InputType.checkbox,
-        id: 'open-filter-toggle',
-        attributes: {'hidden': 'true'},
-      ),
-      div(id: 'resource-filter-group-wrapper', [
-        div(id: 'resource-filter-group', [
-          const div(classes: 'filter-header', [
-            label(
-              attributes: {'for': 'open-filter-toggle', 'aria-hidden': 'true'},
-              classes: 'close-icon',
-              [MaterialIcon('close')],
-            ),
-          ]),
-          const div(classes: 'table-title', [.text('Filter by')]),
-          ListenableBuilder(
-            listenable: filters,
-            builder: (context) {
-              return div(classes: 'table-content', [
-                const h4([.text('Subject')]),
-                ul(classes: filters.tagsExpanded ? '' : 'collapsed', [
-                  for (final (index, tag) in LearningResourceTag.values.indexed)
-                    li(
-                      classes: [
-                        if (!filters.tagsExpanded && index > 3) 'hidden',
-                      ].toClasses,
-                      [
-                        input(
-                          type: InputType.checkbox,
-                          attributes: {
-                            'role': 'checkbox',
-                            'name': 'filter-${tag.name}',
-                          },
-                          id: 'filter-${tag.name}',
-                          checked: filters.selectedTags.contains(tag),
-                          onChange: (checked) {
-                            filters.setTag(tag, checked as bool);
-                          },
-                        ),
-                        label(
-                          attributes: {'for': 'filter-${tag.name}'},
-                          [.text(tag.label)],
-                        ),
-                      ],
-                    ),
-                ]),
-                button(onClick: filters.toggleTagsExpanded, [
-                  span(classes: 'label', [
-                    .text(filters.tagsExpanded ? 'Less' : 'More'),
-                  ]),
-                  MaterialIcon(
-                    filters.tagsExpanded ? 'expand_less' : 'expand_more',
-                  ),
-                ]),
-                const h4([.text('Type')]),
-                ul([
-                  for (final type in LearningResourceType.values)
-                    li([
+    return FiltersSidebar(
+      children: [
+        ListenableBuilder(
+          listenable: filters,
+          builder: (context) {
+            return div(classes: 'table-content', [
+              const h4([.text('Subject')]),
+              ul(classes: filters.tagsExpanded ? '' : 'collapsed', [
+                for (final (index, tag) in LearningResourceTag.values.indexed)
+                  li(
+                    classes: [
+                      if (!filters.tagsExpanded && index > 3) 'hidden',
+                    ].toClasses,
+                    [
                       input(
                         type: InputType.checkbox,
                         attributes: {
                           'role': 'checkbox',
-                          'name': 'filter-${type.name}',
+                          'name': 'resource-filter-${tag.name}',
                         },
-                        id: 'filter-${type.name}',
-                        checked: filters.selectedTypes.contains(type),
+                        id: 'resource-filter-${tag.name}',
+                        checked: filters.selectedTags.contains(tag),
                         onChange: (checked) {
-                          filters.setType(type, checked as bool);
+                          filters.setTag(tag, checked as bool);
                         },
                       ),
                       label(
-                        attributes: {'for': 'filter-${type.name}'},
-                        [.text(type.label)],
+                        attributes: {'for': 'resource-filter-${tag.name}'},
+                        [.text(tag.label)],
                       ),
-                    ]),
+                    ],
+                  ),
+              ]),
+              button(onClick: filters.toggleTagsExpanded, [
+                span(classes: 'label', [
+                  .text(filters.tagsExpanded ? 'Less' : 'More'),
                 ]),
-              ]);
-            },
-          ),
-        ]),
-      ]),
-    ]);
+                MaterialIcon(
+                  filters.tagsExpanded ? 'expand_less' : 'expand_more',
+                ),
+              ]),
+              const h4([.text('Type')]),
+              ul([
+                for (final type in LearningResourceType.values)
+                  li([
+                    input(
+                      type: InputType.checkbox,
+                      attributes: {
+                        'role': 'checkbox',
+                        'name': 'resource-filter-${type.name}',
+                      },
+                      id: 'resource-filter-${type.name}',
+                      checked: filters.selectedTypes.contains(type),
+                      onChange: (checked) {
+                        filters.setType(type, checked as bool);
+                      },
+                    ),
+                    label(
+                      attributes: {'for': 'resource-filter-${type.name}'},
+                      [.text(type.label)],
+                    ),
+                  ]),
+              ]),
+            ]);
+          },
+        ),
+      ],
+    );
   }
 }
 
diff --git a/sites/docs/lib/src/components/pages/learning_resource_index.dart b/sites/docs/lib/src/components/pages/learning_resource_index.dart
index 3141659ba0e..140c25ea035 100644
--- a/sites/docs/lib/src/components/pages/learning_resource_index.dart
+++ b/sites/docs/lib/src/components/pages/learning_resource_index.dart
@@ -30,8 +30,8 @@ final class LearningResourceIndex extends StatelessComponent {
       }
     }
 
-    return div(id: 'resource-index-content', [
-      div(classes: 'left-col', id: 'resource-index-main-content', [
+    return div(classes: 'filterable-index', [
+      div(classes: 'left-col', [
         const LearningResourceFilters(),
         section(classes: 'card-grid', id: 'all-resources-grid', [
           for (final item in learningResources) _ResourceCard(item),
diff --git a/sites/docs/lib/src/extensions/registry.dart b/sites/docs/lib/src/extensions/registry.dart
index 158f0a3a9c9..6bf74e0f1f6 100644
--- a/sites/docs/lib/src/extensions/registry.dart
+++ b/sites/docs/lib/src/extensions/registry.dart
@@ -6,6 +6,7 @@ import 'package:jaspr_content/jaspr_content.dart';
 import 'package:site_shared/page_extensions.dart';
 
 import 'glossary_link_processor.dart';
+import 'story_structure_processor.dart';
 import 'tutorial_navigation.dart';
 import 'tutorial_structure_processor.dart';
 
@@ -20,4 +21,5 @@ const List<PageExtension> allNodeProcessingExtensions = [
   GlossaryLinkProcessor(),
   TutorialNavigationExtension(),
   TutorialStructureExtension(),
+  StoryStructureExtension(),
 ];
diff --git a/sites/docs/lib/src/extensions/story_structure_processor.dart b/sites/docs/lib/src/extensions/story_structure_processor.dart
new file mode 100644
index 00000000000..4b42e084b3a
--- /dev/null
+++ b/sites/docs/lib/src/extensions/story_structure_processor.dart
@@ -0,0 +1,141 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr_content/jaspr_content.dart';
+
+/// A page extension for Jaspr Content that structures pages using the
+/// `story` layout into distinct storytelling chapters.
+final class StoryStructureExtension implements PageExtension {
+  const StoryStructureExtension();
+
+  @override
+  Future<List<Node>> apply(Page page, List<Node> nodes) async {
+    final layout = page.data.page['layout'];
+    if (layout != 'story') {
+      return nodes;
+    }
+
+    final chapters = <Node>[];
+    var currentChapterNodes = <Node>[];
+    var chapterIndex = 0;
+    Node? currentH2Node;
+    ElementNode? headerNode;
+
+    bool isMeaningfulNode(Node node) {
+      if (node is TextNode) {
+        final text = node.text.trim();
+        return text.isNotEmpty && !text.startsWith('<!--');
+      }
+      return true;
+    }
+
+    void flushCurrentChapter() {
+      if (currentChapterNodes.isEmpty && currentH2Node == null) return;
+      if (currentH2Node == null && !currentChapterNodes.any(isMeaningfulNode)) {
+        currentChapterNodes = <Node>[];
+        return;
+      }
+
+      final isPrologue = currentH2Node == null;
+      final numStr = isPrologue
+          ? '00'
+          : (chapterIndex < 10 ? '0$chapterIndex' : '$chapterIndex');
+
+      final chapterChildren = <Node>[];
+
+      // Group kicker and heading into a sticky header group
+      final headerGroupChildren = <Node>[
+        if (!isPrologue)
+          ElementNode(
+            'div',
+            const {'class': 'chapter-kicker'},
+            [
+              ElementNode(
+                'span',
+                const {'class': 'chapter-number'},
+                [TextNode(numStr)],
+              ),
+              const ElementNode('span', {'class': 'chapter-rule'}, []),
+            ],
+          ),
+        if (currentH2Node != null) currentH2Node!,
+      ];
+
+      if (headerGroupChildren.isNotEmpty) {
+        chapterChildren.add(
+          ElementNode(
+            'div',
+            const {'class': 'chapter-header-group'},
+            headerGroupChildren,
+          ),
+        );
+      }
+
+      if (currentChapterNodes.isNotEmpty) {
+        chapterChildren.add(
+          ElementNode(
+            'div',
+            const {'class': 'chapter-content'},
+            List<Node>.from(currentChapterNodes),
+          ),
+        );
+      }
+
+      chapters.add(
+        ElementNode(
+          'section',
+          {
+            'class': isPrologue
+                ? 'story-chapter story-prologue'
+                : 'story-chapter',
+            'data-chapter': numStr,
+          },
+          chapterChildren,
+        ),
+      );
+
+      currentChapterNodes = <Node>[];
+      currentH2Node = null;
+    }
+
+    for (final node in nodes) {
+      if (_isH2(node)) {
+        flushCurrentChapter();
+        chapterIndex++;
+        currentH2Node = node;
+      } else if (currentH2Node == null &&
+          headerNode == null &&
+          node is ElementNode &&
+          node.tag.toLowerCase() == 'header') {
+        headerNode = node;
+      } else {
+        currentChapterNodes.add(node);
+      }
+    }
+
+    flushCurrentChapter();
+
+    return [
+      ?headerNode,
+      ElementNode(
+        'div',
+        const {'class': 'story-canvas'},
+        chapters,
+      ),
+    ];
+  }
+
+  static bool _isH2(Node node) {
+    if (node is! ElementNode) return false;
+    if (node.tag.toLowerCase() == 'h2') return true;
+    if (node.tag == 'div' &&
+        (node.attributes['class']?.contains('header-wrapper') ?? false)) {
+      return node.children?.any(
+            (child) => child is ElementNode && child.tag.toLowerCase() == 'h2',
+          ) ??
+          false;
+    }
+    return false;
+  }
+}
diff --git a/sites/docs/lib/src/layouts/doc_layout.dart b/sites/docs/lib/src/layouts/doc_layout.dart
index 37e20f7bc3e..e0460fd3ca8 100644
--- a/sites/docs/lib/src/layouts/doc_layout.dart
+++ b/sites/docs/lib/src/layouts/doc_layout.dart
@@ -42,6 +42,10 @@ class DocLayout extends FlutterDocsLayout {
     );
   }
 
+  /// Builds an optional component to render at the top of the
+  /// `.after-leading-content` container, before the side menu and article.
+  Component? buildLeadingContent(Page page) => null;
+
   @override
   Component buildBody(Page page, Component child) {
     final pageData = page.data.page;
@@ -49,6 +53,9 @@ class DocLayout extends FlutterDocsLayout {
     final pageTitle = pageData['title'] as String;
     final pageDescription = (pageData['description'] as String?)?.trim();
     final navigationData = page.navigationData;
+    
+    // Always show page header unless explicitly hidden.
+    final showPageHeading = (pageData['showPageHeader'] as bool?) ?? true;
 
     return super.buildBody(
       page,
@@ -67,6 +74,7 @@ class DocLayout extends FlutterDocsLayout {
                 PageNavBar(navigationData),
               ],
             ),
+          ?buildLeadingContent(page),
           ?buildBanner(page),
           div(classes: 'after-leading-content', [
             if (navigationData case PageNavigationData(
@@ -77,11 +85,12 @@ class DocLayout extends FlutterDocsLayout {
                 DashTableOfContents(toc),
               ]),
             article([
-              PageHeader(
-                title: pageTitle,
-                description: pageDescription,
-                showBreadcrumbs: showBreadcrumbsFor(page),
-              ),
+              if (showPageHeading)
+                PageHeader(
+                  title: pageTitle,
+                  description: pageDescription,
+                  showBreadcrumbs: showBreadcrumbsFor(page),
+                ),
 
               child,
               PrevNext(
diff --git a/sites/docs/lib/src/layouts/story_layout.dart b/sites/docs/lib/src/layouts/story_layout.dart
new file mode 100644
index 00000000000..c45d27b4fb9
--- /dev/null
+++ b/sites/docs/lib/src/layouts/story_layout.dart
@@ -0,0 +1,48 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+import 'package:jaspr_content/jaspr_content.dart';
+
+import 'doc_layout.dart';
+
+/// The Jaspr Content layout for storytelling pages.
+///
+/// Provides a generous spatial rhythm, subtle chapter indicators,
+/// wide-canvas breakout styling, and a scroll-driven reading progress line.
+class StoryLayout extends DocLayout {
+  const StoryLayout();
+
+  @override
+  String get name => 'story';
+
+  @override
+  List<String> get defaultBodyClasses => const ['layout-story'];
+
+  @override
+  Component? buildLeadingContent(Page page) {
+    return const div(classes: 'story-reading-progress', [
+      div(classes: 'story-reading-progress-bar', []),
+    ]);
+  }
+
+  @override
+  Component buildBody(Page page, Component child) {
+    final pageData = page.data.page;
+    final showToc = pageData['showToc'] as bool? ?? false;
+
+    return super.buildBody(
+      page..apply(
+        data: {
+          'page': {
+            'showToc': showToc,
+            'showPageHeader': false,
+          },
+        },
+      ),
+      child,
+    );
+  }
+}
diff --git a/sites/docs/lib/src/models/cuj_model.dart b/sites/docs/lib/src/models/cuj_model.dart
new file mode 100644
index 00000000000..8f015c26c95
--- /dev/null
+++ b/sites/docs/lib/src/models/cuj_model.dart
@@ -0,0 +1,127 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:universal_web/web.dart' as web;
+
+/// Separator used to join task descriptions into a single `data-tasks`
+/// attribute, so they can be recovered on the client.
+const _taskSeparator = '|';
+
+/// Prefix used for the DOM id of each journey's card element.
+const _elementIdPrefix = 'cuj-';
+
+final class Cuj {
+  Cuj({
+    required this.id,
+    required this.goal,
+    required this.persona,
+    required this.tasks,
+  });
+
+  /// Creates a [Cuj] from a Map, used on the server
+  /// when parsing the yaml data files.
+  factory Cuj.fromMap(Map<String, Object?> map) {
+    return Cuj(
+      id: '${map['id']}',
+      goal: map['goal'] as String,
+      persona: CujPersona.fromDataValue(map['persona'] as String?),
+      tasks: [
+        for (final task in (map['tasks'] as List<Object?>?) ?? const [])
+          CujTask.fromMap(task as Map<String, Object?>),
+      ],
+    );
+  }
+
+  /// Creates a [Cuj] from a DOM Element, used on the client
+  /// for recreating and filtering existing journeys.
+  factory Cuj.fromElement(web.Element element) {
+    final dataPersona = element.getAttribute('data-persona') ?? '';
+    final dataGoal = element.getAttribute('data-goal') ?? '';
+    final dataTasks = element.getAttribute('data-tasks') ?? '';
+
+    return Cuj(
+      id: element.id.replaceFirst(_elementIdPrefix, ''),
+      goal: dataGoal,
+      persona: CujPersona.fromName(dataPersona),
+      tasks: [
+        for (final task in dataTasks.split(_taskSeparator))
+          if (task.trim().isNotEmpty) CujTask(id: '', name: '', task: task),
+      ],
+    );
+  }
+
+  final String id;
+  final String goal;
+  final CujPersona? persona;
+  final List<CujTask> tasks;
+
+  /// The identifier of the card element that renders this journey.
+  String get elementId => '$_elementIdPrefix$id';
+
+  /// The task descriptions, joined for storage in a `data-tasks` attribute.
+  String get taskData => tasks.map((task) => task.task).join(_taskSeparator);
+}
+
+final class CujTask {
+  CujTask({required this.id, required this.name, required this.task});
+
+  factory CujTask.fromMap(Map<String, Object?> map) {
+    return CujTask(
+      id: '${map['id']}',
+      name: map['name'] as String? ?? '',
+      task: map['task'] as String? ?? '',
+    );
+  }
+
+  final String id;
+  final String name;
+  final String task;
+}
+
+/// The developer personas a critical user journey can belong to.
+///
+/// [dataValue] must match the `persona` values used in `src/data/cujs.yaml`.
+enum CujPersona {
+  appDeveloper('App developer', 'The App Developer', 'flutter-blue'),
+  techLead('Tech lead / architect', 'The Tech Lead / Architect', 'purple'),
+  pluginDeveloper('Plugin developer', 'The Plugin Developer', 'teal'),
+  fullStackDeveloper(
+    'Full-stack developer',
+    'The Full Stack Developer',
+    'magenta',
+  ),
+  hybridDeveloper(
+    'Hybrid (native + Flutter) developer',
+    'The Hybrid (Native + Flutter) Developer',
+    'amber',
+  );
+
+  const CujPersona(this.label, this.dataValue, this.pillClass);
+
+  /// Looks up a persona by the value used in the yaml data file.
+  static CujPersona? fromDataValue(String? dataValue) {
+    for (final persona in values) {
+      if (persona.dataValue == dataValue) {
+        return persona;
+      }
+    }
+    return null;
+  }
+
+  /// Looks up a persona by its enum name, as stored in the DOM.
+  static CujPersona? fromName(String name) {
+    for (final persona in values) {
+      if (persona.name == name) {
+        return persona;
+      }
+    }
+    return null;
+  }
+
+  final String label;
+  final String dataValue;
+
+  /// The `.pill-sm` color modifier used for this persona's badge.
+  final String pillClass;
+}
diff --git a/sites/docs/lib/src/utils/inline_code.dart b/sites/docs/lib/src/utils/inline_code.dart
new file mode 100644
index 00000000000..c1fe3ca416b
--- /dev/null
+++ b/sites/docs/lib/src/utils/inline_code.dart
@@ -0,0 +1,23 @@
+// Copyright 2025 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+/// Renders text with optional inline code segments delimited by backticks.
+Component renderDescriptionWithCode(String text) {
+  if (!text.contains('`')) {
+    return .text(text);
+  }
+  final parts = text.split('`');
+  final children = <Component>[];
+  for (var i = 0; i < parts.length; i++) {
+    if (i.isOdd) {
+      children.add(code([.text(parts[i])]));
+    } else if (parts[i].isNotEmpty) {
+      children.add(.text(parts[i]));
+    }
+  }
+  return .fragment(children);
+}
diff --git a/sites/docs/src/_includes/docs/ai/flutter_bench_task_explorer.md b/sites/docs/src/_includes/docs/ai/flutter_bench_task_explorer.md
new file mode 100644
index 00000000000..47a8ed4ffb1
--- /dev/null
+++ b/sites/docs/src/_includes/docs/ai/flutter_bench_task_explorer.md
@@ -0,0 +1,196 @@
+<IdeExplorer>
+
+<IdeProjectRoot label="Task" id="task">
+
+<IdeFolder label="environment/" id="environment" subtitle="Containerized Flutter workspace pre-seeded for the agent">
+
+The target codebase is an isolated, containerized Flutter workspace.
+
+When a benchmark run starts, the evaluation harness boots an ephemeral
+Docker container pre-seeded with this project. The agent is given access to
+tools (such as reading files, editing code, and running terminal commands)
+to investigate and resolve the issue.
+
+The agent only sees the files inside this directory. Grading scripts and
+reference solutions remain strictly isolated outside the container until
+the agent completes its run.
+
+<IdeFolder label="lib/" id="lib" subtitle="Application source code">
+
+Contains the Flutter application source code.
+
+In this evaluation task, the agent inspects `lib/main.dart` to locate the
+source of the
+`RenderFlex` layout errors and applies appropriate widget modifications.
+
+<IdePage label="main.dart" id="main-dart" subtitle="Flutter app containing horizontal and vertical overflow bugs">
+
+The starter code for the Flutter application. Alternatively, the docker
+file may point to a remote codebase.
+
+</IdePage>
+
+</IdeFolder>
+
+<IdeFolder label="test/" id="test" subtitle="Target directory for agent-authored widget tests">
+
+The test directory for the target project.
+
+Initially, this directory is empty. The task instruction directs the agent
+to create `test/main_test.dart`
+to verify its bug fix with automated widget tests.
+
+<IdePage label="main_test.dart" id="main-test-dart" subtitle="Widget tests the agent must write to verify its fix">
+
+The widget test file that the agent is expected to author.
+
+</IdePage>
+
+</IdeFolder>
+
+<IdePage label="pubspec.yaml" id="pubspec" subtitle="Project manifest declaring Flutter and lint dependencies">
+
+Declares dependencies and environment constraints for the Flutter project.
+
+</IdePage>
+
+<IdePage label="analysis_options.yaml" id="analysis-options" subtitle="Linter configuration enforcing const and style rules">
+
+Defines the static analysis rules enforced across the project.
+
+During grading,
+`StaticAnalysisGrader` runs `flutter analyze` against the modified
+codebase. Solutions that introduce analyzer errors, warnings, or lint
+violations
+(such as missing `const` constructors) lose quality points.
+
+```yaml
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  rules:
+  # Strict lints for this task
+```
+
+</IdePage>
+
+<IdePage label="Dockerfile" id="dockerfile" subtitle="Container setup, SDK caching, and baseline commit">
+
+Defines the container image for the task environment.
+
+**Workflow**
+
+1. Inherits from the pre-warmed `flutter-linux:latest` base image, which
+   contains the Flutter and Dart SDKs.
+2. Copies project manifests and initial source files into `/workspace`.
+3. Runs `flutter pub get` so dependencies are pre-fetched.
+4. Executes `init-baseline` to snapshot the clean repository state. This
+   allows the evaluation harness to measure the agent's work as a precise
+   Git diff against the starting baseline.
+
+</IdePage>
+
+</IdeFolder>
+
+<IdeFolder label="tests/" id="tests" badge="hidden from agent" badge-color="warning" subtitle="Multi-dimensional evaluation harness hidden from the agent">
+
+The automated verification harness used to grade the agent's performance.
+
+This entire directory is hidden from the agent during task execution. It is
+mounted into the evaluation container only when the grading phase starts.
+
+The harness evaluates the agent's output across three weighted dimensions:
+
+- **Outcome**: Functional correctness, test pass rates, and layout fixes.
+- **Quality**: Static analysis, formatting, and code craftsmanship.
+- **DX**: Developer experience and tool interaction efficiency.
+
+<IdePage label="graders.dart" id="graders-dart" subtitle="Outcome, quality, and craftsmanship scoring rules via eval_scoring">
+
+Defines the multi-dimensional scoring pipeline using a separate scoring package.
+
+```dart
+// Heavily edited
+AggregateGrader grader(context) =>
+    AggregateGrader.result(
+      outcome: _outcomeGraders,
+      quality: _qualityGraders,
+      dx: _dxGraders,
+    );
+```
+
+</IdePage>
+
+<IdePage label="test.sh" id="test-sh" subtitle="Verification entry point running the eval_scoring suite">
+
+The test harness entrypoint script executed inside the grading container.
+
+```bash
+#!/bin/bash
+eval_scoring run [tasks]
+```
+
+</IdePage>
+
+</IdeFolder>
+
+<IdeFolder label="solution/" id="solution" subtitle="Oracle reference solution used to validate the eval task">
+
+Contains the ground truth reference implementation maintained by the
+benchmark authors.
+
+Before a task is added to the benchmark suite, the reference solution is
+executed through the grading harness to confirm that it achieves a full
+`1.0` reward. This ensures the task is solvable, unambiguous, and
+calibrated correctly.
+
+<IdePage label="solve.sh" id="solve-sh" subtitle="Reference script fixing layout bugs and adding layout tests">
+
+The reference shell script that applies the canonical fix and generates
+comprehensive tests. Not safe to share publicly.
+
+</IdePage>
+
+</IdeFolder>
+
+<IdePage label="instruction.md" id="instruction" is-default-page="true" badge="input" badge-color="tip" subtitle="The prompt the agent receives">
+
+The instruction is the task prompt provided to the agent. It mimics
+real-world workflows from developers, and is written in a way that real
+developers interact with agents.
+
+**Design principles**
+
+- Prompts state symptoms and expected outcomes without naming exact 
+  remedy widgets.
+- Prompts require the agent to write regression tests, measuring both
+  implementation skills and testing rigor.
+
+```markdown
+We currently keep receiving `RenderFlex overflowed` errors both
+horizontally and vertically. Implement the correct widgets to resolve these
+layout issues.
+
+Write widget tests in
+`test/main_test.dart` that verifies the changes.
+```
+
+</IdePage>
+
+<IdePage label="task.toml" id="task-toml" subtitle="Task definition, difficulty notes, and timeouts">
+
+The task configuration file specifies execution bounds, metadata, and
+target artifacts evaluated during grading.
+
+**Key sections**
+
+- `artifacts`: Lists files that must be present in the workspace after the
+  run.
+- `task` definition: Task-related data, like name, author and tags. 
+-  infra and agent configurations, such as timeout limits and retries.
+
+</IdePage>
+
+</IdeProjectRoot>
+
+</IdeExplorer>
diff --git a/sites/docs/src/content/ai/evals.md b/sites/docs/src/content/ai/evals.md
deleted file mode 100644
index b1d6b8b2d17..00000000000
--- a/sites/docs/src/content/ai/evals.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: AI evaluations
-description: >
-  Learn about Dart and Flutter's evaluation frameworks for
-  measuring AI tooling reliability.
----
-
-:::experimental
-Evaluation tooling and benchmarks are experimental and likely to change.
-:::
-
-To explore the evaluation strategy,
-view the open-source dataset and scoring rubrics,
-or get involved with community benchmark datasets,
-visit the [Flutter Evals repository](https://github.com/flutter/evals).
-
-Evaluating the capabilities and reliability of AI agents requires testing
-approaches that model actual developer tasks.
-Because LLMs are non-deterministic,
-standard unit testing is insufficient for verifying agentic behaviors like
-codebase navigation, plan execution, and code synthesis.
-
-To build developer confidence in AI tooling,
-Dart and Flutter use an evaluation system ("evals")
-to test critical user journeys (CUJs).
-Evals measure both deterministic code correctness
-(compilation, lints, automated tests) and qualitative performance
-(reasoning, safety, and conciseness) using automated model judges
-and expert human grading.
diff --git a/sites/docs/src/content/ai/flutter-bench/cujs.md b/sites/docs/src/content/ai/flutter-bench/cujs.md
new file mode 100644
index 00000000000..d0ffcddd8e5
--- /dev/null
+++ b/sites/docs/src/content/ai/flutter-bench/cujs.md
@@ -0,0 +1,32 @@
+---
+title: Flutter critical user journeys
+shortTitle: Flutter CUJs
+description: >
+  Browse the catalog of canonical Flutter and Dart critical user journeys 
+  (CUJs). FlutterBench evals measures these CUJs.
+bodyClass: wide-site-content
+showToc: false
+---
+
+A _[critical user journey][]_ (CUJ) is a goal a developer sets out to
+accomplish, like "make an application accessible to all users" or
+"diagnose and resolve layout overflow errors" and it's broken down into the
+concrete tasks they take to get there.
+
+<CujDiagram />
+
+Product teams at Google treat CUJs as a source of truth: they're how teams align
+on priorities, shape roadmaps, measure product health and more. And we use
+CUJs to derive evaluation tasks and prompts for [FlutterBench][].
+
+The catalog below is the Flutter team's CUJs. It's a claim about what matters in
+Flutter development. If the way you build Flutter apps isn't represented here,
+the list is incomplete, and we encourage [your feedback][].
+
+<CujIndex />
+
+[FlutterBench]: /ai/flutter-bench
+
+[critical user journey]: https://static.googleusercontent.com/media/sre.google/en//static/pdf/art-of-slos-handbook-a4.pdf
+
+[your feedback]: todo/link/to/form
diff --git a/sites/docs/src/content/ai/flutter-bench/index.md b/sites/docs/src/content/ai/flutter-bench/index.md
new file mode 100644
index 00000000000..a20b2e11f2a
--- /dev/null
+++ b/sites/docs/src/content/ai/flutter-bench/index.md
@@ -0,0 +1,15 @@
+---
+title: FlutterBench
+description: >
+  Learn about Dart and Flutter's evaluation frameworks for
+  measuring AI tooling reliability.
+---
+
+To build developer confidence in AI tooling, Dart and Flutter use an
+evaluation system ("FlutterBench") to test critical user journeys (CUJs). 
+Evals measure both deterministic code correctness
+(compilation, lints, automated tests) and qualitative performance
+(reasoning, safety, and conciseness) using automated model judges and
+expert human grading.
+
+TODO: put TOC or something, for now
diff --git a/sites/docs/src/content/ai/flutter-bench/methodology.md b/sites/docs/src/content/ai/flutter-bench/methodology.md
new file mode 100644
index 00000000000..68fb60339f3
--- /dev/null
+++ b/sites/docs/src/content/ai/flutter-bench/methodology.md
@@ -0,0 +1,181 @@
+---
+title: FlutterBench methodology
+layout: story
+showToc: false
+showPageHeader: false
+description: >
+  Learn about Dart and Flutter's evaluation frameworks for
+  measuring AI tooling reliability.
+---
+
+<header class="methodology-hero">
+  <h1 class="hero-title">FlutterBench methodology</h1>
+  <p>
+    Learn about Dart and Flutter's evaluation frameworks for measuring AI tooling reliability.
+  </p>
+</header>
+
+## Overview
+
+FlutterBench is our evaluation framework designed to measure how AI coding
+agents perform within the Dart and Flutter ecosystem. The evaluation system consists of four core components:
+
+| Component | Description |
+|:---|:---|
+| [**Dataset**](#dataset-tasks) | Real-world development tasks derived from critical user journeys (CUJs). |
+| [**Test matrix**](#evaluation-test-matrix) | Multidimensional testing framework across models, agents, tooling configurations, and SDK versions. |
+| [**Scoring system**](#scoring-architecture) | Unified grading approach evaluating functional outcomes, code quality, and developer experience, paired with diagnostic telemetry. |
+| [**Harness**](#evaluation-harness) | Containerized automation infrastructure that executes evaluations at scale. |
+
+## Dataset & tasks
+
+### Task derivation
+
+Evaluation tasks derive directly from Flutter's canonical
+[**Critical User Journeys (CUJs)**][], which are the core workflows that
+developers perform regularly. This approach ensures evaluations reflect
+real-world developer needs rather than synthetic puzzles.
+
+Each CUJ represents a combination of:
+* A Flutter developer persona (e.g., app developer, plugin developer,
+  full-stack developer)
+* A high-level goal
+* The specific sequential steps required to achieve that goal
+
+:::note
+We can't open-source the full evaluation tasks without contaminating the
+benchmark dataset, but we publish our [canonical list of CUJs][]. With
+this list, along with the example task below, you can understand our
+evaluation philosophy for FlutterBench.
+:::
+
+These CUJs are converted into [Harbor](https://harborframework.com/)
+tasks. Harbor is the framework used to run containerized evaluation tasks.
+
+CUJs and Harbor tasks don't map cleanly one-to-one. Instead, the CUJ list
+serves as a guide to verify that core developer workflows are evaluated.
+In some cases, several CUJs combine into a single task, and vice-versa.
+Our most ambitious evaluations combine multiple Harbor tasks, and thus
+cover many CUJs.
+
+### Task specifications
+
+<TaskSpecifications />
+
+### Interactive task anatomy
+
+Each task contains an instruction, a target codebase and environment,
+verification criteria, and metadata. Using the CUJ example above,
+a corresponding Harbor task looks like this:
+
+{% render "docs/ai/flutter_bench_task_explorer.md" %}
+
+## Evaluation test matrix
+
+<EvaluationMatrixTabs />
+
+## Scoring architecture
+
+### Scoring philosophy
+
+When evaluating AI coding agents, execution friction—such as tool failures,
+endless retries, and hallucinations—is often attributed entirely to model
+capability. However, AI coding systems follow a core equation:
+
+$$\text{Agent} = \text{Model} + \text{Harness}$$
+
+While the Dart and Flutter teams do not train the underlying LLMs, we build
+and maintain the **Dart and Flutter AI Harness** (skills, MCP tools,
+compiler diagnostics, and sandboxes).
+
+Therefore, **Developer Experience (DX)** is directly within our engineering
+control and belongs in our primary benchmark score alongside functional
+outcomes and code quality:
+
+* **Primary focus**: The quality and correctness of the final code artifact.
+* **First-class signal**: Developer experience friction, tool accuracy, and
+  recovery efficiency.
+
+### Three core evaluation dimensions
+
+Each evaluation produces three independent dimensions that compute the
+composite Result Score in Harbor's `reward.json`:
+
+<ThreeDimensionsCards />
+
+### Grader matrix
+
+FlutterBench deploys a mix of deterministic, LLM-as-a-judge, and
+heuristic graders across all three dimensions:
+
+<GraderMatrix />
+
+### Grader implementation tiers
+
+Evaluations use three types of graders:
+
+| Tier | Grader type | Evaluation role |
+|:---|:---|:---|
+| **Code-based** | Compilers, test runners, `dart analyze`, DCM, and structural checkers | Deterministic, unambiguous source of truth for syntax and correctness. |
+| **LLM judge (BINEVAL)** | Frontier model rubric evaluation | Evaluates qualitative dimensions (visual UI, idiomatic review, trajectory, recovery) using binary yes/no questions. |
+| **Human audit** | Flutter engineer manual review | Ground truth calibration, failure root-cause analysis, and conflict resolution. |
+
+### Diagnostic telemetry (excluded from Result Score)
+
+To avoid penalizing capability scores on complex tasks that require more
+reasoning steps or tokens, FlutterBench tracks diagnostic telemetry separately
+from the Result Score:
+
+| Metric | Measurement target |
+|:---|:---|
+| **Token usage** | Tracks total input and output tokens consumed to measure efficiency deltas and verify token reductions from skill optimizations. |
+| **Expected tool calls** | Compares actual tool invocations against expected tools. If an agent succeeds without using an expected tool, it is not penalized; this telemetry helps evaluate whether the tool is necessary for that user journey. |
+
+## Evaluation harness
+
+## Reliability & triage
+
+### Multi-run reliability metrics
+
+Single-run trials only sample luck. True agent trust requires measuring
+multi-trial stability across repeated runs:
+
+<ReliabilityCards />
+
+### Score interpretation & triage
+
+Click a score tier to view its grading criteria and actionable engineering
+triage steps:
+
+<ScoreTriage />
+
+#### Human root-cause audits
+
+When an evaluation task receives a low Result Score, human expert reviewers
+inspect the diagnostic process data:
+
+* **Reasoning trace review**: Inspect the agent's internal thoughts to identify
+  where misunderstandings of Dart/Flutter APIs occurred.
+* **Plan adherence audit**: Check whether the agent derailed due to ambiguous
+  task prompts or missing context.
+* **Harness diagnostics**: Audit error messages returned to the agent during
+  failed compile/test steps to see why recovery failed.
+
+## Transparency & dataset integrity
+
+To prevent model training contamination, raw datasets and reference
+solutions cannot be open-sourced. However, the Flutter team maintains
+transparency by:
+
+* Publishing the comprehensive evaluation methodology on this page.
+* Sharing task prompts and [CUJ][] lists.
+* Publishing regular blog posts with analysis and insights.
+* Open-sourcing verification tooling that does not risk dataset compromise.
+
+This methodology will evolve as more data is gathered and analyzed. Expect
+updates and refinements in future blog posts and documentation.
+
+[**Critical User Journeys (CUJs)**]: /ai/flutter-bench/cujs
+[CUJ]: /ai/flutter-bench/cujs
+
+[canonical list of CUJs]: /ai/flutter-bench/cujs
diff --git a/sites/docs/src/data/cujs.yaml b/sites/docs/src/data/cujs.yaml
new file mode 100644
index 00000000000..59d243351ac
--- /dev/null
+++ b/sites/docs/src/data/cujs.yaml
@@ -0,0 +1,1040 @@
+- id: 0
+  goal: Evaluate and select the technical stack, folder structure, state management,
+    and routing architecture for a project
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 1
+      name: research-existing-options-available-architecture
+      task: Evaluate available architectural patterns, routing libraries, and state
+        management frameworks, documenting the rationale for the selected technology
+        stack.
+    - id: 2
+      name: use-workspace-monorepo-repo-structure
+      task: Configure a multi-package Dart workspace or monorepo repository structure
+        to separate core domain logic from application UI features.
+- id: 1
+  goal: Enforce consistent code formatting, linting, and architectural standards
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 3
+      name: compose-analysis-options-style-guide
+      task: Author comprehensive static analysis rules in "analysis_options.yaml"
+        and document architectural standards in a project style guide.
+    - id: 4
+      name: ensure-codebase-uses-only-selected
+      task: Enforce that the codebase adheres strictly to documented architectural
+        decisions and state management patterns, avoiding unapproved approaches.
+- id: 2
+  goal: Manage dependency risks and audit third-party packages
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 5
+      name: audit-third-party-pub-dev
+      task: Audit third-party pub.dev packages for license compliance, maintenance
+        activity, and security vulnerabilities before adoption.
+    - id: 6
+      name: ensure-dependencies-are-installed-cli
+      task: Add project dependencies using official command-line package managers
+        rather than manually modifying configuration files.
+- id: 3
+  goal: Establish repository governance, branching conventions, code review standards,
+    and CI quality gates
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 7
+      name: establish-repository-governance-standardize-branching
+      task: Establish repository governance policies to standardize branching models,
+        enforce peer code reviews, and automate CI quality gates.
+- id: 4
+  goal: Develop custom Dart CLI developer utilities and automation tools
+  persona: The App Developer
+  tasks:
+    - id: 8
+      name: write-dart-cli-tool-generate
+      task: Develop a standalone Dart command-line utility that parses database schema
+        specifications and generates required boilerplate data access code.
+    - id: 9
+      name: write-cli-tool-optimise-csv
+      task: Develop a Dart command-line utility to automate the parsing, validation,
+        and compression of CSV datasets and application resources.
+- id: 5
+  goal: Optimize application release builds for minimal bundle size
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 10
+      name: analyze-size-analyze-size-devtools
+      task: Analyze application bundle composition and asset weight using command-line
+        size analysis tools and Flutter DevTools.
+    - id: 11
+      name: enable-tree-shaking-obfuscation-split
+      task: Configure production build flags to enable code tree shaking, symbol obfuscation,
+        and split debug information.
+    - id: 12
+      name: audit-compress-codebase-assets
+      task: Audit application resources to remove unused assets and compress images
+        and fonts for reduced download size.
+- id: 6
+  goal: Maintain accurate, up-to-date repository documentation and README guides
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 13
+      name: review-update-readme-other-documentation
+      task: Audit and update repository documentation, including README guides and
+        architectural overviews, to align with recent codebase modifications.
+- id: 7
+  goal: Make an application accessible to all users
+  persona: The App Developer
+  tasks:
+    - id: 14
+      name: evaluate-how-app-accessibility-is
+      task: Audit the application using Flutter DevTools and automated accessibility
+        inspection tools to identify compliance gaps.
+    - id: 15
+      name: modify-app-add-semantic-labels
+      task: Refactor UI widgets to include descriptive Semantics properties and screen
+        reader labels for visually impaired users.
+    - id: 16
+      name: modify-app-make-tappable-areas
+      task: Enforce minimum interactive touch target dimensions across all interactive
+        components to meet mobile accessibility standards.
+    - id: 17
+      name: remove-fixed-text-scaler
+      task: Refactor text components to support dynamic system font scaling and remove
+        hardcoded text scale restrictions.
+    - id: 18
+      name: add-high-contrast-color-themes
+      task: Implement high-contrast visual themes and color palettes to support users
+        with visual impairments.
+- id: 8
+  goal: Achieve comprehensive test coverage with unit, widget, and integration test
+    suites
+  persona: The App Developer
+  tasks:
+    - id: 19
+      name: check-existing-test-coverage-percentage
+      task: Analyze current test coverage to identify untested code sections and
+        determine which parts of the application require additional test coverage.
+    - id: 20
+      name: add-app-benchmarking-uses-binding
+      task: Implement automated performance benchmarking using binding.traceAction
+        to measure frame timing and verify that the 90th percentile execution duration
+        remains below defined latency thresholds.
+    - id: 21
+      name: add-flutter-integration-tests-mobile
+      task: Develop end-to-end integration test suites using "package:integration_test"
+        to validate complete user journeys across mobile and web environments.
+- id: 9
+  goal: Diagnose and resolve layout overflow errors in UI component trees
+  persona: The App Developer
+  tasks:
+    - id: 22
+      name: find-real-cause-ui-overflow
+      task: Diagnose and identify the root cause of layout overflow errors in the
+        UI component tree.
+    - id: 23
+      name: fix-overflow-bug-with-proper-widgets
+      task: Refactor the layout using flexible scrolling or bounding widgets to resolve
+        the overflow error.
+    - id: 24
+      name: write-widget-tests-edge-cases
+      task: Implement automated widget tests covering boundary conditions and large
+        data values to prevent regression of layout overflows.
+- id: 10
+  goal: Implement a structured routing and navigation system
+  persona: The App Developer
+  tasks:
+    - id: 25
+      name: set-up-go-router-named
+      task: Configure declarative application routing using "package:go_router", implementing
+        named routes and dynamic URL path parameters.
+    - id: 26
+      name: set-up-go-router-builder
+      task: Integrate "package:go_router_builder" and code generation to manage type-safe
+        route navigation and arguments.
+    - id: 27
+      name: implement-deep-linking-trigger-deep
+      task: Configure platform-specific deep linking schemas and verify that external
+        links navigate correctly to target application screens.
+    - id: 28
+      name: guard-routes-based-auth-state
+      task: Implement redirection guards within the routing configuration to restrict
+        access to authenticated user sessions.
+    - id: 29
+      name: use-navigator-v1-route-does
+      task: Implement imperative navigation using standard Navigator 1.0 APIs for
+        simple internal modal dialogs and screen transitions.
+- id: 11
+  goal: Add a new UI screen to an existing application following established design
+    and architectural patterns
+  persona: The App Developer
+  tasks:
+    - id: 30
+      name: add-new-screen-design-system
+      task: Add a new UI screen to the application that integrates with the existing
+        design system, routing architecture, and standard page structure.
+- id: 12
+  goal: Design responsive UI layouts that reflow cleanly across all window sizes and
+    device orientations
+  persona: The App Developer
+  tasks:
+    - id: 31
+      name: define-central-breakpoints-m3-window
+      task: Define layout breakpoints based on Material Design 3 window size classes,
+        such as using compact layouts for widths under 600 logical pixels.
+    - id: 32
+      name: use-mediaquery-sizeof-window-sizing
+      task: Refactor responsive sizing logic to use MediaQuery.sizeOf for global window
+        dimensions and LayoutBuilder for local widget constraint sizing, removing
+        hardcoded device-type checks.
+    - id: 33
+      name: apply-safearea-notches-insets
+      task: Wrap visual layouts in SafeArea widgets to prevent content from obscuring
+        system status bars, display notches, and physical screen bezels.
+    - id: 34
+      name: don-t-portrait-lock-support
+      task: Configure the application to support both portrait and landscape orientations,
+        verifying smooth UI reflow during device rotation.
+    - id: 35
+      name: cap-content-width-large-windows
+      task: Constrain maximum content width on wide desktop or tablet displays using
+        BoxConstraints or by dynamically transitioning from ListView to GridView layouts.
+    - id: 36
+      name: handle-foldable-letterboxing-support-all
+      task: Optimize layouts for foldable devices and letterboxed display modes across
+        various screen postures and orientations.
+- id: 13
+  goal: Optimize application rendering and memory performance
+  persona: The App Developer
+  tasks:
+    - id: 37
+      name: use-devtools-profile-rendering-performance
+      task: Profile application frame rendering times and rasterization metrics using
+        Flutter DevTools.
+    - id: 38
+      name: hunt-down-memory-leaks
+      task: Diagnose and resolve application memory leaks and retained object graphs
+        using memory profiling tools.
+    - id: 39
+      name: add-renderrepaintboundary-s-widget-tree
+      task: Refactor the widget hierarchy by inserting RenderRepaintBoundary widgets
+        around frequently animating components to isolate repaint regions.
+- id: 14
+  goal: Implement state restoration to preserve user state across application restarts
+  persona: The App Developer
+  tasks:
+    - id: 40
+      name: add-state-restoration-functionality-app
+      task: Implement Flutter state restoration APIs using RestorationManager and
+        RestorationBucket to preserve interface navigation and scroll states across
+        process terminations.
+    - id: 41
+      name: add-hydrated-versions-state-management
+      task: Integrate persistent state management libraries, such as "package:hydrated_bloc",
+        to automatically serialize and restore application state across application
+        restarts.
+- id: 15
+  goal: Implement offline-first data caching and synchronization
+  persona: The App Developer
+  tasks:
+    - id: 42
+      name: add-local-caching-solution-be
+      task: Implement an offline-first repository pattern that caches remote server
+        data locally and synchronizes pending mutations when network connectivity
+        is restored.
+- id: 16
+  goal: Build interactive widget preview catalogs and isolated design system showcases
+  persona: The App Developer
+  tasks:
+    - id: 43
+      name: create-interactive-website-every-widget
+      task: Develop a standalone interactive web catalog showcasing every UI component
+        and visual state available within the component library.
+    - id: 44
+      name: add-widget-previews-for-components
+      task: Implement isolated widget preview configurations using the official Flutter
+        widget previewer tool for all UI components in the application.
+- id: 17
+  goal: Implement a customizable, reusable UI design system
+  persona: The App Developer
+  tasks:
+    - id: 45
+      name: create-totally-custom-design-system
+      task: Build an independent UI design system from scratch without relying on
+        standard Material or Cupertino widget libraries.
+    - id: 46
+      name: customise-material-design-system-fit
+      task: Customize and extend Material Design widgets and styling tokens to implement
+        a proprietary visual design system.
+    - id: 47
+      name: customise-cupertino-design-system-fit
+      task: Customize and extend Cupertino widgets to implement a proprietary iOS-styled
+        visual design system.
+- id: 18
+  goal: Implement a consistent visual design theme and styling across an application
+  persona: The App Developer
+  tasks:
+    - id: 48
+      name: create-theme-data-from-design-document
+      task: Implement application ThemeData configurations derived from specifications
+        in a design document.
+    - id: 49
+      name: add-dark-mode-support
+      task: Implement dark mode theming and color scheme switching.
+    - id: 50
+      name: change-dropdown-popup-buttons-styling
+      task: Customize visual styling for dropdown menus, popup dialogs, and interactive
+        buttons by extending central ThemeData configurations.
+- id: 19
+  goal: Implement custom gesture detection and pointer interactions
+  persona: The App Developer
+  tasks:
+    - id: 51
+      name: create-custom-widget-detects-hover
+      task: Implement a custom interactive component that combines MouseRegion for
+        hover detection with GestureDetector or InkWell for touch and pointer interactions.
+- id: 20
+  goal: Implement custom widget animation states and transitions
+  persona: The App Developer
+  tasks:
+    - id: 52
+      name: create-widget-uses-animationcontrollers-animate
+      task: Develop an explicit animated component using AnimationController to manage
+        custom state transitions and tween animations.
+    - id: 53
+      name: add-tests-confirm-animation-logic
+      task: Implement automated widget tests to verify that animation state machines
+        and value transitions execute correctly.
+    - id: 54
+      name: replace-static-widget-animated-version
+      task: Refactor static UI components to use implicit animation widgets, such
+        as AnimatedContainer and AnimatedOpacity, for smooth state transitions.
+    - id: 55
+      name: use-hero-transition-animations-between
+      task: Implement shared element routing transitions across navigation boundaries
+        using Hero animation widgets.
+- id: 21
+  goal: Integrate rich animated graphics and shaders into an application
+  persona: The App Developer
+  tasks:
+    - id: 56
+      name: use-rive-lottie-or-some
+      task: Integrate animation libraries, such as "package:rive" or "package:lottie",
+        to render rich vector animations within the application.
+    - id: 57
+      name: use-shaders-animate-things-app
+      task: Implement FragmentShaders using GLSL shader programs to render custom
+        GPU-accelerated visual effects and animations.
+- id: 22
+  goal: Integrate interactive data visualization and charting libraries
+  persona: The App Developer
+  tasks:
+    - id: 58
+      name: find-list-available-libraries-charts
+      task: Research available charting libraries on pub.dev and evaluate which packages
+        support the required chart types and features for the use case.
+    - id: 59
+      name: install-chart-library-supports-bar
+      task: Install a third-party charting package that supports interactive bar charts
+        using official command-line tools ("flutter pub add") rather than manually
+        editing configuration files.
+    - id: 60
+      name: implement-library-application-show-chart
+      task: Integrate the charting library into the application dashboard to render
+        interactive data visualizations, implementing automated widget tests to verify
+        chart rendering.
+- id: 23
+  goal: Configure package dependency overrides using Git repositories or local filesystem
+    paths
+  persona: The App Developer
+  tasks:
+    - id: 61
+      name: add-dependency-override-git
+      task: Configure package dependency overrides in "pubspec.yaml" to target a specific
+        remote Git repository and subdirectory path, verifying that all automated
+        tests pass.
+    - id: 62
+      name: add-dependency-override-local
+      task: Configure package dependency overrides in "pubspec.yaml" to link against
+        a local filesystem package path, verifying that all automated tests pass.
+- id: 24
+  goal: Build an application that renders Material UI on Android and Cupertino UI
+    on iOS
+  persona: The App Developer
+  tasks:
+    - id: 63
+      name: create-new-app-android-ios
+      task: Create a new cross-platform Flutter application targeting both Android
+        and iOS.
+    - id: 64
+      name: add-adaptive-material-cupertino-layouts
+      task: Implement navigation layouts that adaptively render Material Design components
+        on Android and Cupertino components on iOS.
+- id: 25
+  goal: Implement performant scrolling layouts for long-form content
+  persona: The App Developer
+  tasks:
+    - id: 65
+      name: identify-overflow-refactor-layout-use
+      task: Diagnose vertical layout overflow errors and refactor the component hierarchy
+        to use SingleChildScrollView.
+    - id: 66
+      name: migrate-customscrollview-slivers-more-complex
+      task: Refactor standard scroll views to use CustomScrollView and Sliver components
+        for advanced scrolling effects and header animations.
+    - id: 67
+      name: have-long-list-items-variate
+      task: Implement programmatic scroll-to-index functionality for variable-height
+        item lists using scroll controllers or item alignment libraries.
+- id: 26
+  goal: Build intuitive, validated user forms with polished input UX
+  persona: The App Developer
+  tasks:
+    - id: 68
+      name: auto-focus-first-invalid-field
+      task: Implement form validation logic that automatically transfers focus to
+        the first invalid input field when a user submits an incomplete form.
+    - id: 69
+      name: add-floating-label-behavior-textfields
+      task: Configure text input fields with floating label behavior and error messaging
+        using InputDecoration properties.
+- id: 27
+  goal: Build an application that communicates with a REST API
+  persona: The App Developer
+  tasks:
+    - id: 70
+      name: fetch-parse-json-http-or
+      task: Implement network calls to fetch and parse JSON payloads from a REST API
+        using "package:http" or "package:dio".
+    - id: 71
+      name: handle-errors-timeouts-loading-states
+      task: Implement robust error handling, network request timeout management, and
+        UI loading state indicators.
+    - id: 72
+      name: get-rid-ui-jank-due
+      task: Offload JSON serialization and deserialization to background worker isolates
+        to prevent main thread stutter and UI frame drops.
+    - id: 73
+      name: if-api-has-spec-use
+      task: Generate type-safe API client code and data models automatically from
+        an OpenAPI specification using code generation tools.
+- id: 28
+  goal: Implement and evaluate state management architectures
+  persona: The App Developer
+  tasks:
+    - id: 74
+      name: use-setstate-manage-state
+      task: Implement application state management using standard StatefulWidget and
+        setState mechanisms.
+    - id: 75
+      name: use-provider-manage-state
+      task: Implement application state management using "package:provider" for dependency
+        injection and reactive updates.
+    - id: 76
+      name: use-riverpod-manage-state-maybe
+      task: Implement application state management using "package:riverpod", optionally
+        incorporating "package:flutter_hooks" and code generation.
+    - id: 77
+      name: use-bloc-cubit-manage-state
+      task: Implement application state management using the Business Logic Component
+        (BLoC) and Cubit patterns from "package:flutter_bloc".
+    - id: 78
+      name: use-hooks-manage-state
+      task: Implement application state management using "package:flutter_hooks" to
+        manage widget lifecycle and local state with composable hook functions.
+    - id: 79
+      name: use-rxdart-manage-state
+      task: Implement stream-based application state management using reactive programming
+        primitives from "package:rxdart".
+- id: 29
+  goal: Implement local data persistence in an application
+  persona: The App Developer
+  tasks:
+    - id: 80
+      name: set-up-shared-preferences-package
+      task: Implement local persistence for simple key-value data and user preferences
+        using "package:shared_preferences".
+    - id: 81
+      name: set-up-sqlite-sqflite-or
+      task: Implement a structured local relational database using "package:sqflite"
+        or "package:drift".
+    - id: 82
+      name: set-up-secure-storage-store
+      task: Implement encrypted local storage for sensitive user data and authentication
+        tokens using "package:flutter_secure_storage".
+    - id: 83
+      name: use-path-provider-locate-application
+      task: Integrate "package:path_provider" to locate platform-specific filesystem
+        directories for application documents and temporary files.
+- id: 30
+  goal: Offload CPU-intensive computation to background isolates to prevent UI freezing
+  persona: The App Developer
+  tasks:
+    - id: 84
+      name: offload-cpu-intensive-work-isolate
+      task: Offload computationally expensive synchronous operations to background
+        worker isolates using Isolate.run.
+    - id: 85
+      name: use-compute-one-shot-tasks
+      task: Execute one-shot background computations using the top-level compute function
+        to prevent UI thread blocking.
+    - id: 86
+      name: set-up-long-lived-isolate
+      task: Implement a long-lived background isolate communicating via ReceivePort
+        and SendPort message passing to handle continuous asynchronous processing.
+- id: 31
+  goal: Adopt code generation tools to reduce boilerplate for models and immutable
+    data classes
+  persona: The App Developer
+  tasks:
+    - id: 87
+      name: set-up-build-runner-json
+      task: Configure "package:build_runner" and "package:json_serializable" to generate
+        type-safe JSON serialization code for data models.
+    - id: 88
+      name: use-freezed-immutable-data-classes
+      task: Integrate "package:freezed" to generate immutable data classes, union
+        types, and value equality boilerplate.
+    - id: 89
+      name: use-build-verify-ci-cd
+      task: Configure automated CI/CD pipelines using "package:build_verify" to ensure
+        generated source code is synchronized with existing data models.
+- id: 32
+  goal: Diagnose and resolve native platform interop bugs and channel communication
+    errors
+  persona: The Plugin Developer
+  tasks:
+    - id: 90
+      name: analyze-codebase-try-find-cause
+      task: Analyze native platform channel implementations and Dart bindings to diagnose
+        the root cause of platform communication failures.
+    - id: 91
+      name: add-debug-logs-perform-test
+      task: Instrument platform interop channels with diagnostic logging and execute
+        test runs to isolate native execution errors.
+    - id: 92
+      name: fix-issue
+      task: Refactor native host code and Dart channel handlers to resolve platform
+        interop exceptions and restore reliable communication.
+- id: 33
+  goal: Design a unified, well-documented cross-platform API surface for plugin consumers
+  persona: The Plugin Developer
+  tasks:
+    - id: 93
+      name: design-intuitive-well-documented-unified
+      task: Design a unified, documented Dart API that abstracts native iOS and Android
+        implementation differences for plugin consumers.
+    - id: 94
+      name: encapsulate-platform-interface-code
+      task: Structure the plugin package to ensure public APIs encapsulate and hide
+        internal platform interface implementations.
+    - id: 95
+      name: generate-html-api-documentation
+      task: Generate HTML API documentation from inline dartdoc comments using command-line
+        tools to verify public API presentation.
+- id: 34
+  goal: Implement automated native platform test suites (XCTest, Espresso, JUnit)
+    to prevent OS upgrade regressions
+  persona: The Plugin Developer
+  tasks:
+    - id: 96
+      name: write-automated-tests-validate-both
+      task: Implement automated test suites validating Dart logic and native implementations
+        using XCTest for iOS and JUnit or Espresso for Android.
+- id: 35
+  goal: Maintain high-quality published packages with rigorous semantic versioning,
+    detailed changelogs, and responsiveness to SDK updates
+  persona: The Plugin Developer
+  tasks:
+    - id: 97
+      name: manage-versions-write-changelogs-get
+      task: Manage semantic versioning, maintain changelogs, achieve high pub.dev
+        quality scores, and publish package releases compatible with current Flutter
+        SDK versions.
+- id: 36
+  goal: Adopt optimal native interop mechanisms (FFI, Pigeon, JS Interop) based on
+    performance and platform requirements
+  persona: The Plugin Developer
+  tasks:
+    - id: 98
+      name: migrate-pigeon-based-platform-channels
+      task: Migrate Pigeon-based platform channels to Foreign Function Interface (FFI)
+        bindings for performance-critical or synchronous native calls.
+    - id: 99
+      name: replace-manual-platform-channel-boilerplate
+      task: Replace manual platform channel boilerplate with type-safe message passing
+        code generated by "package:pigeon".
+    - id: 100
+      name: create-type-safe-bindings-between
+      task: Create type-safe bindings between Dart and JavaScript using "dart:js_interop"
+        and extension types to integrate with browser APIs and external JavaScript
+        libraries.
+    - id: 101
+      name: check-all-resources-used-native
+      task: Ensure native memory allocations (malloc, calloc, FFI structs, OpenGL
+        handles, file descriptors) are properly released using NativeFinalizer and
+        the Finalizable interface.
+- id: 37
+  goal: Extend an existing federated plugin architecture to support a new target platform
+  persona: The Plugin Developer
+  tasks:
+    - id: 102
+      name: add-implementation-new-platform-app
+      task: Implement native platform support for an additional operating system within
+        an existing plugin, verifying that all application-facing integration tests
+        pass.
+    - id: 103
+      name: test-new-plugin-through-app
+      task: Verify the new platform implementation by running automated test suites
+        against the application-facing package.
+    - id: 104
+      name: map-c-language-types-integers
+      task: Map C language data types (integers, structs, and pointers) to "dart:ffi"
+        types, utilizing AbiSpecificInteger for platform-dependent type sizing.
+    - id: 105
+      name: refactor-plugin-split-it-into
+      task: Refactor a monolithic plugin into a federated architecture consisting
+        of separate application-facing, platform interface, and platform implementation
+        packages.
+- id: 38
+  goal: Implement automated cross-platform integration tests for plugins using modern
+    testing frameworks
+  persona: The Plugin Developer
+  tasks:
+    - id: 106
+      name: use-patrol-package-be-able
+      task: Implement automated cross-platform integration tests using "package:patrol"
+        to verify plugin functionality across native environments.
+    - id: 107
+      name: write-ci-cd-pipeline-test
+      task: Configure an automated CI/CD pipeline to execute plugin integration tests
+        on every pull request and prior to release publication.
+    - id: 108
+      name: write-integration-tests-has-100%
+      task: Develop comprehensive integration test suites that achieve full test coverage
+        of native platform plugin functionality.
+- id: 39
+  goal: Implement user authentication flows and UI
+  persona: The Full Stack Developer
+  tasks:
+    - id: 109
+      name: plan-auth-provider-design-system
+      task: Define the architectural requirements, user experience flows, and edge-case
+        handling for application authentication.
+    - id: 110
+      name: code-auth-flow
+      task: Implement secure user authentication and registration workflows connecting
+        the frontend UI to the authentication service.
+    - id: 111
+      name: test-all-auth-flows
+      task: Implement automated unit, widget, and integration test suites to verify
+        all authentication and session management workflows.
+- id: 40
+  goal: Integrate push notification services into an application
+  persona: The Full Stack Developer
+  tasks:
+    - id: 112
+      name: add-firebase-cloud-messaging
+      task: Integrate "package:firebase_messaging" to enable push notifications across
+        mobile and web platforms.
+    - id: 113
+      name: handle-foreground-background-terminated-states
+      task: Implement notification event listeners and handlers for foreground, background,
+        and terminated application lifecycle states.
+- id: 41
+  goal: Integrate third-party authentication providers into an application
+  persona: The Full Stack Developer
+  tasks:
+    - id: 114
+      name: add-google-sign
+      task: Integrate "package:google_sign_in" to enable single sign-on authentication.
+    - id: 115
+      name: handle-sign-sign-out-flows
+      task: Implement complete authentication state machines managing sign-in, sign-out,
+        session persistence, and OAuth token refresh workflows.
+- id: 42
+  goal: Integrate cloud file storage into an application
+  persona: The Full Stack Developer
+  tasks:
+    - id: 116
+      name: add-firebase-storage
+      task: Integrate "package:firebase_storage" into the application to enable cloud
+        storage capabilities.
+    - id: 117
+      name: implement-upload-download-delete
+      task: Implement user flows and repository methods to upload, download, and delete
+        cloud storage files.
+- id: 43
+  goal: Integrate crash reporting, error tracking, and production telemetry
+  persona: The Full Stack Developer
+  tasks:
+    - id: 118
+      name: add-crashlytics
+      task: Integrate Firebase Crashlytics ("package:firebase_crashlytics") to capture
+        and monitor real-time fatal exception reports.
+    - id: 119
+      name: add-custom-log-events-non
+      task: Implement custom error logging and non-fatal exception tracking to record
+        application telemetry and diagnostic metadata.
+- id: 44
+  goal: Integrate AWS Amplify authentication, cloud storage, and backend APIs into
+    an application
+  persona: The Full Stack Developer
+  tasks:
+    - id: 120
+      name: integrate-amplify-auth-+-storage
+      task: Integrate AWS Amplify authentication, cloud storage, and API services
+        into the application architecture.
+- id: 45
+  goal: Integrate Supabase authentication, database services, and real-time subscriptions
+    into an application
+  persona: The Full Stack Developer
+  tasks:
+    - id: 121
+      name: integrate-supabase-auth-database
+      task: Integrate Supabase authentication, relational database services, and real-time
+        data subscriptions into the application architecture.
+- id: 46
+  goal: Build a full-stack Dart web server backend with shared data models between
+    frontend and backend
+  persona: The Full Stack Developer
+  tasks:
+    - id: 122
+      name: create-web-server-shelf
+      task: Develop a backend web server and HTTP API routing layer using "package:shelf".
+    - id: 123
+      name: create-cloud-function-upload-firebase
+      task: Implement server-side logic or Google Cloud Functions to process file
+        uploads and store metadata in Firebase.
+    - id: 124
+      name: decide-best-repo-structure-according
+      task: Design and implement a shared monorepo workspace structure to allow seamless
+        data model reuse between Dart frontend and backend services.
+- id: 47
+  goal: Implement API versioning and backward compatibility checks between frontend
+    applications and backend services
+  persona: The Full Stack Developer
+  tasks:
+    - id: 125
+      name: create-ci-cd-pipeline-confirm
+      task: Configure automated CI/CD deployment pipelines to verify that the target
+        backend API version is active prior to releasing client applications.
+    - id: 126
+      name: create-screen-app-app-version
+      task: Implement a dedicated application deprecation screen that informs users
+        when their client version is no longer supported by backend API services.
+- id: 48
+  goal: Develop Google Cloud Functions in Dart using the Genkit SDK
+  persona: The Full Stack Developer
+  tasks:
+    - id: 127
+      name: write-google-cloud-function-dart
+      task: Develop and deploy serverless Google Cloud Functions written in Dart using
+        the Genkit framework ("package:genkit").
+- id: 49
+  goal: Add internationalization (i18n) and localization (l10n) support to an application
+  persona: The App Developer
+  tasks:
+    - id: 128
+      name: add-required-languages-locales-app
+      task: Configure supported languages and regional locales within the application
+        localization settings.
+    - id: 129
+      name: confirm-default-flutter-ways-i18n
+      task: Verify that the codebase implements standard Flutter internationalization
+        practices using ARB files and generated localization delegates.
+- id: 50
+  goal: Embed interactive Flutter applications and widgets within existing HTML or
+    React web pages
+  persona: The Hybrid (Native + Flutter) Developer
+  tasks:
+    - id: 130
+      name: create-website-jaspr
+      task: Build a server-rendered or static website in Dart using the Jaspr web
+        framework ("package:jaspr").
+    - id: 131
+      name: add-flutter-app-react-app
+      task: Embed a compiled Flutter web application as an interactive component within
+        an existing React web application.
+    - id: 132
+      name: add-many-flutter-widgets-across
+      task: Embed multiple interactive Flutter widgets across a standard HTML web
+        page, utilizing Flutter multi-view mode to optimize rendering performance
+        and resource consumption.
+- id: 51
+  goal: Integrate Flutter modules into existing native Android and iOS applications
+    using Add-to-app
+  persona: The Hybrid (Native + Flutter) Developer
+  tasks:
+    - id: 133
+      name: add-flutter-engine-view-android
+      task: Integrate a cached FlutterEngine and FlutterActivity into an existing
+        native Android application using Flutter Add-to-app workflows.
+    - id: 134
+      name: add-flutter-engine-view-ios
+      task: Integrate a cached FlutterEngine and FlutterViewController into an existing
+        native iOS application using Flutter Add-to-app workflows.
+- id: 52
+  goal: Implement seamless cross-layer navigation and state synchronization between
+    native host apps and embedded Flutter modules
+  persona: The Hybrid (Native + Flutter) Developer
+  tasks:
+    - id: 135
+      name: cache-pre-warm-flutter-engine
+      task: Configure native host applications to pre-warm and cache the FlutterEngine
+        during application startup to eliminate initialization latency.
+    - id: 136
+      name: manage-complex-navigation-stacks-where
+      task: Implement bidirectional navigation stacks where users transition between
+        native Swift screens and embedded Flutter modules, ensuring native gesture
+        back-swipes behave naturally.
+    - id: 137
+      name: securely-pass-active-user-session
+      task: Synchronize active session tokens, visual theme preferences, and user
+        state from the host native application into embedded Flutter modules to provide
+        a seamless user experience.
+- id: 53
+  goal: Build platform-specific home screen widgets (for iOS WidgetKit and Android)
+    that share data with the host application
+  persona: The Hybrid (Native + Flutter) Developer
+  tasks:
+    - id: 138
+      name: set-up-home-screen-widget
+      task: Scaffold and configure native home screen widget extensions for iOS using
+        WidgetKit and for Android using AppWidgets.
+    - id: 139
+      name: share-data-between-flutter-app
+      task: Implement shared local storage using App Groups on iOS and SharedPreferences
+        on Android to synchronize data between the Flutter application and native
+        widgets.
+    - id: 140
+      name: update-widget-data-flutter
+      task: Trigger programmatic background updates and timeline reloads for native
+        home screen widgets directly from Dart application logic.
+- id: 54
+  goal: Identify and refactor architectural anti-patterns in the codebase
+  persona: The App Developer
+  tasks:
+    - id: 141
+      name: analyze-codebase-anti-patterns
+      task: Analyze the codebase to identify and refactor architectural anti-patterns,
+        such as building complex widget trees inside helper methods rather than separate
+        widget classes.
+- id: 55
+  goal: Audit and migrate codebases away from deprecated frameworks, libraries, and
+    SDK APIs
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 142
+      name: analyze-codebase-deprecated-api
+      task: Analyze the codebase to identify and migrate deprecated API usage, including
+        Material Design 2 components, direct window references in "dart:ui", and legacy
+        ThemeData styling properties.
+- id: 56
+  goal: Automate multi-flavor application build, configuration, and distribution pipelines
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 143
+      name: config-flavors-app-different-naming
+      task: Configure multi-flavor build schemes across iOS and Android to support
+        distinct application names, bundle identifiers, and launcher icons for staging
+        and production environments.
+    - id: 144
+      name: write-ci-cd-pipeline-deploy
+      task: Implement an automated CI/CD distribution pipeline to build and deploy
+        application binaries to internal testing tracks or distribution services.
+- id: 57
+  goal: Upgrade and migrate legacy Flutter applications to the latest SDK version
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 145
+      name: audit-and-upgrade-flutter-sdk
+      task: Audit the local Flutter SDK installation and upgrade safely using version
+        management tools ("fvm") or system package managers.
+    - id: 146
+      name: run-dart-fix-migration-tool
+      task: Execute "dart fix" to update deprecated syntax and resolve breaking API
+        changes across the codebase.
+- id: 58
+  goal: Extend an existing application to support an additional target platform
+  persona: The Tech Lead / Architect
+  tasks:
+    - id: 147
+      name: analyze-repo-check-which-features
+      task: Audit existing codebase capabilities and third-party plugins to determine
+        feature compatibility with the target platform.
+    - id: 148
+      name: verify-proper-command-is-used
+      task: Execute official platform scaffolding commands to generate target platform
+        projects and verify dependency compatibility.
+- id: 59
+  goal: Implement new application features utilizing modern language capabilities
+    and defensive coding practices
+  persona: The App Developer
+  tasks:
+    - id: 149
+      name: verify-assert-calls-all-passed
+      task: Enforce defensive coding by adding runtime assert statements to validate
+        constructor and function parameter boundaries.
+    - id: 150
+      name: use-record-structure-type-function
+      task: Refactor function signatures to return structured, type-safe multiple
+        values using modern Dart Record types.
+- id: 60
+  goal: Implement custom canvas drawing and custom painters for specialized UI components
+  persona: The App Developer
+  tasks:
+    - id: 151
+      name: create-widget-displays-custom-pattern
+      task: Implement a custom component utilizing CustomPaint and Canvas primitives
+        to render specialized graphics above or below child widget layers.
+- id: 61
+  goal: Design and develop a new cross-platform plugin from scratch, selecting the
+    appropriate native interop mechanism
+  persona: The Plugin Developer
+  tasks:
+    - id: 152
+      name: investigate-should-ffi-or-methodchannels
+      task: Evaluate whether Foreign Function Interface (FFI) bindings or asynchronous
+        MethodChannels provide the optimal architectural foundation for a new cross-platform
+        plugin.
+- id: 62
+  goal: Set up and configure a complete cross-platform Flutter development environment
+  persona: The App Developer
+  tasks:
+    - id: 153
+      name: install-configure-xcode-command-line
+      task: Install and configure Xcode, command-line tools, and CocoaPods on a macOS
+        development environment to compile for all supported Flutter target platforms.
+    - id: 154
+      name: sets-up-windows-environment-flutter
+      task: Set up and configure a Windows development environment for Flutter with
+        necessary dependencies to compile for all supported non-Apple target platforms.
+    - id: 155
+      name: sets-up-linux-environment-flutter
+      task: Set up and configure a Linux development environment for Flutter with
+        necessary dependencies to compile for all supported non-Apple target platforms.
+- id: 63
+  goal: Build a responsive Flutter Web frontend for an Enterprise Resource Planning
+    (ERP) system
+  persona: The App Developer
+  tasks:
+    - id: 156
+      name: create-flutter-web-app-has
+      task: Develop a responsive Flutter web frontend that dynamically adapts between
+        desktop browser layouts and mobile web layouts.
+    - id: 157
+      name: use-proper-url-path-strategy
+      task: Configure the web URL routing strategy (hash-based or path-based) according
+        to target web hosting platform requirements.
+    - id: 158
+      name: use-wasm-if-possible
+      task: Configure the web build pipeline to compile to WebAssembly (Wasm) for
+        high-performance browser execution.
+    - id: 159
+      name: use-pwa-web-app-if
+      task: Configure Progressive Web App (PWA) manifest and service worker features
+        to enable offline support and desktop installation.
+    - id: 160
+      name: use-package:web-dart:js-interop-interact
+      task: Implement browser API integrations and JavaScript interop using "package:web"
+        and modern Dart type-safe JS interop mechanisms.
+- id: 64
+  goal: Build adaptive UI layouts that dynamically adjust to platform conventions
+    and input methods (touch, mouse, keyboard, stylus)
+  persona: The App Developer
+  tasks:
+    - id: 161
+      name: switch-nav-window-size:-bottom
+      task: Implement adaptive navigation that transitions between a bottom navigation
+        bar on compact screens and a side NavigationRail on expanded displays, sharing
+        routing destinations.
+    - id: 162
+      name: target-android-tier-3-mouse
+      task: Optimize the interface for mouse and stylus input by utilizing Material
+        Design 3 components with built-in hover and focus states.
+    - id: 163
+      name: scroll-wheel-custom-scrollables-listener
+      task: Refactor custom scrollable components using Listener widgets to support
+        mouse scroll wheel and trackpad navigation.
+    - id: 164
+      name: tab-traversal-+-visible-focus
+      task: Implement keyboard tab navigation and visible focus highlights on custom
+        interactive components using FocusableActionDetector and FocusTraversalGroup.
+    - id: 165
+      name: keyboard-shortcuts-shortcuts-actions-disable
+      task: Configure application-wide keyboard shortcuts using Shortcuts and Actions
+        widgets, ensuring shortcuts are disabled during text input.
+    - id: 166
+      name: visualdensity-switched-input-mode-hit
+      task: Adjust widget VisualDensity dynamically based on active input mode to
+        optimize touch target sizes versus mouse precision sizing.
+- id: 65
+  goal: Migrate application architecture between state management solutions
+  persona: The App Developer
+  tasks:
+    - id: 167
+      name: replace-setstate-riverpod
+      task: Refactor the codebase to use "package:riverpod" rather than StatefulWidgets.
+    - id: 168
+      name: replace-setstate-provider
+      task: Refactor the codebase to use "package:provider" rather than StatefulWidgets.
+    - id: 169
+      name: replace-inheritedwidget-provider
+      task: Refactor the codebase to use "package:provider" rather than custom InheritedWidgets.
+    - id: 170
+      name: replace-provider-riverpod
+      task: Migrate existing state management from "package:provider" to "package:riverpod".
+    - id: 171
+      name: replace-provider-bloc
+      task: Migrate existing state management from "package:provider" to the BLoC
+        ("package:flutter_bloc") architecture.
+    - id: 172
+      name: replace-setstate-rxdart
+      task: Refactor the codebase to manage reactive state using "package:rxdart"
+        rather than StatefulWidgets.
+- id: 66
+  goal: Diagnose, debug, and resolve runtime exceptions and network defects
+  persona: The App Developer
+  tasks:
+    - id: 173
+      name: reproduce-reported-defect-failing-test
+      task: Reproduce a reported defect in a failing test, then trace the root cause
+        using the Dart debugger and Flutter DevTools.
+    - id: 174
+      name: fix-common-runtime-exceptions
+      task: Diagnose and resolve common runtime exceptions (null errors, late init
+        failures, RangeErrors, invalid setState calls).
+    - id: 175
+      name: diagnose-fix-failed-network-request
+      task: Diagnose and resolve failed HTTP requests (non-200 status codes, timeouts,
+        JSON deserialization failures).
+- id: 67
+  goal: Refactor application code to improve modularity, component reusability, and
+    architectural maintainability
+  persona: The App Developer
+  tasks:
+    - id: 176
+      name: extract-repeated-widget-code-into
+      task: Extract repeated widget trees into reusable components and consolidate
+        shared colors, spacing, and text styles into central theme constants.
+    - id: 177
+      name: split-large-dart-class-into
+      task: Refactor large Dart classes into smaller units, separating business logic
+        from widget presentation.
+    - id: 178
+      name: extract-shared-ui-logic-into-mixins
+      task: Extract shared UI behavior and state logic into reusable Dart mixins.
+- id: 68
+  goal: Call native platform APIs directly using MethodChannel and EventChannel implementations
+    on Android and iOS
+  persona: The App Developer
+  tasks:
+    - id: 179
+      name: call-one-shot-native-method
+      task: Implement one-shot communication between Dart and native platforms via
+        MethodChannel (e.g., reading battery level or triggering haptic feedback),
+        writing handlers in Kotlin for Android and Swift for iOS.
+    - id: 180
+      name: stream-continuous-native-events-into
+      task: Stream continuous native events into Dart via EventChannel (e.g., sensor
+        data or network connectivity state).
diff --git a/sites/docs/src/data/flutterbench.yml b/sites/docs/src/data/flutterbench.yml
new file mode 100644
index 00000000000..080cedd179e
--- /dev/null
+++ b/sites/docs/src/data/flutterbench.yml
@@ -0,0 +1,372 @@
+# Copyright 2025 The Flutter Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+cuj_example:
+  - label: "User"
+    icon: "person"
+    variant: "grey"
+    items:
+      - "As an application developer"
+  - label: "Goal"
+    icon: "star"
+    variant: "blue"
+    items:
+      - "I want to resolve layout overflow errors in UI component trees"
+  - label: "Tasks"
+    icon: "apps"
+    variant: "purple"
+    items:
+      - "I use the error messaging to identify widgets causing the layout overflow in the widget tree."
+      - "I refactor the layout using flexible scrolling or bounding widgets to resolve the overflow error."
+      - "Implement widget tests to prevent regressions."
+
+task_specifications:
+  - id: "structure"
+    title: "Task Structure"
+    icon: "schema"
+    expanded: true
+    description: "Directory layout, instructions, environments, and verification criteria."
+    lead_text: "Each task lives in its own directory and contains four elements:"
+    tables:
+      - headers: ["Element", "Description"]
+        rows:
+          - label: "Instruction"
+            description: "A realistic prompt written the way developers talk to agents (typically 1–2 sentences, behavior-focused rather than prescriptive)."
+          - label: "Target codebase & environment"
+            description: "A containerized Docker environment preseeded with a Dart or Flutter codebase, testing greenfield generation or existing codebases with bugs or debt."
+          - label: "Verification criteria"
+            description: "Verification scripts (`tests/graders.dart` and `test.sh`) executing `package:eval_scoring`."
+          - label: "Configuration & metadata"
+            description: "The `task.toml` configuration defining associated CUJs, priority tiers, expected skills, and MCP tools."
+  - id: "categories"
+    title: "Task Categories"
+    icon: "category"
+    expanded: false
+    description: "Primary agent capabilities and workflows evaluated across benchmarks."
+    lead_text: "Tasks are categorized by the primary agent capability being evaluated:"
+    tables:
+      - headers: ["Category", "Description"]
+        rows:
+          - label: "Greenfield generation"
+            description: "Creating new features or applications from scratch."
+          - label: "Hill climbing"
+            description: "Iterative debugging, test repair, and multi-turn problem-solving."
+          - label: "Refactoring"
+            description: "Restructuring existing code while maintaining functionality."
+          - label: "Migration"
+            description: "Upgrading deprecated APIs or transitioning between architectural patterns."
+          - label: "Integration"
+            description: "Adding platform-specific features, native plugins, or third-party packages."
+  - id: "tiers"
+    title: "Task Tiers & Prioritization"
+    icon: "layers"
+    expanded: false
+    description: "Execution cadences and priority levels balancing coverage and speed."
+    lead_text: "To balance comprehensive coverage with evaluation speed, tasks are organized into execution tiers and priorities:"
+    tables:
+      - title: "Execution tiers"
+        headers: ["Tier", "Description"]
+        rows:
+          - label: "Tier 1"
+            description: "Core benchmark tasks executed monthly across the complete evaluation matrix."
+          - label: "Tier 2"
+            description: "Maturing tasks slated to graduate into Tier 1 once calibrated."
+          - label: "Tier 3"
+            description: "Experimental tasks used for ad-hoc investigations and targeted questions."
+      - title: "Task priority"
+        headers: ["Priority", "Description"]
+        rows:
+          - label: "P0"
+            description: "Critical production workflows and high-frequency productivity tasks"
+          - label: "P1"
+            description: "Core functionality and API consistency verification"
+          - label: "P2"
+            description: "Standard features and application maturity tasks"
+          - label: "P3"
+            description: "Edge cases and cosmetic polish"
+  - id: "qa"
+    title: "Quality Assurance"
+    icon: "verified"
+    expanded: false
+    description: "Engineering audits and human reviewer calibration for dataset integrity."
+    lead_text: "Before a task graduates into the core benchmark suite, it undergoes an engineering audit. Human reviewers inspect initial trial runs and label results as:"
+    tables:
+      - headers: ["Audit label", "Definition"]
+        rows:
+          - label: "True positive"
+            description: "Agent correctly passed the task."
+          - label: "True negative"
+            description: "Agent correctly failed the task."
+          - label: "False positive"
+            description: "Agent passed incorrectly due to overly lenient checks."
+          - label: "False negative"
+            description: "Agent failed incorrectly due to brittle or flaky tests."
+    footer_text: "This process ensures that the dataset produces reliable, actionable signals rather than noise."
+
+evaluation_matrix:
+  title: "4-Axis Evaluation Matrix"
+  description: "Select an evaluation axis to explore its configurations, supported targets, and methodology."
+  axes:
+    - id: "configurations"
+      tab_label: "1. Configurations"
+      tab_sublabel: "Tooling Modes"
+      heading: "Axis 1: Tooling Configurations"
+      badge: "3 Setups"
+      variant: "functional"
+      overview: "FlutterBench tests three configurations to isolate the impact of specialized Dart and Flutter AI tools (skills, MCP tools, compiler diagnostics, and sandboxes)."
+      items_label: "Configurations Tested:"
+      items:
+        - label: "Baseline"
+          detail: "No specialized Dart or Flutter tools loaded — tests raw model capability and baseline reasoning."
+        - label: "Enhanced"
+          detail: "Full suite of Dart and Flutter skills, MCP server tools, and compiler diagnostics loaded."
+        - label: "Enhanced Minus N"
+          detail: "Full suite with a specific tool or skill group ablated to measure its isolated delta."
+      footer_text: "This A/B testing approach isolates whether adding specific tools (such as widget inspection or analyzer fixes) measurably improves task success rates."
+
+    - id: "models"
+      tab_label: "2. Frontier Models"
+      tab_sublabel: "Model Families"
+      heading: "Axis 2: Frontier Model Families"
+      badge: "3 Families"
+      variant: "quality"
+      overview: "Evaluations span major frontier model families across high-capability reasoning tiers and low-latency production tiers."
+      items_label: "Model Families Evaluated:"
+      items:
+        - label: "Gemini"
+          detail: "Evaluated across Gemini Pro (deep reasoning and complex architecture) and Gemini Flash (low-latency generation) tiers."
+        - label: "Claude"
+          detail: "Evaluated across Claude Opus (heavy multi-file refactoring) and Claude Sonnet (daily developer workflows)."
+        - label: "ChatGPT"
+          detail: "Evaluated across the GPT-4o series and specialized reasoning checkpoints."
+      footer_text: "Additional providers and local open-weights models are integrated continuously based on community feedback and developer adoption."
+
+    - id: "harnesses"
+      tab_label: "3. Agent Harnesses"
+      tab_sublabel: "CLI Runtimes"
+      heading: "Axis 3: Agent Runtime Harnesses"
+      badge: "2 Harnesses"
+      variant: "dx"
+      overview: "Different agents employ distinct system prompts, context management techniques, and tool-loading strategies. We evaluate the CLI agents Flutter developers use most."
+      items_label: "Agent Harnesses Tested:"
+      items:
+        - label: "Antigravity CLI"
+          detail: "Google's developer agent harness featuring optimized tool discovery, compact context budgets, and deep IDE integration."
+        - label: "Claude Code"
+          detail: "Anthropic's terminal-based agent harness with autonomous multi-turn problem-solving capabilities."
+      footer_text: "Testing across multiple harnesses isolates model intelligence from agent runtime orchestration, measuring how execution environments influence success."
+
+    - id: "sdks"
+      tab_label: "4. SDK Branches"
+      tab_sublabel: "Release Channels"
+      heading: "Axis 4: SDK Release Channels"
+      badge: "2 Channels"
+      variant: "perfect"
+      overview: "Evaluations run against both Flutter release channels to verify developer-ready reliability and detect framework regressions early."
+      items_label: "Release Channels Tracked:"
+      items:
+        - label: "Stable"
+          detail: "The current production SDK release — measures developer-ready reliability on the version used by most teams."
+        - label: "Beta"
+          detail: "Monthly beta releases — catches deprecation migrations, API evolutions, and analyzer changes before stable rollout."
+      footer_text: "Ensures AI tooling and skills maintain precision as the Flutter framework and Dart language evolve."
+
+dimensions:
+  - title: "1. Outcome"
+    icon: "check_circle"
+    category: "outcome"
+    description: "Evaluates whether the generated code compiles, runs, and fulfills all functional UI and task requirements correctly."
+    footer_items: "Build, Tests, Visual, Heuristics"
+    badge: "Functional"
+  - title: "2. Code Quality"
+    icon: "code"
+    category: "quality"
+    description: "Measures code maintainability, static analysis lints, architectural health, and idiomatic Dart 3 standards."
+    footer_items: "Lints, DCM, Structure, Patterns"
+    badge: "Maintainable"
+  - title: "3. Developer Experience"
+    icon: "bolt"
+    category: "dx"
+    description: "Tracks agent execution friction, tool call accuracy, error recovery loops, and step efficiency."
+    footer_items: "Tooling, Trajectory, Recovery"
+    badge: "Efficiency"
+
+grader_matrix:
+  title: "Grader Matrix"
+  description: "Explore deterministic, LLM-as-a-judge, and heuristic evaluation graders."
+  filters:
+    - id: "all"
+      label: "All Graders"
+    - id: "outcome"
+      label: "Outcome"
+    - id: "quality"
+      label: "Quality"
+    - id: "dx"
+      label: "DX"
+  graders:
+    - name: "Build & Run"
+      category: "outcome"
+      category_label: "Outcome"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Binary pass/fail checking if code compiles and launches cleanly."
+    - name: "Unit & Widget Testing"
+      category: "outcome"
+      category_label: "Outcome"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Executes test suites and scores passing test ratio across affected code."
+    - name: "Visual Validation"
+      category: "outcome"
+      category_label: "Outcome"
+      type: "llm"
+      type_label: "LLM-as-Judge"
+      description: "Compares DevTools screenshot captures against visual UI expectations."
+    - name: "Task Heuristics"
+      category: "outcome"
+      category_label: "Outcome"
+      type: "heuristic"
+      type_label: "Heuristic"
+      description: "Task-specific checks verifying dependency additions, required config, and files."
+    - name: "Static Analysis"
+      category: "quality"
+      category_label: "Quality"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Runs `dart analyze` enforcing strict project lint rules."
+    - name: "Dart Code Metrics (DCM)"
+      category: "quality"
+      category_label: "Quality"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Detects dead code, widget complexity, undisposed controllers, and memory leaks."
+    - name: "Idiomatic Dart Review"
+      category: "quality"
+      category_label: "Quality"
+      type: "llm"
+      type_label: "LLM-as-Judge"
+      description: "Evaluates modern Dart 3 pattern compliance and adherence to Effective Dart."
+    - name: "Structural Validation"
+      category: "quality"
+      category_label: "Quality"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Verifies directory structure, naming conventions, and required file placement."
+    - name: "Tool Usage Analysis"
+      category: "dx"
+      category_label: "DX"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Checks whether appropriate MCP tools and CLI utilities were called effectively."
+    - name: "Step & Token Economy"
+      category: "dx"
+      category_label: "DX"
+      type: "deterministic"
+      type_label: "Deterministic"
+      description: "Measures trajectory length, token burn, and redundant execution steps."
+    - name: "Error Recovery"
+      category: "dx"
+      category_label: "DX"
+      type: "llm"
+      type_label: "LLM-as-Judge"
+      description: "Rates how fluidly the agent adapts to compiler, analysis, and test errors."
+
+reliability:
+  cards:
+    - tag: "Ceiling Metric"
+      math_pill: "pass@k"
+      title: "Capability"
+      is_north_star: false
+      description_parts:
+        - text: "The probability that an agent succeeds "
+        - em: "at least once"
+        - text: " across "
+        - strong: "k"
+        - text: " attempts. Shows what the model can achieve under ideal sample runs."
+    - tag: "Our North Star"
+      tag_icon: "star"
+      math_pill: "pass^k"
+      title: "Consistency"
+      is_north_star: true
+      description_parts:
+        - text: "The probability that an agent succeeds "
+        - em: "every single time"
+        - text: " across all "
+        - strong: "k"
+        - text: " attempts. Solves unreliability friction for real developer workflows."
+
+score_triage:
+  title: "Score Triage & Action Matrix"
+  description: "Select a score range to view its criteria and immediate engineering triage actions."
+  tiers:
+    - id: "perfect"
+      score: "1.00"
+      name: "Perfect Success"
+      heading: "Score 1.00 — Perfect Success"
+      badge: "Criteria & Triage"
+      criteria: "Code compiles, runs, and passes all unit and widget tests. Zero analyzer or DCM warnings. Idiomatic Dart 3 and flawless DX."
+      actions_label: "Engineering Triage Actions:"
+      actions:
+        - label: "Telemetry check"
+          detail: "Validate whether all expected tools were utilized."
+        - label: "Skip optimization"
+          detail: "If expected tools were skipped successfully, re-evaluate if the tool is redundant."
+        - label: "Token burn review"
+          detail: "If token consumption was high, optimize prompt context and create fast-path shortcut tools."
+    - id: "functional"
+      score: "0.75 – 0.99"
+      name: "Minor Flaws"
+      heading: "Score 0.75 – 0.99 — Minor Flaws"
+      badge: "Criteria & Triage"
+      criteria: "Code works and functional tests pass, but exhibits minor lint warnings, slightly unidiomatic patterns, or minor DX friction."
+      actions_label: "Engineering Triage Actions:"
+      actions:
+        - label: "Prompt tuning"
+          detail: "Tune skill prompt instructions for better Dart 3 style enforcement."
+        - label: "Schema refinement"
+          detail: "Refine tool parameter schemas and validation logic to prevent minor parameter retry hiccups."
+        - label: "Model collaboration"
+          detail: "Collaborate with model team to polish code generation formatting."
+    - id: "partial"
+      score: "0.50 – 0.74"
+      name: "Partial Success"
+      heading: "Score 0.50 – 0.74 — Partial Success"
+      badge: "Criteria & Triage"
+      criteria: "Core requirements work but some widget or unit tests fail, lint warnings are significant, or the agent entered noticeable recovery loops."
+      actions_label: "Engineering Triage Actions:"
+      actions:
+        - label: "Assertion triage"
+          detail: "Investigate specific test assertion failures."
+        - label: "Context gap analysis"
+          detail: "Analyze whether the agent lacked key framework or package context."
+        - label: "Diagnostic feedback"
+          detail: "Refine compiler diagnostic feedback to help the agent self-correct faster."
+    - id: "poor"
+      score: "0.25 – 0.49"
+      name: "Poor Implementation"
+      heading: "Score 0.25 – 0.49 — Poor Implementation"
+      badge: "Criteria & Triage"
+      criteria: "Fails to compile, ignores constraints, or encountered severe developer experience breakdown during execution."
+      actions_label: "Engineering Triage Actions:"
+      actions:
+        - label: "Tool discoverability"
+          detail: "If expected tools were ignored, fix tool discoverability, frontmatter, and prompt instructions."
+        - label: "Tool output clarity"
+          detail: "If tools were used but failed, improve helper tool output clarity and error messaging."
+        - label: "Loop prevention"
+          detail: "If token burn was high due to endless fix loops, improve compiler errors for single-step healing."
+    - id: "failure"
+      score: "0.00"
+      name: "Total Failure"
+      heading: "Score 0.00 — Total Failure"
+      badge: "Criteria & Triage"
+      criteria: "No working code produced, severe runtime crash, or agent caught in an infinite loop."
+      actions_label: "Engineering Triage Actions:"
+      actions:
+        - label: "Human root-cause audit"
+          detail: "Engineers inspect reasoning traces, plan adherence, and test harness logs."
+        - label: "Behavior categorization"
+          detail: "Identify premature surrender versus infinite loop traps."
+        - label: "Constraint refinement"
+          detail: "Update benchmark task prompt constraints and bounding parameters."
diff --git a/sites/docs/src/data/sidenav/default.yml b/sites/docs/src/data/sidenav/default.yml
index db4bb5a1d64..8617995b443 100644
--- a/sites/docs/src/data/sidenav/default.yml
+++ b/sites/docs/src/data/sidenav/default.yml
@@ -664,8 +664,16 @@
       permalink: /ai/ai-rules
     - title: Developer experience
       permalink: /ai/best-practices/developer-experience
-    - title: "AI evaluations (experimental)"
-      permalink: /ai/evals
+
+- title: Flutter Bench
+  permalink: /ai/flutter-bench
+  children:
+    - title: Overview
+      permalink: /ai/flutter-bench
+    - title: Methodology
+      permalink: /ai/flutter-bench/methodology
+    - title: User journeys
+      permalink: /ai/flutter-bench/cujs
 
 - title: Build AI-powered apps
   permalink: /ai/genui
@@ -958,4 +966,3 @@
           permalink: /reference/flutter-cli
         - title: API docs
           permalink: https://api.flutter.dev
-
diff --git a/sites/docs/web/assets/images/docs/ai/flutter-bench/cuj-chart.png b/sites/docs/web/assets/images/docs/ai/flutter-bench/cuj-chart.png
new file mode 100644
index 00000000000..793dfbf629d
Binary files /dev/null and b/sites/docs/web/assets/images/docs/ai/flutter-bench/cuj-chart.png differ
diff --git a/sites/docs/web/assets/images/docs/ai/flutter-bench/scoring-chart.png b/sites/docs/web/assets/images/docs/ai/flutter-bench/scoring-chart.png
new file mode 100644
index 00000000000..22193468095
Binary files /dev/null and b/sites/docs/web/assets/images/docs/ai/flutter-bench/scoring-chart.png differ
diff --git a/sites/www/content/blog/flutter-bench-prologue/index.md b/sites/www/content/blog/flutter-bench-prologue/index.md
new file mode 100644
index 00000000000..a697f658088
--- /dev/null
+++ b/sites/www/content/blog/flutter-bench-prologue/index.md
@@ -0,0 +1,11 @@
+---
+title: "FlutterBench"
+description: >-
+  An introduction to the new FlutterBench project.
+publishDate: 2026-08-20
+author: ericwindmill
+category: deep-dive
+layout: blog
+---
+
+Hello.
\ No newline at end of file
diff --git a/sites/www/lib/src/pages/home_page.dart b/sites/www/lib/src/pages/home_page.dart
index 0778b472681..d03c6a28d6f 100644
--- a/sites/www/lib/src/pages/home_page.dart
+++ b/sites/www/lib/src/pages/home_page.dart
@@ -214,8 +214,7 @@ class HomePage extends StatelessComponent {
                     ]),
                     a(
                       classes: 'btn',
-                      href:
-                          'https://dartpad.dev/?id=e66e420f2f0201c772f73819711bf290',
+                      href: 'https://dartpad.dev/?id=e66e420f2f0201c772f73819711bf290',
                       attributes: {'target': '_blank'},
                       [.text('Try it in DartPad')],
                     ),
@@ -257,8 +256,7 @@ class HomePage extends StatelessComponent {
                     ]),
                     a(
                       classes: 'btn',
-                      href:
-                          'https://dartpad.dev/?id=bbd3f10c2593f0add04dd770318b33f7',
+                      href: 'https://dartpad.dev/?id=bbd3f10c2593f0add04dd770318b33f7',
                       attributes: {'target': '_blank'},
                       [.text('Try it in DartPad')],
                     ),
@@ -299,8 +297,7 @@ class HomePage extends StatelessComponent {
                     ]),
                     a(
                       classes: 'btn',
-                      href:
-                          'https://dartpad.dev/?id=1ab1b78a18039bbbd5cfbb4b835b5b8d',
+                      href: 'https://dartpad.dev/?id=1ab1b78a18039bbbd5cfbb4b835b5b8d',
                       attributes: {'target': '_blank'},
                       [.text('Try it in DartPad')],
                     ),