{
  "categories": {
    "version": 1,
    "generated_for": "361 curated links in data/links-compact.txt",
    "rules": {
      "levels": 2,
      "primary_category_per_entry": 1,
      "max_share_of_collection": 0.18,
      "largest_category": "component-libraries (52 entries, 14.4%)"
    },
    "categories": [
      {
        "slug": "component-libraries",
        "name": "Component Libraries",
        "description": "Copy-paste and installable UI component sets — the shadcn registry ecosystem, React libraries, headless primitives, and the odd native or cross-framework kit.",
        "agent_hint": "Look here first when you must write actual interface code and want a real component (button, table, combobox, editor, map, upload) instead of inventing markup.",
        "icon_hint": "puzzle",
        "estimated_count": 52,
        "subcategories": [
          {
            "slug": "shadcn-registries",
            "name": "shadcn Registries",
            "description": "Registries and registry explorers you install from with the shadcn CLI, plus the registry directories that index them."
          },
          {
            "slug": "react-component-libraries",
            "name": "React Component Libraries",
            "description": "General-purpose React and Tailwind component sets that ship a broad catalog of interface elements."
          },
          {
            "slug": "headless-primitives",
            "name": "Headless Primitives",
            "description": "Unstyled, accessibility-first building blocks that you style yourself."
          },
          {
            "slug": "integration-components",
            "name": "Integration & Data Components",
            "description": "Components tied to a service or a data problem — auth, uploads, search, maps, rich text, diffs, URL state."
          },
          {
            "slug": "cross-framework-and-native",
            "name": "Native & Cross-Framework",
            "description": "Component sets outside the React-web default: React Native, Vue, Svelte, Solid, terminal, and desktop toolkits."
          }
        ]
      },
      {
        "slug": "blocks-templates-themes",
        "name": "Blocks, Templates & Themes",
        "description": "Page-level building material — marketing sections, full site templates and starters, admin kits, and drop-in visual themes for an existing component system.",
        "agent_hint": "Look here when the unit of work is a whole page or a whole look — a landing page, a dashboard shell, a project starter, or a theme swap — not a single component.",
        "icon_hint": "layout-template",
        "estimated_count": 27,
        "subcategories": [
          {
            "slug": "page-blocks",
            "name": "Page Blocks & Sections",
            "description": "Pre-built hero, pricing, feature, and footer sections you assemble into marketing pages."
          },
          {
            "slug": "templates-and-starters",
            "name": "Templates & Starters",
            "description": "Complete site templates and preconfigured project starters, free and paid."
          },
          {
            "slug": "dashboard-kits",
            "name": "Dashboards & App Kits",
            "description": "Admin panels, dashboard layouts, and SaaS app shells wired to common back ends."
          },
          {
            "slug": "themes-and-style-packs",
            "name": "Themes & Style Packs",
            "description": "Style-defined skins over a base system — retro, neobrutalist, glass, terminal — and the editors and generators that produce theme tokens."
          }
        ]
      },
      {
        "slug": "motion-interaction",
        "name": "Motion & Interaction",
        "description": "Animation engines, animated component sets, transitions, and the small moving details that make an interface feel alive.",
        "agent_hint": "Look here when the request is about movement — a transition, a hover feel, a loading state, an animated number or border — or when a static UI needs to stop feeling dead.",
        "icon_hint": "waves",
        "estimated_count": 18,
        "subcategories": [
          {
            "slug": "animation-engines",
            "name": "Animation Engines",
            "description": "The underlying libraries that drive animation in React, JavaScript, and Vue."
          },
          {
            "slug": "animated-components",
            "name": "Animated Component Sets",
            "description": "Component libraries whose selling point is that everything already moves."
          },
          {
            "slug": "micro-interactions-and-loaders",
            "name": "Micro-interactions & Loaders",
            "description": "Single-purpose motion pieces: transitions, micro-transitions, loading buttons, number flows, beams, and gooey effects."
          }
        ]
      },
      {
        "slug": "ai-interface-kits",
        "name": "AI Interface Kits",
        "description": "Components made specifically for agent and chat surfaces — message streams, tool calls, thinking states, voice orbs, and audio waveforms.",
        "agent_hint": "Look here when you are building the UI of an AI product itself: chat threads, streaming text, tool-call cards, agent status indicators, or an AI app shell.",
        "icon_hint": "sparkles",
        "estimated_count": 11,
        "subcategories": [
          {
            "slug": "chat-and-agent-components",
            "name": "Chat & Agent Components",
            "description": "Message lists, composers, tool-call blocks, and structured-output views for conversational products."
          },
          {
            "slug": "agent-state-indicators",
            "name": "Agent State Indicators",
            "description": "Thinking orbs, streaming cues, and activity indicators that show what an agent is doing."
          },
          {
            "slug": "ai-app-starters",
            "name": "AI App Starters",
            "description": "Full starter kits and architectures for building AI-native design and chat applications."
          }
        ]
      },
      {
        "slug": "typography",
        "name": "Typography",
        "description": "Typefaces, free font services, and the display faces worth keeping in a shortlist.",
        "agent_hint": "Look here when you must choose or install a font, need a licence-safe alternative to a paid face, or must pair a display face with a UI face.",
        "icon_hint": "type",
        "estimated_count": 6,
        "subcategories": [
          {
            "slug": "typefaces",
            "name": "Typefaces",
            "description": "Individual font families with their own site, weights, and licence terms."
          },
          {
            "slug": "font-services",
            "name": "Font Services & Libraries",
            "description": "Catalogs that host many families for free or commercial use."
          },
          {
            "slug": "display-and-decorative",
            "name": "Display & Decorative",
            "description": "Character faces for headlines, packaging, and one-off brand work."
          }
        ]
      },
      {
        "slug": "color",
        "name": "Color",
        "description": "Palette generators, hand-picked palettes, gradient libraries, and the shade scales a design system needs.",
        "agent_hint": "Look here when you must pick, extend, or check colors — a brand palette, a 50-950 ramp, a gradient, or a contrast decision.",
        "icon_hint": "palette",
        "estimated_count": 7,
        "subcategories": [
          {
            "slug": "palette-generators",
            "name": "Palette Generators",
            "description": "Tools that build a palette or a full token scale from a seed color or an image."
          },
          {
            "slug": "curated-palettes",
            "name": "Curated Palettes",
            "description": "Hand-picked palette collections you browse and copy, some with live layout previews."
          },
          {
            "slug": "gradients",
            "name": "Gradients",
            "description": "CSS gradient libraries and gradient editors."
          }
        ]
      },
      {
        "slug": "icons-logos",
        "name": "Icons & Logos",
        "description": "Icon families, animated icon sets, and libraries of brand marks in SVG.",
        "agent_hint": "Look here when you need an icon of a given weight or style, an animated icon component, or the official SVG logo of a company.",
        "icon_hint": "shapes",
        "estimated_count": 8,
        "subcategories": [
          {
            "slug": "icon-sets",
            "name": "Icon Sets",
            "description": "Static icon families with several weights, sizes, and framework packages."
          },
          {
            "slug": "animated-icons",
            "name": "Animated Icons",
            "description": "Icon sets shipped as motion components you copy into a React project."
          },
          {
            "slug": "logo-svgs",
            "name": "Logo & Brand SVGs",
            "description": "Collections of company and product marks as ready SVG files."
          }
        ]
      },
      {
        "slug": "textures-assets",
        "name": "Textures, Backgrounds & Assets",
        "description": "The pixel supply — gradients, patterns, shaders, noise, mockups, 3D scenes, and the marketplaces that sell them.",
        "agent_hint": "Look here when a surface needs visual material rather than structure: a background, a pattern, a grain or noise texture, a shader effect, a mockup, or a stock asset pack.",
        "icon_hint": "layers",
        "estimated_count": 26,
        "subcategories": [
          {
            "slug": "gradients-and-backgrounds",
            "name": "Gradients & Backgrounds",
            "description": "Ready background images, grainy gradients, and background libraries."
          },
          {
            "slug": "patterns-and-generators",
            "name": "Patterns & SVG Generators",
            "description": "Repeatable SVG patterns and the generators that produce shapes, blobs, grids, and textures."
          },
          {
            "slug": "shaders-and-effects",
            "name": "Shaders & Generative Effects",
            "description": "Real-time shader packs and canvas effects that drop into a web page as components or GLSL."
          },
          {
            "slug": "image-effect-tools",
            "name": "Image Effect Tools",
            "description": "Browser tools that transform an image or video — dither, halftone, ASCII, pixel, wireframe."
          },
          {
            "slug": "mockups-and-asset-packs",
            "name": "Mockups & Asset Packs",
            "description": "3D mockup studios, scene builders, slide templates, and the marketplaces selling illustration and asset bundles."
          },
          {
            "slug": "creative-coding-environments",
            "name": "Creative Coding Environments",
            "description": "Node-based and code-first environments for building visuals — patch editors, shader playgrounds, real-time graphics tools.",
            "aliases": [
              "creative-coding",
              "node-editor",
              "patch-editor",
              "shader-playground",
              "visual-programming"
            ]
          }
        ]
      },
      {
        "slug": "inspiration-galleries",
        "name": "Inspiration Galleries",
        "description": "Curated visual references — full sites, page sections, app screens, single elements like footers and 404s, plus the directories that index other directories.",
        "agent_hint": "Look here when you need prior art before you write anything: how real products lay out this page, this section, or this one element.",
        "icon_hint": "gallery-thumbnails",
        "estimated_count": 30,
        "subcategories": [
          {
            "slug": "site-galleries",
            "name": "Site Galleries",
            "description": "Full-page website inspiration, awards sites, and style-specific site collections."
          },
          {
            "slug": "section-galleries",
            "name": "Section & Layout Galleries",
            "description": "Page sections cut out on their own — heroes, pricing, bento grids, CTAs."
          },
          {
            "slug": "app-screens",
            "name": "App Screens & Flows",
            "description": "Mobile and web product screens, user flows, and screen-level pattern libraries."
          },
          {
            "slug": "single-element-galleries",
            "name": "Single-Element Galleries",
            "description": "One artifact per site: footers, 404 pages, OG images, headlines, App Store screenshots, social posts, decks."
          },
          {
            "slug": "directories-and-meta-indexes",
            "name": "Directories & Meta-Indexes",
            "description": "Collections of collections — resource directories, curated tool lists, and personal vaults."
          },
          {
            "slug": "historical-archives",
            "name": "Historical Archives",
            "description": "Institutional and independent archives of design work from the past — annual reports, type specimens, identity manuals, print advertising, museum collections.",
            "aliases": [
              "archive",
              "archives",
              "historical-archive",
              "design-archive",
              "museum-collection",
              "vintage-archive"
            ]
          }
        ]
      },
      {
        "slug": "design-systems-brand",
        "name": "Design Systems & Brand Guidelines",
        "description": "Public design systems, system-building guides and checklists, brand manuals from real organisations, and reference works that name UI parts correctly.",
        "agent_hint": "Look here when you must set up or judge a system rather than build one screen: token structure, component coverage, naming, accessibility checks, or how a real brand documents itself.",
        "icon_hint": "book-open",
        "estimated_count": 16,
        "subcategories": [
          {
            "slug": "public-design-systems",
            "name": "Public Design Systems",
            "description": "Galleries and databases of shipped design systems from tech companies and institutions."
          },
          {
            "slug": "system-guides-and-checklists",
            "name": "Guides & Checklists",
            "description": "Structured guidance for planning, auditing, and growing a design system."
          },
          {
            "slug": "brand-guideline-archives",
            "name": "Brand Guidelines & Archives",
            "description": "Real brand manuals, identity decks, and IP rules — Zapier, the U.S. Army, FIFA, Apple, Polar."
          },
          {
            "slug": "ui-reference",
            "name": "UI Reference & Naming",
            "description": "Visual dictionaries and component references that tell you the accepted name and API of an element."
          }
        ]
      },
      {
        "slug": "agent-design-tooling",
        "name": "Agent Design Tooling",
        "description": "The layer built so coding agents produce good design — DESIGN.md specs, agent skills, MCP servers, AI design apps, prompt libraries, and visual feedback tools.",
        "agent_hint": "Look here when the task is about your own working method: installing a design skill, writing or reading a DESIGN.md, connecting a design MCP server, or taking visual feedback from a human.",
        "icon_hint": "bot",
        "estimated_count": 25,
        "subcategories": [
          {
            "slug": "design-md-and-specs",
            "name": "DESIGN.md & Specs",
            "description": "Machine-readable design specifications and the catalogs of analyses built on that format."
          },
          {
            "slug": "agent-skills",
            "name": "Agent Skills & Commands",
            "description": "Installable skills, command sets, and rule packs for Claude Code, Codex, and similar agents."
          },
          {
            "slug": "mcp-and-registries",
            "name": "MCP Servers & Skill Registries",
            "description": "Endpoints an agent can call for design context, and the marketplaces that list them."
          },
          {
            "slug": "ai-design-apps",
            "name": "AI Design Apps",
            "description": "Design tools built around agents — prototype generators, canvas tools, local-first design workspaces."
          },
          {
            "slug": "prompts-and-feedback",
            "name": "Prompt Libraries & Feedback Tools",
            "description": "Prompt packs for design output, and tools that let a human point at UI and hand an agent precise selectors."
          },
          {
            "slug": "coding-agents-and-editors",
            "name": "Coding Agents & Editors",
            "description": "The agents and editors that write the code — AI editors, terminal agents, and prompt-to-app builders that a designer hands work to.",
            "aliases": [
              "coding-agent",
              "ai-editor",
              "ai-ide",
              "prompt-to-app",
              "app-builder"
            ]
          }
        ]
      },
      {
        "slug": "generative-media-tools",
        "name": "Generative Media Tools",
        "description": "Model-backed tools that make or repair visual media — image and video generation, upscaling, background removal, and HTML-to-video rendering.",
        "agent_hint": "Look here when the deliverable is a media file rather than an interface: a generated image or video, an upscale, a cutout, or a rendered motion piece.",
        "icon_hint": "wand-2",
        "estimated_count": 11,
        "subcategories": [
          {
            "slug": "image-generation",
            "name": "Image Generation",
            "description": "Text-to-image and reference-driven image suites."
          },
          {
            "slug": "video-and-render",
            "name": "Video & Render Pipelines",
            "description": "AI video models, their developer platforms, and deterministic HTML-to-video renderers."
          },
          {
            "slug": "cleanup-and-upscale",
            "name": "Cleanup & Upscaling",
            "description": "Background removal, denoise, sharpen, and enlargement tools."
          }
        ]
      },
      {
        "slug": "essays-guides-courses",
        "name": "Essays, Guides & Courses",
        "description": "Long-form writing about design practice — X threads, blog essays, playbooks on branding and selling work, AI workflow walkthroughs, tool explainers, and courses.",
        "agent_hint": "Look here when you need reasoning rather than an artifact: why a layout converts, how to name a company, how a workflow is run end to end, or what a tool is actually for.",
        "icon_hint": "scroll-text",
        "estimated_count": 49,
        "subcategories": [
          {
            "slug": "craft-essays",
            "name": "Craft Essays",
            "description": "Opinion and craft writing on interfaces, spacing, typography, taste, and what design is."
          },
          {
            "slug": "brand-and-business-playbooks",
            "name": "Brand & Business Playbooks",
            "description": "Step-by-step pieces on naming, branding, positioning, landing pages, and selling design work."
          },
          {
            "slug": "ai-workflow-guides",
            "name": "AI Workflow Guides",
            "description": "How-to threads and posts on shipping with coding agents, prompt systems, and AI video or UGC pipelines."
          },
          {
            "slug": "tool-reviews",
            "name": "Tool Reviews & Explainers",
            "description": "Third-party reviews, pricing breakdowns, and pattern explainers about a specific resource."
          },
          {
            "slug": "courses-and-books",
            "name": "Courses & Books",
            "description": "Paid and free courses, masterclasses, video walkthroughs, and reading lists."
          }
        ]
      },
      {
        "slug": "studios-portfolios",
        "name": "Studios & Portfolios",
        "description": "Design studios, branding agencies, and individual designer portfolios kept as taste and positioning references.",
        "agent_hint": "Look here when you need a benchmark for craft level, site structure, or service positioning — how a studio presents work, or what a strong portfolio site looks like.",
        "icon_hint": "briefcase",
        "estimated_count": 17,
        "subcategories": [
          {
            "slug": "branding-studios",
            "name": "Branding Studios",
            "description": "Agencies whose main output is identity, strategy, and brand systems."
          },
          {
            "slug": "product-and-web-studios",
            "name": "Product & Web Studios",
            "description": "Studios shipping product design, sites, and builds for startups and tech teams."
          },
          {
            "slug": "designer-portfolios",
            "name": "Designer Portfolios",
            "description": "Personal sites of individual product, motion, and visual designers."
          }
        ]
      },
      {
        "slug": "artists-creators",
        "name": "Artists & Creators",
        "description": "The people layer — artist profiles, their X and Instagram accounts, art-platform pages, and the saved posts and reels kept as visual reference.",
        "agent_hint": "Look here for authorship and visual voice, not for buildable material: who made a piece, where else they publish, and which saved post a reference came from.",
        "icon_hint": "users",
        "estimated_count": 33,
        "subcategories": [
          {
            "slug": "artist-profiles",
            "name": "Artist Profiles",
            "description": "Primary sites and bio pages of digital and generative artists."
          },
          {
            "slug": "social-profiles",
            "name": "Social Profiles",
            "description": "X and Instagram accounts followed for a person's ongoing output."
          },
          {
            "slug": "saved-posts",
            "name": "Saved Posts & Reels",
            "description": "Single Instagram reels, carousels, and posts kept for a technique or a look."
          },
          {
            "slug": "art-platform-pages",
            "name": "Art Platform Pages",
            "description": "Collection, interview, and marketplace pages on SuperRare, NINFA, Verse, and similar platforms."
          }
        ]
      },
      {
        "slug": "house-brand-assets",
        "name": "House Brand Assets",
        "description": "The owner's own Clinora brand files — logo and icon SVGs, favicon and app icon, web fonts, noise texture, and the PWA manifest.",
        "agent_hint": "Look here first whenever you must apply the owner's own brand: pull the exact logo variant, favicon, webfont, texture, or manifest instead of generating a substitute.",
        "icon_hint": "badge-check",
        "estimated_count": 12,
        "subcategories": [
          {
            "slug": "marks-and-icons",
            "name": "Marks & Icons",
            "description": "Logo and icon SVGs in default and white variants, plus favicon and Apple touch icon."
          },
          {
            "slug": "webfonts",
            "name": "Webfonts",
            "description": "The hashed WOFF2 files the site loads."
          },
          {
            "slug": "textures-and-config",
            "name": "Textures & Config",
            "description": "Supporting brand files such as the noise texture and the web app manifest."
          }
        ]
      },
      {
        "slug": "utilities-naming",
        "name": "Utilities & Naming",
        "description": "Small sharp tools around the edges of design work — domain and username checks, etymology, privacy-first web utilities, and the services and apps kept as craft references.",
        "agent_hint": "Look here for support tasks rather than design output: checking a name or handle, converting a file, or finding an API and pricing reference used in a build.",
        "icon_hint": "wrench",
        "estimated_count": 13,
        "subcategories": [
          {
            "slug": "naming-and-availability",
            "name": "Naming & Availability",
            "description": "Domain search, username search, and word-origin lookup for naming work."
          },
          {
            "slug": "small-web-utilities",
            "name": "Small Web Utilities",
            "description": "Single-purpose browser tools for images, color, text, and file conversion."
          },
          {
            "slug": "apis-and-services",
            "name": "APIs & Services",
            "description": "Developer platforms and paid services referenced during builds."
          },
          {
            "slug": "apps-and-references",
            "name": "Apps & References",
            "description": "Shipped products kept for their own craft, pricing, or feature reference."
          }
        ]
      }
    ],
    "kinds": [
      {
        "slug": "component-library",
        "name": "Component Library",
        "definition": "A maintained set of reusable interface components you install or copy into a codebase.",
        "expects_fields": [
          "components",
          "install",
          "framework",
          "license"
        ]
      },
      {
        "slug": "registry",
        "name": "Registry",
        "definition": "A shadcn-compatible registry, or an explorer over registries, that the CLI can add components from.",
        "expects_fields": [
          "registry_url",
          "install",
          "components",
          "framework"
        ]
      },
      {
        "slug": "primitive",
        "name": "Primitive",
        "definition": "Unstyled, behaviour-and-accessibility-only building blocks meant to be styled by the consumer.",
        "expects_fields": [
          "package",
          "framework",
          "headless",
          "a11y_notes"
        ]
      },
      {
        "slug": "animation-library",
        "name": "Animation Library",
        "definition": "A runtime that drives animation, or a component set whose defining feature is motion.",
        "expects_fields": [
          "package",
          "framework",
          "api_surface",
          "bundle_size"
        ]
      },
      {
        "slug": "block-collection",
        "name": "Block Collection",
        "definition": "Page-level sections — hero, pricing, features, footer — supplied as ready code.",
        "expects_fields": [
          "blocks",
          "framework",
          "install",
          "price"
        ]
      },
      {
        "slug": "template",
        "name": "Template",
        "definition": "A complete site, app, or project starter you clone and adapt.",
        "expects_fields": [
          "stack",
          "price",
          "demo_url",
          "license"
        ]
      },
      {
        "slug": "theme-pack",
        "name": "Theme Pack",
        "definition": "A visual style layered over an existing component system, shipped as tokens, CSS, or a fork.",
        "expects_fields": [
          "base_system",
          "tokens",
          "install",
          "preview_url"
        ]
      },
      {
        "slug": "design-system-docs",
        "name": "Design System Docs",
        "definition": "The published documentation of a real design system, or a gallery of such systems.",
        "expects_fields": [
          "owner",
          "components",
          "tokens_url",
          "code_url"
        ]
      },
      {
        "slug": "brand-guidelines",
        "name": "Brand Guidelines",
        "definition": "An organisation's identity manual, brand deck, or IP usage rules.",
        "expects_fields": [
          "owner",
          "format",
          "pages",
          "use_rights"
        ]
      },
      {
        "slug": "checklist",
        "name": "Checklist",
        "definition": "An ordered list of checks to run against a product, system, or component.",
        "expects_fields": [
          "items",
          "scope",
          "license"
        ]
      },
      {
        "slug": "reference",
        "name": "Reference",
        "definition": "A lookup work — a visual dictionary, a naming reference, or a component encyclopedia.",
        "expects_fields": [
          "coverage",
          "lookup_axis",
          "source"
        ]
      },
      {
        "slug": "icon-set",
        "name": "Icon Set",
        "definition": "A family of icons distributed as SVG or framework components.",
        "expects_fields": [
          "icon_count",
          "formats",
          "license",
          "framework"
        ]
      },
      {
        "slug": "typeface",
        "name": "Typeface",
        "definition": "A single font family with its own weights, styles, and licence.",
        "expects_fields": [
          "family_name",
          "weights",
          "license",
          "foundry"
        ]
      },
      {
        "slug": "font-service",
        "name": "Font Service",
        "definition": "A catalog that distributes many families under one licence model.",
        "expects_fields": [
          "font_count",
          "license",
          "formats",
          "price"
        ]
      },
      {
        "slug": "color-tool",
        "name": "Color Tool",
        "definition": "A generator, picker, or palette collection that outputs color values or scales.",
        "expects_fields": [
          "output_formats",
          "features",
          "price"
        ]
      },
      {
        "slug": "generator",
        "name": "Generator",
        "definition": "A browser tool that produces an asset from parameters — patterns, shapes, backgrounds, wireframes, effects.",
        "expects_fields": [
          "outputs",
          "export_formats",
          "price"
        ]
      },
      {
        "slug": "shader-pack",
        "name": "Shader Pack",
        "definition": "Real-time GPU effects supplied as components or GLSL source.",
        "expects_fields": [
          "shaders",
          "runtime",
          "install",
          "license"
        ]
      },
      {
        "slug": "asset-pack",
        "name": "Asset Pack",
        "definition": "A bundle of finished visual files — backgrounds, illustrations, slide templates, textures.",
        "expects_fields": [
          "asset_count",
          "formats",
          "license",
          "price"
        ]
      },
      {
        "slug": "mockup-tool",
        "name": "Mockup Tool",
        "definition": "An editor that composes 3D scenes, device mockups, or key visuals in the browser.",
        "expects_fields": [
          "asset_types",
          "export_formats",
          "price"
        ]
      },
      {
        "slug": "marketplace",
        "name": "Marketplace",
        "definition": "A paid catalog selling design goods from many makers.",
        "expects_fields": [
          "catalog_size",
          "categories",
          "price_model",
          "license"
        ]
      },
      {
        "slug": "gallery",
        "name": "Gallery",
        "definition": "A curated visual index of shipped work — sites, screens, sections, or single elements.",
        "expects_fields": [
          "item_count",
          "item_type",
          "filters",
          "price"
        ]
      },
      {
        "slug": "directory",
        "name": "Directory",
        "definition": "An index of other resources, tools, or links rather than of designs.",
        "expects_fields": [
          "entry_count",
          "taxonomy",
          "submission_url"
        ]
      },
      {
        "slug": "article",
        "name": "Article",
        "definition": "A published piece of prose on a blog, magazine, or content site.",
        "expects_fields": [
          "author",
          "published",
          "source_site",
          "topic"
        ]
      },
      {
        "slug": "thread",
        "name": "Thread",
        "definition": "Long-form writing published inside a social platform, usually on X.",
        "expects_fields": [
          "author",
          "platform",
          "posted",
          "topic"
        ]
      },
      {
        "slug": "course",
        "name": "Course",
        "definition": "Structured paid or free teaching, delivered as lessons or a masterclass.",
        "expects_fields": [
          "instructor",
          "platform",
          "length",
          "price"
        ]
      },
      {
        "slug": "video",
        "name": "Video",
        "definition": "A single recorded walkthrough or tutorial.",
        "expects_fields": [
          "creator",
          "platform",
          "duration",
          "topic"
        ]
      },
      {
        "slug": "profile",
        "name": "Profile",
        "definition": "A person's account page on a social or art platform.",
        "expects_fields": [
          "person",
          "platform",
          "handle",
          "discipline"
        ]
      },
      {
        "slug": "social-post",
        "name": "Social Post",
        "definition": "A single saved post, reel, or carousel kept for its content.",
        "expects_fields": [
          "platform",
          "post_type",
          "creator",
          "saved_for"
        ]
      },
      {
        "slug": "portfolio",
        "name": "Portfolio",
        "definition": "An individual's own site showing their work.",
        "expects_fields": [
          "person",
          "discipline",
          "location",
          "work_types"
        ]
      },
      {
        "slug": "studio",
        "name": "Studio",
        "definition": "A design or branding company site presenting services and clients.",
        "expects_fields": [
          "name",
          "location",
          "services",
          "clients"
        ]
      },
      {
        "slug": "tool",
        "name": "Tool",
        "definition": "A general web utility that does a job in the browser without a model behind it.",
        "expects_fields": [
          "url",
          "price",
          "platform",
          "runs_offline"
        ]
      },
      {
        "slug": "ai-tool",
        "name": "AI Tool",
        "definition": "A model-backed product that generates or repairs media, designs, or systems.",
        "expects_fields": [
          "engine",
          "inputs",
          "outputs",
          "price"
        ]
      },
      {
        "slug": "agent-skill",
        "name": "Agent Skill",
        "definition": "An installable skill, command set, or rule pack for a coding agent.",
        "expects_fields": [
          "install",
          "commands",
          "agents_supported",
          "license"
        ]
      },
      {
        "slug": "mcp-server",
        "name": "MCP Server",
        "definition": "An endpoint a coding agent connects to for design context or asset delivery.",
        "expects_fields": [
          "endpoint",
          "transport",
          "auth",
          "tools"
        ]
      },
      {
        "slug": "design-md",
        "name": "DESIGN.md",
        "definition": "A machine-readable design specification for one site or brand, or a catalog of such files.",
        "expects_fields": [
          "subject_site",
          "spec_version",
          "install",
          "updated"
        ]
      },
      {
        "slug": "prompt-pack",
        "name": "Prompt Pack",
        "definition": "A curated set of prompts aimed at a specific generation tool.",
        "expects_fields": [
          "prompt_count",
          "target_tool",
          "price"
        ]
      },
      {
        "slug": "brand-asset",
        "name": "Brand Asset",
        "definition": "A single first-party brand file served from the owner's own domain.",
        "expects_fields": [
          "file_type",
          "variant",
          "dimensions",
          "usage"
        ]
      },
      {
        "slug": "service",
        "name": "Service",
        "definition": "A hosted developer platform or API used inside a build.",
        "expects_fields": [
          "api_docs",
          "auth",
          "pricing",
          "sdks"
        ]
      },
      {
        "slug": "app",
        "name": "App",
        "definition": "A shipped end-user product kept as a reference or in use.",
        "expects_fields": [
          "platform",
          "price",
          "offline",
          "open_source"
        ]
      }
    ],
    "assignment_notes": "Every entry gets exactly one primary category; anything else it touches becomes a secondary tag, never a second primary. Apply these tests in order. (1) Owner-first: any file served from clinora.ai is house-brand-assets, whatever it depicts. (2) Shape-first for editorial: if the entry is an article, X thread, review, course, or tutorial video, it goes to essays-guides-courses and carries the sibling category as a topic tag — this is what keeps the five Fontshare reviews and the six Seedance guides out of typography and generative-media-tools. Exception: an interview or write-up about one artist stays with that artist in artists-creators, and a machine-readable analysis file such as a DESIGN.md entry is a resource, not an essay. (3) Specific design axis beats generic code: a package whose selling point is motion, agent-chat UI, or icons goes to motion-interaction, ai-interface-kits, or icons-logos before component-libraries. Precedence order among code categories is icons-logos > ai-interface-kits > motion-interaction > blocks-templates-themes > component-libraries. (4) Style versus catalog: if the pitch is a look (retro, neobrutalist, glass, terminal, Tron) the entry is a theme pack in blocks-templates-themes; if the pitch is coverage and quality of components, it is component-libraries. (5) Page unit versus component unit: heroes, pricing sections, dashboards, and starters are blocks-templates-themes; single elements are component-libraries. (6) Pixels versus code: a tool that outputs an image, pattern, gradient, or shader is textures-assets; a tool that outputs tokens, CSS, or components is blocks-templates-themes. (7) Model output target: an AI tool aimed at coding agents, design specs, or agent workflow is agent-design-tooling; an AI tool that produces media files is generative-media-tools. (8) Shows designs versus indexes resources: a gallery of shipped work is inspiration-galleries/site-galleries or /app-screens; an index of tools, skills, or links is inspiration-galleries/directories-and-meta-indexes — unless it indexes installable registries, which stays in component-libraries/shadcn-registries. (9) People: a company selling design services is studios-portfolios; an individual selling design services is studios-portfolios/designer-portfolios; an artist, and every social or platform page belonging to them, is artists-creators. A social account that belongs to a product rather than a person takes the product's category. (10) Mirrors: a GitHub repo and its marketing site are two entries in the same category; mark one canonical and the other a mirror, and never split them across categories. (11) Real brand manuals and IP rules are design-systems-brand even when hosted on a gallery domain such as deck.gallery, because the artifact is the manual, not the gallery. (12) Last resort: choose the category a human would open first for this entry, then record the runner-up as a secondary tag so retrieval still finds it. Category slugs are the controlled vocabulary — no free-text categories, no singular/plural variants, and any new term needs a new slug plus an alias entry, so the No-code / No Code drift that broke depo.zip cannot happen here."
  },
  "facets": {
    "version": 1,
    "notes": {
      "purpose": "Facets are the filter axes of the index. Categories say what a record is about. Facets say whether you can use it: which stack, which license, which price, which platform, and how much an agent can read without a human.",
      "combination": "Every facet is filterable together with every other facet (AND across facets, OR inside one multi facet). Depo exposes one tag at a time and cannot answer 'Design + Free + MIT'. This index must answer that.",
      "closed_vocabulary": "These value lists are closed. A scraper must map an observed string onto a slug through the alias list, or write the record as `unknown` and add the raw string to a review queue. Never create a value at write time. That rule is what stops the Depo drift (`No-code` vs `No Code`, `Guide` vs `Guides`, `E-commerce` vs `Commerce`).",
      "unknown_is_a_value": "`unknown` means we did not verify it yet. `not-applicable` means the axis does not apply to this kind of record (a font has no framework; an X article has no license). Keep the two apart, because `unknown` is a work queue and `not-applicable` is not.",
      "alias_matching": "Match aliases case-insensitively after you trim, lowercase, and replace spaces, dots, and underscores with hyphens.",
      "versioning": "This file is semver-adjacent: add values in a minor bump, rename or remove values only in a major bump, and never re-use a retired slug."
    },
    "facets": [
      {
        "slug": "framework",
        "name": "Framework",
        "multi": true,
        "description": "The UI framework or runtime the resource produces code for, or runs inside. One record can carry several values when the library really ships adapters for each (Canvas UI ships React, Solid, Preact, Vue, Svelte, and vanilla builds). Do not add a value from a marketing claim alone; add it when there is an install path or a code sample for that framework.",
        "agent_hint": "This is the hardest constraint an agent has. An agent writing a Next.js App Router page cannot use a Vue library, and a wrong match wastes a whole generation. Filter on framework first, then on style. For a record with `not-applicable` (a gallery, a font, an article), framework must never exclude it from a non-code query.",
        "values": [
          {
            "slug": "react",
            "name": "React",
            "aliases": [
              "reactjs",
              "react.js",
              "react-js",
              "react-19",
              "react19",
              "react-18",
              "react 19",
              "jsx",
              "tsx-react"
            ]
          },
          {
            "slug": "next",
            "name": "Next.js",
            "aliases": [
              "nextjs",
              "next.js",
              "next-js",
              "next-15",
              "nextjs-15",
              "app-router",
              "next-app-router"
            ]
          },
          {
            "slug": "remix",
            "name": "Remix",
            "aliases": [
              "remix-run",
              "react-router-7",
              "react-router-v7"
            ]
          },
          {
            "slug": "vue",
            "name": "Vue",
            "aliases": [
              "vuejs",
              "vue.js",
              "vue-3",
              "vue3",
              "composition-api"
            ]
          },
          {
            "slug": "nuxt",
            "name": "Nuxt",
            "aliases": [
              "nuxtjs",
              "nuxt.js",
              "nuxt-3",
              "nuxt-4"
            ]
          },
          {
            "slug": "svelte",
            "name": "Svelte",
            "aliases": [
              "sveltejs",
              "svelte-5",
              "svelte5",
              "runes"
            ]
          },
          {
            "slug": "sveltekit",
            "name": "SvelteKit",
            "aliases": [
              "svelte-kit",
              "svelte kit"
            ]
          },
          {
            "slug": "solid",
            "name": "Solid",
            "aliases": [
              "solidjs",
              "solid.js",
              "solid-js",
              "solid-start",
              "solidstart"
            ]
          },
          {
            "slug": "preact",
            "name": "Preact",
            "aliases": [
              "preactjs"
            ]
          },
          {
            "slug": "angular",
            "name": "Angular",
            "aliases": [
              "angularjs",
              "angular-2",
              "ng",
              "angular-17",
              "angular-19"
            ]
          },
          {
            "slug": "astro",
            "name": "Astro",
            "aliases": [
              "astrojs",
              "astro.build",
              "astro-4",
              "astro-5"
            ]
          },
          {
            "slug": "qwik",
            "name": "Qwik",
            "aliases": [
              "qwikjs",
              "qwik-city",
              "qwikcity"
            ]
          },
          {
            "slug": "vanilla",
            "name": "Vanilla JS",
            "aliases": [
              "vanilla-js",
              "vanillajs",
              "plain-js",
              "javascript",
              "js",
              "html-css-js",
              "no-framework",
              "framework-free",
              "zero-dependency"
            ]
          },
          {
            "slug": "web-components",
            "name": "Web Components",
            "aliases": [
              "webcomponents",
              "custom-elements",
              "lit",
              "litelement",
              "stencil",
              "shadow-dom"
            ]
          },
          {
            "slug": "react-native",
            "name": "React Native",
            "aliases": [
              "reactnative",
              "rn",
              "expo",
              "react-native-expo"
            ]
          },
          {
            "slug": "swiftui",
            "name": "SwiftUI",
            "aliases": [
              "swift-ui",
              "swift",
              "uikit",
              "apple-native"
            ]
          },
          {
            "slug": "flutter",
            "name": "Flutter",
            "aliases": [
              "dart",
              "flutter-widgets"
            ]
          },
          {
            "slug": "kotlin-compose",
            "name": "Jetpack Compose",
            "aliases": [
              "jetpack-compose",
              "compose",
              "compose-multiplatform",
              "kotlin"
            ]
          },
          {
            "slug": "framer",
            "name": "Framer",
            "aliases": [
              "framer.com",
              "framer-motion-site",
              "framer-components",
              "framer-template",
              "framer-shaders"
            ]
          },
          {
            "slug": "webflow",
            "name": "Webflow",
            "aliases": [
              "webflow-cloneable",
              "webflow-template"
            ]
          },
          {
            "slug": "go-templ",
            "name": "Go / templ",
            "aliases": [
              "templ",
              "golang",
              "go",
              "shadcn-templ",
              "html-templ"
            ]
          },
          {
            "slug": "rust-gpui",
            "name": "Rust / GPUI",
            "aliases": [
              "gpui",
              "gpui-component",
              "rust",
              "zed-gpui"
            ]
          },
          {
            "slug": "terminal-tui",
            "name": "Terminal UI",
            "aliases": [
              "ink",
              "opentui",
              "tui",
              "cli-ui",
              "termcn",
              "ratatui",
              "blessed"
            ]
          },
          {
            "slug": "python",
            "name": "Python",
            "aliases": [
              "py",
              "streamlit",
              "gradio",
              "fastapi-ui"
            ]
          },
          {
            "slug": "not-applicable",
            "name": "Not applicable",
            "aliases": [
              "n/a",
              "na",
              "none",
              "no-code-output",
              "non-code"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified"
            ]
          }
        ]
      },
      {
        "slug": "styling",
        "name": "Styling",
        "multi": true,
        "description": "How the resource applies style. Tailwind is split by major version on purpose: v3 uses `tailwind.config.js` and the `theme.extend` object, v4 uses CSS-first `@theme` and `@import \"tailwindcss\"`. A v4 component pasted into a v3 project fails on the token layer, so one 'tailwind' value would be a lie. Use `tailwind-any` only when the version is truly not stated.",
        "agent_hint": "Tells the agent whether the snippet will compile in the caller's repo and whether it must translate tokens. An agent that already read the project's `globals.css` can pin `tailwind-v4` and reject every v3-only registry item before it wastes a generation. `css-in-js` also flags a runtime dependency that a React Server Component cannot use.",
        "values": [
          {
            "slug": "tailwind-v4",
            "name": "Tailwind CSS v4",
            "aliases": [
              "tailwind-4",
              "tailwindcss-v4",
              "tailwind css 4",
              "tw4",
              "css-first-theme",
              "@theme"
            ]
          },
          {
            "slug": "tailwind-v3",
            "name": "Tailwind CSS v3",
            "aliases": [
              "tailwind-3",
              "tailwindcss-v3",
              "tailwind css 3",
              "tw3",
              "tailwind-config-js"
            ]
          },
          {
            "slug": "tailwind-any",
            "name": "Tailwind CSS (version unstated)",
            "aliases": [
              "tailwind",
              "tailwindcss",
              "tailwind-css",
              "utility-first"
            ]
          },
          {
            "slug": "vanilla-css",
            "name": "Vanilla CSS",
            "aliases": [
              "plain-css",
              "css",
              "css3",
              "pure-css",
              "css-only",
              "handwritten-css"
            ]
          },
          {
            "slug": "css-modules",
            "name": "CSS Modules",
            "aliases": [
              "cssmodules",
              "module.css",
              "scoped-css"
            ]
          },
          {
            "slug": "css-in-js",
            "name": "CSS-in-JS",
            "aliases": [
              "styled-components",
              "emotion",
              "stitches",
              "goober",
              "linaria",
              "styled-jsx",
              "runtime-css"
            ]
          },
          {
            "slug": "sass",
            "name": "Sass / SCSS",
            "aliases": [
              "scss",
              "sass-scss",
              "less",
              "stylus",
              "preprocessor"
            ]
          },
          {
            "slug": "stylex",
            "name": "StyleX",
            "aliases": [
              "style-x",
              "meta-stylex",
              "@stylexjs/stylex"
            ]
          },
          {
            "slug": "panda",
            "name": "Panda CSS",
            "aliases": [
              "pandacss",
              "panda-css",
              "@pandacss/dev"
            ]
          },
          {
            "slug": "unocss",
            "name": "UnoCSS",
            "aliases": [
              "uno-css",
              "uno",
              "windicss",
              "windi"
            ]
          },
          {
            "slug": "css-variables",
            "name": "CSS custom properties",
            "aliases": [
              "css-vars",
              "custom-properties",
              "design-tokens-css",
              "theme-variables"
            ]
          },
          {
            "slug": "inline-styles",
            "name": "Inline styles",
            "aliases": [
              "style-attribute",
              "style-prop",
              "inline-css"
            ]
          },
          {
            "slug": "native-styles",
            "name": "Platform-native styling",
            "aliases": [
              "stylesheet-create",
              "nativewind",
              "swiftui-modifiers",
              "compose-modifiers",
              "xml-styles"
            ]
          },
          {
            "slug": "shader-glsl",
            "name": "Shader / GLSL",
            "aliases": [
              "glsl",
              "webgl",
              "wgsl",
              "shader",
              "three-js-material",
              "canvas-shader"
            ]
          },
          {
            "slug": "not-applicable",
            "name": "Not applicable",
            "aliases": [
              "n/a",
              "na",
              "none",
              "no-styling"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified"
            ]
          }
        ]
      },
      {
        "slug": "license",
        "name": "License",
        "multi": true,
        "description": "The legal terms for re-use of the artifact itself: code, font, image, or template. Multi-valued, because dual licensing is normal in this corpus — a free open-source core with a paid commercial tier (ReUI, shadcncraft, HeroUI Pro) carries both `mit` and `commercial`. `no-license` is a real and different answer from `unknown`: a public GitHub repo with no LICENSE file is all-rights-reserved by default, and an agent must not copy it into a product.",
        "agent_hint": "The first question before code enters a product repo. An agent asked to keep a project MIT-compatible must exclude `gpl`, `agpl`, `no-license`, and `free-for-personal`. Font records need this most: a display face that is free for personal use only will fail a commercial launch, and no other design directory records it at all.",
        "values": [
          {
            "slug": "mit",
            "name": "MIT",
            "aliases": [
              "mit-license",
              "the-mit-license",
              "expat"
            ]
          },
          {
            "slug": "apache-2.0",
            "name": "Apache 2.0",
            "aliases": [
              "apache",
              "apache2",
              "apache-2",
              "apache-license-2.0",
              "asl-2.0"
            ]
          },
          {
            "slug": "bsd",
            "name": "BSD",
            "aliases": [
              "bsd-2-clause",
              "bsd-3-clause",
              "new-bsd",
              "simplified-bsd",
              "freebsd-license"
            ]
          },
          {
            "slug": "isc",
            "name": "ISC",
            "aliases": [
              "isc-license"
            ]
          },
          {
            "slug": "mpl-2.0",
            "name": "Mozilla Public License 2.0",
            "aliases": [
              "mpl",
              "mpl2",
              "mozilla-public-license"
            ]
          },
          {
            "slug": "gpl",
            "name": "GPL family",
            "aliases": [
              "gplv2",
              "gplv3",
              "gpl-2.0",
              "gpl-3.0",
              "lgpl",
              "lgpl-3.0",
              "general-public-license",
              "copyleft"
            ]
          },
          {
            "slug": "agpl",
            "name": "AGPL",
            "aliases": [
              "agpl-3.0",
              "agplv3",
              "affero",
              "affero-gpl"
            ]
          },
          {
            "slug": "cc0",
            "name": "CC0 / public domain",
            "aliases": [
              "cc-0",
              "public-domain",
              "unlicense",
              "wtfpl",
              "no-rights-reserved"
            ]
          },
          {
            "slug": "cc-by",
            "name": "CC BY (attribution)",
            "aliases": [
              "cc-by-4.0",
              "creative-commons-attribution",
              "attribution-required",
              "credit-required"
            ]
          },
          {
            "slug": "cc-by-sa",
            "name": "CC BY-SA",
            "aliases": [
              "cc-by-sa-4.0",
              "share-alike"
            ]
          },
          {
            "slug": "cc-by-nc",
            "name": "CC BY-NC (non-commercial)",
            "aliases": [
              "cc-by-nc-4.0",
              "non-commercial",
              "noncommercial"
            ]
          },
          {
            "slug": "ofl",
            "name": "SIL Open Font License",
            "aliases": [
              "sil-ofl",
              "ofl-1.1",
              "open-font-license",
              "sil"
            ]
          },
          {
            "slug": "font-eula",
            "name": "Font EULA (foundry terms)",
            "aliases": [
              "eula",
              "desktop-license",
              "webfont-license",
              "foundry-license",
              "itf-license",
              "fontshare-license"
            ]
          },
          {
            "slug": "source-available",
            "name": "Source available (not OSI)",
            "aliases": [
              "bsl",
              "busl-1.1",
              "elastic-license",
              "fair-source",
              "sspl",
              "polyform"
            ]
          },
          {
            "slug": "commercial",
            "name": "Commercial license",
            "aliases": [
              "paid-license",
              "commercial-use-license",
              "single-seat",
              "team-license",
              "extended-license",
              "royalty-free-paid"
            ]
          },
          {
            "slug": "proprietary",
            "name": "Proprietary / all rights reserved",
            "aliases": [
              "all-rights-reserved",
              "closed-source",
              "copyright",
              "tos-only",
              "terms-of-service"
            ]
          },
          {
            "slug": "free-for-personal",
            "name": "Free for personal use only",
            "aliases": [
              "personal-use-only",
              "non-commercial-only",
              "personal-license",
              "free-personal"
            ]
          },
          {
            "slug": "no-license",
            "name": "No license file (default all rights reserved)",
            "aliases": [
              "unlicensed-repo",
              "missing-license",
              "no-license-file"
            ]
          },
          {
            "slug": "trademark-restricted",
            "name": "Trademark / trade dress restricted",
            "aliases": [
              "brand-guidelines",
              "trade-dress",
              "logo-usage-rules",
              "ip-guidelines",
              "do-not-copy-mark"
            ]
          },
          {
            "slug": "not-applicable",
            "name": "Not applicable",
            "aliases": [
              "n/a",
              "na",
              "reference-only",
              "read-only-inspiration"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified"
            ]
          }
        ]
      },
      {
        "slug": "pricing",
        "name": "Pricing",
        "multi": true,
        "description": "What access costs, from the point of view of a person who wants to use it today. Multi-valued, because real products stack models: a free tier plus a monthly plan is `freemium` + `subscription`; an open-source library with a paid pro pack is `open-source` + `one-time`. Keep this separate from `license`: open-source can still be sold, and free can still be proprietary.",
        "agent_hint": "Lets an agent respect a budget constraint in the prompt ('only free and open-source'), and lets it warn before it recommends something behind a paywall or a login. Depo carries no pricing field at all, so its 'Copy prompt' can send an agent to a $30/month product with no signal.",
        "values": [
          {
            "slug": "free",
            "name": "Free",
            "aliases": [
              "100-free",
              "no-cost",
              "gratis",
              "free-forever",
              "free-to-use",
              "$0"
            ]
          },
          {
            "slug": "freemium",
            "name": "Freemium (free tier + paid tier)",
            "aliases": [
              "free-tier",
              "free-plan",
              "free-and-pro",
              "limited-free",
              "free-with-limits"
            ]
          },
          {
            "slug": "open-source",
            "name": "Open source (self-hostable, no fee)",
            "aliases": [
              "oss",
              "foss",
              "self-hosted-free",
              "community-edition"
            ]
          },
          {
            "slug": "one-time",
            "name": "One-time purchase",
            "aliases": [
              "lifetime",
              "buy-once",
              "perpetual",
              "pay-once",
              "single-payment",
              "gumroad",
              "lemonsqueezy"
            ]
          },
          {
            "slug": "subscription",
            "name": "Subscription",
            "aliases": [
              "monthly",
              "yearly",
              "annual",
              "per-seat",
              "recurring",
              "saas-plan",
              "pro-plan",
              "membership"
            ]
          },
          {
            "slug": "usage-based",
            "name": "Usage-based / credits",
            "aliases": [
              "credits",
              "pay-as-you-go",
              "per-generation",
              "metered",
              "token-based",
              "api-pricing",
              "per-minute"
            ]
          },
          {
            "slug": "paid",
            "name": "Paid (model unstated)",
            "aliases": [
              "premium",
              "commercial-product",
              "costs-money",
              "not-free"
            ]
          },
          {
            "slug": "free-trial",
            "name": "Free trial",
            "aliases": [
              "trial",
              "7-day-trial",
              "3-day-trial",
              "demo-period"
            ]
          },
          {
            "slug": "account-required",
            "name": "Free but account required",
            "aliases": [
              "signup-required",
              "login-required",
              "registration-required",
              "waitlist-access"
            ]
          },
          {
            "slug": "sponsor-supported",
            "name": "Sponsor or ad supported",
            "aliases": [
              "ads",
              "sponsored",
              "affiliate",
              "donationware",
              "sponsorware",
              "github-sponsors"
            ]
          },
          {
            "slug": "not-applicable",
            "name": "Not applicable",
            "aliases": [
              "n/a",
              "na",
              "article",
              "no-product"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified",
              "contact-for-pricing",
              "custom-quote"
            ]
          }
        ]
      },
      {
        "slug": "distribution",
        "name": "Distribution",
        "multi": true,
        "description": "How you get the thing into your work. This is the 'capability' axis that awesome-design-systems proves is more useful than topic tags: does it ship code, a CLI, a registry item, a Figma file, or only a web page you look at? Multi-valued, because one record often ships several paths — shadcn-family libraries are usually `shadcn-registry` + `cli` + `copy-paste` + `github-repo`.",
        "agent_hint": "Decides the install action the agent takes. `shadcn-registry` means `npx shadcn@latest add <url>`; `npm-package` means a dependency line; `copy-paste` means write the file directly; `figma-file` or `saas` means the agent must hand the task back to a human. An agent should prefer records that carry `cli` or `shadcn-registry` when asked to 'add' something, because those are executable without judgment.",
        "values": [
          {
            "slug": "shadcn-registry",
            "name": "shadcn registry",
            "aliases": [
              "shadcn",
              "shadcn-ui",
              "registry",
              "registry-json",
              "shadcn-compatible",
              "custom-registry",
              "npx-shadcn-add"
            ]
          },
          {
            "slug": "npm-package",
            "name": "npm package",
            "aliases": [
              "npm",
              "yarn",
              "pnpm",
              "bun-add",
              "node-module",
              "jsr",
              "package"
            ]
          },
          {
            "slug": "cli",
            "name": "CLI installer",
            "aliases": [
              "npx",
              "command-line",
              "terminal-install",
              "scaffold",
              "generator-cli",
              "brew"
            ]
          },
          {
            "slug": "copy-paste",
            "name": "Copy-paste snippet",
            "aliases": [
              "copy-code",
              "copy-paste-ready",
              "paste-in",
              "source-shown",
              "code-block"
            ]
          },
          {
            "slug": "github-repo",
            "name": "GitHub repository",
            "aliases": [
              "github",
              "gitlab",
              "git-clone",
              "open-repo",
              "source-repo"
            ]
          },
          {
            "slug": "mcp-server",
            "name": "MCP server",
            "aliases": [
              "mcp",
              "model-context-protocol",
              "mcp-endpoint",
              "remote-mcp"
            ]
          },
          {
            "slug": "agent-skill",
            "name": "Agent skill / rules pack",
            "aliases": [
              "claude-skill",
              "codex-skill",
              "skill",
              "cursor-rules",
              "agents-md",
              "claude-md",
              "design-md",
              "rules-file",
              "prompt-pack"
            ]
          },
          {
            "slug": "figma-file",
            "name": "Figma file or kit",
            "aliases": [
              "figma",
              "figma-kit",
              "ui-kit",
              "figma-community",
              "figma-library",
              "sketch-file",
              "xd-file"
            ]
          },
          {
            "slug": "figma-plugin",
            "name": "Figma plugin",
            "aliases": [
              "plugin",
              "figma-plugin-page",
              "design-tool-plugin"
            ]
          },
          {
            "slug": "browser-extension",
            "name": "Browser extension",
            "aliases": [
              "chrome-extension",
              "firefox-addon",
              "new-tab-extension",
              "safari-extension"
            ]
          },
          {
            "slug": "web-app",
            "name": "Web app / online tool",
            "aliases": [
              "online-tool",
              "browser-tool",
              "generator",
              "editor-in-browser",
              "webapp"
            ]
          },
          {
            "slug": "saas",
            "name": "Hosted SaaS product",
            "aliases": [
              "hosted",
              "cloud-service",
              "platform",
              "subscription-service"
            ]
          },
          {
            "slug": "public-api",
            "name": "Public HTTP API",
            "aliases": [
              "api",
              "rest-api",
              "json-api",
              "graphql",
              "sdk",
              "developer-api"
            ]
          },
          {
            "slug": "download",
            "name": "Direct download / asset pack",
            "aliases": [
              "zip",
              "asset-pack",
              "download-file",
              "font-download",
              "svg-download",
              "pdf-download",
              "template-download"
            ]
          },
          {
            "slug": "marketplace",
            "name": "Marketplace listing",
            "aliases": [
              "gumroad",
              "creative-market",
              "lemon-squeezy",
              "envato",
              "app-store",
              "product-page"
            ]
          },
          {
            "slug": "desktop-app",
            "name": "Desktop application",
            "aliases": [
              "mac-app",
              "windows-app",
              "electron",
              "native-app",
              "dmg",
              "local-first-app"
            ]
          },
          {
            "slug": "mobile-app",
            "name": "Mobile application",
            "aliases": [
              "ios-app",
              "android-app",
              "testflight",
              "play-store"
            ]
          },
          {
            "slug": "gallery",
            "name": "Browse-only gallery or archive",
            "aliases": [
              "inspiration-site",
              "showcase",
              "curated-gallery",
              "directory",
              "reference-wall",
              "look-only"
            ]
          },
          {
            "slug": "article",
            "name": "Article, thread, or post",
            "aliases": [
              "blog-post",
              "x-thread",
              "tweet",
              "newsletter",
              "instagram-post",
              "video-post"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified"
            ]
          }
        ]
      },
      {
        "slug": "platform",
        "name": "Platform",
        "multi": true,
        "description": "The target surface the resource is for. Use `cross-platform` only when the resource itself claims one artifact for several targets (Flutter, Compose Multiplatform, GPUI); otherwise list the real targets. `print` covers brand manuals, PDF guidelines, and type specimens made for paper and packaging, which a screen-only taxonomy loses.",
        "agent_hint": "Stops the classic wrong-surface error: an agent building an iOS paywall must not be given web landing-page sections, and an agent writing a macOS menu bar app must not be given mobile patterns. Combined with `framework`, this is the pair that makes retrieval constraint-first instead of category-first.",
        "values": [
          {
            "slug": "web",
            "name": "Web",
            "aliases": [
              "browser",
              "website",
              "webapp",
              "responsive-web",
              "desktop-web",
              "www"
            ]
          },
          {
            "slug": "ios",
            "name": "iOS",
            "aliases": [
              "iphone",
              "ipad",
              "ipados",
              "apple-mobile",
              "app-store-ios",
              "hig-ios"
            ]
          },
          {
            "slug": "android",
            "name": "Android",
            "aliases": [
              "google-play",
              "material-you",
              "android-mobile"
            ]
          },
          {
            "slug": "macos",
            "name": "macOS",
            "aliases": [
              "mac",
              "osx",
              "mac-app",
              "apple-desktop"
            ]
          },
          {
            "slug": "windows",
            "name": "Windows",
            "aliases": [
              "win32",
              "microsoft-windows",
              "fluent"
            ]
          },
          {
            "slug": "linux",
            "name": "Linux",
            "aliases": [
              "gnome",
              "kde",
              "ubuntu"
            ]
          },
          {
            "slug": "desktop",
            "name": "Desktop (OS unspecified)",
            "aliases": [
              "native-desktop",
              "desktop-app-platform"
            ]
          },
          {
            "slug": "cross-platform",
            "name": "Cross-platform",
            "aliases": [
              "multiplatform",
              "universal",
              "write-once",
              "all-platforms"
            ]
          },
          {
            "slug": "terminal",
            "name": "Terminal / CLI",
            "aliases": [
              "cli",
              "tui",
              "console",
              "shell",
              "command-line-ui"
            ]
          },
          {
            "slug": "print",
            "name": "Print / static document",
            "aliases": [
              "pdf",
              "brand-manual",
              "packaging",
              "editorial",
              "poster",
              "slide-deck",
              "presentation"
            ]
          },
          {
            "slug": "social",
            "name": "Social / marketing creative",
            "aliases": [
              "instagram",
              "og-image",
              "app-store-screenshots",
              "ad-creative",
              "post-design",
              "story-format"
            ]
          },
          {
            "slug": "xr",
            "name": "XR / spatial",
            "aliases": [
              "visionos",
              "vr",
              "ar",
              "spatial",
              "3d-scene"
            ]
          },
          {
            "slug": "platform-agnostic",
            "name": "Platform agnostic",
            "aliases": [
              "any-platform",
              "n/a",
              "not-applicable",
              "general"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified"
            ]
          }
        ]
      },
      {
        "slug": "accessibility",
        "name": "Accessibility",
        "multi": true,
        "description": "Verified accessibility properties of the resource, not its marketing words. Record a value only from evidence: a stated conformance level, a documented ARIA pattern, an underlying accessible primitive (React Aria, Radix, Base UI), a published audit, or our own check. `claimed-accessible` exists for the very common case of a page that says 'accessible' with nothing behind it — that claim is data, but it is weaker data, and it must not be stored as `wcag-aa`.",
        "agent_hint": "Accessibility is what agents drop first and what a review catches last. When the caller asks for accessible output, the index must return components that already carry keyboard, focus, and ARIA behavior rather than a pretty div. It also supports the states-and-seams query: which records document focus, reduced motion, and RTL, and not only the default state.",
        "values": [
          {
            "slug": "wcag-aa",
            "name": "WCAG 2.x AA",
            "aliases": [
              "wcag-2.1-aa",
              "wcag-2.2-aa",
              "aa-compliant",
              "wcag-aa-conformant",
              "section-508"
            ]
          },
          {
            "slug": "wcag-aaa",
            "name": "WCAG 2.x AAA",
            "aliases": [
              "wcag-2.1-aaa",
              "aaa-compliant"
            ]
          },
          {
            "slug": "aria-complete",
            "name": "Full ARIA pattern implemented",
            "aliases": [
              "aria",
              "wai-aria",
              "aria-attributes",
              "apg-pattern",
              "wai-aria-apg",
              "roles-and-states"
            ]
          },
          {
            "slug": "keyboard-navigable",
            "name": "Keyboard navigable",
            "aliases": [
              "keyboard",
              "keyboard-accessible",
              "tab-navigation",
              "arrow-key-navigation",
              "no-mouse-required"
            ]
          },
          {
            "slug": "focus-managed",
            "name": "Focus management and visible focus",
            "aliases": [
              "focus-visible",
              "focus-ring",
              "focus-trap",
              "focus-restore",
              "roving-tabindex"
            ]
          },
          {
            "slug": "screen-reader-tested",
            "name": "Screen reader tested",
            "aliases": [
              "voiceover-tested",
              "nvda-tested",
              "jaws-tested",
              "screen-reader",
              "sr-tested",
              "talkback-tested"
            ]
          },
          {
            "slug": "contrast-checked",
            "name": "Contrast checked",
            "aliases": [
              "color-contrast",
              "contrast-ratio",
              "apca",
              "contrast-safe",
              "colorblind-safe"
            ]
          },
          {
            "slug": "reduced-motion",
            "name": "Honors reduced motion",
            "aliases": [
              "prefers-reduced-motion",
              "motion-safe",
              "respects-reduced-motion",
              "animation-opt-out"
            ]
          },
          {
            "slug": "rtl-support",
            "name": "RTL and i18n aware",
            "aliases": [
              "rtl",
              "right-to-left",
              "bidi",
              "i18n",
              "localization-ready"
            ]
          },
          {
            "slug": "semantic-html",
            "name": "Semantic HTML",
            "aliases": [
              "native-elements",
              "html-semantics",
              "landmarks",
              "heading-order"
            ]
          },
          {
            "slug": "built-on-accessible-primitives",
            "name": "Built on accessible primitives",
            "aliases": [
              "radix",
              "radix-ui",
              "react-aria",
              "base-ui",
              "headless-ui",
              "ark-ui",
              "aria-kit"
            ]
          },
          {
            "slug": "claimed-accessible",
            "name": "Accessible (claimed, unverified)",
            "aliases": [
              "accessible",
              "a11y",
              "a11y-friendly",
              "accessibility-first",
              "inclusive"
            ]
          },
          {
            "slug": "known-gaps",
            "name": "Known accessibility gaps",
            "aliases": [
              "not-accessible",
              "inaccessible",
              "a11y-issues",
              "canvas-only",
              "image-only-content",
              "decorative-only"
            ]
          },
          {
            "slug": "not-applicable",
            "name": "Not applicable",
            "aliases": [
              "n/a",
              "na",
              "no-interface"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified",
              "not-checked"
            ]
          }
        ]
      },
      {
        "slug": "content_type",
        "name": "Content type",
        "multi": true,
        "description": "What the record actually contains — the payload, not the subject. A gallery of app screens is `screenshots`; a component library is `code`; a brand manual PDF is `pdf` + `prose`; a font site is `fonts`. Multi-valued, because a good library ships `code` + `figma`, and an article often ships `prose` + `screenshots`.",
        "agent_hint": "Decides whether the agent can consume the record at all. `code`, `prose`, `prompts`, and `dataset` are text an agent reads directly. `screenshots`, `video`, and `figma` need a vision pass or a human, and each round trip through a vision model loses detail. Rank text payloads above pixel payloads when the task is to write code.",
        "values": [
          {
            "slug": "code",
            "name": "Code",
            "aliases": [
              "components",
              "source-code",
              "snippets",
              "library",
              "blocks",
              "templates-code",
              "shaders",
              "css",
              "html"
            ]
          },
          {
            "slug": "screenshots",
            "name": "Screenshots / screens",
            "aliases": [
              "screens",
              "ui-screenshots",
              "app-screens",
              "gallery-images",
              "captures",
              "flows-stills"
            ]
          },
          {
            "slug": "figma",
            "name": "Figma / design source files",
            "aliases": [
              "figma-file",
              "ui-kit",
              "sketch",
              "xd",
              "design-file",
              "penpot"
            ]
          },
          {
            "slug": "prose",
            "name": "Prose / writing",
            "aliases": [
              "article",
              "essay",
              "thread",
              "guide",
              "documentation",
              "book",
              "checklist",
              "playbook",
              "post"
            ]
          },
          {
            "slug": "video",
            "name": "Video",
            "aliases": [
              "youtube",
              "reel",
              "screen-recording",
              "course-video",
              "motion-capture",
              "demo-video"
            ]
          },
          {
            "slug": "dataset",
            "name": "Dataset / structured records",
            "aliases": [
              "json",
              "csv",
              "index",
              "catalog",
              "database",
              "taxonomy",
              "api-payload"
            ]
          },
          {
            "slug": "prompts",
            "name": "Prompts",
            "aliases": [
              "prompt-pack",
              "prompt-library",
              "llm-prompts",
              "prompt-templates",
              "system-prompts"
            ]
          },
          {
            "slug": "fonts",
            "name": "Fonts / typefaces",
            "aliases": [
              "typeface",
              "webfont",
              "woff2",
              "otf",
              "ttf",
              "variable-font",
              "type-specimen"
            ]
          },
          {
            "slug": "icons",
            "name": "Icons",
            "aliases": [
              "icon-set",
              "svg-icons",
              "iconography",
              "animated-icons",
              "logos-svg"
            ]
          },
          {
            "slug": "images",
            "name": "Images / textures / backgrounds",
            "aliases": [
              "backgrounds",
              "gradients",
              "textures",
              "patterns",
              "wallpapers",
              "illustrations",
              "mockups",
              "photos"
            ]
          },
          {
            "slug": "3d",
            "name": "3D assets and scenes",
            "aliases": [
              "3d-models",
              "3d-mockups",
              "three-js-scene",
              "glb",
              "webgl-scene"
            ]
          },
          {
            "slug": "audio",
            "name": "Audio",
            "aliases": [
              "sound",
              "sfx",
              "voice",
              "audio-ui"
            ]
          },
          {
            "slug": "pdf",
            "name": "PDF document",
            "aliases": [
              "brand-manual",
              "guidelines-pdf",
              "deck",
              "slides",
              "whitepaper"
            ]
          },
          {
            "slug": "design-tokens",
            "name": "Design tokens / theme files",
            "aliases": [
              "tokens",
              "theme",
              "palette",
              "color-scale",
              "css-variables-export",
              "tailwind-config",
              "design-md"
            ]
          },
          {
            "slug": "profile",
            "name": "Person, studio, or product profile",
            "aliases": [
              "portfolio",
              "agency-site",
              "studio",
              "about-page",
              "social-profile",
              "landing-page"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified",
              "empty"
            ]
          }
        ]
      },
      {
        "slug": "agent_readiness",
        "name": "Agent readiness",
        "multi": true,
        "description": "What an autonomous agent can get from this record without a human and without a vision model. This is the facet no other index publishes, and the reason this index exists. Record only surfaces that were verified live: a fetched `/llms.txt`, a reachable MCP endpoint, a registry item that resolved, an API that answered without auth. Never infer readiness from a marketing line. Negative values (`bot-blocked`, `auth-required`, `agent-paywalled`, `none`) are as important as positive ones — they tell the agent to stop instead of to retry, and they are the honest record of the paywall pattern across this market.",
        "agent_hint": "The routing facet. An agent should read it top-down: if `mcp-server`, call the tool; if `public-api` or `registry-json`, fetch structured data; if `cli-installable`, run the install command; if `llms-txt` or `structured-docs`, fetch text docs; if `copy-paste-ready`, lift the snippet; if only `image-only` or `none`, ask a human or skip. Sorting a result set by this facet turns a directory into a plan.",
        "values": [
          {
            "slug": "mcp-server",
            "name": "MCP server",
            "description": "A Model Context Protocol endpoint an agent can call as a tool.",
            "signals": [
              "/mcp endpoint responds",
              "documented server URL or stdio command",
              "listed on an MCP registry"
            ],
            "aliases": [
              "mcp",
              "model-context-protocol",
              "mcp-endpoint",
              "mcp-tools",
              "remote-mcp",
              "sse-mcp"
            ]
          },
          {
            "slug": "agent-skill",
            "name": "Agent skill or rules pack",
            "description": "Ships a SKILL.md, DESIGN.md, AGENTS.md, CLAUDE.md, or rules file written for a coding agent.",
            "signals": [
              "SKILL.md or DESIGN.md in repo",
              "install instructions for Claude Code, Codex, or Cursor",
              "commands and rules documented as agent input"
            ],
            "aliases": [
              "claude-skill",
              "codex-skill",
              "cursor-rules",
              "agents-md",
              "claude-md",
              "design-md",
              "skill-file",
              "hooks"
            ]
          },
          {
            "slug": "registry-json",
            "name": "Machine-readable registry item",
            "description": "A JSON item (shadcn registry or equivalent) that names the files, dependencies, and tokens of a component.",
            "signals": [
              "registry.json or /r/<name>.json resolves",
              "registry-item schema fields present",
              "dependencies array in the payload"
            ],
            "aliases": [
              "shadcn-registry-json",
              "registry-item",
              "component-json",
              "r-json"
            ]
          },
          {
            "slug": "cli-installable",
            "name": "CLI installable",
            "description": "One documented command puts the artifact into a project.",
            "signals": [
              "npx shadcn add <url>",
              "npm i <pkg>",
              "npx <tool> add <name>",
              "documented one-line install"
            ],
            "aliases": [
              "npx-install",
              "one-line-install",
              "cli-add",
              "package-install",
              "shadcn-add"
            ]
          },
          {
            "slug": "public-api",
            "name": "Public API without auth",
            "description": "An HTTP endpoint returns structured data with no key and no login.",
            "signals": [
              "JSON response to an unauthenticated GET",
              "documented open endpoint",
              "CORS-open read API"
            ],
            "aliases": [
              "open-api",
              "json-api",
              "unauthenticated-api",
              "rest-api-public",
              "graphql-public"
            ]
          },
          {
            "slug": "llms-txt",
            "name": "llms.txt",
            "description": "Publishes /llms.txt or /llms-full.txt for agent consumption.",
            "signals": [
              "/llms.txt returns 200 text",
              "/llms-full.txt returns 200 text"
            ],
            "aliases": [
              "llms.txt",
              "llms-full-txt",
              "llmstxt",
              "ai-txt"
            ]
          },
          {
            "slug": "structured-docs",
            "name": "Structured documentation",
            "description": "Per-item documentation pages with stable URLs, real HTML text, and props or API tables an agent can parse.",
            "signals": [
              "one URL per component",
              "props or API table in HTML",
              "server-rendered text, not a JS-only shell",
              "MDX or docs source in a public repo"
            ],
            "aliases": [
              "docs-site",
              "api-reference",
              "component-docs",
              "mdx-docs",
              "props-table"
            ]
          },
          {
            "slug": "machine-index",
            "name": "Machine-readable index",
            "description": "The catalog can be enumerated: sitemap, RSS or JSON feed, or a schema.org graph.",
            "signals": [
              "sitemap.xml resolves",
              "RSS or JSON feed",
              "JSON-LD on detail pages",
              "robots.txt allows crawling"
            ],
            "aliases": [
              "sitemap",
              "rss",
              "json-feed",
              "json-ld",
              "schema-org",
              "atom"
            ]
          },
          {
            "slug": "copy-paste-ready",
            "name": "Copy-paste ready code",
            "description": "The complete source is visible on the page and works when pasted, with dependencies stated.",
            "signals": [
              "visible code block with a copy button",
              "no build step required",
              "imports listed with the snippet"
            ],
            "aliases": [
              "copy-code",
              "copy-button",
              "paste-ready",
              "source-visible",
              "inline-code"
            ]
          },
          {
            "slug": "copy-prompt",
            "name": "Ships a ready LLM prompt",
            "description": "Provides a written prompt for an agent, not only a description of the resource.",
            "signals": [
              "'Copy prompt' action",
              "prompt template shown on the page",
              "prompt library as the product"
            ],
            "aliases": [
              "prompt-copy",
              "copy-implementation-prompt",
              "prompt-ready",
              "ai-prompt-included"
            ]
          },
          {
            "slug": "token-export",
            "name": "Exports design tokens",
            "description": "Produces CSS variables, a Tailwind theme, or a JSON token file an agent can write into a repo.",
            "signals": [
              "export to CSS or Tailwind config",
              "downloadable tokens JSON",
              "theme code shown for copying"
            ],
            "aliases": [
              "css-export",
              "tailwind-config-export",
              "tokens-json",
              "theme-export",
              "variables-export"
            ]
          },
          {
            "slug": "open-source-code",
            "name": "Readable open source",
            "description": "The full implementation is in a public repo, so an agent can read the real code instead of a description.",
            "signals": [
              "public GitHub or GitLab repo",
              "source files browsable",
              "license file present"
            ],
            "aliases": [
              "public-repo",
              "source-available-read",
              "github-source",
              "oss-code"
            ]
          },
          {
            "slug": "auth-required",
            "name": "Login required",
            "description": "Content exists but needs an account, so an unattended agent stops here.",
            "signals": [
              "login wall",
              "API key required",
              "session cookie needed"
            ],
            "aliases": [
              "login-wall",
              "signin-required",
              "api-key-required",
              "account-gated"
            ]
          },
          {
            "slug": "agent-paywalled",
            "name": "Agent access behind payment",
            "description": "The MCP server or API exists but only on a paid plan.",
            "signals": [
              "MCP listed as a Pro feature",
              "API on paid tier only",
              "rate cap without payment"
            ],
            "aliases": [
              "paid-mcp",
              "pro-only-api",
              "paywalled-api",
              "mcp-pro-only"
            ]
          },
          {
            "slug": "bot-blocked",
            "name": "Blocks bots",
            "description": "robots.txt or a WAF blocks agent user agents, so retrieval must not be attempted.",
            "signals": [
              "GPTBot or ClaudeBot disallowed in robots.txt",
              "403 to non-browser user agents",
              "Cloudflare challenge"
            ],
            "aliases": [
              "robots-disallow",
              "gptbot-blocked",
              "claudebot-blocked",
              "cloudflare-challenge",
              "anti-bot"
            ]
          },
          {
            "slug": "image-only",
            "name": "Pixels only",
            "description": "The value is in images or video; an agent needs a vision pass and still cannot recover the code.",
            "signals": [
              "gallery of screenshots",
              "canvas-rendered content",
              "no text payload"
            ],
            "aliases": [
              "screenshot-only",
              "vision-required",
              "no-text",
              "pixels-only"
            ]
          },
          {
            "slug": "js-only-shell",
            "name": "Client-rendered shell",
            "description": "HTML is an empty shell; content arrives from client JavaScript, so a plain fetch returns nothing useful.",
            "signals": [
              "empty body in raw HTML",
              "content from XHR after hydration",
              "no server-side render"
            ],
            "aliases": [
              "spa-shell",
              "client-rendered",
              "requires-js",
              "hydration-only"
            ]
          },
          {
            "slug": "none",
            "name": "No agent surface",
            "description": "Nothing machine-usable: a human reads it, an agent cannot act on it.",
            "signals": [
              "no docs, no code, no API, no feed"
            ],
            "aliases": [
              "human-only",
              "no-api",
              "not-agent-ready",
              "manual-only"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified",
              "not-checked"
            ]
          }
        ]
      },
      {
        "slug": "maturity",
        "name": "Maturity",
        "multi": false,
        "description": "The current health of the record, from the last verification pass. Single-valued, because a record is in exactly one state. Every record must carry `last_verified` with this value; a maturity with no date is a guess. `dead-link` records stay in the index with an archive URL when one exists — a known-dead entry is more useful than a silent 404, and no competitor keeps this at all.",
        "agent_hint": "Freshness control. An agent must not recommend an `archived`, `deprecated`, or `dead-link` resource, and must warn when it uses an `experimental` one. When two records answer the same need, `actively-maintained` wins. This is also the field a re-crawl job writes, so it is the drift signal for the whole index.",
        "values": [
          {
            "slug": "actively-maintained",
            "name": "Actively maintained",
            "description": "Shipped a release, commit, or content update inside the last 90 days.",
            "aliases": [
              "active",
              "maintained",
              "updated-recently",
              "in-development",
              "healthy"
            ]
          },
          {
            "slug": "stable",
            "name": "Stable",
            "description": "Complete and working, with no recent changes needed. Quiet, not abandoned.",
            "aliases": [
              "mature",
              "1.0",
              "production-ready",
              "steady",
              "complete"
            ]
          },
          {
            "slug": "beta",
            "name": "Beta",
            "description": "Public and usable, but the API or content can still change.",
            "aliases": [
              "public-beta",
              "preview",
              "early-access",
              "rc",
              "0.x"
            ]
          },
          {
            "slug": "experimental",
            "name": "Experimental",
            "description": "A demo, a lab, or an alpha. Fine to learn from, risky to depend on.",
            "aliases": [
              "alpha",
              "prototype",
              "wip",
              "work-in-progress",
              "lab",
              "playground",
              "unstable"
            ]
          },
          {
            "slug": "announced",
            "name": "Announced or waitlist only",
            "description": "Named publicly but not yet usable.",
            "aliases": [
              "waitlist",
              "coming-soon",
              "teaser",
              "pre-launch",
              "signup-only"
            ]
          },
          {
            "slug": "archived",
            "name": "Archived",
            "description": "Read-only or frozen by the owner; still reachable.",
            "aliases": [
              "read-only",
              "frozen",
              "no-longer-updated",
              "github-archived",
              "sunset"
            ]
          },
          {
            "slug": "deprecated",
            "name": "Deprecated",
            "description": "The owner says to use something else.",
            "aliases": [
              "superseded",
              "replaced-by",
              "end-of-life",
              "eol",
              "discontinued",
              "renamed"
            ]
          },
          {
            "slug": "dead-link",
            "name": "Dead link",
            "description": "The URL fails: 404, DNS failure, or a parked domain. Keep the record, attach an archive URL.",
            "aliases": [
              "404",
              "broken",
              "nxdomain",
              "offline",
              "domain-expired",
              "parked",
              "unreachable"
            ]
          },
          {
            "slug": "unknown",
            "name": "Unknown",
            "description": "Not verified yet in any pass.",
            "aliases": [
              "unspecified",
              "tbd",
              "unverified",
              "not-checked"
            ]
          }
        ]
      }
    ]
  },
  "components": {
    "version": 1,
    "groups": [
      {
        "slug": "actions",
        "name": "Actions",
        "components": [
          {
            "slug": "button",
            "name": "Button",
            "aliases": [
              "btn",
              "cta",
              "push button",
              "press button",
              "primary button",
              "secondary button",
              "tertiary button",
              "ghost button",
              "outline button",
              "text button",
              "link button",
              "destructive button",
              "submit button",
              "reset button"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ],
            "checklist": [
              "Base style — Your default style, one of the following: fill, outline, underline",
              "Shape — Visual properties of a button: padding, border, border radius, shadow",
              "Variants — Each visual type to represent button structure e.g. primary and secondary buttons",
              "Copy — Instructional text that details what will happen if you click the button",
              "States — How the button changes based on the interaction: hover, focused, disabled"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "icon-button",
            "name": "Icon Button",
            "aliases": [
              "icon-only button",
              "round button",
              "square button",
              "glyph button",
              "icon buttons"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "button-group",
            "name": "Button Group",
            "aliases": [
              "button bar",
              "grouped buttons",
              "button toolbar",
              "btn-group",
              "button groups"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "split-button",
            "name": "Split Button",
            "aliases": [
              "dropdown button",
              "combo button",
              "menu split button",
              "split action button"
            ],
            "aria_pattern": "Menu Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "floating-action-button",
            "name": "Floating Action Button",
            "aliases": [
              "fab",
              "extended fab",
              "fab menu",
              "speed dial",
              "action button",
              "floating button"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "toolbar",
            "name": "Toolbar",
            "aliases": [
              "action bar",
              "command bar",
              "utility bar",
              "ribbon",
              "toolbars",
              "action toolbar"
            ],
            "aria_pattern": "Toolbar"
          },
          {
            "slug": "menu-button",
            "name": "Menu Button",
            "aliases": [
              "pop-up button",
              "pull-down button",
              "overflow menu",
              "kebab menu",
              "meatball menu",
              "hamburger menu",
              "dropdown trigger",
              "more menu",
              "ellipsis menu",
              "actions menu"
            ],
            "aria_pattern": "Menu Button",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "link",
            "name": "Link",
            "aliases": [
              "anchor",
              "hyperlink",
              "a tag",
              "text link",
              "linkbutton",
              "buttonlink",
              "nav link"
            ],
            "aria_pattern": "Link",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "visited",
              "disabled"
            ]
          },
          {
            "slug": "skip-link",
            "name": "Skip Link",
            "aliases": [
              "skip nav",
              "skipnav",
              "skip to content",
              "skip navigation",
              "bypass block"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "focus-visible"
            ]
          },
          {
            "slug": "close-button",
            "name": "Close Button",
            "aliases": [
              "dismiss button",
              "x button",
              "close icon",
              "dismiss"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "copy-button",
            "name": "Copy Button",
            "aliases": [
              "copy to clipboard",
              "clipboard button",
              "snippet copy",
              "copy code"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "copied",
              "error"
            ]
          },
          {
            "slug": "back-to-top",
            "name": "Back to Top",
            "aliases": [
              "backtop",
              "scroll to top",
              "jump to top",
              "return to top"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible",
              "hover",
              "focus"
            ]
          },
          {
            "slug": "toggle-button",
            "name": "Toggle Button",
            "aliases": [
              "pressed button",
              "toggle",
              "press-and-hold button",
              "sticky button",
              "toggle (action)"
            ],
            "aria_pattern": "Button",
            "states": [
              "off",
              "on",
              "hover",
              "focus",
              "disabled"
            ],
            "checklist": [
              "Context — Explaining what the toggle will do",
              "Transition — A clear visual change of the toggle switching between different states",
              "State — How the button changes based on the interaction, examples below"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "command-palette",
            "name": "Command Palette",
            "aliases": [
              "command menu",
              "command",
              "cmdk",
              "⌘k",
              "quick actions",
              "launcher",
              "app launcher",
              "spotlight",
              "omnibox",
              "quick open",
              "action search"
            ],
            "aria_pattern": "Combobox",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "context-menu",
            "name": "Context Menu",
            "aliases": [
              "right-click menu",
              "contextualmenu",
              "secondary menu",
              "long-press menu"
            ],
            "aria_pattern": "Menu and Menubar",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "action-sheet",
            "name": "Action Sheet",
            "aliases": [
              "ios action sheet",
              "bottom action list",
              "action list sheet",
              "activity sheet"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "popconfirm",
            "name": "Popconfirm",
            "aliases": [
              "inline confirm",
              "confirmation popover",
              "confirm bubble",
              "are-you-sure popover"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "share-sheet",
            "name": "Share Sheet",
            "aliases": [
              "activity view",
              "share menu",
              "share button",
              "social share"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "quick-action",
            "name": "Quick Action",
            "aliases": [
              "home screen quick actions",
              "app shortcuts",
              "shortcut tile",
              "control"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "floating-action-bar",
            "name": "Floating Action Bar",
            "aliases": [
              "docked action bar",
              "bulk action bar",
              "selection toolbar",
              "contextual action bar",
              "batch actions"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible"
            ]
          }
        ]
      },
      {
        "slug": "inputs",
        "name": "Inputs",
        "components": [
          {
            "slug": "text-input",
            "name": "Text Input",
            "aliases": [
              "text field",
              "textfield",
              "input",
              "textbox",
              "field text",
              "inputtext",
              "single-line input",
              "string input",
              "form input"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ],
            "checklist": [
              "Input field — Interactive text field for user to enter their data into",
              "Label — Stating what information the user is meant to provide",
              "Placeholder text — Text inside the input field acting as an example of what you want the user to enter",
              "Data format — Set text fields to allow the relevant text values e.g. numeric only for phone number",
              "Illustration or icon — A visual cue can help break up a long list of text fields",
              "Hint — Elaborate on the title of the text field incase a user struggles to know what to enter"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "textarea",
            "name": "Textarea",
            "aliases": [
              "text area",
              "text box",
              "multi-line input",
              "multiline field",
              "text view",
              "field text area",
              "comment box"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "search-input",
            "name": "Search Input",
            "aliases": [
              "search field",
              "search box",
              "searchbox",
              "search bar",
              "search",
              "site search",
              "query input"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ],
            "checklist": [
              "Input field — A clear container for a user to start typing in",
              "Label or placeholder text — Identify the purpose of the field is for them to search",
              "Quick links, autocomplete and suggestions — As the user is typing, offer available links and phrases based on what they have entered so far",
              "Submit search button — A visible link to submit search and view results",
              "Previous searches — Showing what a user has searched before can speed up their experience if they frequently search the same queries",
              "Appropriate visibility — Search should be directly linked to what you are looking for, whether it's searching across the entire platform or in a specific area"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "password-input",
            "name": "Password Input",
            "aliases": [
              "password field",
              "password toggle field",
              "show password",
              "hide password",
              "reveal password",
              "secure field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "number-input",
            "name": "Number Input",
            "aliases": [
              "inputnumber",
              "number field",
              "numeric input",
              "spinbutton",
              "spin button",
              "numberfield"
            ],
            "aria_pattern": "Spinbutton",
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "quantity-stepper",
            "name": "Quantity Stepper",
            "aliases": [
              "stepper",
              "nudger",
              "quantity",
              "counter",
              "quantity selector",
              "qty picker",
              "input stepper",
              "plus minus control",
              "increment decrement"
            ],
            "aria_pattern": "Spinbutton",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "otp-input",
            "name": "OTP Input",
            "aliases": [
              "input otp",
              "one-time password field",
              "pin input",
              "verification code",
              "2fa code",
              "mfa code",
              "digit entry view",
              "segmented code field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "masked-input",
            "name": "Masked Input",
            "aliases": [
              "input mask",
              "formatted input",
              "pattern input",
              "format field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "input-group",
            "name": "Input Group",
            "aliases": [
              "inputgroup",
              "input with addon",
              "input prefix",
              "input suffix",
              "field with adornment",
              "addon input",
              "attached input"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "label",
            "name": "Label",
            "aliases": [
              "form label",
              "field label",
              "floating label",
              "input label",
              "caption label"
            ],
            "aria_pattern": null
          },
          {
            "slug": "help-text",
            "name": "Help Text",
            "aliases": [
              "hint text",
              "helper text",
              "description text",
              "assistive text",
              "field description",
              "sub-label",
              "microcopy",
              "form hint"
            ],
            "aria_pattern": null
          },
          {
            "slug": "validation-message",
            "name": "Validation Message",
            "aliases": [
              "error message",
              "inline error",
              "field error",
              "invalid message",
              "success message",
              "field feedback"
            ],
            "aria_pattern": null,
            "states": [
              "error",
              "warning",
              "success",
              "info"
            ]
          },
          {
            "slug": "character-count",
            "name": "Character Count",
            "aliases": [
              "character counter",
              "char count",
              "text field counter",
              "remaining characters",
              "word count"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "near-limit",
              "over-limit"
            ]
          },
          {
            "slug": "fieldset",
            "name": "Fieldset",
            "aliases": [
              "field group",
              "form group",
              "form field",
              "form element",
              "field",
              "control group"
            ],
            "aria_pattern": null
          },
          {
            "slug": "form",
            "name": "Form",
            "aliases": [
              "form layout",
              "form validation",
              "web form",
              "data entry form"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "submitting",
              "submitted",
              "error"
            ]
          },
          {
            "slug": "form-actions",
            "name": "Form Actions",
            "aliases": [
              "form footer",
              "docked form footer",
              "submit bar",
              "action footer",
              "save bar",
              "sticky form footer"
            ],
            "aria_pattern": null
          },
          {
            "slug": "inline-edit",
            "name": "Inline Edit",
            "aliases": [
              "editable text",
              "edit in place",
              "click to edit",
              "editable field",
              "inline editing"
            ],
            "aria_pattern": null,
            "states": [
              "read",
              "editing",
              "saving",
              "error"
            ]
          },
          {
            "slug": "rich-text-editor",
            "name": "Rich Text Editor",
            "aliases": [
              "rte",
              "wysiwyg editor",
              "richer text fields",
              "content editor",
              "document editor",
              "markdown editor",
              "prose editor"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "code-editor",
            "name": "Code Editor",
            "aliases": [
              "code input",
              "syntax-highlighted input",
              "editor",
              "monaco",
              "codemirror",
              "script field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "color-picker",
            "name": "Color Picker",
            "aliases": [
              "colorpicker",
              "color well",
              "color area",
              "color slider",
              "color wheel",
              "color loupe",
              "swatch picker",
              "swatchcolorpicker",
              "eyedropper",
              "hex input"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "date-input",
            "name": "Date Input",
            "aliases": [
              "memorable date",
              "date field",
              "dd mm yyyy input",
              "segmented date field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "date-picker",
            "name": "Date Picker",
            "aliases": [
              "datepicker",
              "calendar picker",
              "datetime picker",
              "date select",
              "date dialog"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ],
            "checklist": [
              "Calendar grid — A month view with days arranged in a weekly grid, navigable forward and backward by month, as the primary date selection surface",
              "Text input alongside — A free-text date field paired with the calendar, so users who know the date can type it rather than relying on clicking only",
              "Date range selection (if applicable) — The ability to select a start and end date, with the range highlighted across the calendar grid and both values independently editable",
              "Disabled dates — Past dates, unavailable dates, or out-of-range dates visually distinct from selectable ones",
              "Today shortcut — A clearly labelled button or link to jump to today's date",
              "Locale and format — The calendar respecting regional conventions e.g. week starting on Monday or Sunday, date format in the text input matching the user's locale (DD/MM or MM/DD)",
              "Time selection (if applicable) — When a time is also required, a time picker integrated with or accessible directly from the date picker (not a separate, disconnected control)"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "time-picker",
            "name": "Time Picker",
            "aliases": [
              "timepicker",
              "clock picker",
              "time field",
              "time select",
              "duration picker"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "date-range-picker",
            "name": "Date Range Picker",
            "aliases": [
              "range calendar",
              "from to picker",
              "date range",
              "daterangepicker",
              "period picker"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "calendar",
            "name": "Calendar",
            "aliases": [
              "month view",
              "date grid",
              "calendar grid",
              "mini calendar",
              "month picker",
              "year picker"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "file-upload",
            "name": "File Upload",
            "aliases": [
              "file input",
              "file uploader",
              "filepicker",
              "file selector",
              "dropzone",
              "drop zone",
              "upload",
              "attachment upload",
              "drag and drop upload",
              "uploader"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "drag-over",
              "uploading",
              "success",
              "error"
            ]
          },
          {
            "slug": "slider",
            "name": "Slider",
            "aliases": [
              "range input",
              "track slider",
              "field range",
              "volume slider",
              "value slider"
            ],
            "aria_pattern": "Slider",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ],
            "checklist": [
              "Style — How the range and the handlers look visually (see documentation for inspiration)",
              "Intervals — Whether the slider intervals has continuous (any value between 0-10000), or stepped (fixed values like a 0-5 rating)",
              "Handles — The elements that users select to drag and change the slider value",
              "Labelling — Text that conveys the spectrum of the slider, or if there are intervals between those ends too",
              "Interaction states — What the handles and slider look like when the user is changing the value"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "range-slider",
            "name": "Range Slider",
            "aliases": [
              "multi-thumb slider",
              "dual slider",
              "two-handle slider",
              "min max slider",
              "scroll zoom bar",
              "price range slider"
            ],
            "aria_pattern": "Slider (Multi-Thumb)",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "tag-input",
            "name": "Tag Input",
            "aliases": [
              "token field",
              "chips input",
              "pills input",
              "tokenizer",
              "keyword input",
              "email token input"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "mentions",
            "name": "Mentions",
            "aliases": [
              "mention input",
              "at mention",
              "@mention",
              "inline people picker",
              "autocomplete mentions"
            ],
            "aria_pattern": "Combobox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "autocomplete",
            "name": "Autocomplete",
            "aliases": [
              "autosuggest",
              "typeahead",
              "suggest input",
              "predictive input",
              "search suggestions"
            ],
            "aria_pattern": "Combobox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "rating-input",
            "name": "Rating Input",
            "aliases": [
              "star rating input",
              "rate",
              "star input",
              "score input",
              "thumbs rating"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "switch",
            "name": "Switch",
            "aliases": [
              "toggle",
              "lightswitch",
              "ui switch",
              "toggle switch",
              "on off switch",
              "switches",
              "checkbox toggle"
            ],
            "aria_pattern": "Switch",
            "states": [
              "off",
              "on",
              "hover",
              "focus",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "phone-input",
            "name": "Phone Input",
            "aliases": [
              "telephone input",
              "input tel",
              "international phone",
              "country code input",
              "phone number field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "currency-input",
            "name": "Currency Input",
            "aliases": [
              "input amount",
              "money input",
              "amount field",
              "price input",
              "numeric currency field"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "signature-pad",
            "name": "Signature Pad",
            "aliases": [
              "signature field",
              "draw signature",
              "sign here",
              "e-signature"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "drawing",
              "signed"
            ]
          },
          {
            "slug": "virtual-keyboard",
            "name": "Virtual Keyboard",
            "aliases": [
              "on-screen keyboard",
              "keypad",
              "soft keyboard",
              "numeric keypad",
              "pin pad"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "filter-input",
            "name": "Filter Input",
            "aliases": [
              "quick filter",
              "table filter",
              "inline search filter",
              "refine input"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          }
        ]
      },
      {
        "slug": "selection",
        "name": "Selection",
        "components": [
          {
            "slug": "checkbox",
            "name": "Checkbox",
            "aliases": [
              "check box",
              "inputcheckbox",
              "tick box",
              "checkmark input"
            ],
            "aria_pattern": "Checkbox",
            "states": [
              "default",
              "hover",
              "focus",
              "checked",
              "unchecked",
              "indeterminate",
              "disabled",
              "error"
            ],
            "checklist": [
              "Label — Text paired with the checkbox to indicate what is enabled if selected",
              "Default selection — Whether the checkbox is selected or not",
              "Style — Make sure checkbox is unique and stands out from other input options, and consider whether it's in a container, how it's grouped, and what colour it uses",
              "States — Default, hover, focused, active and disabled (see documentation tab for examples)"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "checkbox-group",
            "name": "Checkbox Group",
            "aliases": [
              "checkboxgroup",
              "checkbox button group",
              "multi-check group",
              "checklist"
            ],
            "aria_pattern": "Checkbox",
            "states": [
              "default",
              "hover",
              "focus",
              "checked",
              "unchecked",
              "indeterminate",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "radio-button",
            "name": "Radio Button",
            "aliases": [
              "radio",
              "inputradio",
              "option button"
            ],
            "aria_pattern": "Radio Group",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ],
            "checklist": [
              "Label — Text associated with the radio input",
              "Grouping — There must be more than one radio option for the experience to work",
              "Default selection — Start with a radio option selected",
              "Style — Make sure radio is unique and stands out from other input options",
              "Clickability — Consider what is clickable to make the radio option active (text label, container)",
              "States — Radio can be default, active and disabled (see examples below)"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "radio-group",
            "name": "Radio Group",
            "aliases": [
              "choicegroup",
              "radio button group",
              "field radio group",
              "radio list",
              "option group"
            ],
            "aria_pattern": "Radio Group",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "select",
            "name": "Select",
            "aliases": [
              "dropdown",
              "select input",
              "select menu",
              "native select",
              "picker",
              "picklist",
              "customizable select",
              "filterable select",
              "selectlist",
              "selectmenu",
              "singleselect",
              "pull down",
              "option select"
            ],
            "aria_pattern": "Listbox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "multi-select",
            "name": "Multi Select",
            "aliases": [
              "multiselect",
              "multi-choice select",
              "multiple select",
              "tag select",
              "token select"
            ],
            "aria_pattern": "Listbox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "listbox",
            "name": "Listbox",
            "aliases": [
              "selection list",
              "option list",
              "choice list",
              "list picker"
            ],
            "aria_pattern": "Listbox",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "combobox",
            "name": "Combobox",
            "aliases": [
              "combo box",
              "autocomplete select",
              "search select",
              "lookup",
              "editable dropdown",
              "typeahead select"
            ],
            "aria_pattern": "Combobox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "dropdown-menu",
            "name": "Dropdown Menu",
            "aliases": [
              "dropdown",
              "menu",
              "droplist",
              "dynamic menu",
              "action menu",
              "popup menu"
            ],
            "aria_pattern": "Menu and Menubar",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ],
            "checklist": [
              "Trigger affordance — The element that opens the menu: an overflow icon, chevron button, or right-click target",
              "Menu item anatomy — The structure of each action: label, optional leading icon, optional trailing shortcut, optional destructive styling",
              "Section dividers and groups — Dividers and/or labels that break related actions into sections once the menu gets large",
              "Destructive item styling — Visual differentiation — typically the danger colour — for actions that cannot be undone",
              "Nested submenu — A secondary menu triggered by a parent item, used for grouping related but distinct actions",
              "Disabled items — Menu items that are visible but cannot be triggered, indicating an unavailable action",
              "Positioning and overflow — The menu's placement relative to its trigger, repositioning automatically to stay within the viewport",
              "Keyboard shortcut display — Shortcut hints aligned to the trailing edge of the item label"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "menubar",
            "name": "Menubar",
            "aliases": [
              "menu bar",
              "the menu bar",
              "application menu",
              "dock menu",
              "edit menu",
              "top menu"
            ],
            "aria_pattern": "Menu and Menubar",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "segmented-control",
            "name": "Segmented Control",
            "aliases": [
              "toggle button group",
              "segmented buttons",
              "content switcher",
              "pivot",
              "tab-style switcher",
              "segmented picker",
              "view switcher"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "toggle-group",
            "name": "Toggle Group",
            "aliases": [
              "multi-toggle",
              "button toggle group",
              "toggle bar",
              "icon toggle group"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "chip",
            "name": "Chip",
            "aliases": [
              "chips",
              "filter chip",
              "input chip",
              "assist chip",
              "suggestion chip",
              "pill",
              "token",
              "lozenge",
              "selectable tag"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "removable"
            ]
          },
          {
            "slug": "tree-select",
            "name": "Tree Select",
            "aliases": [
              "treeselect",
              "hierarchical select",
              "nested dropdown",
              "category picker"
            ],
            "aria_pattern": "Tree View",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "cascader",
            "name": "Cascader",
            "aliases": [
              "cascading select",
              "dependent dropdowns",
              "chained select",
              "drill-down select"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "transfer",
            "name": "Transfer",
            "aliases": [
              "dueling picklist",
              "list builder",
              "shuttle",
              "dual list box",
              "pick list transfer"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "visual-picker",
            "name": "Visual Picker",
            "aliases": [
              "selection card",
              "card select",
              "tile select",
              "choice card",
              "swatch group",
              "image select",
              "option card"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "filter-panel",
            "name": "Filter Panel",
            "aliases": [
              "facets",
              "faceted search",
              "refinements",
              "filter bar",
              "filter chips",
              "filter sidebar",
              "applied filters"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sort-control",
            "name": "Sort Control",
            "aliases": [
              "sort by",
              "order control",
              "sort menu",
              "column sort",
              "sort toggle"
            ],
            "aria_pattern": null,
            "states": [
              "none",
              "ascending",
              "descending"
            ]
          },
          {
            "slug": "people-picker",
            "name": "People Picker",
            "aliases": [
              "peoplepicker",
              "user picker",
              "assignee picker",
              "member select",
              "contact picker"
            ],
            "aria_pattern": "Combobox",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "emoji-picker",
            "name": "Emoji Picker",
            "aliases": [
              "reaction picker",
              "emoji selector",
              "emoji keyboard",
              "sticker picker"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "icon-picker",
            "name": "Icon Picker",
            "aliases": [
              "icon selector",
              "glyph picker",
              "symbol picker"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          }
        ]
      },
      {
        "slug": "navigation",
        "name": "Navigation",
        "components": [
          {
            "slug": "navigation-menu",
            "name": "Navigation Menu",
            "aliases": [
              "navigation",
              "nav",
              "global navigation",
              "primary nav",
              "main menu",
              "site nav"
            ],
            "aria_pattern": "Landmarks",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "current",
              "disabled"
            ]
          },
          {
            "slug": "navbar",
            "name": "Navbar",
            "aliases": [
              "navigation bar",
              "app bar",
              "top app bar",
              "masthead",
              "global header",
              "top nav",
              "header bar"
            ],
            "aria_pattern": "Landmarks"
          },
          {
            "slug": "header",
            "name": "Header",
            "aliases": [
              "site header",
              "page header",
              "section header",
              "pageheader",
              "banner region"
            ],
            "aria_pattern": "Landmarks"
          },
          {
            "slug": "footer",
            "name": "Footer",
            "aliases": [
              "site footer",
              "global footer",
              "contentinfo",
              "page footer",
              "bottom bar"
            ],
            "aria_pattern": "Landmarks"
          },
          {
            "slug": "sidebar",
            "name": "Sidebar",
            "aliases": [
              "side navigation",
              "side nav",
              "sidenav",
              "vertical navigation",
              "rail",
              "navigation rail",
              "left nav",
              "inspector rail"
            ],
            "aria_pattern": "Landmarks",
            "states": [
              "expanded",
              "collapsed",
              "hover",
              "focus"
            ]
          },
          {
            "slug": "navigation-drawer",
            "name": "Navigation Drawer",
            "aliases": [
              "drawer nav",
              "off-canvas nav",
              "hamburger drawer",
              "mobile menu",
              "slide-out nav"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "tab-bar",
            "name": "Tab Bar",
            "aliases": [
              "bottom navigation",
              "bottom nav",
              "navigation bar (android)",
              "tab bar (ios)",
              "mobile tab bar"
            ],
            "aria_pattern": "Tabs",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "tabs",
            "name": "Tabs",
            "aliases": [
              "tabbed interface",
              "tab",
              "tab views",
              "vertical tabs",
              "navs and tabs",
              "tab group",
              "tab strip"
            ],
            "aria_pattern": "Tabs",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ],
            "checklist": [
              "Labels — Name of each tab",
              "Content area — Where the content for the active tab is displayed",
              "Style — How the active tab and inactive tabs differentiate visually, as well as the tab container overall",
              "Item order — Consider the arrangement of tabs to be ordered by popularity or familiarity",
              "States — Default, active, hover are the key states"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "breadcrumbs",
            "name": "Breadcrumbs",
            "aliases": [
              "breadcrumb",
              "breadcrumb trail",
              "path control",
              "path",
              "crumbs",
              "location trail"
            ],
            "aria_pattern": "Breadcrumb",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "current",
              "disabled"
            ]
          },
          {
            "slug": "pagination",
            "name": "Pagination",
            "aliases": [
              "pager",
              "paging",
              "page controls",
              "page navigation",
              "load more pager",
              "page dots"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "current",
              "disabled"
            ]
          },
          {
            "slug": "progress-stepper",
            "name": "Progress Stepper",
            "aliases": [
              "progress indicator",
              "progress tracker",
              "steps",
              "step indicator",
              "stepped process",
              "process list",
              "wizard",
              "multi-step form",
              "setup assistant",
              "onboarding steps"
            ],
            "aria_pattern": null,
            "states": [
              "incomplete",
              "current",
              "complete",
              "error",
              "disabled"
            ]
          },
          {
            "slug": "mega-menu",
            "name": "Mega Menu",
            "aliases": [
              "large dropdown nav",
              "full-width dropdown",
              "mega dropdown",
              "category flyout"
            ],
            "aria_pattern": "Menu and Menubar",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "in-page-navigation",
            "name": "In-Page Navigation",
            "aliases": [
              "anchor nav",
              "table of contents",
              "toc",
              "on this page",
              "jump links",
              "scrollspy",
              "affix nav",
              "section nav"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "current",
              "disabled"
            ]
          },
          {
            "slug": "tree-view",
            "name": "Tree View",
            "aliases": [
              "tree",
              "outline view",
              "nav tree",
              "directory tree",
              "folder tree",
              "hierarchy view"
            ],
            "aria_pattern": "Tree View",
            "states": [
              "collapsed",
              "expanded",
              "selected",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "treegrid",
            "name": "Treegrid",
            "aliases": [
              "tree grid",
              "table tree",
              "hierarchical table",
              "expandable rows table"
            ],
            "aria_pattern": "Treegrid",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "column-view",
            "name": "Column View",
            "aliases": [
              "miller columns",
              "column browser",
              "finder columns",
              "multi-column browser"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "infinite-scroll",
            "name": "Infinite Scroll",
            "aliases": [
              "load more",
              "endless scroll",
              "virtual scroll",
              "virtualized list",
              "lazy list",
              "auto pagination"
            ],
            "aria_pattern": "Feed",
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "announcement-bar",
            "name": "Announcement Bar",
            "aliases": [
              "top bar",
              "utility bar",
              "trial bar",
              "try banner",
              "promo bar",
              "site-wide banner",
              "notification bar",
              "marketing bar"
            ],
            "aria_pattern": null,
            "states": [
              "visible",
              "dismissed"
            ]
          },
          {
            "slug": "locale-selector",
            "name": "Locale Selector",
            "aliases": [
              "language selector",
              "language switcher",
              "region picker",
              "country selector"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "workspace-switcher",
            "name": "Workspace Switcher",
            "aliases": [
              "org switcher",
              "account switcher",
              "tenant picker",
              "team switcher",
              "project switcher",
              "environment switcher"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "back-button",
            "name": "Back Button",
            "aliases": [
              "up navigation",
              "return button",
              "navigate back",
              "back link"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "app-shell",
            "name": "App Shell",
            "aliases": [
              "ui shell",
              "page shell",
              "application frame",
              "layout shell",
              "admin shell",
              "dashboard shell"
            ],
            "aria_pattern": null
          },
          {
            "slug": "dock",
            "name": "Dock",
            "aliases": [
              "app dock",
              "launcher bar",
              "taskbar",
              "macos dock"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          }
        ]
      },
      {
        "slug": "data-display",
        "name": "Data Display",
        "components": [
          {
            "slug": "table",
            "name": "Table",
            "aliases": [
              "tables",
              "data table",
              "static table",
              "structured list",
              "tabular data",
              "tablestateless"
            ],
            "aria_pattern": "Table",
            "checklist": [
              "Table header — The value of each column to provide structure for the row content",
              "Row style — Borders and contrasting background colours can be explored to differentiate",
              "Spacing — Define the consistent padding of each row and the header",
              "Search — The ability to find a specific keyword or row",
              "Actions — Performing a task based on the row and information seen e.g. view, edit, delete",
              "Filter and sort — Allow users to customise what they want to see in the table and in which order",
              "Responsiveness — Determine the structure on significantly smaller devices - whether the information collapses into an accordion for example",
              "Pagination — Breakpoints in the table for digesting information in parts"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "data-grid",
            "name": "Data Grid",
            "aliases": [
              "grid",
              "datagrid",
              "detailslist",
              "interactive grid",
              "spreadsheet grid",
              "editable table",
              "virtual table"
            ],
            "aria_pattern": "Grid",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "list",
            "name": "List",
            "aliases": [
              "list group",
              "basic list",
              "lists",
              "groupedlist",
              "collection",
              "list item",
              "item",
              "stacked list"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "description-list",
            "name": "Description List",
            "aliases": [
              "definition list",
              "key-value list",
              "detail list",
              "summary detail",
              "property list",
              "metadata list",
              "dl"
            ],
            "aria_pattern": null
          },
          {
            "slug": "card",
            "name": "Card",
            "aliases": [
              "tile",
              "surface card",
              "documentcard",
              "cards",
              "content card",
              "panel card"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ],
            "checklist": [
              "Style — Consider default background, border, shadow",
              "Consistency — Ensure you have one base style for all cards",
              "Spacing — A framework to sort your padding levels by",
              "Responsiveness — Consider the structure of the content in all various screen sizes",
              "Content hierarchy — The primary action/s you want users to perform"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "card-grid",
            "name": "Card Grid",
            "aliases": [
              "tile grid",
              "gallery grid",
              "card collection",
              "card list"
            ],
            "aria_pattern": null
          },
          {
            "slug": "stat",
            "name": "Stat",
            "aliases": [
              "statistic",
              "metric",
              "kpi",
              "stat tile",
              "metric card",
              "summary box",
              "number callout",
              "scorecard",
              "big number"
            ],
            "aria_pattern": null
          },
          {
            "slug": "badge",
            "name": "Badge",
            "aliases": [
              "notification badge",
              "counter badge",
              "status badge",
              "pill",
              "lozenge",
              "sticker",
              "count indicator",
              "dot badge"
            ],
            "aria_pattern": null,
            "checklist": [
              "Detail — A badge can have a numeric value, or a basic shape",
              "Color — Badges can represent your standard states - error, success, warning",
              "Offset position — A badge should sit outside it's relevant element to gain attention easier"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "tag",
            "name": "Tag",
            "aliases": [
              "tag group",
              "keyword",
              "label tag",
              "topic tag",
              "category tag"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "removable",
              "disabled"
            ]
          },
          {
            "slug": "avatar",
            "name": "Avatar",
            "aliases": [
              "profile picture",
              "user picture",
              "persona",
              "profile photo",
              "user image",
              "gravatar",
              "initials avatar"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "image",
              "initials",
              "fallback",
              "online",
              "offline"
            ],
            "checklist": [
              "Visualiser — Show what the avatar looks like before posting or updating",
              "Link to upload or select avatar — Accessible link for a user to select",
              "Placeholder image — If a user hasn't uploaded or added an avatar yet there should be a placeholder e.g. a default icon, or the user's initials",
              "Acceptable file types — Tell the user what file types are allowed (JPEG, PNG, SVG)",
              "Status change updating avatar — This doesn't have to be apart of the avatar component (it can be a banner or toast for example), but it is possible to incorporate it",
              "Alternatives — If a user doesn't want to upload an image, offer an illustrative alternative, as it's better than nothing and can still convey their personality",
              "Editing uploaded avatar — Allow a user to crop and resize their avatar before saving it"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "avatar-group",
            "name": "Avatar Group",
            "aliases": [
              "facepile",
              "avatar stack",
              "user stack",
              "participant list",
              "overlapping avatars"
            ],
            "aria_pattern": null
          },
          {
            "slug": "icon",
            "name": "Icon",
            "aliases": [
              "iconography",
              "glyph",
              "symbol",
              "accessible icon",
              "icon set",
              "dynamic icon"
            ],
            "aria_pattern": null,
            "checklist": [
              "Responsiveness — The flexibility in detail of the icons at varying sizes",
              "Visual style consistency — All icons share the same stroke weight, corner radius, and optical sizing approach",
              "Color — Black and white, flat colors or gradients",
              "Naming — Name an icon by what it literally is so it can be used flexibly"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "kbd",
            "name": "Kbd",
            "aliases": [
              "keyboard key",
              "keycap",
              "keytip",
              "shortcut key",
              "hotkey",
              "key hint"
            ],
            "aria_pattern": null
          },
          {
            "slug": "code-block",
            "name": "Code Block",
            "aliases": [
              "code",
              "code snippet",
              "inline code",
              "snippet",
              "pre",
              "syntax highlighter",
              "fenced code"
            ],
            "aria_pattern": null
          },
          {
            "slug": "diff-view",
            "name": "Diff View",
            "aliases": [
              "change view",
              "commit view",
              "side-by-side diff",
              "unified diff",
              "git diff",
              "patch view"
            ],
            "aria_pattern": null
          },
          {
            "slug": "terminal",
            "name": "Terminal",
            "aliases": [
              "console",
              "command output",
              "shell view",
              "cli output",
              "log view",
              "tty"
            ],
            "aria_pattern": null
          },
          {
            "slug": "quote",
            "name": "Quote",
            "aliases": [
              "blockquote",
              "block quote",
              "pull quote",
              "testimonial",
              "citation block"
            ],
            "aria_pattern": null
          },
          {
            "slug": "heading",
            "name": "Heading",
            "aliases": [
              "title",
              "display text",
              "section title",
              "h1",
              "page title",
              "headline"
            ],
            "aria_pattern": null
          },
          {
            "slug": "typography",
            "name": "Typography",
            "aliases": [
              "text",
              "body text",
              "paragraph",
              "prose",
              "detail text",
              "caption",
              "type scale",
              "text styles"
            ],
            "aria_pattern": null
          },
          {
            "slug": "timeline",
            "name": "Timeline",
            "aliases": [
              "activity timeline",
              "activity feed",
              "history",
              "changelog",
              "event log",
              "vertical timeline",
              "audit trail"
            ],
            "aria_pattern": null
          },
          {
            "slug": "feed",
            "name": "Feed",
            "aliases": [
              "activity stream",
              "news feed",
              "post feed",
              "stream",
              "infinite feed"
            ],
            "aria_pattern": "Feed",
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "comment",
            "name": "Comment",
            "aliases": [
              "comment thread",
              "discussion",
              "reply",
              "annotation thread",
              "conversation thread"
            ],
            "aria_pattern": null
          },
          {
            "slug": "accordion",
            "name": "Accordion",
            "aliases": [
              "collapse",
              "collapsible sections",
              "expandable",
              "expander",
              "expandable section",
              "show hide",
              "arrow toggle",
              "toggle sections"
            ],
            "aria_pattern": "Accordion",
            "states": [
              "collapsed",
              "expanded",
              "hover",
              "focus",
              "disabled"
            ],
            "checklist": [
              "Header — The clickable area that triggers expanding and collapsing and has a title",
              "Expand/collapse icon — Visual indicator of the current state — typically a plus/minus, or a caret/chevron that rotates between states",
              "Content area — The content that shows or hides when toggled, containing detailed information associated with the header",
              "States — Default (collapsed), expanded, hover, focused, and disabled",
              "Expanding logic — Decide if users can open multiple sections at once, or one at a time"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "collapsible",
            "name": "Collapsible",
            "aliases": [
              "disclosure",
              "details",
              "summary",
              "show hide",
              "disclosure control",
              "disclosure triangle",
              "expand collapse",
              "toggle panel"
            ],
            "aria_pattern": "Disclosure",
            "states": [
              "collapsed",
              "expanded",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "separator",
            "name": "Separator",
            "aliases": [
              "divider",
              "horizontal rule",
              "vertical rule",
              "hr",
              "rule",
              "split line"
            ],
            "aria_pattern": null
          },
          {
            "slug": "empty-state",
            "name": "Empty State",
            "aliases": [
              "empty",
              "blank state",
              "zero state",
              "placeholder state",
              "no results",
              "nothing here",
              "first-run state"
            ],
            "aria_pattern": null
          },
          {
            "slug": "skeleton",
            "name": "Skeleton",
            "aliases": [
              "skeleton loader",
              "shimmer",
              "placeholder loader",
              "ghost loader",
              "content placeholder",
              "loading skeleton"
            ],
            "aria_pattern": null,
            "states": [
              "loading",
              "loaded"
            ],
            "checklist": [
              "Match content structure — Skeletons should mirror the size and layout of the content that will replace it, to reduce jumpiness on load",
              "Animation — Subtle motion to indicate loading without being too distracting. Can be a shimmer, pulse, or wave motion in the objects",
              "Style — Flat shapes with no depth, can be rounded or sharp",
              "Color scheme — Typically a neutral gray or very soft colour that does not call too much attention and contrasts just enough with its background",
              "Transition to real content — Should be a smooth, subtle movement like a fade out before the content loads"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "rating",
            "name": "Rating",
            "aliases": [
              "rating indicator",
              "star rating",
              "review score",
              "score display",
              "rating display"
            ],
            "aria_pattern": null
          },
          {
            "slug": "meter",
            "name": "Meter",
            "aliases": [
              "gauge",
              "activity ring",
              "progress ring",
              "radial indicator",
              "dial",
              "capacity meter",
              "score meter"
            ],
            "aria_pattern": "Meter"
          },
          {
            "slug": "progress-bar",
            "name": "Progress Bar",
            "aliases": [
              "progress",
              "linear progress",
              "loading bar",
              "determinate progress",
              "indeterminate progress",
              "completion bar"
            ],
            "aria_pattern": null,
            "states": [
              "indeterminate",
              "determinate",
              "complete",
              "error"
            ]
          },
          {
            "slug": "countdown",
            "name": "Countdown",
            "aliases": [
              "timer",
              "clock",
              "countdown timer",
              "sale countdown",
              "time remaining"
            ],
            "aria_pattern": null,
            "states": [
              "running",
              "paused",
              "expired"
            ]
          },
          {
            "slug": "qr-code",
            "name": "QR Code",
            "aliases": [
              "barcode",
              "scan code",
              "qr",
              "matrix code"
            ],
            "aria_pattern": null
          },
          {
            "slug": "calendar-view",
            "name": "Calendar View",
            "aliases": [
              "agenda",
              "scheduler",
              "event calendar",
              "month calendar",
              "week view",
              "booking calendar",
              "gantt calendar"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "map",
            "name": "Map",
            "aliases": [
              "geo map",
              "interactive map",
              "store map",
              "location map",
              "mapbox",
              "leaflet map"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "ticker",
            "name": "Ticker",
            "aliases": [
              "marquee text",
              "scrolling text",
              "news ticker",
              "stock ticker",
              "running headline"
            ],
            "aria_pattern": null
          },
          {
            "slug": "lockup",
            "name": "Lockup",
            "aliases": [
              "title subtitle unit",
              "composed title",
              "brand lockup",
              "icon title pair"
            ],
            "aria_pattern": null
          },
          {
            "slug": "tree",
            "name": "Tree",
            "aliases": [
              "nested list",
              "hierarchy display",
              "org chart",
              "node tree"
            ],
            "aria_pattern": "Tree View",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "json-viewer",
            "name": "JSON Viewer",
            "aliases": [
              "object inspector",
              "data inspector",
              "schema display",
              "tree data view",
              "payload viewer"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "kanban-board",
            "name": "Kanban Board",
            "aliases": [
              "board",
              "swimlanes",
              "task board",
              "column board",
              "trello board"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "dragging",
              "drag-over",
              "dropped",
              "disabled"
            ]
          }
        ]
      },
      {
        "slug": "feedback",
        "name": "Feedback",
        "components": [
          {
            "slug": "alert",
            "name": "Alert",
            "aliases": [
              "inline alert",
              "callout",
              "message",
              "section message",
              "site alert",
              "messagebar",
              "flag",
              "admonition",
              "note",
              "warning",
              "info box",
              "status message"
            ],
            "aria_pattern": "Alert",
            "states": [
              "info",
              "success",
              "warning",
              "error",
              "dismissed"
            ]
          },
          {
            "slug": "banner",
            "name": "Banner",
            "aliases": [
              "alert banner",
              "global banner",
              "page-level alert",
              "system banner",
              "full-width alert",
              "notice bar"
            ],
            "aria_pattern": "Alert",
            "states": [
              "visible",
              "dismissed"
            ],
            "checklist": [
              "Style — How the banner types look (fill, text colour, border radius etc)",
              "Content — A title is a must but you can consider a description if you feel a title does not convey enough information",
              "Types — Banners typically appear as 5 options: information, success, warning, error, neutral. This helps visually establish context and level of importance",
              "Call to action button — A banner may call for the user to do something, like fix the error it is calling out, or viewing the successful outcome of an event",
              "Placement — Where the banner sits on the page, dependent on context and importance",
              "Dismissable — Whether the banner can be dismissed. Positive/neutral banners (info and success) would suit this, but not warning/error banners as they are too critical"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "toast",
            "name": "Toast",
            "aliases": [
              "snackbar",
              "flash message",
              "toaster",
              "transient notification",
              "temporary message",
              "popup notification",
              "growl"
            ],
            "aria_pattern": "Alert",
            "states": [
              "entering",
              "visible",
              "exiting"
            ],
            "checklist": [
              "Copy — The text in the toast",
              "Placement — Toast should appear on the corners of the viewport, not as the focus",
              "Usage — Toasts are triggered to appear after an action or event",
              "Variants — Dictated by colour usually, variants affects the emotion of a message",
              "Length of appearance — Toasts should be visible long enough to read but short enough to not obstruct other information for too long",
              "Dismissable — Depending on the amount of content, a toast can be closed by a user (it should fade away shortly after appearing if it cannot be manually dismissed)"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "notification-center",
            "name": "Notification Center",
            "aliases": [
              "notifications",
              "notification list",
              "notification inbox",
              "push notification",
              "activity inbox",
              "bell menu"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "unread",
              "read"
            ]
          },
          {
            "slug": "status-indicator",
            "name": "Status Indicator",
            "aliases": [
              "status light",
              "status dot",
              "presence indicator",
              "online status",
              "health indicator",
              "state pill",
              "uptime dot"
            ],
            "aria_pattern": null,
            "states": [
              "online",
              "offline",
              "busy",
              "away",
              "error",
              "unknown"
            ]
          },
          {
            "slug": "spinner",
            "name": "Spinner",
            "aliases": [
              "loader",
              "loading",
              "loading indicator",
              "activity indicator",
              "progress circle",
              "progress ring",
              "inline loading",
              "busy indicator",
              "circular progress",
              "spin"
            ],
            "aria_pattern": null,
            "states": [
              "spinning",
              "complete"
            ],
            "checklist": [
              "Visual indicator — A clear representation that content is loading or in progress of change",
              "Text — Explaining the loading state",
              "Time — Determine how long the time between two actions must be to require a loading component",
              "Accessibility — Ensure your loading state can be clearly seen",
              "Visuals — Entertain the user with an illustration during the loading state"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "loading-overlay",
            "name": "Loading Overlay",
            "aliases": [
              "scrim overlay",
              "busy overlay",
              "blocking loader",
              "page loader",
              "full-page spinner"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible"
            ]
          },
          {
            "slug": "tooltip",
            "name": "Tooltip",
            "aliases": [
              "toggletip",
              "hint",
              "info tip",
              "hover hint",
              "title tip",
              "help tooltip"
            ],
            "aria_pattern": "Tooltip",
            "states": [
              "hidden",
              "visible",
              "delayed"
            ],
            "checklist": [
              "Information — Keep content clear and concise",
              "Contrast — The background should be different from the underlying content",
              "Visibility — How a tooltip looks and shows",
              "Dismiss action — Depending on how intrusive or extensive the tooltip is, a dismiss allows the user to feel more in control and allow the tooltip to feel more flexible and non-compulsory"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "alert-dialog",
            "name": "Alert Dialog",
            "aliases": [
              "confirm dialog",
              "confirmation modal",
              "destructive confirm",
              "alert and message dialogs",
              "prompt dialog",
              "are-you-sure modal"
            ],
            "aria_pattern": "Alert and Message Dialogs",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "error-page",
            "name": "Error Page",
            "aliases": [
              "404 page",
              "500 page",
              "error boundary",
              "fallback ui",
              "result page",
              "not found",
              "crash screen"
            ],
            "aria_pattern": null
          },
          {
            "slug": "coachmark",
            "name": "Coachmark",
            "aliases": [
              "product tour",
              "walkthrough",
              "tour",
              "spotlight tip",
              "hotspot",
              "beacon",
              "onboarding tour",
              "welcome mat",
              "teaching bubble",
              "tip popover"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "survey",
            "name": "Survey",
            "aliases": [
              "nps",
              "feedback widget",
              "rating prompt",
              "questionnaire",
              "poll",
              "csat",
              "feedback form"
            ],
            "aria_pattern": null
          },
          {
            "slug": "live-region",
            "name": "Live Region",
            "aliases": [
              "aria-live",
              "announcement",
              "screen reader announcement",
              "polite region",
              "assertive region",
              "status region"
            ],
            "aria_pattern": "Alert"
          },
          {
            "slug": "validation-summary",
            "name": "Validation Summary",
            "aliases": [
              "error list",
              "error summary",
              "form-level errors",
              "validation panel"
            ],
            "aria_pattern": null
          },
          {
            "slug": "inline-message",
            "name": "Inline Message",
            "aliases": [
              "field-level message",
              "contextual message",
              "helper alert",
              "row message"
            ],
            "aria_pattern": null,
            "states": [
              "info",
              "success",
              "warning",
              "error"
            ]
          },
          {
            "slug": "progress-feedback",
            "name": "Progress Feedback",
            "aliases": [
              "upload progress",
              "task progress",
              "step progress toast",
              "background job status",
              "sync status"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "confirmation-state",
            "name": "Confirmation State",
            "aliases": [
              "success state",
              "completion screen",
              "thank you page",
              "order confirmed",
              "done state"
            ],
            "aria_pattern": null
          },
          {
            "slug": "rate-limit-notice",
            "name": "Rate Limit Notice",
            "aliases": [
              "quota warning",
              "usage warning",
              "throttle message",
              "limit reached"
            ],
            "aria_pattern": null
          }
        ]
      },
      {
        "slug": "overlays",
        "name": "Overlays",
        "components": [
          {
            "slug": "modal",
            "name": "Modal",
            "aliases": [
              "dialog",
              "modal dialog",
              "modal window",
              "popup",
              "overlay dialog",
              "modals",
              "lightbox dialog"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ],
            "checklist": [
              "Title — Clear, simple text explaining the action of the modal",
              "Actionable item — A button or link to continue or close the event",
              "Close action — A way to exit the modal",
              "Responsiveness — Consider the size of the modal on different device sizes, and whether a modal is suitable on all",
              "Background change behind modal — Darken, blur or lighten - change the background behind the modal to bring focus to it",
              "Description — Incase they require more information to understand how to make their decision"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "dialog",
            "name": "Dialog",
            "aliases": [
              "non-modal dialog",
              "corner dialog",
              "inline dialog",
              "floating dialog",
              "panel dialog"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "drawer",
            "name": "Drawer",
            "aliases": [
              "tray",
              "flyout",
              "side sheet",
              "off-canvas",
              "offcanvas",
              "side panel",
              "right side panel",
              "slide-over",
              "drawers"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ],
            "checklist": [
              "Placement — Which edge the drawer slides from - most commonly from left (navigation) or right (details/settings)",
              "Dimensions — Typically full height, but width can vary. Should be wide enough for complex content to be shown, without taking over the entire page",
              "Overlay — A semi-transparent background for the remaining screen area to bring focus to the drawer",
              "Header — Top section with a title describing drawer contents or purpose, along with a close action (optional)",
              "Content area — Main section, which should be scrollable if content exceeds window height",
              "Open and close trigger — How user activate the drawer — typically a button to open, while closing can have multiple ways: clicking overlay, a close button, or pressing Esc on keyboard should all be active options",
              "Footer — Fixed area at the bottom for actions, usually a primary and secondary e.g. Save & Cancel"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "sheet",
            "name": "Sheet",
            "aliases": [
              "bottom sheet",
              "half sheet",
              "modal sheet",
              "sheets",
              "action drawer",
              "mobile sheet"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "popover",
            "name": "Popover",
            "aliases": [
              "popup",
              "overlay panel",
              "floating panel",
              "anchored overlay",
              "popovers"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "hover-card",
            "name": "Hover Card",
            "aliases": [
              "hovercard",
              "preview card",
              "link preview",
              "profile hovercard",
              "rich tooltip"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "lightbox",
            "name": "Lightbox",
            "aliases": [
              "image viewer",
              "zoom overlay",
              "gallery overlay",
              "photo viewer",
              "media lightbox"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "backdrop",
            "name": "Backdrop",
            "aliases": [
              "scrim",
              "blanket",
              "dimmer",
              "overlay",
              "mask",
              "modal background"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible"
            ]
          },
          {
            "slug": "portal",
            "name": "Portal",
            "aliases": [
              "layer",
              "layer manager",
              "positioner",
              "overlay root",
              "teleport"
            ],
            "aria_pattern": null
          },
          {
            "slug": "focus-trap",
            "name": "Focus Trap",
            "aliases": [
              "focustrapzone",
              "focuszone",
              "focusgroup",
              "scoped focusgroup",
              "keyboard trap",
              "focus scope"
            ],
            "aria_pattern": null
          },
          {
            "slug": "full-screen-takeover",
            "name": "Full-Screen Takeover",
            "aliases": [
              "cover sheet",
              "interstitial",
              "full page modal",
              "immersive overlay",
              "splash overlay"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "floating-window",
            "name": "Floating Window",
            "aliases": [
              "window",
              "windows",
              "panels",
              "picture-in-picture",
              "draggable window",
              "mini player window"
            ],
            "aria_pattern": null,
            "states": [
              "open",
              "minimized",
              "maximized",
              "closed"
            ]
          },
          {
            "slug": "ornament",
            "name": "Ornament",
            "aliases": [
              "floating accessory",
              "visionos ornament",
              "attached control panel"
            ],
            "aria_pattern": null
          },
          {
            "slug": "dropdown-panel",
            "name": "Dropdown Panel",
            "aliases": [
              "flyout panel",
              "anchored dropdown",
              "mega dropdown panel",
              "popup panel"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          }
        ]
      },
      {
        "slug": "layout",
        "name": "Layout",
        "components": [
          {
            "slug": "stack",
            "name": "Stack",
            "aliases": [
              "vstack",
              "hstack",
              "flex",
              "inline stack",
              "cluster",
              "stack layout",
              "row",
              "column"
            ],
            "aria_pattern": null
          },
          {
            "slug": "grid",
            "name": "Grid",
            "aliases": [
              "layout grid",
              "gridcolumn",
              "columns",
              "row col",
              "grid lists",
              "css grid",
              "twelve column grid"
            ],
            "aria_pattern": null
          },
          {
            "slug": "container",
            "name": "Container",
            "aliases": [
              "wrapper",
              "page container",
              "max-width container",
              "content well",
              "constrained width",
              "shell container"
            ],
            "aria_pattern": null
          },
          {
            "slug": "box",
            "name": "Box",
            "aliases": [
              "surface",
              "frame",
              "view",
              "segment",
              "primitive box",
              "div wrapper"
            ],
            "aria_pattern": null
          },
          {
            "slug": "section",
            "name": "Section",
            "aliases": [
              "content section",
              "region",
              "page section",
              "block section",
              "landmark region"
            ],
            "aria_pattern": "Landmarks"
          },
          {
            "slug": "panel",
            "name": "Panel",
            "aliases": [
              "pane",
              "inspector",
              "properties panel",
              "docked panel",
              "side pane",
              "detail panel"
            ],
            "aria_pattern": null
          },
          {
            "slug": "split-view",
            "name": "Split View",
            "aliases": [
              "window splitter",
              "splitter",
              "resizable panels",
              "two-pane",
              "master-detail",
              "split panel",
              "gutter"
            ],
            "aria_pattern": "Window Splitter",
            "states": [
              "idle",
              "dragging",
              "collapsed"
            ]
          },
          {
            "slug": "aspect-ratio",
            "name": "Aspect Ratio",
            "aliases": [
              "ratio box",
              "intrinsic ratio",
              "aspect box",
              "16:9 container"
            ],
            "aria_pattern": null
          },
          {
            "slug": "scroll-area",
            "name": "Scroll Area",
            "aliases": [
              "scroll view",
              "scrollablepane",
              "overflow container",
              "scroll container",
              "custom scrollbar",
              "scrollbar"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "scrolling",
              "scrolled-top",
              "scrolled-end"
            ]
          },
          {
            "slug": "spacer",
            "name": "Spacer",
            "aliases": [
              "space",
              "gap",
              "flex spacer",
              "filler"
            ],
            "aria_pattern": null
          },
          {
            "slug": "masonry",
            "name": "Masonry",
            "aliases": [
              "pinterest layout",
              "waterfall grid",
              "brick layout",
              "staggered grid"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sticky",
            "name": "Sticky",
            "aliases": [
              "sticky header",
              "sticky footer",
              "affix",
              "pinned element",
              "sticky sidebar",
              "stuck state"
            ],
            "aria_pattern": null,
            "states": [
              "unstuck",
              "stuck"
            ]
          },
          {
            "slug": "resizable",
            "name": "Resizable",
            "aliases": [
              "resize handle",
              "width detector",
              "size detector",
              "resizegroup",
              "drag to resize"
            ],
            "aria_pattern": "Window Splitter",
            "states": [
              "idle",
              "resizing"
            ]
          },
          {
            "slug": "elevation",
            "name": "Elevation",
            "aliases": [
              "shadow",
              "surface level",
              "depth",
              "z-layer",
              "box shadow scale"
            ],
            "aria_pattern": null
          },
          {
            "slug": "visually-hidden",
            "name": "Visually Hidden",
            "aliases": [
              "sr-only",
              "screenreader only",
              "screen reader text",
              "a11y hidden",
              "offscreen text"
            ],
            "aria_pattern": null
          },
          {
            "slug": "direction-provider",
            "name": "Direction Provider",
            "aliases": [
              "rtl",
              "ltr",
              "direction",
              "bidi support",
              "text direction"
            ],
            "aria_pattern": null
          },
          {
            "slug": "theme-provider",
            "name": "Theme Provider",
            "aliases": [
              "theme",
              "themes",
              "configprovider",
              "localeprovider",
              "provider",
              "design tokens",
              "dark mode provider",
              "color scheme"
            ],
            "aria_pattern": null,
            "states": [
              "light",
              "dark",
              "system"
            ]
          },
          {
            "slug": "safe-area",
            "name": "Safe Area",
            "aliases": [
              "inset",
              "notch padding",
              "edge insets",
              "safe area inset",
              "home indicator padding"
            ],
            "aria_pattern": null
          },
          {
            "slug": "media-object",
            "name": "Media Object",
            "aliases": [
              "item layout",
              "itemlayout",
              "avatar text row",
              "media row",
              "thumbnail row"
            ],
            "aria_pattern": null
          },
          {
            "slug": "hero",
            "name": "Hero",
            "aliases": [
              "jumbotron",
              "hero banner",
              "above the fold",
              "splash section",
              "header hero"
            ],
            "aria_pattern": null
          },
          {
            "slug": "bento-grid",
            "name": "Bento Grid",
            "aliases": [
              "feature grid",
              "tile mosaic",
              "bento box layout",
              "mosaic grid"
            ],
            "aria_pattern": null
          },
          {
            "slug": "page-header",
            "name": "Page Header",
            "aliases": [
              "title bar",
              "page title block",
              "breadcrumb header",
              "section heading block"
            ],
            "aria_pattern": null
          },
          {
            "slug": "center",
            "name": "Center",
            "aliases": [
              "centered layout",
              "center box",
              "vertical center",
              "place items center"
            ],
            "aria_pattern": null
          },
          {
            "slug": "responsive-wrapper",
            "name": "Responsive Wrapper",
            "aliases": [
              "breakpoint container",
              "container query",
              "media query helper",
              "show hide at breakpoint",
              "responsive utility"
            ],
            "aria_pattern": null
          }
        ]
      },
      {
        "slug": "media",
        "name": "Media",
        "components": [
          {
            "slug": "image",
            "name": "Image",
            "aliases": [
              "picture",
              "img",
              "image view",
              "responsive image",
              "thumbnail",
              "next image",
              "optimized image"
            ],
            "aria_pattern": null,
            "states": [
              "loading",
              "loaded",
              "error"
            ]
          },
          {
            "slug": "image-gallery",
            "name": "Image Gallery",
            "aliases": [
              "image list",
              "grid list",
              "photo grid",
              "media gallery",
              "showcase",
              "masonry gallery",
              "album"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "video-player",
            "name": "Video Player",
            "aliases": [
              "video",
              "media player",
              "player",
              "hls player",
              "youtube embed",
              "video controls"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "playing",
              "paused",
              "buffering",
              "error"
            ]
          },
          {
            "slug": "audio-player",
            "name": "Audio Player",
            "aliases": [
              "audio",
              "sound player",
              "podcast player",
              "music player",
              "audio controls"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "playing",
              "paused",
              "buffering",
              "error"
            ]
          },
          {
            "slug": "embed",
            "name": "Embed",
            "aliases": [
              "iframe",
              "web view",
              "web preview",
              "oembed",
              "sandbox preview",
              "external embed"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "carousel",
            "name": "Carousel",
            "aliases": [
              "content slider",
              "slideshow",
              "image rotator",
              "coverflow",
              "swiper",
              "slider gallery",
              "banner rotator"
            ],
            "aria_pattern": "Carousel",
            "states": [
              "idle",
              "autoplay",
              "paused",
              "transitioning"
            ],
            "checklist": [
              "Ways of interaction — Defining whether the carousel transitions are auto-play, navigated by controls, or both",
              "Visual progress indicator — Show dots, numbers, or a progress bar so users know how many slides there are and which one they're currently viewing",
              "Dimensions and alignment — The size of the items in the carousel, and their responsiveness across devices",
              "Animation behaviour — The direction, speed and feeling of how the items transition between each other",
              "Focused item state — if your carousel shows one item a time, the one on focus should appear different to the items that are entering and exiting"
            ],
            "checklist_source": "checklist.design"
          },
          {
            "slug": "figure",
            "name": "Figure",
            "aliases": [
              "caption",
              "figcaption",
              "captioned image",
              "illustration block"
            ],
            "aria_pattern": null
          },
          {
            "slug": "file-card",
            "name": "File Card",
            "aliases": [
              "file",
              "attachment",
              "download card",
              "document card",
              "file chip"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "uploading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "file-tree",
            "name": "File Tree",
            "aliases": [
              "directory browser",
              "repo browser",
              "project explorer",
              "folder navigator"
            ],
            "aria_pattern": "Tree View",
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "image-cropper",
            "name": "Image Cropper",
            "aliases": [
              "crop tool",
              "image editor",
              "pan zoom",
              "avatar cropper",
              "crop and rotate"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "cropping",
              "saving"
            ]
          },
          {
            "slug": "image-well",
            "name": "Image Well",
            "aliases": [
              "image drop target",
              "image placeholder input",
              "avatar upload well"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "filled",
              "drag-over"
            ]
          },
          {
            "slug": "camera-capture",
            "name": "Camera Capture",
            "aliases": [
              "capture view",
              "barcode scanner",
              "qr scanner",
              "photo capture",
              "webcam view",
              "document scanner"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "active",
              "captured",
              "error"
            ]
          },
          {
            "slug": "waveform",
            "name": "Waveform",
            "aliases": [
              "audio scrubber",
              "voice visualizer",
              "sound wave",
              "spectrum visualizer"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "playing",
              "paused",
              "buffering",
              "error"
            ]
          },
          {
            "slug": "transcript",
            "name": "Transcript",
            "aliases": [
              "captions",
              "subtitles",
              "transcription view",
              "closed captions",
              "lyrics view"
            ],
            "aria_pattern": null
          },
          {
            "slug": "model-viewer",
            "name": "Model Viewer",
            "aliases": [
              "3d viewer",
              "ar quick look",
              "gltf viewer",
              "three.js canvas",
              "product 3d"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "document-viewer",
            "name": "Document Viewer",
            "aliases": [
              "pdf viewer",
              "file preview",
              "doc preview",
              "slide viewer",
              "ebook reader"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "logo",
            "name": "Logo",
            "aliases": [
              "wordmark",
              "brand band",
              "identifier",
              "brandmark",
              "logo cloud",
              "client logos"
            ],
            "aria_pattern": null
          },
          {
            "slug": "illustration",
            "name": "Illustration",
            "aliases": [
              "spot illustration",
              "empty-state art",
              "decorative graphic",
              "hero illustration"
            ],
            "aria_pattern": null
          },
          {
            "slug": "placeholder-image",
            "name": "Placeholder Image",
            "aliases": [
              "blurhash",
              "lqip",
              "image placeholder",
              "blur-up",
              "dominant color placeholder"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "device-frame",
            "name": "Device Frame",
            "aliases": [
              "phone mockup",
              "browser frame",
              "laptop mockup",
              "screenshot frame",
              "device mockup"
            ],
            "aria_pattern": null
          },
          {
            "slug": "avatar-upload",
            "name": "Avatar Upload",
            "aliases": [
              "profile photo upload",
              "picture picker",
              "change photo"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "uploading",
              "filled",
              "error"
            ]
          }
        ]
      },
      {
        "slug": "motion-effects",
        "name": "Motion & Effects",
        "components": [
          {
            "slug": "transition",
            "name": "Transition",
            "aliases": [
              "animate presence",
              "enter exit",
              "view transition",
              "transitions",
              "fade",
              "slide",
              "mount animation"
            ],
            "aria_pattern": null,
            "states": [
              "enter",
              "entered",
              "exit",
              "exited"
            ]
          },
          {
            "slug": "animation",
            "name": "Animation",
            "aliases": [
              "motion",
              "keyframe animation",
              "css animation",
              "spring animation",
              "tween"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "running",
              "paused",
              "finished"
            ]
          },
          {
            "slug": "page-transition",
            "name": "Page Transition",
            "aliases": [
              "route animation",
              "navigation animation",
              "screen transition"
            ],
            "aria_pattern": null,
            "states": [
              "enter",
              "exit"
            ]
          },
          {
            "slug": "ripple",
            "name": "Ripple",
            "aliases": [
              "line ripple",
              "touch feedback",
              "ink effect",
              "material ripple",
              "press ripple"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "active"
            ]
          },
          {
            "slug": "shimmer",
            "name": "Shimmer",
            "aliases": [
              "skeleton shimmer",
              "loading pulse",
              "gradient sweep",
              "pulse effect"
            ],
            "aria_pattern": null,
            "states": [
              "loading",
              "idle"
            ]
          },
          {
            "slug": "scroll-reveal",
            "name": "Scroll Reveal",
            "aliases": [
              "reveal",
              "fade in on scroll",
              "intersection reveal",
              "appear animation",
              "stagger reveal"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "revealed"
            ]
          },
          {
            "slug": "collapse-animation",
            "name": "Collapse Animation",
            "aliases": [
              "height animation",
              "expand animation",
              "auto height transition",
              "accordion motion"
            ],
            "aria_pattern": null,
            "states": [
              "collapsed",
              "expanding",
              "expanded",
              "collapsing"
            ]
          },
          {
            "slug": "parallax",
            "name": "Parallax",
            "aliases": [
              "depth scroll",
              "parallax layers",
              "background parallax"
            ],
            "aria_pattern": null
          },
          {
            "slug": "scroll-driven-animation",
            "name": "Scroll-Driven Animation",
            "aliases": [
              "scrollytelling",
              "sticky scroll",
              "scroll progress",
              "scroll timeline",
              "pin scroll"
            ],
            "aria_pattern": null
          },
          {
            "slug": "drag-and-drop",
            "name": "Drag and Drop",
            "aliases": [
              "sortable",
              "draggable",
              "reorder",
              "drag handle",
              "kanban drag",
              "marquee selection",
              "dnd",
              "reorderable list"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "dragging",
              "drag-over",
              "dropped",
              "disabled"
            ]
          },
          {
            "slug": "gesture",
            "name": "Gesture",
            "aliases": [
              "swipe actions",
              "pull to refresh",
              "overscroll actions",
              "pinch zoom",
              "long press",
              "touch gesture"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "active",
              "completed"
            ]
          },
          {
            "slug": "typewriter-text",
            "name": "Typewriter Text",
            "aliases": [
              "typing effect",
              "text scramble",
              "word rotate",
              "letter reveal"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "typing",
              "complete"
            ]
          },
          {
            "slug": "count-up",
            "name": "Count Up",
            "aliases": [
              "number ticker",
              "animated counter",
              "odometer",
              "rolling number",
              "stat animation"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "counting",
              "complete"
            ]
          },
          {
            "slug": "confetti",
            "name": "Confetti",
            "aliases": [
              "celebration effect",
              "success burst",
              "particles",
              "fireworks effect"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "firing"
            ]
          },
          {
            "slug": "marquee",
            "name": "Marquee",
            "aliases": [
              "infinite scroll strip",
              "logo scroller",
              "ticker strip",
              "looping banner"
            ],
            "aria_pattern": null,
            "states": [
              "running",
              "paused"
            ]
          },
          {
            "slug": "focus-ring",
            "name": "Focus Ring",
            "aliases": [
              "focus indicator",
              "focus outline",
              "focus visible",
              "keyboard focus style"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible"
            ]
          },
          {
            "slug": "hover-effect",
            "name": "Hover Effect",
            "aliases": [
              "lift",
              "tilt",
              "magnetic",
              "glow",
              "spotlight cursor",
              "3d card hover",
              "shine"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover"
            ]
          },
          {
            "slug": "glassmorphism",
            "name": "Glassmorphism",
            "aliases": [
              "backdrop blur",
              "frosted glass",
              "liquid glass",
              "vibrancy",
              "translucent surface"
            ],
            "aria_pattern": null
          },
          {
            "slug": "gradient-background",
            "name": "Gradient Background",
            "aliases": [
              "aurora",
              "mesh gradient",
              "animated gradient",
              "noise",
              "grain",
              "gradient blob"
            ],
            "aria_pattern": null
          },
          {
            "slug": "custom-cursor",
            "name": "Custom Cursor",
            "aliases": [
              "cursor follower",
              "cursor trail",
              "pointer effect",
              "magnetic cursor"
            ],
            "aria_pattern": null
          },
          {
            "slug": "text-effect",
            "name": "Text Effect",
            "aliases": [
              "gradient text",
              "text mask",
              "split text",
              "letter animation",
              "glitch text",
              "highlight sweep"
            ],
            "aria_pattern": null
          },
          {
            "slug": "particle-background",
            "name": "Particle Background",
            "aliases": [
              "dot field",
              "starfield",
              "animated canvas background",
              "wave background",
              "grid background"
            ],
            "aria_pattern": null
          }
        ]
      },
      {
        "slug": "charts",
        "name": "Charts",
        "components": [
          {
            "slug": "chart",
            "name": "Chart",
            "aliases": [
              "graph",
              "plot",
              "data visualization",
              "visualization",
              "chart wrapper",
              "chart container"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "bar-chart",
            "name": "Bar Chart",
            "aliases": [
              "column chart",
              "stacked bar",
              "grouped bar",
              "horizontal bar",
              "bar graph"
            ],
            "aria_pattern": null
          },
          {
            "slug": "line-chart",
            "name": "Line Chart",
            "aliases": [
              "trend chart",
              "multi-line chart",
              "time series chart",
              "line graph"
            ],
            "aria_pattern": null
          },
          {
            "slug": "area-chart",
            "name": "Area Chart",
            "aliases": [
              "stacked area",
              "streamgraph",
              "filled line chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "pie-chart",
            "name": "Pie Chart",
            "aliases": [
              "donut chart",
              "doughnut chart",
              "circle chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "scatter-plot",
            "name": "Scatter Plot",
            "aliases": [
              "scatter chart",
              "bubble chart",
              "xy plot",
              "point cloud"
            ],
            "aria_pattern": null
          },
          {
            "slug": "histogram",
            "name": "Histogram",
            "aliases": [
              "distribution chart",
              "frequency chart",
              "bin chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "box-plot",
            "name": "Box Plot",
            "aliases": [
              "box and whisker",
              "quartile chart",
              "violin plot"
            ],
            "aria_pattern": null
          },
          {
            "slug": "heatmap",
            "name": "Heatmap",
            "aliases": [
              "matrix chart",
              "calendar heatmap",
              "contribution graph",
              "density map",
              "correlation matrix"
            ],
            "aria_pattern": null
          },
          {
            "slug": "treemap",
            "name": "Treemap",
            "aliases": [
              "nested rectangles chart",
              "area hierarchy chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sunburst",
            "name": "Sunburst",
            "aliases": [
              "radial hierarchy",
              "nested donut",
              "radial treemap"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sankey-diagram",
            "name": "Sankey Diagram",
            "aliases": [
              "flow diagram",
              "alluvial diagram",
              "flow chart of volume"
            ],
            "aria_pattern": null
          },
          {
            "slug": "funnel-chart",
            "name": "Funnel Chart",
            "aliases": [
              "conversion funnel",
              "pipeline chart",
              "drop-off chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "gauge-chart",
            "name": "Gauge Chart",
            "aliases": [
              "radial gauge",
              "dial chart",
              "meter chart",
              "progress ring chart",
              "speedometer"
            ],
            "aria_pattern": null
          },
          {
            "slug": "radar-chart",
            "name": "Radar Chart",
            "aliases": [
              "spider chart",
              "polar chart",
              "star plot",
              "web chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "candlestick-chart",
            "name": "Candlestick Chart",
            "aliases": [
              "ohlc chart",
              "financial chart",
              "stock chart",
              "trading chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "waterfall-chart",
            "name": "Waterfall Chart",
            "aliases": [
              "bridge chart",
              "cascade chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "gantt-chart",
            "name": "Gantt Chart",
            "aliases": [
              "project timeline",
              "roadmap chart",
              "schedule chart",
              "timeline chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sparkline",
            "name": "Sparkline",
            "aliases": [
              "micro chart",
              "inline chart",
              "trend indicator",
              "mini graph"
            ],
            "aria_pattern": null
          },
          {
            "slug": "choropleth",
            "name": "Choropleth",
            "aliases": [
              "map chart",
              "geo chart",
              "cartogram",
              "region map",
              "geographic heatmap"
            ],
            "aria_pattern": null
          },
          {
            "slug": "network-graph",
            "name": "Network Graph",
            "aliases": [
              "node-link diagram",
              "force graph",
              "graph view",
              "relationship map",
              "knowledge graph"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "node-editor",
            "name": "Node Editor",
            "aliases": [
              "flow canvas",
              "canvas",
              "node",
              "edge",
              "connection",
              "handle",
              "minimap",
              "flowchart builder",
              "workflow editor",
              "react flow"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "dragging",
              "drag-over",
              "dropped",
              "disabled"
            ]
          },
          {
            "slug": "bullet-chart",
            "name": "Bullet Chart",
            "aliases": [
              "target vs actual",
              "goal chart",
              "progress vs target"
            ],
            "aria_pattern": null
          },
          {
            "slug": "word-cloud",
            "name": "Word Cloud",
            "aliases": [
              "tag cloud",
              "term cloud"
            ],
            "aria_pattern": null
          },
          {
            "slug": "chord-diagram",
            "name": "Chord Diagram",
            "aliases": [
              "circular relationship chart",
              "arc diagram"
            ],
            "aria_pattern": null
          },
          {
            "slug": "parallel-coordinates",
            "name": "Parallel Coordinates",
            "aliases": [
              "multi-axis plot",
              "pcp chart"
            ],
            "aria_pattern": null
          },
          {
            "slug": "chart-legend",
            "name": "Chart Legend",
            "aliases": [
              "legend",
              "chart key",
              "series legend",
              "color key"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "chart-axis",
            "name": "Chart Axis",
            "aliases": [
              "axis",
              "x axis",
              "y axis",
              "gridlines",
              "ticks",
              "scale",
              "axis labels"
            ],
            "aria_pattern": null
          },
          {
            "slug": "chart-tooltip",
            "name": "Chart Tooltip",
            "aliases": [
              "hover readout",
              "crosshair tooltip",
              "data tooltip",
              "point tooltip"
            ],
            "aria_pattern": "Tooltip",
            "states": [
              "hidden",
              "visible"
            ]
          },
          {
            "slug": "chart-brush",
            "name": "Chart Brush",
            "aliases": [
              "range selector",
              "zoom control",
              "time range brush",
              "data zoom",
              "overview scrubber"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "selecting",
              "selected"
            ]
          },
          {
            "slug": "chart-annotation",
            "name": "Chart Annotation",
            "aliases": [
              "reference line",
              "threshold band",
              "callout marker",
              "target line",
              "event marker"
            ],
            "aria_pattern": null
          },
          {
            "slug": "kpi-row",
            "name": "KPI Row",
            "aliases": [
              "kpi row",
              "dashboard tile",
              "summary tile",
              "metric row",
              "stat grid"
            ],
            "aria_pattern": null
          },
          {
            "slug": "dashboard",
            "name": "Dashboard",
            "aliases": [
              "analytics layout",
              "report canvas",
              "widget grid",
              "metrics dashboard",
              "admin dashboard"
            ],
            "aria_pattern": null
          },
          {
            "slug": "data-export",
            "name": "Data Export",
            "aliases": [
              "download csv",
              "export button",
              "report download",
              "export menu"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          }
        ]
      },
      {
        "slug": "commerce",
        "name": "Commerce",
        "components": [
          {
            "slug": "product-card",
            "name": "Product Card",
            "aliases": [
              "product tile",
              "item card",
              "listing card",
              "shop card",
              "catalog card"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "product-gallery",
            "name": "Product Gallery",
            "aliases": [
              "product images",
              "media viewer with thumbnails",
              "product image carousel",
              "zoom gallery"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "price",
            "name": "Price",
            "aliases": [
              "price display",
              "compare-at price",
              "sale price",
              "price range",
              "per-unit price",
              "strikethrough price"
            ],
            "aria_pattern": null
          },
          {
            "slug": "variant-selector",
            "name": "Variant Selector",
            "aliases": [
              "size selector",
              "color swatch selector",
              "option picker",
              "sku selector",
              "product options"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "add-to-cart-button",
            "name": "Add to Cart Button",
            "aliases": [
              "buy button",
              "add to bag",
              "purchase button",
              "buy now",
              "atc"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "cart",
            "name": "Cart",
            "aliases": [
              "shopping cart",
              "basket",
              "mini cart",
              "cart drawer",
              "cart summary",
              "bag"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "filled",
              "updating"
            ]
          },
          {
            "slug": "line-item",
            "name": "Line Item",
            "aliases": [
              "cart row",
              "order line",
              "basket item",
              "cart line",
              "order item"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "updating",
              "removed"
            ]
          },
          {
            "slug": "checkout",
            "name": "Checkout",
            "aliases": [
              "checkout form",
              "checkout steps",
              "one-page checkout",
              "payment flow",
              "express checkout flow"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "processing",
              "error",
              "complete"
            ]
          },
          {
            "slug": "order-summary",
            "name": "Order Summary",
            "aliases": [
              "totals",
              "subtotal",
              "order recap",
              "cost breakdown",
              "basket summary"
            ],
            "aria_pattern": null
          },
          {
            "slug": "payment-form",
            "name": "Payment Form",
            "aliases": [
              "card input",
              "credit card field",
              "card number field",
              "expiry field",
              "cvc field",
              "payment element",
              "card form"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "payment-method-selector",
            "name": "Payment Method Selector",
            "aliases": [
              "wallet buttons",
              "apple pay button",
              "google pay button",
              "express checkout",
              "shop pay",
              "paypal button",
              "payment options"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "address-form",
            "name": "Address Form",
            "aliases": [
              "shipping address",
              "billing address",
              "address autocomplete",
              "address fields"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "filled",
              "placeholder",
              "disabled",
              "readonly",
              "error",
              "success"
            ]
          },
          {
            "slug": "shipping-selector",
            "name": "Shipping Selector",
            "aliases": [
              "delivery options",
              "rate picker",
              "shipping method",
              "delivery speed",
              "pickup option"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "promo-code-field",
            "name": "Promo Code Field",
            "aliases": [
              "discount code",
              "coupon input",
              "voucher field",
              "gift code",
              "apply code"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "applied",
              "invalid",
              "loading"
            ]
          },
          {
            "slug": "pricing-table",
            "name": "Pricing Table",
            "aliases": [
              "pricing plans",
              "plan comparison",
              "tier cards",
              "pricing grid",
              "price cards"
            ],
            "aria_pattern": null
          },
          {
            "slug": "billing-period-toggle",
            "name": "Billing Period Toggle",
            "aliases": [
              "monthly annual switch",
              "billing cycle toggle",
              "save with yearly"
            ],
            "aria_pattern": null,
            "states": [
              "monthly",
              "annual"
            ]
          },
          {
            "slug": "plan-selector",
            "name": "Plan Selector",
            "aliases": [
              "subscription picker",
              "upgrade card",
              "tier selector",
              "seat selector"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "invoice",
            "name": "Invoice",
            "aliases": [
              "receipt",
              "order confirmation",
              "billing statement",
              "payment receipt"
            ],
            "aria_pattern": null
          },
          {
            "slug": "order-tracking",
            "name": "Order Tracking",
            "aliases": [
              "shipment tracker",
              "delivery status",
              "fulfillment timeline",
              "tracking steps"
            ],
            "aria_pattern": null,
            "states": [
              "placed",
              "shipped",
              "out-for-delivery",
              "delivered",
              "cancelled"
            ]
          },
          {
            "slug": "wishlist",
            "name": "Wishlist",
            "aliases": [
              "save for later",
              "favorites",
              "saved items",
              "heart button",
              "watchlist"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "saved",
              "loading"
            ]
          },
          {
            "slug": "review",
            "name": "Review",
            "aliases": [
              "ratings breakdown",
              "review list",
              "review summary",
              "customer reviews",
              "testimonial list"
            ],
            "aria_pattern": null
          },
          {
            "slug": "stock-indicator",
            "name": "Stock Indicator",
            "aliases": [
              "in stock",
              "low stock",
              "out of stock badge",
              "inventory status",
              "back in stock",
              "availability"
            ],
            "aria_pattern": null,
            "states": [
              "in-stock",
              "low-stock",
              "out-of-stock",
              "preorder"
            ]
          },
          {
            "slug": "recommendations",
            "name": "Recommendations",
            "aliases": [
              "upsell",
              "cross-sell",
              "related products",
              "frequently bought together",
              "you may also like",
              "product carousel"
            ],
            "aria_pattern": null
          },
          {
            "slug": "comparison-table",
            "name": "Comparison Table",
            "aliases": [
              "feature matrix",
              "spec comparison",
              "plan comparison table",
              "versus table"
            ],
            "aria_pattern": null
          },
          {
            "slug": "product-listing",
            "name": "Product Listing",
            "aliases": [
              "search results grid",
              "product listing page",
              "plp",
              "catalog grid",
              "shop grid"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "currency-selector",
            "name": "Currency Selector",
            "aliases": [
              "market selector",
              "currency switcher",
              "store locale picker"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "store-locator",
            "name": "Store Locator",
            "aliases": [
              "find a store",
              "pickup selector",
              "branch finder",
              "location finder"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "sale-countdown",
            "name": "Sale Countdown",
            "aliases": [
              "deal timer",
              "flash sale banner",
              "limited offer timer",
              "drop timer"
            ],
            "aria_pattern": null,
            "states": [
              "running",
              "expired"
            ]
          },
          {
            "slug": "free-shipping-bar",
            "name": "Free Shipping Bar",
            "aliases": [
              "threshold progress bar",
              "spend more bar",
              "shipping goal meter"
            ],
            "aria_pattern": null,
            "states": [
              "incomplete",
              "complete"
            ]
          },
          {
            "slug": "gift-options",
            "name": "Gift Options",
            "aliases": [
              "gift card",
              "gift message",
              "gift wrap",
              "send as gift"
            ],
            "aria_pattern": null
          },
          {
            "slug": "returns-form",
            "name": "Returns Form",
            "aliases": [
              "rma",
              "exchange request",
              "return request",
              "refund form"
            ],
            "aria_pattern": null
          },
          {
            "slug": "loyalty-widget",
            "name": "Loyalty Widget",
            "aliases": [
              "rewards",
              "points balance",
              "tier progress",
              "referral card",
              "membership status"
            ],
            "aria_pattern": null
          },
          {
            "slug": "usage-meter",
            "name": "Usage Meter",
            "aliases": [
              "billing usage",
              "quota bar",
              "credit balance",
              "seats used",
              "consumption meter"
            ],
            "aria_pattern": null,
            "states": [
              "normal",
              "near-limit",
              "over-limit"
            ]
          },
          {
            "slug": "trust-badges",
            "name": "Trust Badges",
            "aliases": [
              "security seals",
              "guarantee badge",
              "payment icons",
              "secure checkout badges",
              "certification badges"
            ],
            "aria_pattern": null
          },
          {
            "slug": "subscription-manager",
            "name": "Subscription Manager",
            "aliases": [
              "manage plan",
              "billing settings",
              "cancel subscription",
              "renewal card"
            ],
            "aria_pattern": null
          }
        ]
      },
      {
        "slug": "auth",
        "name": "Auth",
        "components": [
          {
            "slug": "login-form",
            "name": "Login Form",
            "aliases": [
              "sign in form",
              "credential form",
              "log in",
              "signin",
              "auth form"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "submitting",
              "error",
              "success"
            ]
          },
          {
            "slug": "signup-form",
            "name": "Sign Up Form",
            "aliases": [
              "register form",
              "create account",
              "registration",
              "join form",
              "onboarding form"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "submitting",
              "error",
              "success"
            ]
          },
          {
            "slug": "password-strength-meter",
            "name": "Password Strength Meter",
            "aliases": [
              "strength indicator",
              "password rules checklist",
              "password requirements",
              "strength bar"
            ],
            "aria_pattern": "Meter",
            "states": [
              "weak",
              "fair",
              "strong",
              "very-strong"
            ]
          },
          {
            "slug": "forgot-password-form",
            "name": "Forgot Password Form",
            "aliases": [
              "reset password",
              "recovery form",
              "password reset",
              "account recovery"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "submitting",
              "sent",
              "error"
            ]
          },
          {
            "slug": "magic-link",
            "name": "Magic Link",
            "aliases": [
              "passwordless login",
              "email link sign-in",
              "one-click sign in",
              "check your email screen"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "sent",
              "expired"
            ]
          },
          {
            "slug": "two-factor-setup",
            "name": "Two-Factor Setup",
            "aliases": [
              "authenticator qr",
              "totp setup",
              "backup codes",
              "recovery codes",
              "mfa setup",
              "2fa enrollment"
            ],
            "aria_pattern": null
          },
          {
            "slug": "social-login-buttons",
            "name": "Social Login Buttons",
            "aliases": [
              "oauth buttons",
              "sign in with google",
              "sign in with apple",
              "sign in with github",
              "provider buttons",
              "social auth"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "sso-login",
            "name": "SSO Login",
            "aliases": [
              "saml login",
              "enterprise login",
              "workspace domain entry",
              "sign in with sso",
              "okta login"
            ],
            "aria_pattern": null
          },
          {
            "slug": "passkey-prompt",
            "name": "Passkey Prompt",
            "aliases": [
              "webauthn",
              "biometric prompt",
              "face id sheet",
              "touch id sheet",
              "fingerprint prompt"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "waiting",
              "success",
              "error"
            ]
          },
          {
            "slug": "captcha",
            "name": "Captcha",
            "aliases": [
              "bot check",
              "recaptcha",
              "turnstile",
              "hcaptcha",
              "human verification",
              "challenge"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "verifying",
              "verified",
              "failed"
            ]
          },
          {
            "slug": "consent-checkbox",
            "name": "Consent Checkbox",
            "aliases": [
              "terms acceptance",
              "privacy consent",
              "agree to terms",
              "legal checkbox"
            ],
            "aria_pattern": "Checkbox",
            "states": [
              "default",
              "hover",
              "focus",
              "checked",
              "unchecked",
              "indeterminate",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "cookie-consent",
            "name": "Cookie Consent",
            "aliases": [
              "cookie banner",
              "gdpr notice",
              "privacy preferences modal",
              "cookie preferences",
              "consent manager"
            ],
            "aria_pattern": null,
            "states": [
              "visible",
              "accepted",
              "dismissed"
            ]
          },
          {
            "slug": "permission-prompt",
            "name": "Permission Prompt",
            "aliases": [
              "system permission dialog",
              "notification permission",
              "camera access",
              "microphone access",
              "location prompt"
            ],
            "aria_pattern": "Dialog (Modal)",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "session-timeout-warning",
            "name": "Session Timeout Warning",
            "aliases": [
              "idle timeout modal",
              "re-authenticate prompt",
              "session expiring",
              "stay signed in"
            ],
            "aria_pattern": "Alert and Message Dialogs",
            "states": [
              "closed",
              "opening",
              "open",
              "closing"
            ]
          },
          {
            "slug": "account-menu",
            "name": "Account Menu",
            "aliases": [
              "user menu",
              "profile dropdown",
              "avatar menu",
              "account dropdown",
              "user popover"
            ],
            "aria_pattern": "Menu Button",
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "role-selector",
            "name": "Role Selector",
            "aliases": [
              "permission picker",
              "access level",
              "role dropdown",
              "member role"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled",
              "error"
            ]
          },
          {
            "slug": "api-key-display",
            "name": "API Key Display",
            "aliases": [
              "secret reveal",
              "token copy",
              "credential card",
              "access token field",
              "reveal secret"
            ],
            "aria_pattern": null,
            "states": [
              "masked",
              "revealed",
              "copied"
            ]
          },
          {
            "slug": "team-invite",
            "name": "Team Invite",
            "aliases": [
              "member management",
              "invite form",
              "seat list",
              "add teammate",
              "invite modal"
            ],
            "aria_pattern": null
          },
          {
            "slug": "email-verification-banner",
            "name": "Email Verification Banner",
            "aliases": [
              "confirm your email",
              "verify email prompt",
              "unverified account notice"
            ],
            "aria_pattern": "Alert",
            "states": [
              "visible",
              "dismissed"
            ]
          },
          {
            "slug": "impersonation-banner",
            "name": "Impersonation Banner",
            "aliases": [
              "viewing as",
              "admin override bar",
              "support mode banner",
              "sudo banner"
            ],
            "aria_pattern": "Alert"
          },
          {
            "slug": "access-denied-state",
            "name": "Access Denied State",
            "aliases": [
              "403",
              "unauthorized",
              "upgrade required",
              "paywall",
              "restricted content",
              "no permission"
            ],
            "aria_pattern": null
          },
          {
            "slug": "logout-button",
            "name": "Logout Button",
            "aliases": [
              "sign out",
              "log out",
              "end session"
            ],
            "aria_pattern": "Button",
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled",
              "loading"
            ]
          },
          {
            "slug": "profile-form",
            "name": "Profile Form",
            "aliases": [
              "account settings",
              "preferences panel",
              "user settings",
              "edit profile"
            ],
            "aria_pattern": null
          },
          {
            "slug": "onboarding-flow",
            "name": "Onboarding Flow",
            "aliases": [
              "setup wizard",
              "welcome flow",
              "getting started checklist",
              "account setup",
              "first-run experience"
            ],
            "aria_pattern": null,
            "states": [
              "step",
              "complete",
              "skipped"
            ]
          },
          {
            "slug": "verification-status",
            "name": "Verification Status",
            "aliases": [
              "verified badge",
              "kyc status",
              "identity check",
              "trust status"
            ],
            "aria_pattern": null,
            "states": [
              "unverified",
              "pending",
              "verified",
              "rejected"
            ]
          }
        ]
      },
      {
        "slug": "ai-chat",
        "name": "AI & Chat",
        "components": [
          {
            "slug": "conversation",
            "name": "Conversation",
            "aliases": [
              "chat",
              "thread",
              "transcript",
              "message list",
              "chat window",
              "chat log"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "message",
            "name": "Message",
            "aliases": [
              "chat message",
              "turn",
              "bubble",
              "message bubble",
              "chat item",
              "chat row"
            ],
            "aria_pattern": null,
            "states": [
              "sending",
              "sent",
              "streaming",
              "error"
            ]
          },
          {
            "slug": "message-scroller",
            "name": "Message Scroller",
            "aliases": [
              "chat scroll container",
              "anchored scroll",
              "auto-scroll region",
              "stick to bottom",
              "scroll to latest"
            ],
            "aria_pattern": null,
            "states": [
              "at-bottom",
              "scrolled-up"
            ]
          },
          {
            "slug": "prompt-input",
            "name": "Prompt Input",
            "aliases": [
              "composer",
              "chat input",
              "message box",
              "input bar",
              "chat textarea",
              "prompt box",
              "ask bar"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "typing",
              "submitting",
              "disabled"
            ]
          },
          {
            "slug": "send-stop-button",
            "name": "Send / Stop Button",
            "aliases": [
              "submit prompt",
              "interrupt",
              "cancel generation",
              "stop button",
              "send button"
            ],
            "aria_pattern": "Button",
            "states": [
              "idle",
              "ready",
              "generating",
              "disabled"
            ]
          },
          {
            "slug": "suggestion",
            "name": "Suggestion",
            "aliases": [
              "prompt suggestion",
              "suggested reply",
              "quick reply",
              "starter prompt",
              "prompt chips",
              "conversation starters"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "streaming-text",
            "name": "Streaming Text",
            "aliases": [
              "token stream",
              "typewriter response",
              "live response",
              "incremental text",
              "stream renderer"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "streaming",
              "complete",
              "interrupted"
            ]
          },
          {
            "slug": "typing-indicator",
            "name": "Typing Indicator",
            "aliases": [
              "thinking dots",
              "is-typing",
              "bouncing dots",
              "assistant typing"
            ],
            "aria_pattern": null,
            "states": [
              "hidden",
              "visible"
            ]
          },
          {
            "slug": "reasoning",
            "name": "Reasoning",
            "aliases": [
              "chain of thought",
              "thinking block",
              "thought process",
              "scratchpad",
              "extended thinking",
              "reasoning trace"
            ],
            "aria_pattern": "Disclosure",
            "states": [
              "collapsed",
              "expanded",
              "streaming"
            ]
          },
          {
            "slug": "plan",
            "name": "Plan",
            "aliases": [
              "todo list",
              "task plan",
              "steps list",
              "agent plan",
              "checklist of steps"
            ],
            "aria_pattern": null,
            "states": [
              "pending",
              "in-progress",
              "complete"
            ]
          },
          {
            "slug": "task",
            "name": "Task",
            "aliases": [
              "step",
              "tool step",
              "progress step",
              "action item",
              "agent task"
            ],
            "aria_pattern": null,
            "states": [
              "pending",
              "running",
              "complete",
              "failed"
            ]
          },
          {
            "slug": "tool-call",
            "name": "Tool Call",
            "aliases": [
              "tool",
              "function call",
              "tool result",
              "tool invocation",
              "tool use block",
              "action log"
            ],
            "aria_pattern": null,
            "states": [
              "pending",
              "running",
              "success",
              "error"
            ]
          },
          {
            "slug": "approval-request",
            "name": "Approval Request",
            "aliases": [
              "tool approval",
              "permission request",
              "allow deny prompt",
              "confirmation",
              "human in the loop"
            ],
            "aria_pattern": "Alert and Message Dialogs",
            "states": [
              "pending",
              "approved",
              "denied"
            ]
          },
          {
            "slug": "checkpoint",
            "name": "Checkpoint",
            "aliases": [
              "rewind",
              "restore point",
              "branch point",
              "conversation snapshot",
              "undo point"
            ],
            "aria_pattern": null
          },
          {
            "slug": "sources",
            "name": "Sources",
            "aliases": [
              "citations",
              "references",
              "retrieved documents",
              "grounding",
              "source list",
              "search results panel"
            ],
            "aria_pattern": null
          },
          {
            "slug": "inline-citation",
            "name": "Inline Citation",
            "aliases": [
              "footnote chip",
              "source marker",
              "citation badge",
              "reference superscript"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "artifact",
            "name": "Artifact",
            "aliases": [
              "canvas document",
              "side panel preview",
              "generated document",
              "immersive view",
              "output panel"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "agent-canvas",
            "name": "Agent Canvas",
            "aliases": [
              "node graph",
              "agent flow",
              "workflow canvas",
              "agent graph"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "dragging",
              "drag-over",
              "dropped",
              "disabled"
            ]
          },
          {
            "slug": "web-preview",
            "name": "Web Preview",
            "aliases": [
              "live preview",
              "jsx preview",
              "sandbox",
              "iframe preview",
              "render preview",
              "app preview"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "complete",
              "error"
            ]
          },
          {
            "slug": "attachments",
            "name": "Attachments",
            "aliases": [
              "file chips",
              "uploaded files",
              "drag-drop attach",
              "context files",
              "prompt attachments"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "uploading",
              "attached",
              "error"
            ]
          },
          {
            "slug": "generated-image",
            "name": "Generated Image",
            "aliases": [
              "image result",
              "image grid",
              "ai image output",
              "variations grid"
            ],
            "aria_pattern": null,
            "states": [
              "generating",
              "complete",
              "failed"
            ]
          },
          {
            "slug": "speech-input",
            "name": "Speech Input",
            "aliases": [
              "voice input",
              "push-to-talk",
              "mic button",
              "dictation",
              "mic selector",
              "voice mode",
              "record button"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "listening",
              "processing",
              "error"
            ]
          },
          {
            "slug": "voice-output",
            "name": "Voice Output",
            "aliases": [
              "read aloud",
              "tts player",
              "voice selector",
              "speech playback"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "loading",
              "playing",
              "paused",
              "buffering",
              "error"
            ]
          },
          {
            "slug": "model-selector",
            "name": "Model Selector",
            "aliases": [
              "model picker",
              "model switcher",
              "engine selector",
              "mode selector"
            ],
            "aria_pattern": null,
            "states": [
              "closed",
              "open",
              "hover",
              "focus",
              "disabled"
            ]
          },
          {
            "slug": "context-meter",
            "name": "Context Meter",
            "aliases": [
              "context window meter",
              "token usage",
              "usage bar",
              "credit usage",
              "context length indicator"
            ],
            "aria_pattern": "Meter",
            "states": [
              "normal",
              "near-limit",
              "full"
            ]
          },
          {
            "slug": "message-actions",
            "name": "Message Actions",
            "aliases": [
              "controls",
              "regenerate",
              "retry",
              "copy message",
              "edit message",
              "branch",
              "thumbs up",
              "thumbs down",
              "feedback buttons",
              "message toolbar"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "active",
              "disabled"
            ]
          },
          {
            "slug": "agent-card",
            "name": "Agent Card",
            "aliases": [
              "agent",
              "agent status",
              "subagent panel",
              "assistant card",
              "bot card"
            ],
            "aria_pattern": null,
            "states": [
              "idle",
              "running",
              "waiting",
              "done",
              "error"
            ]
          },
          {
            "slug": "persona",
            "name": "Persona",
            "aliases": [
              "assistant identity",
              "bot avatar",
              "system persona",
              "character card",
              "gpt profile"
            ],
            "aria_pattern": null
          },
          {
            "slug": "prompt-queue",
            "name": "Prompt Queue",
            "aliases": [
              "queue",
              "pending turns",
              "message queue",
              "queued prompts"
            ],
            "aria_pattern": null,
            "states": [
              "empty",
              "queued",
              "processing"
            ]
          },
          {
            "slug": "chat-history",
            "name": "Chat History",
            "aliases": [
              "conversation list",
              "thread sidebar",
              "recents",
              "chat sidebar",
              "session list"
            ],
            "aria_pattern": null,
            "states": [
              "default",
              "hover",
              "focus",
              "selected",
              "disabled"
            ]
          },
          {
            "slug": "chat-empty-state",
            "name": "Chat Empty State",
            "aliases": [
              "greeting",
              "welcome screen",
              "suggestion grid",
              "new chat screen"
            ],
            "aria_pattern": null
          },
          {
            "slug": "guardrail-notice",
            "name": "Guardrail Notice",
            "aliases": [
              "disclaimer",
              "safety notice",
              "content warning",
              "ai can make mistakes",
              "policy message",
              "refusal message"
            ],
            "aria_pattern": null
          },
          {
            "slug": "diff-proposal",
            "name": "Diff Proposal",
            "aliases": [
              "code suggestion",
              "apply patch card",
              "commit card",
              "edit preview",
              "accept reject diff"
            ],
            "aria_pattern": null,
            "states": [
              "proposed",
              "accepted",
              "rejected",
              "applied"
            ]
          },
          {
            "slug": "stack-trace-panel",
            "name": "Stack Trace Panel",
            "aliases": [
              "error trace",
              "test results",
              "package info",
              "environment variables",
              "debug panel"
            ],
            "aria_pattern": null
          }
        ]
      }
    ]
  },
  "surfaces": {
    "version": 1,
    "groups": [
      {
        "slug": "onboarding-auth",
        "name": "Onboarding & Auth",
        "surfaces": [
          {
            "slug": "splash-screen",
            "name": "Splash Screen",
            "description": "The branded launch frame that covers app initialisation and hands off to the first real screen.",
            "checklist": [
              "Logo or wordmark — the app brand mark centred on a clean background",
              "Brand background — a solid or subtly branded background that makes the transition from the mobile home screen clear",
              "Launch duration — the splash visible only for as long as the app genuinely needs to initialise, not used as decorative padding",
              "Transition to first screen — a smooth, intentional animation into the first real screen, not a hard cut or jarring flash",
              "No interactive elements — no buttons, inputs, or tappable areas; it is purely for transition",
              "Loading indicator — for any initialisation taking more than a second, so the user knows something is happening"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "onboarding-mobile",
            "name": "Onboarding (Mobile app)",
            "description": "The first-run sequence that orients a new user and collects only what the app needs before it can be used.",
            "checklist": [
              "Steps — the number of steps limited to what is genuinely required before the app can be used",
              "Progress indicator — a clear indication of how many steps remain and where in the sequence the user currently is",
              "Step navigation — a clear mechanism for advancing through steps e.g. a 'next' button or a horizontal swipe gesture",
              "Contextual permissions — permissions surfaced at their contextually relevant moment, rather than grouped at the start",
              "Skip option — a visible way to exit onboarding early and explore the app, with setup available to complete later",
              "Personalisation step — one or two choices that make the app feel tailored from the start e.g. your name, interests",
              "Keyboard handling — views that adjust when the keyboard appears, appropriate keyboard types per field, and Next advancing to the following input"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "onboarding-web-app",
            "name": "Onboarding (Web app)",
            "description": "The guided setup that takes a newly signed-up account from empty to first meaningful action.",
            "checklist": [
              "Progress indicator — an indication of how many steps are involved and where the user currently is in the sequence",
              "Welcome message — a brief message acknowledging this is a new experience and orienting the user toward what the product does",
              "Account setup — the minimum information needed to personalise the experience, gathered at the start",
              "Product highlights — key features introduced through short contextual tips or a visual walkthrough",
              "First action prompt — a clear prompt directing the user to an action or feature",
              "Completion confirmation — a clear acknowledgement that setup is complete, transitioning the user into the main product"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "onboarding-checklist",
            "name": "Onboarding Checklist",
            "description": "The in-app progress checklist that keeps guiding setup after the first session, without blocking the product.",
            "checklist": [
              "Card or sheet presentation — presented as a dismissible bottom sheet or a persistent card on the home screen, not a full-screen overlay",
              "Task count and progress — a visible count of completed versus total tasks and a progress bar or ring that updates as steps complete",
              "Tap to start each task — each item tappable, navigating directly to the relevant screen or feature, not just informational",
              "Completion celebration — a brief celebratory moment when all tasks are complete, before the checklist disappears",
              "Dismissible action — the checklist can be dismissed by users who do not want it; it is not a forced guided path",
              "Persistent but unobtrusive — accessible from a consistent location (dashboard, profile, home)",
              "Personalised to user type — onboarding questions that route different user types to tailored steps"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "login-mobile",
            "name": "Login (Mobile app)",
            "description": "The returning-user sign-in screen, optimised for biometrics and autofill rather than typing.",
            "checklist": [
              "Social sign-in — options that connect to an existing Apple or Google account, bypassing manual credential entry",
              "Email field — the input where users enter the email address associated with their account",
              "Password field — a masked text input with the option to reveal what has been typed",
              "Biometric authentication — Face ID or fingerprint sign-in for returning users who have already authenticated once with a password",
              "Credential autofill — system-level support for pre-filling saved email and password from the user's password manager",
              "Forgot password link — the link users reach for when they can't recall their password, leading into the reset flow",
              "Error states — feedback that distinguishes an unrecognised email address from an incorrect password",
              "Passwordless sign-in (magic link) — an alternative that sends a one-time link to the user's email, requiring no password"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "login-web-app",
            "name": "Login (Web app)",
            "description": "The in-product authentication screen that gets an existing account back into the workspace.",
            "checklist": [
              "Email and password fields — the two standard authentication inputs",
              "Show/hide password toggle — a button alongside the password field that reveals or conceals what the user has typed",
              "Forgot password — a link that begins the password reset flow",
              "Remember me — a checkbox that persists the user's session across browser closures",
              "SSO or social login — alternative authentication via a third-party identity provider (Google, Microsoft, GitHub)",
              "Sign up link — a link to the account creation screen for users who do not yet have an account",
              "Error messages — feedback shown when authentication fails, indicating what the user should try next"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "login-website",
            "name": "Login (Website)",
            "description": "The marketing-site login page, which doubles as a branded touchpoint before the user enters the product.",
            "checklist": [
              "Logo — either your complete logo or a symbol mark",
              "Title — tell the user this is where they login",
              "Account identification — a unique identifier for the user, potentially username, email address, or phone number",
              "Password — a secure, private code that allows access to their account, with the ability to make it visible",
              "Link to reset password — positioned close to the password input field",
              "Link to sign up — for a user who does not have an account and landed on this page anyway",
              "Login via third party — one-click connection via Google, Apple, Facebook or similar",
              "Testimonial — reinforcing the brand and product",
              "Blog post — an opportunity to show off content relevant to the user",
              "New feature — building excitement for something new right before a user logs in and sees it"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "sign-up",
            "name": "Sign up",
            "description": "The account creation page that converts an interested visitor into a credentialed user.",
            "checklist": [
              "Logo — either your complete logo or a symbol mark",
              "Title — tell the user this is where they create an account",
              "Description — describe the basic features of creating an account and set expectations for what they can achieve",
              "Account identification — a unique identifier to log in with; an email address also gains a communication channel",
              "Setting a password — with a password strength indicator and stated password requirements",
              "Link to login — for a user who already has an account and landed on this page anyway",
              "Sign up via third party — reduce several clicks to one by allowing sign-up via Google, Apple or similar",
              "Current active customer count — how many people are already using the product",
              "Testimonial or social proof — reinforcing the brand and product",
              "Blog post — content that can convert an unsure lead",
              "Billing plans and trial period — clearly define the length of the trial and when they will be charged"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "resetting-password",
            "name": "Resetting password",
            "description": "The recovery flow that returns a locked-out user to a working password and back to logging in.",
            "checklist": [
              "Place reset link close to password field — styled as a link to show it is clickable",
              "Ask for account details to verify — usually the email address, because it identifies the account and is the channel the link is sent to",
              "Show information has been sent — explain how they can continue, and send the email for the next step",
              "The message sent explains next steps — for example a link to a page that allows the user to reset their password",
              "Reset the password — behind the verification code or link, a clear text field to enter a new password",
              "Password successfully reset — indicate success and push their momentum back to their initial intent: logging in"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "verifying-account",
            "name": "Verifying account",
            "description": "The code or link challenge that proves the user controls the contact address on the account.",
            "checklist": [
              "Establish a trigger point — clearly indicate when verification is required and why it is necessary",
              "Method selection — where offered, multiple verification methods (email, SMS, authenticator)",
              "Confirm delivery and contact information used — display the email address or phone number so the user can see it is the correct destination",
              "Ability to input verification code — a field per digit is intuitive, but a default input field is perfectly accessible",
              "Incorrect value and resend option — specific error messages per failure: expired code offers a new send, incorrect code asks to re-enter",
              "Verification success state — clear confirmation when verification succeeds, continuing to the next step of the interface"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "two-factor-authentication",
            "name": "2FA",
            "description": "The setup and management surface for a second authentication factor on the account.",
            "checklist": [
              "Method selection — authenticator app, SMS, or email code; offer at least two, as some users lack access to one",
              "Setup instructions — clear step-by-step guidance, particularly for authenticator flows that require scanning a QR code",
              "QR code or setup key — a scannable QR code or copyable key for linking an authenticator app to the account",
              "Verification step — a code entry step confirming setup was successful before 2FA is enabled on the account",
              "Recovery codes — a set of one-time backup codes for when the user loses access to their 2FA method",
              "Setup confirmation — a clear success state confirming that 2FA is now active",
              "Disable or reset option — a way to turn off or reconfigure 2FA from account security settings, gated by re-authentication"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "sso-enterprise-login",
            "name": "SSO / Enterprise login",
            "description": "The identity-provider path that lets an organisation authenticate its members without product-held passwords.",
            "checklist": [
              "Email-first routing — a single email field that detects the domain and redirects to the correct identity provider automatically",
              "Explicit 'Sign in with SSO' entry point — for users whose domain is not auto-detected, accepting a workspace slug or company email",
              "Provider handoff state — a visible interstitial while redirecting to Okta, Entra, Google Workspace, or the customer's own IdP",
              "Just-in-time provisioning outcome — a clear result when a first-time SSO user is created, including which role they were assigned",
              "SSO-required enforcement — a clear message when password login is blocked by policy, naming the admin or domain that enforces it",
              "Failure messages that name the cause — unmapped user, expired assertion, misconfigured certificate, or domain not verified",
              "Break-glass path — a documented fallback for admins when the identity provider itself is unreachable"
            ],
            "source": "added"
          },
          {
            "slug": "session-expired",
            "name": "Session expired / Re-authentication",
            "description": "The interruption that asks a still-present user to prove identity again without destroying their work.",
            "checklist": [
              "Non-destructive interrupt — a modal or inline prompt over the current screen, never a hard redirect that discards unsaved state",
              "Reason stated — whether the session timed out, was revoked, the password changed, or a sensitive action requires step-up auth",
              "Credential-only re-entry — ask for password or biometric only, with the email pre-filled and not editable",
              "Draft preservation — unsaved form or editor content restored intact after successful re-authentication",
              "Return to the same place — the user lands back on the exact screen and scroll position they were on, not the dashboard",
              "Step-up scope — for sensitive actions, state what the re-authentication authorises and for how long it lasts"
            ],
            "source": "added"
          },
          {
            "slug": "permission-primer",
            "name": "Permission primer",
            "description": "The in-app explanation shown before the OS permission dialog, so the system prompt is only fired once it will be accepted.",
            "checklist": [
              "Fired at the moment of need — shown when the user takes the action that requires the permission, not at launch",
              "Value stated before the system dialog — one line on what the permission unlocks, in the user's terms",
              "Soft decline path — a 'not now' that dismisses without ever triggering the OS prompt, keeping the permission re-askable",
              "Correct permission tier requested — for example 'while using the app' rather than 'always' for location, and limited photo access where sufficient",
              "Denied state handling — a screen explaining the degraded experience with a deep link to system settings once the OS prompt has been declined",
              "No repeat nagging — the primer is not re-shown on every session after a decline"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "monetization",
        "name": "Monetization & Billing",
        "surfaces": [
          {
            "slug": "paywall",
            "name": "Paywall",
            "description": "A hard gate that blocks locked content and offers a fair, dismissible path to subscribe.",
            "checklist": [
              "Locked feature context and breakdown — a clear statement or short list of which specific features the user is being blocked from",
              "Upgrade CTA — the primary action to start a subscription or free trial, positioned prominently and specific about what is unlocked",
              "Free trial offer — a clear statement of any trial period available before subscription billing begins",
              "Dismiss action — a clear, neutral way to close the paywall and return to the free experience",
              "Restore purchases — a way for existing subscribers to recover access after reinstalling or signing in on a new device",
              "No guilt language — dismiss and decline actions written in neutral language, without shaming or pressuring the user"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "pricing-website",
            "name": "Pricing (Website)",
            "description": "The public pricing page that lets a prospect self-select a plan and understand the total commitment.",
            "checklist": [
              "Pricing options — subscription plans or one-off purchase",
              "Pricing features — what the user gets for purchasing the product",
              "A free pathway to sign up — a way to try the product before purchase, stating the trial length before being charged",
              "Refund or return policy — for users who want to understand this before committing",
              "Highlighted price as a recommendation — showcase the plan most users purchase or get the best value from",
              "Security logo for payment processing — show which credible vendor processes purchases",
              "Frequency of payments (monthly vs yearly) — an annual option rewarded with a discount for long-term customers"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "pricing-web-app",
            "name": "Pricing (Web app)",
            "description": "The in-product plan comparison that converts an active free or trial account onto a paid tier.",
            "checklist": [
              "Plan names, prices and frequency — the name and cost of each available plan, with billing frequency clearly stated",
              "Billing period toggle — a switch between monthly and annual billing, with the annual discount shown",
              "Feature comparison — a side-by-side breakdown of what each plan includes and excludes",
              "Call to action — a button on each plan to start a trial, subscribe, or contact sales",
              "Free tier or trial details — what's included, how long it lasts, and what happens when it ends",
              "FAQ section — answers to common questions about billing, plan limits, cancellation, and payment",
              "Enterprise option — a prompt for organisations that need a custom arrangement beyond the listed plans"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "billing-web-app",
            "name": "Billing (Web app)",
            "description": "The account billing portal where a customer manages payment method, invoices and failed charges.",
            "checklist": [
              "Payment method on file — the current card or payment method, shown with masked details",
              "Add or update payment method action — a way to enter a new card or change the current one",
              "Next billing date and amount — when the next payment will be taken and for how much",
              "Invoices and receipts — a list of past charges with the ability to download a PDF invoice for each",
              "Tax and VAT — applicable tax shown on invoices and billing history",
              "Failed payment recovery — clear messaging and recovery instructions when a payment attempt has failed",
              "Billing contact email — the address where invoices and billing notifications are sent, often not the account owner's"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "billing-website",
            "name": "Billing (Website)",
            "description": "The subscriber-facing billing area covering plan, payment history and the exit path.",
            "checklist": [
              "Payment methods used — display payment method details with the ability to update or remove",
              "History — a list of past charges with the ability to download invoices as PDF",
              "Plan details — current plan price, features and next billing date, with a clear action to upgrade or change plan",
              "Promo or discount code — a field to apply a code to activate a discount or deal",
              "Additional details — information that influences billing decisions e.g. seats, roles, usage, metrics",
              "Next payment — for subscriptions, the upcoming payment amount, date and method",
              "Cancel subscription — a clear action to cancel and stop payments"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "billing-mobile",
            "name": "Billing (Mobile app)",
            "description": "The mobile billing screen, constrained by App Store and Play Store rules on where subscriptions can be managed.",
            "checklist": [
              "Manage via App Store — a link or prompt directing users to the App Store or Play Store to manage their subscription",
              "Next billing date and amount — visible without needing to dig into billing history",
              "Billing history and receipts — a list of past charges with amounts and dates, with individual receipts accessible",
              "Restore purchases — a button to restore previously purchased subscriptions or in-app purchases on a new device",
              "Refund help link — guidance on how to request a refund, typically via the platform's own process",
              "Tax display — tax or VAT amounts displayed separately from the base price where legally required"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "making-a-card-payment",
            "name": "Making a card payment",
            "description": "The sequential flow from choosing a payment method to a confirmed charge and stated next steps.",
            "checklist": [
              "Offer payment methods — present the available methods and let the user select card entry",
              "Request card details — show all relevant text fields, sized relative to the details entered; allow saved methods to be added or removed on repeat visits",
              "Submit payment with card details entered — validate before submission for mistyped numbers and expired cards, and address each error state",
              "Show payment processing — a loading state, because a payment may take seconds or minutes and the user is watching their money",
              "Confirmation payment processed successfully — clearly indicate the payment was processed and the funds received",
              "Outline next steps — state what the payment triggered e.g. a shipment, or a link to start using the subscription"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "entering-promo-code",
            "name": "Entering promo code",
            "description": "The discount-entry flow that applies, reflects, errors on and removes a promotional code.",
            "checklist": [
              "Show promo code input field — the cart and checkout are the pages expected to have one",
              "Promo code applied successfully — reflected with success state colours to indicate the code was applied",
              "Reflect promo code impact — shown as a total amount or on an item-by-item basis",
              "Promo code error — for a code that is not applicable or entered incorrectly",
              "Remove promo code — for users who prefer the original price or found a better code"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "canceling-subscription",
            "name": "Canceling subscription",
            "description": "The graceful exit that ends a paid relationship without dark patterns.",
            "checklist": [
              "Show a link in account details — clearly visible, or placed in billing settings",
              "Confirm intent to cancel — ask if they are sure rather than cancelling on a single misclick",
              "Request a reason for canceling (optional) — helpful feedback, never a forced or pressured step",
              "Confirm subscription has been canceled — and tell the user the date their subscription is active until",
              "Make cancelling no harder than subscribing — the same number of steps and the same channel it was bought in; the FTC's click-to-cancel rule was vacated in July 2025, but ROSCA enforcement and state automatic-renewal laws still apply",
              "Say exactly what happens to the data — what is kept, what is deleted, what can be exported, and for how long",
              "Offer an export before access ends, not after",
              "Offer an alternative once, and only once — pause or downgrade, never a retention maze",
              "State refunds and proration plainly — whether the remaining period is refunded, credited or simply runs out",
              "Confirm by email as well as on screen — the on-screen confirmation disappears; the email is the receipt",
              "Say how to come back — whether reactivation restores the old plan, price and data",
              "Say what happens to team members and seats — who loses access, and when"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "usage-and-limits",
            "name": "Usage & limits",
            "description": "The meter that shows consumption against plan entitlements before the user hits a wall.",
            "checklist": [
              "Current period consumption per metered dimension — seats, API calls, storage, credits, messages — each against its included allowance",
              "Reset date stated — the exact date and time the current period rolls over, in the user's timezone",
              "Overage policy made explicit — whether the account is hard-blocked, throttled, or charged per unit past the limit, with the per-unit price",
              "Threshold alerts — configurable email or in-app warnings at 75% and 90%, addressed to the billing contact and admins",
              "Historical trend — consumption across previous periods, so a team can predict the next invoice",
              "Per-member or per-key attribution — which user, workspace, or API key is driving consumption",
              "Upgrade path inline — a direct action to raise the limit from the same screen that reports it"
            ],
            "source": "added"
          },
          {
            "slug": "quota-exceeded",
            "name": "Quota exceeded / Rate limited",
            "description": "The blocking state shown when a hard limit is reached, which must explain the limit and the fastest way back to working.",
            "checklist": [
              "Which limit was hit, named exactly — 'You have used all 500 monthly credits', not 'Something went wrong'",
              "Time until reset — a concrete timestamp or countdown, not 'try again later'",
              "Immediate remedies ranked — upgrade, buy an add-on pack, wait for reset, or ask an admin to raise the cap",
              "Distinguish account limit from transient rate limit — a per-second throttle and an exhausted monthly plan need different copy and different actions",
              "Preserve the blocked work — the request, prompt, or draft is retained so it can be retried once capacity returns",
              "Machine-readable parity for API callers — the same condition returns 429 with Retry-After and a documented error code"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "commerce",
        "name": "Commerce & Checkout",
        "surfaces": [
          {
            "slug": "adding-to-cart",
            "name": "Adding to cart",
            "description": "The flow from product variant selection to confirmed cart addition and a route back to the cart.",
            "checklist": [
              "Outline variant selection for product — size, colour, amount or otherwise, it must be clear what must be picked before adding to cart",
              "Primary action on product page is add to cart — one of the most prominent buttons on the page",
              "Feedback once added — immediate confirmation the item has been added, at a level of intrusion you choose deliberately",
              "Link to cart view — typically in primary navigation, showing the item count and optionally the total price",
              "Show availability before the action — in stock, low stock, out of stock or backordered, so the button never promises what the warehouse cannot",
              "Let quantity be set and bounded — with a clear maximum and a reason when one is hit",
              "Show the price the user will actually pay — currency, whether tax is included, and shipping when it is known",
              "Persist the cart across sessions and devices for a signed-in user",
              "Announce the addition assistively — a live region, so confirmation is not visual-only (WCAG 4.1.3 Status Messages)",
              "Handle the failure case — the item selling out between page load and click, and what the user sees when it does",
              "Offer both next steps — continue shopping and go to cart, rather than forcing the checkout path"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "cart-website",
            "name": "Cart (Website)",
            "description": "The pre-checkout review where the shopper edits their order and commits to paying.",
            "checklist": [
              "Item name and image — matching what was displayed on the product page",
              "Update or remove item — adjust quantity, change variants, or remove an item directly from the cart",
              "Item variations — selected size, colour, style, or type displayed clearly alongside the item",
              "Promo or discount code — a field for entering a code, showing acceptance or rejection immediately after entry",
              "Accepted payment methods — cards, PayPal, Apple Pay and others available for completing the purchase",
              "Link to support — a way to get help with items in the cart, useful for configurable or custom orders",
              "Checkout button — a prominent button to proceed to payment",
              "Suggested add-ons — related or complementary items based on what is already in the cart"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "cart-mobile",
            "name": "Cart (Mobile app)",
            "description": "The touch-scale cart where quantity, removal and totals must all work with a thumb.",
            "checklist": [
              "Item list — each item shown with its image, name, selected variants, and quantity",
              "Quantity stepper — plus and minus controls large enough to tap accurately without zooming",
              "Swipe to remove — a swipe-left gesture on a cart item revealing a remove action",
              "Price breakdown — subtotal, applied discounts, estimated tax, and total shown before the checkout action",
              "Empty cart state — shown when no items are in the cart, with a clear prompt to continue browsing",
              "Promo code field — enter a code and see the discount reflected across items and total"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "checkout",
            "name": "Checkout",
            "description": "The payment sequence that must minimise typing, survive failure, and end in an unambiguous confirmation.",
            "checklist": [
              "Native payment methods — Apple Pay and Google Pay as primary options, completing purchase with a single biometric tap",
              "Persistent order summary — item list, quantities and total available throughout the flow, visible or one tap away",
              "Minimal form fields — only the fields genuinely required to complete the purchase",
              "Autofill capabilities — shipping address fields that support iOS and Android autofill",
              "Keyboard types per field — numeric for card numbers and CVV, date or numeric pad for expiry",
              "Checkout progress — a clear step indicator for a multi-step experience",
              "Error recovery — after a payment failure, return to the payment step with entered data intact and a clear explanation",
              "Order/payment confirmation — a confirmation screen with summary, payment method and amount"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "order-status",
            "name": "Order status & tracking",
            "description": "The post-purchase surface where a buyer confirms what they bought and where it is now.",
            "checklist": [
              "Order identifier prominently shown — the reference a customer quotes to support, copyable in one tap",
              "Fulfilment stage as a named state — confirmed, processing, shipped, out for delivery, delivered, or a stated exception",
              "Carrier and tracking number — linked to the carrier's own tracking, opened in a new context",
              "Estimated delivery window — a date range rather than a single optimistic date, updated when the carrier revises it",
              "Itemised contents — what shipped in this parcel versus what is still to come on a split shipment",
              "Return, cancel or change window — which actions are still available at this stage, and until when",
              "Support entry point carrying the order context — so the customer never re-types the order number"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "account-settings",
        "name": "Account & Settings",
        "surfaces": [
          {
            "slug": "account-web-app",
            "name": "Account (Web app)",
            "description": "The private profile screen where a user edits their own identity and can leave the product.",
            "checklist": [
              "Profile photo — a way to upload or change the profile image, with a sensible fallback such as initials",
              "Display name — the name shown to other users or across the product interface",
              "Account details — fields for email address, phone number, job title or other relevant identifying information",
              "Linked accounts — a view of which third-party accounts are connected for sign-in or data access, with the ability to disconnect",
              "Save confirmation — clear feedback that changes have been saved, either inline or as a toast",
              "Delete or deactivate account — options clearly separated from other settings"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "account-mobile",
            "name": "Account (Mobile app)",
            "description": "Private account settings covering credentials, linked accounts and destructive actions.",
            "checklist": [
              "Email — the current email address displayed with an option to update it, verifying the new address before the change completes",
              "Password change — a way to update the account password, requiring the current password first",
              "Linked accounts — which third-party accounts are connected for sign-in or data access, with the ability to disconnect",
              "Save confirmation — clear feedback that changes have been saved, either inline or as a toast",
              "Delete or deactivate account — options to deactivate or permanently delete, clearly separated from other settings"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "settings-web-app",
            "name": "Settings (Web app)",
            "description": "The organised home for every account-level preference, with destructive actions isolated.",
            "checklist": [
              "Structure — settings organised into logical categories e.g. account, notifications, security, billing",
              "Account details — the fields where users update their name, email address, and profile photo",
              "Security details — change password, two-factor authentication and other security information, gated by re-authentication",
              "Notification preferences — which notifications the user receives and through which channel, grouped by type",
              "Billing — managing payment method and plan, or a preview with a link directly to the billing area",
              "Additional preferences — language, timezone, date format, and appearance settings like dark mode",
              "Danger zone — destructive actions like account deletion, clearly separated and confirmation-gated"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "settings-mobile",
            "name": "Settings (Mobile app)",
            "description": "The native grouped-list settings screen, which app stores also require to carry legal links.",
            "checklist": [
              "Grouped table layout — settings organised into clearly labelled sections (Account, Notifications, Privacy, Support) using the native grouped list pattern",
              "Native toggle controls — binary settings presented with the platform-native switch (UISwitch on iOS, Material Switch on Android)",
              "Destructive actions grouped — log out, delete account and other irreversible actions in their own section at the bottom, distinguished in red",
              "Account details at top — the user's avatar, name and email as a clear anchor for whose account is being managed",
              "Deep link to specific settings — a direct link from relevant in-app prompts to the specific settings screen they reference",
              "Support and feedback access — a clear path to contact support, submit feedback, or access help documentation",
              "App version — shown at the bottom, essential for support conversations and identifying build-specific issues",
              "Legal links — Privacy Policy and Terms of Service accessible within settings, as required by app stores"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "notification-settings",
            "name": "Notification Settings",
            "description": "The preference matrix that lets a user choose what they are told about and on which channel.",
            "checklist": [
              "Categories — notification types organised into logical groups e.g. product activity, mentions, billing, security, marketing",
              "Channel selection — controls for which channel each notification type comes through e.g. email, push, in-app",
              "Frequency controls — where applicable, immediately, daily digest, or weekly summary",
              "Global mute — a way to temporarily silence all notifications without turning each one off individually",
              "Save confirmation — a clear indication that preference changes have been saved"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "public-profile",
            "name": "Public Profile",
            "description": "The outward-facing identity page other users see, distinct from private account settings.",
            "checklist": [
              "Avatar and display name — the user's photo and name shown prominently as the primary identifier",
              "Role or title — the user's job title, team, or role within the product context",
              "Bio or description — a short free-text description the user has written about themselves",
              "Activity or contributions — a summary of what the user has done in the product (posts, projects, comments)",
              "Contact or follow action — a way to initiate contact, follow, or connect, depending on what the product supports",
              "Joined date — when the user joined the product",
              "Profile visibility controls — which profile fields are visible according to the user's own privacy preferences"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "api-keys",
            "name": "API Keys",
            "description": "The credential manager where a developer creates, scopes and revokes programmatic access.",
            "checklist": [
              "Key list — a table of all existing keys showing name, creation date, last used date and permissions, revealing only the last few characters",
              "Generate key — a clear way to create a new key, naming it and setting its scope or permissions",
              "Copy key on creation — the full key revealed exactly once immediately after creation, with a prominent copy button and an explicit warning",
              "Key permissions or scopes — the ability to limit what each key can access (read-only, specific resources, or full access)",
              "Revoke key — a clear way to immediately invalidate a key, with a confirmation step",
              "Documentation link — a direct link to API documentation so developers can start without searching"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "integrations",
            "name": "Integrations",
            "description": "The catalogue where a user connects, inspects and disconnects third-party services.",
            "checklist": [
              "Catalogue — a browsable list or grid of all available integrations with logos, names and a brief description",
              "Categories or filtering — a way to browse by category (productivity, communication, analytics, CRM)",
              "Search — a field to find a specific integration by name without scrolling the full list",
              "Connection status — a clear indicator showing connected, disconnected, or connected but experiencing an issue",
              "Connect and disconnect actions — with a confirmation before disconnecting that states what will stop working",
              "Integration detail — a dedicated view showing what data it accesses, configuration options, and a sync or activity log",
              "Request an integration — a way for users to suggest tools they want the product to support"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "webhooks",
            "name": "Webhooks",
            "description": "The outbound-event configuration where a developer subscribes an endpoint and debugs failed deliveries.",
            "checklist": [
              "Endpoint list with subscribed event types — each endpoint showing its URL, enabled events, and current health",
              "Event type selection — explicit per-event subscription rather than an all-or-nothing firehose",
              "Signing secret — a per-endpoint secret shown once on creation, with a rotate action that supports a dual-secret overlap window",
              "Delivery log — recent attempts with timestamp, HTTP status, response body excerpt and latency",
              "Manual replay — re-send any individual past event to the endpoint without reproducing the original trigger",
              "Retry and back-off policy stated — how many times a failed delivery is retried, over what window, and when the endpoint is auto-disabled",
              "Test event — send a synthetic payload of any event type to verify the endpoint before going live"
            ],
            "source": "added"
          },
          {
            "slug": "data-export",
            "name": "Data export & deletion request",
            "description": "The self-serve surface that satisfies a user's right to take their data out or have it erased.",
            "checklist": [
              "Scope statement — exactly which data is included in the export and which is not (for example logs or third-party-held data)",
              "Asynchronous generation with notification — the export is prepared in the background and the user is emailed when the archive is ready",
              "Time-limited, authenticated download link — the archive is not on a public URL and expires after a stated period",
              "Open, documented format — JSON or CSV with a manifest, not a proprietary blob the user cannot read",
              "Deletion request path separate from export — with a stated grace period before erasure becomes irreversible",
              "Consequences of deletion enumerated — what is destroyed, what is retained for legal reasons, and for how long",
              "Request history — past exports and deletion requests with their status and dates"
            ],
            "source": "added"
          },
          {
            "slug": "deleting-account",
            "name": "Deleting account",
            "description": "The full account-closure flow, which must be findable, honest about consequences, and final.",
            "checklist": [
              "Show a link to delete account — visible in the profile or settings, and available in the support area; do not make this difficult",
              "Politely ask for feedback — helpful to know why somebody is leaving, but never pressured or forced",
              "Explain what it means to delete the account before confirming — be clear about what happens to the account and the information in it",
              "Confirm account has been deleted — acknowledge the completion comfortably rather than hiding it",
              "Re-authenticate before the destructive step — password or passkey, because deletion is exactly the class of action WCAG 3.3.4 Error Prevention (Legal, Financial, Data) exists for",
              "Offer a grace period with recovery — say how long it lasts and what happens at the end of it",
              "Offer an export before deletion, and make it complete enough to be worth having",
              "Say what happens to shared and team content — owned documents, comments, invitations and anything other people depend on",
              "Couple it to billing — cancel active subscriptions as part of the flow, or say plainly that they continue",
              "Confirm by email — deletion is the one action a user must be able to prove happened",
              "State the legal timeline where it applies — GDPR Article 17 requires erasure without undue delay, and Article 12(3) requires a response within one month, extendable by two for complex requests",
              "State what is retained and why — records kept for accounting, fraud or legal obligation, and for how long"
            ],
            "source": "checklist.design"
          }
        ]
      },
      {
        "slug": "team-admin",
        "name": "Team & Administration",
        "surfaces": [
          {
            "slug": "admin-panel",
            "name": "Admin Panel",
            "description": "The org-level control room for members, settings, usage, billing and irreversible workspace actions.",
            "checklist": [
              "Role-based access — the admin panel visible and accessible only to users with the appropriate permissions",
              "User management — a view of all users in the organisation with the ability to invite, edit roles, and remove members",
              "Organisation settings — controls for configuring the product at an account level: name, logo, SSO, domains",
              "Usage overview — high-level metrics on how the product is being used, with the ability to export for reporting",
              "Billing and plan management — subscription details, seat counts and invoices at the account level",
              "Audit log — a record of account-related actions e.g. logins, permission changes, deletions",
              "Danger zone — destructive account-level actions e.g. deleting the workspace or transferring ownership, visually separated"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "user-management",
            "name": "User Management",
            "description": "The member roster where an admin invites, re-roles and revokes access for the whole team.",
            "checklist": [
              "User list — a table of all users showing name, email, role and account status",
              "Invite user action — a clear way to add new members by email, with an option to set their role before sending",
              "Roles and permissions — the ability to assign and change what each user can see and do, using universal terms like admin, member or viewer",
              "Pending invitation status — invitations sent but not yet accepted, with the option to resend or revoke",
              "Search and filter — find users quickly by name, email, role or other user information",
              "Remove or deactivate user — a clear way to revoke access, distinguishing temporary deactivation from permanent removal"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "invite",
            "name": "Invite",
            "description": "The flow that brings a new person into a workspace with the right access and a visible seat cost.",
            "checklist": [
              "Email invite — the primary method of inviting someone by entering their email address directly",
              "Role or permission selection — a control for setting what the invited person can see and do once they accept",
              "Contact picker — access to the device's contacts list for finding people without typing a full address",
              "Bulk invite — a way to add multiple people at once, supporting comma-separated and line-break-separated input",
              "Pending invites and actions — sent invitations not yet accepted, with the option to resend or revoke each one",
              "Shareable invite link — a link granting access to anyone who opens it, with a configurable permission level, expiry and usage limit",
              "Seat or member limit — a visible count of remaining seats, surfaced before the user reaches the plan's member cap",
              "Access scope summary — a clear statement of what the invited person will be able to see and do, shown to the sender before confirming"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "share-and-permissions",
            "name": "Share & permissions",
            "description": "The per-object access dialog that decides who can see or change one document, project or record.",
            "checklist": [
              "Current access list — every person, group and link that can reach this object, with their access level shown",
              "Per-invitee access level at the point of invitation — viewer, commenter, editor, owner chosen before the invite is sent",
              "Link sharing scope, stated in plain language — restricted, anyone in the organisation, or anyone with the link",
              "Inherited versus explicit access made visible — access granted by the parent folder or workspace distinguished from access granted here",
              "Copy link action that matches the current scope — never hands out a URL the recipient cannot open",
              "Link controls — expiry date, password, and disable-download or disable-copy where the product supports them",
              "Revoke that takes effect immediately — including on active sessions, not only on next load",
              "Ownership transfer — a distinct action from granting edit access, with confirmation from both sides where possible"
            ],
            "source": "added"
          },
          {
            "slug": "workspace-switcher",
            "name": "Workspace / Organisation switcher",
            "description": "The control that tells a multi-tenant user which context they are in and moves them between tenants safely.",
            "checklist": [
              "Current workspace always visible — the active tenant named in persistent chrome, not only inside the menu",
              "Full list of memberships — every workspace the account belongs to, with avatar, name and the user's role in each",
              "Visual distinction between tenants — colour or logo, so a user with production and staging workspaces cannot confuse them",
              "Switch preserves the equivalent route — landing on the same section of the new workspace where it exists, and on its home when it does not",
              "Pending invitations surfaced in the same menu — workspaces the user has been invited to but not yet joined",
              "Create-workspace entry point — distinct from joining an existing one",
              "Unsaved-work guard — switching context warns before discarding an in-progress editor or form"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "content-data",
        "name": "Content & Data Views",
        "surfaces": [
          {
            "slug": "feed",
            "name": "Feed",
            "description": "The reverse-chronological or ranked stream that shows what is new and worth opening.",
            "checklist": [
              "Feed item preview — title, excerpt or thumbnail sufficient to judge whether the item is worth opening",
              "Author — the name and avatar of the person who created or posted each item",
              "Timestamps — when each item was published or last updated, switching from relative to exact time as items age",
              "Engagement actions — like, comment, share, save or react, sized by prominence and frequency of use",
              "New content indicator — a banner or button when new items have been posted since the user loaded the feed",
              "Filtering — controls for narrowing to a category, content type or followed accounts, with active filters indicated",
              "Pagination or infinite scroll — a mechanism for loading more items as the user reaches the bottom",
              "Empty state — for no connections, no activity, or an empty filter result"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "search-results",
            "name": "Search Results",
            "description": "The results page that must let a user judge, refine and recover from a query without starting over.",
            "checklist": [
              "Search input — at the top of the results, pre-filled with the current query so it can be refined",
              "Result count — how many results were found, shown even at zero so the user knows the search ran",
              "Result items — title, type, image and a snippet of the matching content, with the matched term highlighted",
              "Result type indicators — a label or icon marking what kind of item each result is (document, person, project, message)",
              "Filters — the ability to narrow results by category, date, status or other relevant values",
              "No results state — with suggestions for what to try instead, rather than a blank space",
              "Recent searches — the user's previous queries, shown when the search field is focused but empty"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "search-mobile",
            "name": "Search (Mobile app)",
            "description": "The mobile search screen where the keyboard, live results and filters all compete for one small viewport.",
            "checklist": [
              "Sticky search bar — the input fixed at the top of the screen as results scroll beneath it",
              "Keyboard auto-focus — the keyboard opens immediately on navigating to the search screen, with no extra tap",
              "Live results — results updating as the user types rather than requiring a submit tap",
              "Recent searches — previously searched terms shown before the user starts typing",
              "Filter bottom sheet — filtering accessed via a bottom sheet rather than a separate screen, keeping search context visible",
              "Skeleton loading — skeleton cards in the expected result shape shown while results load",
              "No results state — a helpful empty state suggesting spelling checks, removing filters, or related terms",
              "Clear query button — an action inside or near the field to clear the current query with one tap"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "search-website",
            "name": "Search (Website)",
            "description": "Site-wide search over content or catalogue, where sorting and relevance signals do the heavy lifting.",
            "checklist": [
              "Search box — the element a user types in, at the top of the page and styled consistently with other search boxes",
              "Visualisation of results — showing the items relevant to the search with enough detail to contextualise them",
              "Search progress — a loading indicator, since a search may not be instant",
              "Suggested search items — trending, most popular, recently searched, or autocorrected queries offered to save typing",
              "Categories and/or filters — constraints to help users narrow their search area",
              "Ordering of search results — sorting by best price, most relevant, newest first, and similar",
              "Highlighting keywords — highlighting the searched words within the displayed results"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "filtering-items",
            "name": "Filtering items",
            "description": "The flow for narrowing a collection, keeping the applied constraints visible and easy to undo.",
            "checklist": [
              "Show action near item collection — placed above or beside the collection it affects, with a recognisable icon and/or label",
              "Show available filter options — on the same page for immediate feedback, or on another page",
              "Consider different filter types — a multi-select picker is standard, but some properties benefit from a range, date or toggle control",
              "Show active filters clearly when applied — display which filters are currently applied on the collection page",
              "Provide easy filter removal — clear individual filters or all filters at once",
              "Show result count — where it is meaningful for users to see how far the result set has narrowed",
              "Empty state — a filter combination can produce no results; explain it and suggest adjusting or clearing filters"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "single-item-detail",
            "name": "Single Item Detail",
            "description": "The full record view for one object, carrying its status, attributes, history and destructive actions.",
            "checklist": [
              "Clear title or identifier — the name, ID or primary label shown prominently at the top",
              "Status indicator — a clear signal of the item's current state (active, pending, completed, archived), not conveyed by colour alone",
              "Key details section — the most important attributes surfaced prominently, with secondary details below or in a sidebar",
              "Edit action — a clear way to modify the item's details, either inline or via an edit mode",
              "Related items or activity — associated records, linked content, or a history of who changed what and when",
              "Breadcrumb or back navigation — a way to return to the list or parent context",
              "Destructive actions — delete or archive options, kept visually separate from the primary actions"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "kanban-board",
            "name": "Kanban board",
            "description": "The column-per-stage work view where dragging a card is the primary act of updating state.",
            "checklist": [
              "Columns — distinct vertical lanes representing each stage of the workflow, configurable per team",
              "Cards — individual items within each column showing title and key metadata at a glance",
              "Drag and drop — moving cards between columns and reordering within a column, with a visual drop target while dragging",
              "Quick add card — a fast way to create a new card directly within a column without opening a full form",
              "Card detail on click — opening full detail (description, comments, attachments, history) without leaving the board",
              "Column item count — how many cards are in each column, visible in the column header",
              "Filtering, sorting and grouping — re-organising cards by assignee, label, priority or due date to focus on a subset"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "timeline-gantt-view",
            "name": "Timeline / Gantt View",
            "description": "The time-axis plan view where duration, sequence and slippage must be readable at a glance.",
            "checklist": [
              "Time axis — a horizontal axis with clear date markers at day, week or month granularity depending on zoom",
              "Task bars — horizontal bars representing each task or milestone, positioned by start and end date",
              "Dependencies — visual connectors between tasks that must be completed in sequence, showing what is blocked",
              "Today indicator — a vertical line marking the current date so users see what is on track and what is overdue",
              "Milestones — distinct markers for key dates or deliverables that are not duration-based tasks",
              "Drag to reschedule — moving or resizing task bars to update dates directly, with a date tooltip while dragging",
              "Row grouping — organising tasks by assignee, team, project phase or another dimension"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "analytics",
            "name": "Analytics",
            "description": "The metrics dashboard that answers what changed, over what period, and compared to what.",
            "checklist": [
              "Date range selector — with shortcuts for today, last 7 days, last 30 days, this month, and a custom range",
              "Headline metrics — the most important numbers displayed as prominent figures readable at a glance",
              "Charts with labels and axes — clearly labelled axes, a legend where needed, and readable tick marks",
              "Period comparison — a percentage or absolute change indicator versus the prior period",
              "Segment breakdown — the ability to slice a metric by channel, device, geography or another attribute",
              "Last updated indicator — a visible timestamp or refresh button showing when the data was last updated",
              "Loading and empty states — skeleton loaders while fetching, and a contextual message when no data exists for the range"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "version-history",
            "name": "Version History",
            "description": "The record of past states of a document, with a safe way to inspect and restore any of them.",
            "checklist": [
              "Version timeline — saved versions in reverse chronological order, each labelled with a timestamp and the user who saved it",
              "Named versions — the ability to name a version (a milestone, a submission date, a phase label) so it is findable",
              "Version preview — a read-only preview of any past version, visible without committing to a restore",
              "Diff or change summary — a visual indication of what was added, removed or modified between two versions",
              "Restore action — a clear way to make a past version current, with a confirmation that explains what happens to the current content",
              "Autosave indicator — a persistent, subtle indicator of when the document was last saved automatically"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "data-import",
            "name": "Data import",
            "description": "The onboarding-critical flow that gets a customer's existing data into the product without corrupting it.",
            "checklist": [
              "Source selection — file upload (CSV, XLSX), a direct connector to a named competing tool, or API, each with its own path",
              "Template download — a correctly formatted sample file, so the user shapes their export before uploading",
              "Column mapping step — source columns mapped to product fields, with auto-detected guesses the user can override",
              "Pre-import validation report — row count, detected errors, and duplicates flagged before anything is written",
              "Row-level error handling choice — skip bad rows and continue, or abort the whole import; never partially apply silently",
              "Duplicate strategy — create new, skip, or update matching records on a chosen key",
              "Progress and completion summary — created, updated, skipped and failed counts, with a downloadable error file",
              "Undo or rollback — the ability to revert an entire import batch as one unit"
            ],
            "source": "added"
          },
          {
            "slug": "bulk-actions",
            "name": "Bulk actions & multi-select",
            "description": "The multi-select mode that applies one operation to many records while keeping the blast radius visible.",
            "checklist": [
              "Selection affordance per row plus select-all — with a clear distinction between 'all on this page' and 'all matching the current filter'",
              "Persistent selection count — the number of selected items always visible while the action bar is open",
              "Contextual action bar — appearing only in selection mode, listing exactly the operations valid for the selected set",
              "Partial-validity handling — when an action applies to only some selected items, state how many will be affected and why the rest cannot",
              "Confirmation proportional to risk — destructive bulk actions state the exact count and require explicit confirmation",
              "Progress for long operations — a determinate indicator, and a per-item result summary when the batch finishes",
              "Undo for reversible bulk operations — offered immediately after completion, not buried in an activity log",
              "Clear selection — an obvious escape from selection mode that does not require deselecting each item"
            ],
            "source": "added"
          },
          {
            "slug": "trash-and-restore",
            "name": "Trash & restore",
            "description": "The recoverable holding area that makes deletion survivable for a stated window.",
            "checklist": [
              "Deleted items listed with deletion date and the user who deleted them",
              "Retention window stated per item — how many days remain before permanent purge",
              "Restore action returning the item to its original location — including its parent folder, project, or board column",
              "Handling for a restore whose parent is gone — either restore the parent chain or place the item somewhere named and findable",
              "Permanent delete as a separate, confirmation-gated action — distinct from moving to trash",
              "Empty trash action — with a count and an irreversibility warning",
              "Search and filter within trash — so a large trash is still usable",
              "Storage accounting made explicit — whether trashed items still count against the plan's quota"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "communication",
        "name": "Communication & Notifications",
        "surfaces": [
          {
            "slug": "chat-mobile",
            "name": "Chat (Mobile app)",
            "description": "The messaging thread where keyboard behaviour and gestures decide whether the conversation feels native.",
            "checklist": [
              "Keyboard push-up — the message input bar rising with the keyboard so conversation history is not obscured",
              "Input bar — persistent at the bottom with a text field, send button and media attachment option, thumb-reachable in all grips",
              "Message bubbles — sent messages on the right, received on the left, consistent with existing messaging conventions",
              "Swipe to reply — swiping a message right revealing a reply-to action that threads the response to that message",
              "Long press message actions — opening a reaction picker and action menu e.g. react, reply, copy, delete",
              "Read receipts — sent message status shown as subtle indicators (sent, delivered, read)",
              "Media and file sharing — images, videos and files shareable from the input bar, with inline previews in the thread",
              "Typing indicator — an animated indicator when the other party is composing",
              "Scroll to latest — a button to jump to the newest message when new ones arrive while the user is scrolled up"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "chat-web-app",
            "name": "Chat (Web app)",
            "description": "The in-product conversation panel where message provenance and attachments must stay legible.",
            "checklist": [
              "Message thread — a chronological display with the most recent at the bottom, auto-scrolled to latest on load",
              "Message input — a text field supporting multi-line input, typically Shift + Enter for a new line",
              "Sender identification — name and avatar alongside each message, with consecutive messages from the same sender grouped",
              "Timestamps — relative time for recent messages and a full timestamp for older ones",
              "Read receipts — an indicator showing whether the other participant has seen a message",
              "File and media sharing — the ability to attach images, files or links, shown within the conversation",
              "Reactions — emoji reactions on individual messages as a lightweight way to respond without a full reply"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "comments",
            "name": "Comments",
            "description": "Anchored discussion attached to a specific piece of content, with a path to resolution.",
            "checklist": [
              "Anchor to context — comments attached to a specific paragraph, image, task or row rather than floating in a general thread",
              "Reply threading — replies nested under the comment they respond to, keeping related discussion together",
              "Resolve and archive — a way to mark a thread resolved, removing it from the active view while keeping it accessible",
              "Reactions — emoji reactions on individual comments as a lightweight acknowledgement",
              "@mention element — mentioning a user notifies them directly and is visually distinguished in the comment body",
              "Edit action — the ability to edit after posting, with a visible edited marker for transparency",
              "Delete action — the ability to delete after posting, with a confirmation modal beforehand",
              "Comment count indicator — a visible count or badge on the item being discussed, so collaborators can see where threads exist"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "notifications",
            "name": "Notifications",
            "description": "The in-product notification centre that collects activity and lets the user clear it.",
            "checklist": [
              "Notification list — a chronological feed of alerts, messages and activity updates for the user",
              "Read and unread states — a clear visual distinction, with an unread count on the icon that opens the centre",
              "Notification type — a visual or label indicating type e.g. mention, system alert, billing event",
              "Timestamp — relative time for recent items, a complete date and time for older ones",
              "Actions — an action related to the event where relevant e.g. a reply button on a direct message notification",
              "Mark all as read — a single action to clear all unread indicators at once",
              "Empty state — a clear message when there are no notifications"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "in-app-notifications",
            "name": "In-App Notifications",
            "description": "The mobile notification inbox, distinct from system push, with grouping and swipe management.",
            "checklist": [
              "Reverse chronological order — newest notifications at the top so users do not scroll for the latest",
              "Unread indicators — visually distinct from read items e.g. a dot, bolder text, or a background colour difference",
              "Mark all as read — a single action to clear all unread indicators at once",
              "Notification grouping — related notifications grouped e.g. multiple comments on the same post as a single expandable item",
              "Swipe to dismiss action — individual notifications dismissible by swiping left to reveal a delete action",
              "Deep link on tap — tapping a notification navigates directly to the relevant content",
              "Empty state — for when the user has not received any notifications yet",
              "Settings shortcut — a direct link to notification preferences for users who want to adjust what they receive",
              "Notification content — the change, author and time that triggered the notification"
            ],
            "source": "checklist.design"
          }
        ]
      },
      {
        "slug": "ai-agents",
        "name": "AI & Agents",
        "surfaces": [
          {
            "slug": "ai-chat-panel",
            "name": "AI chat panel",
            "description": "The assistant surface docked beside the product, which must show its work and stay correctable.",
            "checklist": [
              "Streaming response with a stop control — the user can interrupt generation mid-token without losing what has already streamed",
              "Attached context made visible — which document, selection, file or record the assistant can currently see, and a way to remove any of it",
              "Citations or source links on factual claims — resolvable to the underlying record, not free-floating assertions",
              "Regenerate and edit-last-message — a retry path that does not require re-typing the prompt",
              "Copy and insert actions on each response — copy as markdown, and insert directly into the document where that applies",
              "Per-message feedback — thumbs up/down with an optional reason, routed somewhere a human reads",
              "Conversation history — past threads listed, renameable, deletable, and scoped to the current workspace",
              "Model or mode disclosure — which model or reasoning mode produced the answer, where the product offers a choice",
              "Error and refusal states that name the cause — context length exceeded, rate limited, content policy, or upstream failure",
              "Data handling statement reachable in one click — whether conversations train models or are retained, and for how long"
            ],
            "source": "added"
          },
          {
            "slug": "agent-settings",
            "name": "Agent settings",
            "description": "The configuration surface that bounds what an autonomous agent may do on the user's behalf.",
            "checklist": [
              "Tool inventory with per-tool enable/disable — every capability the agent can invoke, listed explicitly",
              "Autonomy level per tool — always ask, ask once per session, or always allow, with a safe default of always ask for anything destructive or outbound",
              "Data scope — which workspaces, folders, repositories or connectors the agent may read, and which it may write",
              "Spend and step caps — a maximum token or credit budget and a maximum step count per run, with the behaviour on exhaustion stated",
              "Instruction or persona field — persistent custom instructions, with a visible character limit and a preview of the effective prompt",
              "Model and reasoning-effort selection — with the cost and latency implication of each option shown",
              "Schedule and trigger configuration — when the agent runs unattended, and what event starts it",
              "Kill switch — a single control that halts all running agents and revokes their tokens immediately",
              "Audit trail link — where to review what the agent actually did under these settings"
            ],
            "source": "added"
          },
          {
            "slug": "ai-action-approval",
            "name": "AI action approval",
            "description": "The interrupt that puts a human in the loop before an agent takes a consequential action.",
            "checklist": [
              "The exact action rendered concretely — the file diff, the API call with its parameters, the recipient and body of the message",
              "Blast radius stated — how many records are affected, and whether the action is reversible",
              "Approve, edit-then-approve, and reject as three distinct outcomes — rejection can carry a reason back to the agent",
              "Scope of the approval — this once, all similar actions this session, or always for this tool",
              "Timeout behaviour defined — what happens if the user does not respond, defaulting to not acting",
              "Origin trace — which agent, which run, and which instruction led to this request",
              "Post-action receipt — confirmation of what was actually done, with an undo where the operation supports it"
            ],
            "source": "added"
          },
          {
            "slug": "agent-run-history",
            "name": "Agent run history",
            "description": "The retrospective log that makes an autonomous run auditable after the fact.",
            "checklist": [
              "Run list with trigger, start time, duration, outcome and cost",
              "Per-run step trace — each tool call with its inputs, outputs and errors, expandable without leaving the page",
              "Artefacts produced linked from the run — files written, records changed, messages sent",
              "Failure classification — distinguishing a model error, a tool error, a permission denial and a budget exhaustion",
              "Replay or resume — re-run from the start or continue from the failed step with corrected input",
              "Retention and export — how long traces are kept, and a way to export one for a support conversation",
              "Filtering by agent, status and date range"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "navigation-command",
        "name": "Navigation & Command",
        "surfaces": [
          {
            "slug": "tab-bar-navigation",
            "name": "Tab Bar Navigation",
            "description": "The persistent bottom bar that defines a mobile app's top-level information architecture.",
            "checklist": [
              "Tab count — limited to the most important destinations; three to five items is the typical range",
              "Icon and label — each tab paired with both an icon and a text label unless the icon is unambiguous",
              "Active and default states — the active tab visually distinct by colour, border or icon weight",
              "Badge counts — for tabs with unread counts like messages and notifications, updating in real time",
              "Fixed presence — the tab bar remains visible across its sections, and may be hidden a level deeper",
              "Tap target size — each tab at least 44×44pt to be reliably tappable with a thumb in any grip",
              "Haptic feedback — a subtle tap haptic on tab selection confirming the action"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "gesture-navigation",
            "name": "Gesture navigation",
            "description": "The set of touch gestures a mobile app supports, and how it teaches and confirms them.",
            "checklist": [
              "Swipe to go back — the standard action to go back without tapping a button, disabled where a horizontal swipe conflicts",
              "List item swipe actions — revealing quick actions such as delete, archive or mark as read without opening the item",
              "Pull to refresh — for scrollable content lists, with a visible indicator and haptic confirmation when triggered",
              "Long press menus — an item revealing actions relevant to that specific element",
              "Pinch to zoom — image and map content supporting standard pinch-to-zoom, with zoom level reset logically on navigation away",
              "Drag to reorder — long-press-to-lift and drag with clear visual feedback during the drag state",
              "Gesture hints — a subtle animation or tooltip on first encounter with a key gesture",
              "Haptic feedback — for key gesture moments where a finger covers the screen and engagement is otherwise unclear"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "action-sheet",
            "name": "Action Sheet",
            "description": "The bottom sheet that presents options or confirmations without leaving the current screen.",
            "checklist": [
              "Heading and actions — a clear heading outlining the purpose, along with the relevant actions the user can select",
              "Swipe or backdrop dismiss — dismissible by dragging down or tapping the dimmed area behind it, plus the expected close button",
              "Destructive action styling — delete, remove or block styled in red and positioned last, separated from safe actions",
              "Cancel action — a clearly labelled option that dismisses the sheet without taking any action",
              "Snap points (if expandable) — defined positions the sheet expands or compresses to, with a drag handle indicating it is expandable",
              "Content scrollability — decide what stays pinned on scroll so the sheet remains contextual; avoid scrolling where possible",
              "Keyboard relation — sheet size and responsiveness when the keyboard is triggered while it is active",
              "Backdrop dimming — the screen behind darkened to draw focus to the action sheet"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "in-app-browser",
            "name": "In-App Browser",
            "description": "The embedded web view that must prove which domain the user is on before they trust it.",
            "checklist": [
              "URL bar visibility — the current page's URL visible, confirming the domain before the user interacts with forms or credentials",
              "Close action — a clear, persistent button in a fixed toolbar rather than hidden behind a gesture",
              "Open in external default browser action — while preserving the in-app browser experience",
              "Share action — allowing the URL to be shared without opening the default browser",
              "Loading feedback — a top progress bar or activity indicator so the user knows the browser is working"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "map-view",
            "name": "Map View",
            "description": "The spatial browse surface where markers, permission and offline behaviour all have to hold up.",
            "checklist": [
              "Pin and marker designs — custom markers distinguishable from each other and the base map, sized for reliable tap accuracy",
              "Marker clustering — how markers are grouped when too close together to be shown individually",
              "Native map components — MapKit on iOS or Google Maps on Android to leverage existing foundations",
              "Location permission — requested at the point in the flow where it is needed, with context on the access level and why",
              "Current location re-centre — a visible button to re-centre the map without zooming or scrolling manually",
              "Selected item bottom sheet — tapping a marker expanding a sheet with details, not a full-screen navigation away from the map",
              "Search or filter actions — accessible as a persistent overlay on the map or as a separate screen",
              "Offline handling — cached map tiles displayed where available, with a clear indicator the map may not be current"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "camera-capture",
            "name": "Camera",
            "description": "The capture screen that requests permission in context and lets the user confirm before committing media.",
            "checklist": [
              "Permission request — camera permission requested at the moment capture is triggered, not on app launch or during onboarding",
              "Viewfinder and capture button — a full-screen viewfinder with a large capture button reachable by thumb at the bottom",
              "Flash controls — accessible without leaving the capture screen, with auto, on and off states clearly indicated",
              "Camera flip — a clear button accessible during capture, positioned so it is not accidentally triggered",
              "Post-capture preview — shown after capture, giving the user the chance to retake or confirm before the media is used",
              "Gallery picker of captures — the option to open a library containing the photos captured within that session"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "command-palette",
            "name": "Command palette",
            "description": "The keyboard-summoned launcher that exposes every navigable destination and executable action in one input.",
            "checklist": [
              "Single, discoverable shortcut — Cmd/Ctrl+K, opening from anywhere in the product including inside modals",
              "Unified index — navigation targets, records, settings and executable commands searchable from the same field",
              "Fuzzy matching with ranking — recent and frequent items ranked above alphabetical matches",
              "Grouped, labelled results — sections such as Actions, Pages, Recent, so the result type is never ambiguous",
              "Keyboard shortcut shown beside each command — teaching the direct shortcut for actions that have one",
              "Full keyboard operation — arrow keys to move, Enter to run, Escape to dismiss, with no pointer required",
              "Nested command mode — a selected command can accept a follow-up argument in the same palette without closing it",
              "Contextual commands — actions valid for the current selection surfaced first, and invalid actions omitted rather than shown disabled",
              "Empty and no-match states — the empty state suggests common commands; no-match offers the nearest alternatives"
            ],
            "source": "added"
          },
          {
            "slug": "keyboard-shortcuts-overlay",
            "name": "Keyboard shortcuts overlay",
            "description": "The reference sheet that makes a product's keyboard model learnable in one glance.",
            "checklist": [
              "Opened by the conventional key — ? or Cmd+/ from any screen, and also linked from the help menu",
              "Grouped by task area — navigation, editing, selection, view, with the current context's group shown first",
              "Platform-correct key glyphs — Cmd on macOS and Ctrl on Windows and Linux, detected rather than hardcoded",
              "Only shortcuts that are actually bound and currently valid — nothing aspirational or context-invalid",
              "Searchable when the list is long — filtering by command name or by key",
              "Custom bindings reflected — if the product allows rebinding, the overlay shows the user's own keys",
              "Dismissable with Escape and by clicking outside, returning focus to where it was"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "forms-flows",
        "name": "Forms & Interaction Flows",
        "surfaces": [
          {
            "slug": "multi-step-form",
            "name": "Multi-step form",
            "description": "A long input broken into stages, validated per step and reviewable before submission.",
            "checklist": [
              "Progress indicator — a clear visual showing how many steps exist and which one the user is on, with labels for context",
              "Step heading and context — a clear title and brief context for each step, so users know what is being asked",
              "Field grouping — each step containing only fields that belong together logically",
              "Step-level validation — validation at each step before the user proceeds, not all at once at the end",
              "Back navigation — the ability to return to a previous step without losing subsequent progress",
              "Save and resume — the ability to save progress and return to the form later",
              "Final review step — a summary of all entered information before submission, with a link to edit each section"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "submitting-a-form",
            "name": "Submitting a form",
            "description": "The submit-to-outcome sequence covering the loading, success and failure states of one form.",
            "checklist": [
              "Show button to submit — below the form fields, with copy that fits the form's purpose",
              "Show loading state after submission — the user must see the form is being submitted; consider the hover state before the press too",
              "Show success message when it submits — communicate the result back with a clear success message",
              "If it doesn't, show an error message — for invalid information or another failure, the error must be shown",
              "An error may occur because of the wrong information — when a field's criteria are not met, detail which field and why"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "showing-input-error",
            "name": "Showing input error",
            "description": "The validation timing model for a single field, so the user is corrected but never interrupted.",
            "checklist": [
              "Keep the input in default state — check for errors only after the information has been entered",
              "Allow user to enter information — let the user type without interruption; do not assess as changes are made",
              "Signal error after loss of focus — assess the field once the user has clicked or tabbed to another element",
              "Return to default state upon reattempt — once the user focuses the field again, the error message disappears",
              "Tie the message to the field programmatically — aria-describedby and aria-invalid, so it is identified for everyone, not only sighted users (WCAG 3.3.1 Error Identification)",
              "Say how to fix it, not only what is wrong — \"use at least 8 characters\" beats \"invalid password\" (WCAG 3.3.3 Error Suggestion)",
              "Never signal by colour alone — pair colour with text and an icon",
              "Move focus to the first error on submit, and summarise the errors above long forms so the user is not hunting",
              "Announce errors that arrive asynchronously in a live region (WCAG 4.1.3 Status Messages)",
              "Preserve what the user typed — never clear a field because it failed validation",
              "Do not re-ask for information already given in the same flow (WCAG 3.3.7 Redundant Entry)"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "saving-changes",
            "name": "Saving changes",
            "description": "The edit-to-persisted cycle that makes it obvious whether the user's changes are stored.",
            "checklist": [
              "Show action that enables change — an action to make information editable, since always-editable is riskier for some software",
              "Disable save action until changes are made — the save button starts disabled",
              "State changes to active once a change is made — the save action becomes enabled when a field is edited",
              "Action changes to loading state when pressed — show that saving is in progress",
              "Notify changes have been saved — after the page updates, inform the user their changes were saved"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "uploading-media",
            "name": "Uploading media",
            "description": "The file intake flow covering the drop target, constraints, progress and per-file outcome.",
            "checklist": [
              "Empty state — a clear visual placeholder with an upload icon and text indicating a file can be dropped to upload",
              "Drag and drop interaction — a clear visual state change when a file is dragged over the drop area",
              "Progress indicator — progress that updates in real time so users know their upload is working",
              "File restrictions and constraints — size and format limits stated in the upload area before users attempt to upload",
              "Outcome status — visual indicators such as green checkmarks for success and red warning icons for failures",
              "Upload actions — ways to interact with an upload, choosing which actions show by default versus on hover",
              "Showing multiple uploaded files — a clean list or grid with thumbnails, in a layout that scales"
            ],
            "source": "checklist.design"
          }
        ]
      },
      {
        "slug": "system-states",
        "name": "System & Edge States",
        "surfaces": [
          {
            "slug": "empty-state",
            "name": "Empty State",
            "description": "The screen shown when there is nothing to show, which must distinguish new, filtered-out and broken.",
            "checklist": [
              "Illustration or icon — a contextual visual that signals emptiness rather than making the screen feel broken",
              "Clear heading — a short, plain-language title naming what is missing e.g. 'No projects yet'",
              "Supporting description — a brief explanation of what belongs in this space, most useful for first-time users",
              "Primary action — a CTA that creates the first item, imports or connects, rather than linking somewhere generic",
              "Zero state vs. no-results state — distinguish a screen empty because nothing was created from one that returned no matches",
              "Error state variant — a separate variant for when content failed to load, as opposed to genuinely being empty"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "404",
            "name": "404",
            "description": "The not-found page that explains the miss and offers a way to stay on the site.",
            "checklist": [
              "Logo — either your complete logo or a symbol mark",
              "Title — make it clear the user is on the 404 page",
              "Description — explain why the user has landed on this page",
              "Links to other pages — a link to the homepage, a link to contact, and a search bar to find what they wanted",
              "Illustrations, patterns, visual flair — an opportunity to show off your brand's personality"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "error-500",
            "name": "Error boundary / 500 page",
            "description": "The failure surface for an unexpected server or client crash, which must not lose the user's work or their trust.",
            "checklist": [
              "Plain-language statement that the failure is ours, not the user's input",
              "Retry action that re-attempts only the failed unit — the component or request, not a full page reload where a boundary can recover locally",
              "Error reference identifier displayed and copyable — the same ID present in server logs, so support can trace it",
              "Escape routes — links to the previous page, the dashboard, and the status page",
              "Scoped boundary — a crash in one panel does not blank the entire application shell",
              "Unsaved state preserved where the failure is client-side — draft content retained in local storage and offered on recovery",
              "Automatic report with an opt-in description field — telemetry sent without the user having to file a ticket",
              "No stack traces, internal hostnames or SQL in the user-facing message"
            ],
            "source": "added"
          },
          {
            "slug": "offline-state",
            "name": "Offline state",
            "description": "The degraded mode that keeps a product usable, honest and non-destructive when the network is gone.",
            "checklist": [
              "Persistent connectivity indicator — a non-modal banner stating the app is offline, which clears itself on reconnect",
              "Explicit read availability — which cached content is still viewable, and how stale it is, with a last-synced timestamp",
              "Write queueing — actions taken offline are queued and marked pending rather than silently failing",
              "Per-item sync status — pending, syncing, synced, or failed, visible on each affected record",
              "Automatic replay on reconnect — with a summary of what synced and what did not",
              "Conflict resolution — when the server changed the same record, the user is shown both versions and chooses, rather than losing one",
              "Disabled-with-reason for genuinely online-only actions — payment, invites, exports, rather than letting them fail after a delay",
              "No data loss on app termination while offline — the queue survives a cold start"
            ],
            "source": "added"
          },
          {
            "slug": "maintenance",
            "name": "Maintenance",
            "description": "The planned-downtime page that tells users when the product will be back and where to watch.",
            "checklist": [
              "Clear status message — a plain-language explanation that the product is unavailable and why, differentiating scheduled from unexpected",
              "Estimated return time — when the product is expected back, as specifically as possible",
              "Status page link — a live status page where users can monitor progress and see real-time updates",
              "Contact or support link — a way to reach support for urgent issues that cannot wait for the window to end",
              "Brand consistency — styled consistently with the product, even if the content is minimal"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "force-update",
            "name": "Force update required",
            "description": "The blocking gate that stops an unsupported client version from talking to an incompatible backend.",
            "checklist": [
              "Hard block only when the old version genuinely cannot work — otherwise use a dismissible soft prompt",
              "Reason and benefit stated — a security fix or a breaking API change, not just 'a new version is available'",
              "Direct action to the store listing — one tap to the App Store or Play Store entry for this app",
              "Current and required version numbers shown — useful for support conversations",
              "Soft-prompt variant with 'later' — for recommended, non-breaking updates, with a frequency cap on re-asking",
              "Offline-safe behaviour — the gate does not trap a user with no connection in an unrecoverable loop",
              "Server-driven threshold — the minimum supported version is configured remotely, not compiled into the client"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "marketing",
        "name": "Marketing Site",
        "surfaces": [
          {
            "slug": "homepage",
            "name": "Homepage",
            "description": "The top-of-funnel page that has to state what the product is, for whom, and what to do next.",
            "checklist": [
              "Above-the-fold value proposition — one sentence naming the product category and the outcome, readable without scrolling",
              "Primary CTA repeated — the same action in the hero, mid-page and footer, with identical wording",
              "Secondary CTA for the not-yet-ready — book a demo, watch a video, or read the docs",
              "Product visual that shows the actual interface — a real screenshot or short loop, not an abstract illustration",
              "Social proof near the top — customer logos, a headline metric, or a review score",
              "Three to five benefit blocks — each tied to an outcome, each linking to the deeper feature or use-case page",
              "Objection handling — pricing entry point, security posture, and integrations reachable in one click",
              "Meta title, description and Open Graph image — set deliberately, since this page is the most-shared URL",
              "Mobile-first layout — the hero, CTA and proof all legible on a phone without horizontal scroll"
            ],
            "source": "added"
          },
          {
            "slug": "features",
            "name": "Features",
            "description": "The capability page that translates what the product does into what the visitor can do.",
            "checklist": [
              "Feature grouping — capabilities organised into logical themes so the page is scannable, not a wall of bullet points",
              "Feature descriptions — each explained in one or two sentences from the user's perspective",
              "Feature visuals — screenshots, GIFs or short video clips showing each feature in action",
              "Benefits framing — each feature connected explicitly to an outcome, not just the capability",
              "Social proof per feature — a relevant customer quote placed alongside the feature it relates to",
              "CTA — a conversion point at the bottom and optionally inline for visitors convinced mid-page"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "compare",
            "name": "Compare",
            "description": "The head-to-head page that positions the product against a named competitor without losing credibility.",
            "checklist": [
              "Clear positioning statement — an opening that states plainly how this product differs from the competitor",
              "Feature comparison table — side-by-side key features with clear tick and cross indicators",
              "Key differentiators — a section expanding on where this product genuinely excels beyond the table",
              "Social proof — testimonials or quotes from customers who switched from the competitor being compared",
              "Pricing comparison — a clear, fair comparison of pricing structures where it is a meaningful factor",
              "CTA — a direct prompt to try the product or book a demo"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "testimonials",
            "name": "Testimonials",
            "description": "The proof page that converts customer experience into credible, attributable evidence.",
            "checklist": [
              "Customer quotes — direct quotes describing their experience, attributed with name, role and company",
              "Customer details — name, role, company and photo for each testimonial, since anonymised quotes carry less weight",
              "Use case variety — testimonials across different customer types, industries and use cases",
              "Video testimonials — short clips from customers willing to speak on camera",
              "Review platform badges — aggregate scores from G2, Trustpilot, Capterra or similar, linking to verified reviews"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "waitlist",
            "name": "Waitlist",
            "description": "The pre-launch capture page that converts interest into a queued, incentivised signup.",
            "checklist": [
              "Email capture — a simple form to join, with a clear statement of what joining means",
              "What to expect — what waitlist members receive (early access, a discount, a feature) and a rough timeline",
              "Social proof — the total number of people already on the waitlist, to signal demand",
              "Position indicator — the user's current position in the queue, shown after sign-up and updated as they move up",
              "Referral mechanic — a shareable link that moves the user up the list when others join through it",
              "Progress toward access — how close the product is to launch or how many spots remain at the current tier"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "affiliate",
            "name": "Affiliate",
            "description": "The partner-programme page that explains the economics clearly enough to recruit promoters.",
            "checklist": [
              "Programme overview — what the affiliate or partner programme involves and who it is designed for",
              "Commission or reward structure — exactly what affiliates earn (percentage, flat fee, recurring) stated plainly",
              "How it works — a step-by-step breakdown of joining, sharing and earning",
              "Resources provided — links, banners, copy and tracking the company provides to help affiliates succeed",
              "Social proof — testimonials or earnings examples from existing affiliates",
              "Application or signup CTA — a clear form or button to join the programme"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "referral-flow",
            "name": "Referral flow",
            "description": "The in-product loop where an existing user invites a friend and both sides get a stated reward.",
            "checklist": [
              "Reward stated symmetrically — exactly what the referrer gets and exactly what the referred friend gets",
              "Qualifying condition made explicit — signup, activation, or first payment, and when the reward actually lands",
              "Unique, trackable link plus a code — shareable by copy, native share sheet, email and a pre-filled message",
              "Referral status list — invited, signed up, qualified, rewarded, per person",
              "Earned rewards balance with a redemption path — credit applied to billing, or payout, and how to trigger it",
              "Limits and eligibility rules — caps per user, expiry, geographic restrictions, self-referral prohibited",
              "Recipient-side landing page that honours the referral — the reward visible on arrival, not discovered after signup"
            ],
            "source": "added"
          }
        ]
      },
      {
        "slug": "content-publishing",
        "name": "Content & Publishing",
        "surfaces": [
          {
            "slug": "blog",
            "name": "Blog",
            "description": "The content index that lets a reader find, filter and subscribe to the company's writing.",
            "checklist": [
              "Hero — a clear indicator that this is a blog, whether for an individual, team or company",
              "Navigation — a logo, links, a CTA and potentially a search function, with links surfacing sub-topics",
              "Layout — how sections and posts are structured, considering what is above the fold on mobile, tablet and desktop",
              "Blog post preview — visuals and text where typography hierarchy puts the heading first and a branded thumbnail sets tone",
              "Description — a summary of what the blog covers, shown in the hero",
              "Tags and/or categories — topics attached to posts for convenient filtering",
              "Search function — for a blog with many posts, so readers can find the content they want",
              "Opt-in for subscription — a signup form that makes the reader a subscriber",
              "Sidebar — supporting links and resources such as search, popular posts and trending topics",
              "Pagination — breaking content into pages after 10–20 items"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "blog-post",
            "name": "Blog Post",
            "description": "The article page that has to hold attention, credit its author, and convert a reader onward.",
            "checklist": [
              "Title — copy that tells the user what to expect, phrased in an eye-catching or interesting manner",
              "Sub heading — elaborating on the title and defining the purpose of the post",
              "Thumbnail — a visual aid illustrating the themes of the content, drawn from the brand style guide",
              "Author — who wrote and contributed to the post, with a selectable author profile",
              "Content — the post itself, with responsiveness considered on smaller devices",
              "Social sharing tools — the ability to share or send the post, positioned so it stays available while reading",
              "Lead conversion content — relevant information about your product that ties in with the post",
              "Related articles — suggested posts relevant to the current one",
              "Opt-in for subscription — a signup form to notify readers of new posts",
              "Date posted — when the post was shared live",
              "Tags — a specific category for users to explore as a topic",
              "Comments — a section for discussion that readers can join"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "changelog",
            "name": "Changelog / Release notes",
            "description": "The dated record of what shipped, written for users rather than for the commit log.",
            "checklist": [
              "Reverse-chronological entries each with a date and a version or release name",
              "Change type labelled per item — new, improved, fixed, deprecated, breaking",
              "User-facing language — what changed for the reader, not the internal ticket title",
              "Visual evidence for significant changes — a screenshot or short clip of the new behaviour",
              "Deep links into the product and into the docs for each substantive entry",
              "Breaking changes and deprecations called out separately, with the removal date and a migration path",
              "Subscription options — RSS, email, and an in-product 'what's new' badge that clears once read",
              "Permalink and filter per entry — so a support reply can link to one specific change, filtered by product area"
            ],
            "source": "added"
          },
          {
            "slug": "press-media",
            "name": "Press / Media",
            "description": "The journalist-facing page that supplies facts, assets and a named contact without an email exchange.",
            "checklist": [
              "Company overview — a concise, factual description of the company, what it does, when it was founded and who it serves",
              "Press coverage — a curated list of notable media mentions with publication name, headline and link",
              "Press contact — a dedicated email address for media enquiries",
              "Brand assets — downloadable logos, product screenshots and founder headshots in multiple formats, light and dark",
              "Key statistics — notable numbers journalists can use e.g. customers, revenue milestones, countries, team size",
              "Recent press releases — archived official announcements for journalists researching the company's history"
            ],
            "source": "checklist.design"
          }
        ]
      },
      {
        "slug": "company-trust",
        "name": "Company & Trust",
        "surfaces": [
          {
            "slug": "about",
            "name": "About",
            "description": "The company page that establishes why the product exists and who is behind it.",
            "checklist": [
              "Origin story — a genuine account of why the company was founded and the problem it set out to solve",
              "Mission or values — what the company stands for and how it makes decisions, stated plainly",
              "Team — the people behind the product: names, roles and faces",
              "Milestones or traction — founding year, customer count, notable launches, establishing credibility",
              "Investors or backers — logos or names of investors, accelerators or notable backers where relevant",
              "CTA — a clear next step e.g. view open roles, read the blog, or try the product"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "team",
            "name": "Team",
            "description": "The people page that makes the company legible as a group of humans.",
            "checklist": [
              "Personality and branding — a theme or tone conveying how the team behaves",
              "Team members — a representation of the team, with detail scaled to team size",
              "Visuals — photography or illustrations of the team, offices or culture",
              "Group by area or team — dividing members by area (marketing, design, engineering) for easier scanning",
              "Link to careers — a route to open job opportunities for someone who liked what they saw"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "careers",
            "name": "Careers",
            "description": "The hiring page that sells the company to candidates and routes them into open roles.",
            "checklist": [
              "Company story — how the business started and the journey it has been on, including the why",
              "Up to date information — quantitative values kept current e.g. team headcount, offices open, time operating",
              "Employee benefits — perks and value props that show real, tangible value rather than gimmicks",
              "Teams and divisions — a breakdown of team members or the areas that exist, scaled to team size",
              "Job openings — a listing of all roles currently available, broken up by department for easier scanning",
              "Working locations — where the offices are, and whether remote work is offered",
              "Employee testimonials — stories from current employees about why they work there and what to expect"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "contact-us",
            "name": "Contact Us",
            "description": "The page that routes a stranger to the right channel and the right team.",
            "checklist": [
              "Personality and branding — visual character and tone of voice aligned with your brand",
              "Clear methods to contact — phone number, email address or a form to fill in",
              "Social media accounts — for users who feel more comfortable contacting via a social platform",
              "Segmenting contact methods — separate contacts for support and sales, showing you have specific help for their issue",
              "Easy location to get to — the page available in your header or footer"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "legal-privacy",
            "name": "Privacy",
            "description": "The legal hub carrying the privacy policy, terms and cookie policy in a readable, versioned form.",
            "checklist": [
              "Privacy policy — what data is collected, how it is used, how long it is kept, and how users can request deletion",
              "Terms of service — the agreement governing use of the product: responsibilities, acceptable use, limitation of liability",
              "Cookie policy — which cookies are used, what they do, and how users can control them",
              "Last updated date — a clear timestamp on every legal document so users know they are reading the current version",
              "Version history or changelog — a log of what changed between policy versions",
              "Contact for legal queries — a dedicated email or address for data, privacy or legal enquiries"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "cookie-consent",
            "name": "Cookie consent",
            "description": "The consent gate that must obtain a lawful choice without dark-patterning the visitor.",
            "checklist": [
              "Reject-all with equal prominence to accept-all — same size, same visual weight, same click depth",
              "Granular category toggles — necessary, functional, analytics, marketing, each described in one plain sentence",
              "No pre-ticked non-essential categories — consent is opt-in, not opt-out",
              "No tracking script fires before an affirmative choice — including analytics and tag managers",
              "Consent record kept — timestamp, categories chosen, and policy version, retrievable for an audit",
              "Persistent re-entry point — a footer link or floating control to change the choice later, at any time",
              "Re-prompt on material change — when new vendors or categories are added, not on a fixed nagging schedule",
              "Non-blocking layout — the banner does not obscure the content or the legal links behind it"
            ],
            "source": "added"
          },
          {
            "slug": "security",
            "name": "Security",
            "description": "The trust page that lets a buyer's security reviewer answer their questions without a call.",
            "checklist": [
              "Certifications and compliance — SOC 2, ISO 27001, GDPR, HIPAA logos paired with an explanation of scope",
              "Data encryption — a plain-language explanation of how data is encrypted at rest and in transit",
              "Data residency — where customer data is stored and processed, with any regional options",
              "Access controls — who within the company can access customer data, under what conditions, and what limits that access",
              "Vulnerability disclosure — how security issues are reported and handled: an email address, a bug bounty, or a disclosure policy",
              "Incident history — past disclosed incidents with dates and resolution summaries",
              "Penetration testing — third-party audits with the most recent date and a way to request the report"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "status",
            "name": "Status",
            "description": "The independently hosted uptime page that reports component health and live incident progress.",
            "checklist": [
              "Component status list — each major service (API, dashboard, integrations, notifications) with its current operational state",
              "Live incident updates — timestamped updates posted in sequence: identifying, investigating, resolved",
              "Incident history — an archive of past incidents with dates, duration, affected components and a brief post-mortem",
              "Uptime metrics — historical uptime percentages per component, typically over a rolling 90-day window",
              "Scheduled maintenance — upcoming windows listed in advance with estimated duration and affected components",
              "Subscribe to updates — email, SMS or webhook subscription so users are notified without checking the page",
              "Separate domain — hosted independently of the main infrastructure, so it stays up when the product is down"
            ],
            "source": "checklist.design"
          }
        ]
      },
      {
        "slug": "support",
        "name": "Help & Support",
        "surfaces": [
          {
            "slug": "help-center",
            "name": "Help Center",
            "description": "The self-serve documentation hub that resolves questions before they become tickets.",
            "checklist": [
              "Search with suggestions — a prominent search input returning relevant articles as the user types",
              "Content categories — a hierarchy of topics for users who are not sure what to search for",
              "Featured and popular content — the most-viewed or most-useful articles surfaced on the homepage",
              "Article formatting — proper heading hierarchy, screenshots and formatted code blocks where relevant",
              "Last updated date — the date each article was last reviewed or edited, shown at the top",
              "Helpfulness feedback — a thumbs up/down or yes/no at the end of each article",
              "Related articles — links to adjacent articles that might answer follow-up questions"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "faq",
            "name": "FAQ",
            "description": "The structured question list that removes purchase and usage objections at the point of doubt.",
            "checklist": [
              "Purposeful information — questions and answers that genuinely help users decide about your product",
              "Contact options — a direct route to contact you when the question is not answered, ordered by preference",
              "Table of contents — structured topics so users can navigate a large question set",
              "Search functionality — keyword search for users to look up their questions",
              "Navigate by topic — questions segmented into general topics to structure the content"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "contacting-support",
            "name": "Contacting support",
            "description": "The flow from a stuck user to the right support channel with expectations set.",
            "checklist": [
              "Show a link to contact support — in the website footer, in mobile app settings, and on any page experiencing an error, with clear copy",
              "Show methods of contact — chat, call or FAQ listed with the benefits of each where multiple exist",
              "Outline how to communicate and what is expected — once a method is chosen, make it clear how it will work",
              "State the expected response time — per channel, before the message is sent, so the wait is a known quantity rather than silence",
              "Give the request a reference and confirm it — a ticket ID on screen and by email, so the user has something to quote",
              "Show past requests and their status — a history the user can return to instead of starting over",
              "Let the user attach evidence — screenshots, files or logs, since the fastest support thread is the one that does not need three replies to reproduce",
              "Carry context automatically — plan, app version, device and locale, so the user is not asked to repeat what you already know (WCAG 3.3.7 Redundant Entry)",
              "Say when support is available — hours and timezone, and what happens to a message sent outside them"
            ],
            "source": "checklist.design"
          },
          {
            "slug": "api-documentation",
            "name": "API documentation",
            "description": "The developer reference that has to get someone from zero to a successful first call.",
            "checklist": [
              "Quickstart that produces a working call in under five minutes — including how to obtain a key",
              "Authentication explained once, concretely — header name, token format, and a copy-pasteable example",
              "Per-endpoint reference — method, path, every parameter with type and requirement, and every response field",
              "Runnable request examples in multiple languages — curl plus the officially supported SDKs, generated from the same spec",
              "Complete error catalogue — every status code and error string, with the cause and the fix",
              "Rate limits, pagination and idempotency documented as first-class topics, not footnotes",
              "Versioning and deprecation policy — how versions are pinned, how long old ones live, and what changes without notice",
              "Machine-readable spec published — OpenAPI or equivalent, downloadable and matching the rendered docs",
              "Changelog for the API itself, separate from the product changelog"
            ],
            "source": "added"
          },
          {
            "slug": "feature-announcement",
            "name": "Feature announcement / Product tour",
            "description": "The in-product introduction of something new, which must inform without hijacking the session.",
            "checklist": [
              "Targeted to users the feature is relevant to — not broadcast to every account regardless of plan or role",
              "Dismissible at every step — with the dismissal remembered across devices and sessions",
              "Anchored to the real UI element it describes — a positioned tooltip or spotlight, not a floating modal describing something offscreen",
              "Step count bounded and visible — three to five steps at most, with progress shown",
              "One clear action per step — try it now, read more, or skip",
              "Never blocks the user's original intent — deferred if the user is mid-task in a form or editor",
              "Re-openable on demand — findable later from a help or 'what's new' menu once dismissed",
              "Links to the changelog entry and documentation for the same feature"
            ],
            "source": "added"
          },
          {
            "slug": "feedback-survey",
            "name": "In-product feedback survey",
            "description": "The lightweight prompt that collects a rating or comment without derailing the user.",
            "checklist": [
              "Triggered after a completed action, never mid-task — at the end of a successful flow, not during one",
              "Single question first — the rating or score alone, with the free-text follow-up appearing only after an answer",
              "Frequency cap and cool-down — a stated minimum interval before the same user is asked again",
              "Dismiss without answering — an obvious close that counts as a decline, not a deferral loop",
              "Response acknowledged — a confirmation that the feedback reached a human, with a route to support for anything urgent",
              "Low-score follow-up path — an offer to talk to support or file a bug when the rating indicates a problem",
              "No blocking of the underlying interface — the prompt is a non-modal card or inline element"
            ],
            "source": "added"
          }
        ]
      }
    ]
  }
}