{
  "name": "CleenUI page templates",
  "url": "https://cleenui.com/ai-skills/page-templates",
  "description": "15 pre-built page structures the Builder skill can scaffold.",
  "count": 15,
  "templates": [
    {
      "slug": "analytics",
      "name": "Analytics",
      "category": "Insights",
      "tagline": "Charts, KPIs, and drill-downs — the story your data tells, organized for decisions.",
      "intro": "Multi-chart analytics page with a KPI strip on top, three or four primary visualizations underneath, and a filter rail down the left side. Designed for the user who needs to ask 'what's happening?' and then 'why?' without leaving the page.",
      "componentsUsed": [
        "Chart",
        "StatCard",
        "FilterChip",
        "FilterDrawer",
        "DataGridWithFilters",
        "Card"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/analytics"
    },
    {
      "slug": "dashboard",
      "name": "Dashboard",
      "category": "Operations",
      "tagline": "KPI strip + chart + recent-activity list — the homepage of an internal tool.",
      "intro": "The first screen a logged-in user sees in most B2B apps. Four KPI cards across the top, a primary chart for trend at-a-glance, and a recent-activity list on the right rail. Designed to answer 'what should I care about right now?' in under five seconds.",
      "componentsUsed": [
        "StatCard",
        "Chart",
        "Card",
        "ActivityFeed",
        "Heading",
        "Breadcrumb"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/dashboard"
    },
    {
      "slug": "datagrid",
      "name": "Datagrid",
      "category": "Operations",
      "tagline": "DataGrid with pinned filters, bulk actions, and a slide-out detail drawer.",
      "intro": "The workhorse of B2B applications. A filterable, sortable, bulk-selectable table of records with a side drawer that opens on row click. Pinned filter chips at the top, bulk-action bar that appears when rows are selected. Pagination at 10/25/50/100 per page, configurable per user.",
      "componentsUsed": [
        "DataGridWithFilters",
        "FilterChip",
        "FilterDrawer",
        "Drawer",
        "Toolbar",
        "Button",
        "Heading"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/datagrid"
    },
    {
      "slug": "email-engine",
      "name": "Email Engine",
      "category": "Communications",
      "tagline": "Template editor + send queue + delivery log — the transactional-email surface for a B2B app.",
      "intro": "Three-pane workspace for managing transactional emails. Template list on the left, editor in the middle (subject + body + variable picker), and a preview + delivery log on the right. Includes variable substitution preview so the marketer or ops user can verify before sending.",
      "componentsUsed": [
        "RichTextEditor",
        "Form",
        "List",
        "FilterChip",
        "DataGridWithFilters",
        "Card"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/email-engine"
    },
    {
      "slug": "simple-form",
      "name": "Simple Form",
      "category": "Forms",
      "tagline": "A focused single-screen form — labels, inputs, validation, submit. No multi-step ceremony.",
      "intro": "The canonical single-screen form. Vertical stack of labeled inputs with inline validation, a primary Submit button, and a quiet secondary Cancel. For collecting structured input from a user without the overhead of a multi-step wizard.",
      "componentsUsed": [
        "Input",
        "Select",
        "Toggle",
        "Button",
        "Heading",
        "Form"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/simple-form"
    },
    {
      "slug": "product-catalog",
      "name": "Product Catalog",
      "category": "Commerce",
      "tagline": "Browsable grid of products with filters, search, and quick-view — the storefront entry point.",
      "intro": "Card-grid catalog of products with a filter rail on the left and a search bar above. Each card shows image, name, price, and a quick-view affordance. Pagination or infinite-scroll at the bottom. The canonical entry point for any product-listing flow.",
      "componentsUsed": [
        "Card",
        "FilterChip",
        "FilterDrawer",
        "Input",
        "Select",
        "Pagination"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/product-catalog"
    },
    {
      "slug": "product-details",
      "name": "Product Details",
      "category": "Commerce",
      "tagline": "Image gallery + variant selector + buy actions + tabbed detail — the canonical PDP.",
      "intro": "Two-column product detail page. Image gallery on the left, product info + variant selector + add-to-cart on the right. Underneath, tabbed sections for description, specifications, and reviews. The canonical product detail surface for any catalog flow.",
      "componentsUsed": [
        "Card",
        "Heading",
        "Text",
        "Select",
        "Toggle",
        "Button",
        "Tabs",
        "Table"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/product-details"
    },
    {
      "slug": "settings",
      "name": "Settings",
      "category": "Configuration",
      "tagline": "Sectioned form with sidebar nav — the canonical settings page.",
      "intro": "The canonical settings surface. A left-rail of section anchors (Profile, Notifications, Security, Billing, etc.) scrolls a right-side form into view. Each section is a card with its own Save/Cancel — so a user editing Notifications doesn't have to also commit to Security changes.",
      "componentsUsed": [
        "VerticalNav",
        "Card",
        "Input",
        "Toggle",
        "Button",
        "Heading"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/settings"
    },
    {
      "slug": "wizard",
      "name": "Wizard",
      "category": "Forms",
      "tagline": "Multi-step form with progress, validated transitions, and a review step.",
      "intro": "A guided multi-step form. Step indicator at the top with a clear current/done/upcoming state. Each step validates before letting the user advance. A final review step shows everything before the commit so the user has a chance to back up.",
      "componentsUsed": [
        "Steps",
        "Form",
        "Input",
        "Select",
        "Toggle",
        "Button",
        "Card"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/wizard"
    },
    {
      "slug": "detail-screen",
      "name": "Detail Screen",
      "category": "Record",
      "tagline": "Record header + tabbed main + side rail metadata — the canonical record page.",
      "intro": "A generic detail view for any single record: order, account, ticket, project. Header strip up top with the record's identity + status + primary actions, a tabbed main area for the heavy content (overview / activity / files / related), and a right-side metadata rail with the fields that don't need to be in the user's face. The template you reach for whenever a user clicks a row.",
      "componentsUsed": [
        "Tabs",
        "EditableCard",
        "Avatar",
        "PillBadge",
        "InfoLabels",
        "Breadcrumb",
        "Card"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/detail-screen"
    },
    {
      "slug": "empty-state",
      "name": "Empty State",
      "category": "Edge case",
      "tagline": "Illustration + heading + CTA — what users see before any data exists.",
      "intro": "The first thing a user sees when a list, table, dashboard, or workspace has nothing in it yet. Designed to make the zero-data case feel intentional — like the app is waiting for them — rather than broken. Pairs with every list, datagrid, dashboard, and detail template to handle the 'I've never used this before' moment.",
      "componentsUsed": [
        "Icon",
        "Heading",
        "Text",
        "Button"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/empty-state"
    },
    {
      "slug": "login",
      "name": "Login",
      "category": "Auth",
      "tagline": "Centered auth card with email/password, social options, and password reset.",
      "intro": "The canonical sign-in screen. Centered card on a neutral page, logo at the top, email + password fields, primary CTA, divider, social-login row, and a 'forgot password' link in the footer. The goal of a login page is to get out of the user's way — this template optimizes for familiarity.",
      "componentsUsed": [
        "Input",
        "Button",
        "Heading",
        "Text",
        "Checkbox"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/login"
    },
    {
      "slug": "marketing-landing",
      "name": "Marketing Landing",
      "category": "Marketing",
      "tagline": "Hero + feature grid + social proof + CTA strip — for product or feature launches.",
      "intro": "A full marketing page structure for announcing a product, feature, or campaign. Hero with the headline + CTA pair, dim logo row for social proof, three-up feature grid below, and a closing CTA strip. Fast to assemble, slow to grow stale.",
      "componentsUsed": [
        "Heading",
        "Button",
        "Card",
        "Icon",
        "Text"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/marketing-landing"
    },
    {
      "slug": "pricing",
      "name": "Pricing",
      "category": "Marketing",
      "tagline": "Tier cards with comparison toggle — pricing as a decision tool, not a wall of text.",
      "intro": "Three tier cards across the page, a monthly/annual toggle above, and a feature-comparison table below. Designed to answer 'which plan is right for me?' in under 30 seconds, with progressive depth for the user who needs the full breakdown.",
      "componentsUsed": [
        "Card",
        "Button",
        "PillBadge",
        "Toggle",
        "Collapsible",
        "Heading"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/pricing"
    },
    {
      "slug": "admin-overview",
      "name": "Admin Overview",
      "category": "Back office",
      "tagline": "Heavy data tables with bulk operations — the back-office workhorse.",
      "intro": "The screen that runs the operation. Header strip with system-status pills, dense toolbar with bulk actions (export / archive / reassign / status change), and a high-density DataGrid taking up the full page. For the user who lives in this screen all day and cares about throughput, not aesthetics.",
      "componentsUsed": [
        "DataGrid",
        "PillBadge",
        "Button",
        "Menu",
        "FilterDrawer",
        "Card"
      ],
      "url": "https://cleenui.com/ai-skills/page-templates/admin-overview"
    }
  ]
}