"use strict";(globalThis.webpackChunkproject_public_docs=globalThis.webpackChunkproject_public_docs||[]).push([[838],{834(e,n,i){i.r(n),i.d(n,{assets:()=>o,contentTitle:()=>d,default:()=>h,frontMatter:()=>t,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"reference/web-ui-spec","title":"CmdForge Web UI Design","description":"Purpose","source":"@site/docs/reference/web-ui-spec.md","sourceDirName":"reference","slug":"/reference/web-ui-spec","permalink":"/rob/CmdForge/reference/web-ui-spec","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_label":"Web UI Design","sidebar_position":6,"format":"md"},"sidebar":"docs","previous":{"title":"Design Philosophy","permalink":"/rob/CmdForge/reference/design"},"next":{"title":"CmdForge TODOs","permalink":"/rob/CmdForge/todos"}}');var l=i(4848),r=i(8453);const t={sidebar_label:"Web UI Design",sidebar_position:6,format:"md"},d="CmdForge Web UI Design",o={},c=[{value:"Purpose",id:"purpose",level:2},{value:"Mission Alignment",id:"mission-alignment",level:2},{value:"Guiding Principles",id:"guiding-principles",level:2},{value:"Information Architecture",id:"information-architecture",level:2},{value:"Visual Design System",id:"visual-design-system",level:2},{value:"Color Palette",id:"color-palette",level:3},{value:"Typography",id:"typography",level:3},{value:"Spacing System",id:"spacing-system",level:3},{value:"Border Radius",id:"border-radius",level:3},{value:"Shadow System",id:"shadow-system",level:3},{value:"Page Requirements",id:"page-requirements",level:2},{value:"Landing Page (<code>/</code>)",id:"landing-page-",level:3},{value:"Section 1: Hero (Above the Fold)",id:"section-1-hero-above-the-fold",level:4},{value:"Section 2: Three Pillars (Why CmdForge?)",id:"section-2-three-pillars-why-cmdforge",level:4},{value:"Section 3: Featured Tools &amp; Projects",id:"section-3-featured-tools--projects",level:4},{value:"Section 4: Getting Started",id:"section-4-getting-started",level:4},{value:"Section 5: Featured Contributor",id:"section-5-featured-contributor",level:4},{value:"Section 6: Footer Ad Zone (Optional)",id:"section-6-footer-ad-zone-optional",level:4},{value:"Section 7: Footer",id:"section-7-footer",level:4},{value:"Docs/Tutorials Pages (<code>/docs/*</code>, <code>/tutorials/*</code>)",id:"docstutorials-pages-docs-tutorials",level:3},{value:"Tool Detail Page (<code>/tools/{owner}/{name}</code>)",id:"tool-detail-page-toolsownername",level:3},{value:"Registry Browse Page (<code>/tools</code>)",id:"registry-browse-page-tools",level:3},{value:"Publisher Dashboard (<code>/dashboard</code>)",id:"publisher-dashboard-dashboard",level:3},{value:"Donate Page (<code>/donate</code>)",id:"donate-page-donate",level:3},{value:"Component Library",id:"component-library",level:2},{value:"Buttons",id:"buttons",level:3},{value:"Cards",id:"cards",level:3},{value:"Navigation",id:"navigation",level:3},{value:"Form Elements",id:"form-elements",level:3},{value:"Badges and Tags",id:"badges-and-tags",level:3},{value:"Code Blocks",id:"code-blocks",level:3},{value:"Callout Boxes",id:"callout-boxes",level:3},{value:"Loading States",id:"loading-states",level:3},{value:"Responsive Design",id:"responsive-design",level:2},{value:"Breakpoints",id:"breakpoints",level:3},{value:"Layout Adaptations",id:"layout-adaptations",level:3},{value:"Touch Targets",id:"touch-targets",level:3},{value:"Mobile-Specific Considerations",id:"mobile-specific-considerations",level:3},{value:"Performance Budgets",id:"performance-budgets",level:2},{value:"Core Web Vitals Targets",id:"core-web-vitals-targets",level:3},{value:"Resource Budgets",id:"resource-budgets",level:3},{value:"Loading Strategy",id:"loading-strategy",level:3},{value:"Caching Strategy",id:"caching-strategy",level:3},{value:"Performance Monitoring",id:"performance-monitoring",level:3},{value:"Error States and Fallbacks",id:"error-states-and-fallbacks",level:2},{value:"Network Errors",id:"network-errors",level:3},{value:"Tool Not Found (404):",id:"tool-not-found-404",level:3},{value:"Search No Results:",id:"search-no-results",level:3},{value:"Offline Mode",id:"offline-mode",level:3},{value:"Form Errors",id:"form-errors",level:3},{value:"Ad and Revenue Strategy",id:"ad-and-revenue-strategy",level:2},{value:"Monetization Extensions (Optional)",id:"monetization-extensions-optional",level:2},{value:"Data and Governance",id:"data-and-governance",level:2},{value:"Privacy and Consent",id:"privacy-and-consent",level:2},{value:"UX and Accessibility",id:"ux-and-accessibility",level:2},{value:"Tech Stack (Phase 7 Target)",id:"tech-stack-phase-7-target",level:2},{value:"Auth and Session Model",id:"auth-and-session-model",level:2},{value:"API Surfaces for Web UI",id:"api-surfaces-for-web-ui",level:2},{value:"Payments and Donations (Optional)",id:"payments-and-donations-optional",level:2},{value:"Moderation and Abuse Reporting",id:"moderation-and-abuse-reporting",level:2},{value:"Media and Asset Handling",id:"media-and-asset-handling",level:2},{value:"Caching and SEO Serving",id:"caching-and-seo-serving",level:2},{value:"SEO Strategy",id:"seo-strategy",level:2},{value:"Technical SEO",id:"technical-seo",level:3},{value:"Structured Data (Schema.org)",id:"structured-data-schemaorg",level:3},{value:"Open Graph &amp; Social Sharing",id:"open-graph--social-sharing",level:3},{value:"Sitemap",id:"sitemap",level:3},{value:"robots.txt",id:"robotstxt",level:3},{value:"Canonical URLs",id:"canonical-urls",level:3},{value:"Performance for SEO",id:"performance-for-seo",level:3},{value:"Content Strategy",id:"content-strategy",level:2},{value:"Risks and Mitigations",id:"risks-and-mitigations",level:2},{value:"Phase 7 Implementation Checklist",id:"phase-7-implementation-checklist",level:2},{value:"7.1 Foundation &amp; Setup",id:"71-foundation--setup",level:3},{value:"7.2 Core Templates &amp; Components",id:"72-core-templates--components",level:3},{value:"7.3 Landing Page",id:"73-landing-page",level:3},{value:"7.4 Registry Pages (Ad-Free)",id:"74-registry-pages-ad-free",level:3},{value:"7.5 Documentation &amp; Tutorials",id:"75-documentation--tutorials",level:3},{value:"7.6 Authentication &amp; Dashboard",id:"76-authentication--dashboard",level:3},{value:"7.7 Privacy &amp; Consent",id:"77-privacy--consent",level:3},{value:"7.8 Ads &amp; Monetization",id:"78-ads--monetization",level:3},{value:"7.9 SEO &amp; Performance",id:"79-seo--performance",level:3},{value:"7.10 Testing &amp; QA",id:"710-testing--qa",level:3},{value:"7.11 Launch Preparation",id:"711-launch-preparation",level:3},{value:"API Endpoints for Web UI",id:"api-endpoints-for-web-ui",level:2},{value:"Diagram References",id:"diagram-references",level:2},{value:"Deployment Guide",id:"deployment-guide",level:2},{value:"Requirements",id:"requirements",level:3},{value:"Quick Start (Development)",id:"quick-start-development",level:3},{value:"Production Deployment",id:"production-deployment",level:3},{value:"1. Environment Variables",id:"1-environment-variables",level:4},{value:"2. Database Location",id:"2-database-location",level:4},{value:"3. Running with systemd",id:"3-running-with-systemd",level:4},{value:"4. Reverse Proxy (nginx)",id:"4-reverse-proxy-nginx",level:4},{value:"5. SSL with Certbot",id:"5-ssl-with-certbot",level:4},{value:"Tailwind CSS Build",id:"tailwind-css-build",level:3},{value:"Health Check",id:"health-check",level:3},{value:"Troubleshooting",id:"troubleshooting",level:3},{value:"Future Considerations (Phase 8+)",id:"future-considerations-phase-8",level:2}];function a(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",input:"input",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.R)(),...e.components};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.header,{children:(0,l.jsx)(n.h1,{id:"cmdforge-web-ui-design",children:"CmdForge Web UI Design"})}),"\n",(0,l.jsx)(n.h2,{id:"purpose",children:"Purpose"}),"\n",(0,l.jsx)(n.p,{children:"Deliver a professional web front-end that explains CmdForge, helps users discover tools, and supports a collaborative ecosystem. The site should drive sustainable revenue without undermining trust or usability."}),"\n",(0,l.jsx)(n.h2,{id:"mission-alignment",children:"Mission Alignment"}),"\n",(0,l.jsxs)(n.p,{children:["This web UI serves the broader CmdForge mission: to provide a ",(0,l.jsx)(n.strong,{children:"universally accessible development ecosystem"})," that empowers regular people to collaborate and build upon each other's progress rather than compete. Revenue generated supports:"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Maintaining and expanding the project"}),"\n",(0,l.jsx)(n.li,{children:"Future hosting of AI models for users with less access to paid services"}),"\n",(0,l.jsx)(n.li,{children:"Building a sustainable, community-first platform"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"The UI design must reflect these values through its structure, content, and monetization approach."}),"\n",(0,l.jsx)(n.h2,{id:"guiding-principles",children:"Guiding Principles"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Utility first"}),": Documentation, tutorials, and examples are the primary draw."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Trust and clarity"}),": Ads and monetization are transparent, minimal, and never block core flows."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Collaboration over competition"}),": Highlight contributors, shared projects, and community learning."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Performance and accessibility"}),": Fast, readable, WCAG 2.1 AA target."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Unix philosophy"}),": Composable, provider-agnostic, YAML-based tools\u2014the UI should communicate this clearly."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"information-architecture",children:"Information Architecture"}),"\n",(0,l.jsx)(n.p,{children:"Public, ad-supported (Tier 1):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/"})," landing"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/docs/*"})," documentation"]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/tutorials/*"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/examples"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/blog"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/about"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/donate"})}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Registry (Tier 2, ad-free):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/tools"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/tools/{owner}/{name}"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/categories"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/categories/{name}"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/search"})}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Community (Tier 3, light ads):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/forum"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/contributors"})}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/announcements"})}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Publisher dashboard (auth-only):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/register"}),", ",(0,l.jsx)(n.code,{children:"/login"})]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/dashboard/tools"})}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/dashboard/connections"})," (manage connected apps)"]}),"\n",(0,l.jsx)(n.li,{children:(0,l.jsx)(n.code,{children:"/dashboard/settings"})}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"API:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/api/v1/*"})," (shared with CLI)"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"visual-design-system",children:"Visual Design System"}),"\n",(0,l.jsx)(n.h3,{id:"color-palette",children:"Color Palette"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Role"}),(0,l.jsx)(n.th,{children:"Color"}),(0,l.jsx)(n.th,{children:"Hex"}),(0,l.jsx)(n.th,{children:"Usage"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Primary"}),(0,l.jsx)(n.td,{children:"Indigo"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#6366F1"})}),(0,l.jsx)(n.td,{children:"CTAs, active states, brand identity"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Secondary"}),(0,l.jsx)(n.td,{children:"Cyan"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#06B6D4"})}),(0,l.jsx)(n.td,{children:"Secondary actions, accents, links"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Background"}),(0,l.jsx)(n.td,{children:"Off-white"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#F9FAFB"})}),(0,l.jsx)(n.td,{children:"Page background"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Surface"}),(0,l.jsx)(n.td,{children:"White"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#FFFFFF"})}),(0,l.jsx)(n.td,{children:"Cards, content areas"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Text Primary"}),(0,l.jsx)(n.td,{children:"Dark gray"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#1F2937"})}),(0,l.jsx)(n.td,{children:"Headlines, body text"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Text Secondary"}),(0,l.jsx)(n.td,{children:"Medium gray"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#6B7280"})}),(0,l.jsx)(n.td,{children:"Descriptions, metadata"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Text Muted"}),(0,l.jsx)(n.td,{children:"Light gray"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#9CA3AF"})}),(0,l.jsx)(n.td,{children:"Timestamps, hints"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Border"}),(0,l.jsx)(n.td,{children:"Light gray"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#E5E7EB"})}),(0,l.jsx)(n.td,{children:"Card borders, dividers"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Success"}),(0,l.jsx)(n.td,{children:"Green"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#10B981"})}),(0,l.jsx)(n.td,{children:"Success states, confirmations"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Warning"}),(0,l.jsx)(n.td,{children:"Amber"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#F59E0B"})}),(0,l.jsx)(n.td,{children:"Warnings, deprecation notices"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Error"}),(0,l.jsx)(n.td,{children:"Red"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#EF4444"})}),(0,l.jsx)(n.td,{children:"Error states, critical alerts"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Header"}),(0,l.jsx)(n.td,{children:"Dark slate"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#2C3E50"})}),(0,l.jsx)(n.td,{children:"Header background"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Ad Container"}),(0,l.jsx)(n.td,{children:"Light blue"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#DBEAFE"})}),(0,l.jsx)(n.td,{children:"Ad zone background (distinct from content)"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Sponsored"}),(0,l.jsx)(n.td,{children:"Light amber"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"#FEF3C7"})}),(0,l.jsx)(n.td,{children:"Sponsored content background"})]})]})]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Contrast Requirements:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Body text: minimum 4.5:1 ratio (WCAG AA)"}),"\n",(0,l.jsx)(n.li,{children:"Large text (18px+): minimum 3:1 ratio"}),"\n",(0,l.jsx)(n.li,{children:"UI components: minimum 3:1 ratio against adjacent colors"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"typography",children:"Typography"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Element"}),(0,l.jsx)(n.th,{children:"Font"}),(0,l.jsx)(n.th,{children:"Size"}),(0,l.jsx)(n.th,{children:"Weight"}),(0,l.jsx)(n.th,{children:"Line Height"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"H1"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"36px (2.25rem)"}),(0,l.jsx)(n.td,{children:"700"}),(0,l.jsx)(n.td,{children:"1.2"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"H2"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"24px (1.5rem)"}),(0,l.jsx)(n.td,{children:"700"}),(0,l.jsx)(n.td,{children:"1.3"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"H3"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"20px (1.25rem)"}),(0,l.jsx)(n.td,{children:"600"}),(0,l.jsx)(n.td,{children:"1.4"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"H4"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"18px (1.125rem)"}),(0,l.jsx)(n.td,{children:"600"}),(0,l.jsx)(n.td,{children:"1.4"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Body"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"16px (1rem)"}),(0,l.jsx)(n.td,{children:"400"}),(0,l.jsx)(n.td,{children:"1.6"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Small"}),(0,l.jsx)(n.td,{children:"Inter/system-ui"}),(0,l.jsx)(n.td,{children:"14px (0.875rem)"}),(0,l.jsx)(n.td,{children:"400"}),(0,l.jsx)(n.td,{children:"1.5"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Code"}),(0,l.jsx)(n.td,{children:"JetBrains Mono/monospace"}),(0,l.jsx)(n.td,{children:"14px"}),(0,l.jsx)(n.td,{children:"400"}),(0,l.jsx)(n.td,{children:"1.5"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Code block"}),(0,l.jsx)(n.td,{children:"JetBrains Mono/monospace"}),(0,l.jsx)(n.td,{children:"13px"}),(0,l.jsx)(n.td,{children:"400"}),(0,l.jsx)(n.td,{children:"1.6"})]})]})]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Font Stack:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-css",children:"--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;\n--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;\n"})}),"\n",(0,l.jsx)(n.h3,{id:"spacing-system",children:"Spacing System"}),"\n",(0,l.jsx)(n.p,{children:"Use an 8px base grid for consistent spacing:"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Token"}),(0,l.jsx)(n.th,{children:"Value"}),(0,l.jsx)(n.th,{children:"Usage"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-1"})}),(0,l.jsx)(n.td,{children:"4px"}),(0,l.jsx)(n.td,{children:"Tight spacing, icon margins"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-2"})}),(0,l.jsx)(n.td,{children:"8px"}),(0,l.jsx)(n.td,{children:"Element gaps"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-3"})}),(0,l.jsx)(n.td,{children:"12px"}),(0,l.jsx)(n.td,{children:"Small component padding"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-4"})}),(0,l.jsx)(n.td,{children:"16px"}),(0,l.jsx)(n.td,{children:"Card padding, section gaps"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-6"})}),(0,l.jsx)(n.td,{children:"24px"}),(0,l.jsx)(n.td,{children:"Section padding"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-8"})}),(0,l.jsx)(n.td,{children:"32px"}),(0,l.jsx)(n.td,{children:"Large gaps"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-12"})}),(0,l.jsx)(n.td,{children:"48px"}),(0,l.jsx)(n.td,{children:"Section margins"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--space-16"})}),(0,l.jsx)(n.td,{children:"64px"}),(0,l.jsx)(n.td,{children:"Major section separators"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"border-radius",children:"Border Radius"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Token"}),(0,l.jsx)(n.th,{children:"Value"}),(0,l.jsx)(n.th,{children:"Usage"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--radius-sm"})}),(0,l.jsx)(n.td,{children:"4px"}),(0,l.jsx)(n.td,{children:"Buttons, badges"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--radius-md"})}),(0,l.jsx)(n.td,{children:"8px"}),(0,l.jsx)(n.td,{children:"Cards, inputs"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--radius-lg"})}),(0,l.jsx)(n.td,{children:"12px"}),(0,l.jsx)(n.td,{children:"Modals, large cards"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"--radius-full"})}),(0,l.jsx)(n.td,{children:"9999px"}),(0,l.jsx)(n.td,{children:"Avatars, pills"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"shadow-system",children:"Shadow System"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-css",children:"--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n--shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n"})}),"\n",(0,l.jsx)(n.h2,{id:"page-requirements",children:"Page Requirements"}),"\n",(0,l.jsxs)(n.h3,{id:"landing-page-",children:["Landing Page (",(0,l.jsx)(n.code,{children:"/"}),")"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Purpose:"})," Convert visitors to users by clearly communicating CmdForge' value proposition and providing immediate paths to explore."]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Reference mockup:"})," ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-registry_rob_6.svg"})]}),"\n",(0,l.jsx)(n.h4,{id:"section-1-hero-above-the-fold",children:"Section 1: Hero (Above the Fold)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [CmdForge]  Docs  Tutorials  Registry  Community  About  \ud83d\udd0d  \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502                                                                  \u2502\n\u2502    Build Custom AI Commands in YAML                              \u2502\n\u2502    \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500    \u2502\n\u2502    Create Unix-style pipeable tools that work with any AI       \u2502\n\u2502    provider. Provider-agnostic and composable.                   \u2502\n\u2502                                                                  \u2502\n\u2502    \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510     \u2502\n\u2502    \u2502 $ pip install cmdforge && cmdforge init          \u2502 [\ud83d\udccb]\u2502\n\u2502    \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518     \u2502\n\u2502                                                                  \u2502\n\u2502    [Get Started]  [View Tutorials]                               \u2502\n\u2502                                                                  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Headline:"}),' "Build Custom AI Commands in YAML" (benefit-focused, differentiating)']}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Subheadline:"}),' "Create Unix-style pipeable tools that work with any AI provider. Provider-agnostic and composable for ultimate flexibility."']}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Install snippet:"})," ",(0,l.jsx)(n.code,{children:"pip install cmdforge && cmdforge init"})," with copy button"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Primary CTA:"}),' "Get Started" \u2192 links to ',(0,l.jsx)(n.code,{children:"/docs/getting-started"})," (indigo background)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Secondary CTA:"}),' "View Tutorials" \u2192 links to ',(0,l.jsx)(n.code,{children:"/tutorials"})," (outlined, cyan border)"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Hero background: white card (#FFFFFF) with subtle shadow on off-white page"}),"\n",(0,l.jsx)(n.li,{children:"Maximum content width: 1100px centered"}),"\n",(0,l.jsx)(n.li,{children:"Install snippet: monospace font, light gray background (#E0E0E0), copy icon on right"}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"section-2-three-pillars-why-cmdforge",children:"Section 2: Three Pillars (Why CmdForge?)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Why CmdForge?                                                 \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502   [\u2713] Easy       \u2502   [\u26a1] Powerful   \u2502   [\ud83d\udc65] Community           \u2502\n\u2502                  \u2502                  \u2502                            \u2502\n\u2502   Simple YAML    \u2502   Any AI         \u2502   Share, discover,         \u2502\n\u2502   configuration  \u2502   provider,      \u2502   contribute to a          \u2502\n\u2502   for quick      \u2502   compose        \u2502   growing ecosystem.       \u2502\n\u2502   setup.         \u2502   complex        \u2502                            \u2502\n\u2502                  \u2502   workflows.     \u2502                            \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Pillar 1 - Easy to Use:"}),' Icon in indigo circle, "Simple YAML configuration for quick setup."']}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Pillar 2 - Powerful:"}),' Icon in cyan circle, "Leverage any AI provider, compose complex workflows."']}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Pillar 3 - Community:"}),' Icon in indigo circle, "Share, discover, and contribute to a growing ecosystem."']}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Each pillar: white card with 1px border, subtle shadow on hover"}),"\n",(0,l.jsx)(n.li,{children:"Icon circles: 40px diameter with pillar icon centered"}),"\n",(0,l.jsx)(n.li,{children:"Equal width columns (3 across on desktop)"}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"section-3-featured-tools--projects",children:"Section 3: Featured Tools & Projects"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Featured Tools & Projects                                       \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [Category]      \u2502  [Category]      \u2502  [Category]                \u2502\n\u2502  \u25cf Tool Title    \u2502  \u25cf Tool Title    \u2502  \u25cf Tool Title              \u2502\n\u2502  Description...  \u2502  Description...  \u2502  Description...            \u2502\n\u2502  Author: name    \u2502  Author: name    \u2502  Author: name              \u2502\n\u2502  Downloads: 1.2K \u2502  Downloads: 800  \u2502  Downloads: 2.5K           \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510            \u2502\n\u2502  \u2502run command \u2502  \u2502  \u2502run command \u2502  \u2502  \u2502run command \u2502            \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518            \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [Row 2...]      \u2502  [Row 2...]      \u2502  [Row 2...]                \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content (per card):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Category badge (top-right, cyan pill)"}),"\n",(0,l.jsx)(n.li,{children:"Tool icon/avatar (indigo circle)"}),"\n",(0,l.jsx)(n.li,{children:"Tool name (bold, 18px)"}),"\n",(0,l.jsx)(n.li,{children:"Short description (14px, secondary text)"}),"\n",(0,l.jsx)(n.li,{children:"Author attribution"}),"\n",(0,l.jsx)(n.li,{children:"Download count with icon"}),"\n",(0,l.jsx)(n.li,{children:"One-line install command in code box"}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Data Source:"})," ",(0,l.jsx)(n.code,{children:"GET /api/v1/tools?sort=downloads&limit=6"})]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"3 columns on desktop, 2 on tablet, 1 on mobile"}),"\n",(0,l.jsx)(n.li,{children:"Cards have subtle shadow, lift on hover"}),"\n",(0,l.jsxs)(n.li,{children:['"View All Tools" link below grid \u2192 ',(0,l.jsx)(n.code,{children:"/tools"})]}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"section-4-getting-started",children:"Section 4: Getting Started"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Getting Started                                                 \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Tutorial 1:     \u2502  Tutorial 2:     \u2502  Tutorial 3:               \u2502\n\u2502  Basic Setup     \u2502  Your First Tool \u2502  Advanced Workflows        \u2502\n\u2502  Learn how to... \u2502  Create a        \u2502  Combine multiple          \u2502\n\u2502                  \u2502  simple AI...    \u2502  tools for...              \u2502\n\u2502  [Read More]     \u2502  [Read More]     \u2502  [Read More]               \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"3 tutorial cards highlighting core learning paths"}),"\n",(0,l.jsx)(n.li,{children:"Each card: title (bold), description (2 lines max), CTA button"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Matches tool card styling for visual consistency"}),"\n",(0,l.jsx)(n.li,{children:'"Read More" buttons in primary indigo'}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"section-5-featured-contributor",children:"Section 5: Featured Contributor"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Featured Contributor                                            \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [Avatar]  Name Here                                             \u2502\n\u2502            Creator of "Tool Name" and active community member.   \u2502\n\u2502            [View Profile]                                        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Monthly rotating spotlight"}),"\n",(0,l.jsx)(n.li,{children:"Avatar (60px circle), name, brief bio, profile link"}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Data Source:"})," Manual curation or ",(0,l.jsx)(n.code,{children:"GET /api/v1/contributors/featured"})]}),"\n",(0,l.jsx)(n.h4,{id:"section-6-footer-ad-zone-optional",children:"Section 6: Footer Ad Zone (Optional)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Advertisement: Support CmdForge Development]                 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Light blue background (#DBEAFE) to distinguish from content"}),"\n",(0,l.jsx)(n.li,{children:"Clearly labeled as advertisement"}),"\n",(0,l.jsx)(n.li,{children:"Optional based on ad fill rate"}),"\n"]}),"\n",(0,l.jsx)(n.h4,{id:"section-7-footer",children:"Section 7: Footer"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  CmdForge                                                      \u2502\n\u2502  \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500  \u2502\n\u2502  Docs  |  Registry  |  Community  |  About  |  Donate           \u2502\n\u2502  Privacy  |  Terms  |  GitHub  |  Twitter                        \u2502\n\u2502                                                                  \u2502\n\u2502  \xa9 2025 CmdForge. Open source under MIT License.              \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.h3,{id:"docstutorials-pages-docs-tutorials",children:["Docs/Tutorials Pages (",(0,l.jsx)(n.code,{children:"/docs/*"}),", ",(0,l.jsx)(n.code,{children:"/tutorials/*"}),")"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Layout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Header Navigation]                                                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  TOC         \u2502  Content Area (70%)                        \u2502  Sidebar  \u2502\n\u2502  (Desktop)   \u2502                                            \u2502  (Ads)    \u2502\n\u2502              \u2502  # Page Title                              \u2502           \u2502\n\u2502  - Section 1 \u2502                                            \u2502  [Ad]     \u2502\n\u2502  - Section 2 \u2502  Content with code blocks...               \u2502           \u2502\n\u2502  - Section 3 \u2502                                            \u2502           \u2502\n\u2502              \u2502  ```python                                 \u2502           \u2502\n\u2502              \u2502  # Code with syntax highlighting           \u2502           \u2502\n\u2502              \u2502  ```                           [Copy]      \u2502           \u2502\n\u2502              \u2502                                            \u2502           \u2502\n\u2502              \u2502  [Embedded Video]                          \u2502           \u2502\n\u2502              \u2502                                            \u2502           \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content Requirements:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Persistent left TOC on desktop (scroll-spy highlighting current section)"}),"\n",(0,l.jsx)(n.li,{children:"Code blocks with syntax highlighting and copy button"}),"\n",(0,l.jsx)(n.li,{children:"Video embeds (YouTube) with play button overlay, lazy-loaded"}),"\n",(0,l.jsx)(n.li,{children:"Callout boxes for tips, warnings, info (color-coded)"}),"\n",(0,l.jsx)(n.li,{children:"Related articles at bottom"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"TOC: fixed on scroll, 200px width"}),"\n",(0,l.jsx)(n.li,{children:"Content area: max-width 700px, generous line-height (1.6-1.8)"}),"\n",(0,l.jsx)(n.li,{children:"Sidebar ads: 300px width, only on desktop"}),"\n",(0,l.jsx)(n.li,{children:"Mobile: TOC collapses to hamburger, sidebar hidden"}),"\n"]}),"\n",(0,l.jsxs)(n.h3,{id:"tool-detail-page-toolsownername",children:["Tool Detail Page (",(0,l.jsx)(n.code,{children:"/tools/{owner}/{name}"}),")"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Layout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Header Navigation]                                                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  README Content (70%)                                \u2502  Sidebar (30%) \u2502\n\u2502                                                      \u2502                \u2502\n\u2502  # tool-name                                         \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\n\u2502                                                      \u2502  \u2502Install    \u2502 \u2502\n\u2502  Rendered markdown from README.md...                 \u2502  \u2502           \u2502 \u2502\n\u2502                                                      \u2502  \u2502$ run cmd  \u2502 \u2502\n\u2502  - Usage examples                                    \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\n\u2502  - Configuration                                     \u2502                \u2502\n\u2502  - Step definitions                                  \u2502  Versions:     \u2502\n\u2502                                                      \u2502  v1.2.0 \u25cf      \u2502\n\u2502                                                      \u2502  v1.1.0        \u2502\n\u2502                                                      \u2502  v1.0.0        \u2502\n\u2502                                                      \u2502                \u2502\n\u2502                                                      \u2502  Downloads:    \u2502\n\u2502                                                      \u2502  1,234         \u2502\n\u2502                                                      \u2502                \u2502\n\u2502                                                      \u2502  Category:     \u2502\n\u2502                                                      \u2502  [text-proc]   \u2502\n\u2502                                                      \u2502                \u2502\n\u2502                                                      \u2502  Tags:         \u2502\n\u2502                                                      \u2502  [ai] [cli]    \u2502\n\u2502                                                      \u2502                \u2502\n\u2502                                                      \u2502  [Report]      \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Sidebar Elements:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Install command with copy button (prominent)"}),"\n",(0,l.jsx)(n.li,{children:"Version selector/list (current version highlighted)"}),"\n",(0,l.jsx)(n.li,{children:"Download statistics"}),"\n",(0,l.jsx)(n.li,{children:"Category badge (linked)"}),"\n",(0,l.jsx)(n.li,{children:"Tags (linked to search)"}),"\n",(0,l.jsx)(n.li,{children:"Report abuse button"}),"\n",(0,l.jsx)(n.li,{children:"Publisher info (avatar, name, link to profile)"}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"NO ADS on tool detail pages"})," (Tier 2 - registry is ad-free)"]}),"\n",(0,l.jsxs)(n.h3,{id:"registry-browse-page-tools",children:["Registry Browse Page (",(0,l.jsx)(n.code,{children:"/tools"}),")"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Layout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Header Navigation]                                                   \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 \ud83d\udd0d Search tools...                    [Category \u25bc] [Sort \u25bc]     \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Showing 142 tools                                                    \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [Tool Card]     \u2502  [Tool Card]     \u2502  [Tool Card]     \u2502  [Tool Card] \u2502\n\u2502                  \u2502                  \u2502                  \u2502              \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [Tool Card]     \u2502  [Tool Card]     \u2502  [Tool Card]     \u2502  [Tool Card] \u2502\n\u2502                  \u2502                  \u2502                  \u2502              \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  [\u2190 Previous]  Page 1 of 8  [Next \u2192]                                  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Search/Filter Features:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Full-text search with debounce (300ms)"}),"\n",(0,l.jsx)(n.li,{children:"Category dropdown filter"}),"\n",(0,l.jsx)(n.li,{children:"Sort options: Popular (downloads), Recent, Name"}),"\n",(0,l.jsx)(n.li,{children:"Results count display"}),"\n",(0,l.jsx)(n.li,{children:"Pagination (20 per page)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tool Card (compact):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Tool name + owner"}),"\n",(0,l.jsx)(n.li,{children:"Short description (2 lines max, truncated)"}),"\n",(0,l.jsx)(n.li,{children:"Download count"}),"\n",(0,l.jsx)(n.li,{children:"Last updated date"}),"\n",(0,l.jsx)(n.li,{children:"Category tag"}),"\n"]}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"NO ADS on browse pages"})," (Tier 2)"]}),"\n",(0,l.jsxs)(n.h3,{id:"publisher-dashboard-dashboard",children:["Publisher Dashboard (",(0,l.jsx)(n.code,{children:"/dashboard"}),")"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Layout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Header with user menu]                                               \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Sidebar        \u2502  Content Area                                       \u2502\n\u2502                 \u2502                                                      \u2502\n\u2502  Overview       \u2502  \u250c\u2500 Tab: My Tools \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510   \u2502\n\u2502  My Tools       \u2502  \u2502                                              \u2502   \u2502\n\u2502  Connections    \u2502  \u2502  Published Tools (3)          [+ New Tool]   \u2502   \u2502\n\u2502  Settings       \u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2502 summarize v1.2.0  |  142 downloads      \u2502 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2502 [Edit] [View] [Yank]                    \u2502 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502   \u2502\n\u2502                 \u2502  \u2502                                              \u2502   \u2502\n\u2502                 \u2502  \u2502  Pending PRs (1)                             \u2502   \u2502\n\u2502                 \u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2502 new-tool v1.0.0  |  Awaiting review     \u2502 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2502 [View PR]                               \u2502 \u2502   \u2502\n\u2502                 \u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502   \u2502\n\u2502                 \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tabs:"})}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Overview:"})," Dashboard with stats (tools count, downloads, connections)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"My Tools:"})," List of published tools with stats, edit/view/yank actions"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Connections:"})," Manage connected apps (CLI/TUI instances linked to account)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Settings:"})," Profile editing (display name, bio, website), password change"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Connections Page:"})}),"\n",(0,l.jsxs)(n.p,{children:["The Connections page (",(0,l.jsx)(n.code,{children:"/dashboard/connections"}),") replaces the old API Tokens page with a simpler app pairing flow:"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Connect New App:"})," Button opens modal with pairing instructions","\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsxs)(n.li,{children:["Shows command: ",(0,l.jsx)(n.code,{children:"cmdforge config connect <username>"})]}),"\n",(0,l.jsxs)(n.li,{children:["Or use the TUI: open ",(0,l.jsx)(n.code,{children:"cmdforge ui"})," and click Connect"]}),"\n",(0,l.jsx)(n.li,{children:'"I\'ve Run the Command" button shows pending connections'}),"\n",(0,l.jsx)(n.li,{children:"Approve pending connection with one click"}),"\n"]}),"\n"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Connected Apps:"})," List of connected devices showing:","\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Device hostname"}),"\n",(0,l.jsx)(n.li,{children:"Connection date"}),"\n",(0,l.jsx)(n.li,{children:"Last used timestamp"}),"\n",(0,l.jsx)(n.li,{children:"Disconnect button to revoke access"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"This eliminates the need to manually copy API tokens - users just approve connections from the web UI."}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Clean, utilitarian design"}),"\n",(0,l.jsx)(n.li,{children:"Clear action buttons"}),"\n",(0,l.jsx)(n.li,{children:"Status indicators for pending PRs"}),"\n",(0,l.jsx)(n.li,{children:"Pairing modal guides users through connection flow"}),"\n"]}),"\n",(0,l.jsxs)(n.h3,{id:"donate-page-donate",children:["Donate Page (",(0,l.jsx)(n.code,{children:"/donate"}),")"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Content:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Mission statement (emotional, connecting to values)"}),"\n",(0,l.jsx)(n.li,{children:"Clear explanation of fund usage (hosting, development, future AI hosting)"}),"\n",(0,l.jsx)(n.li,{children:"Multiple donation options (GitHub Sponsors, PayPal, Ko-fi)"}),"\n",(0,l.jsx)(n.li,{children:"Optional donor recognition section"}),"\n",(0,l.jsx)(n.li,{children:"Transparency about current costs/goals"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Design Notes:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Clean, trustworthy design"}),"\n",(0,l.jsx)(n.li,{children:"Clear CTAs for each donation method"}),"\n",(0,l.jsx)(n.li,{children:"No ads on this page"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"component-library",children:"Component Library"}),"\n",(0,l.jsx)(n.h3,{id:"buttons",children:"Buttons"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Primary Button:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<button class="btn-primary">Get Started</button>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Primary indigo (#6366F1)"}),"\n",(0,l.jsx)(n.li,{children:"Text: White, 16px, font-weight 600"}),"\n",(0,l.jsx)(n.li,{children:"Padding: 12px 24px"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 4px"}),"\n",(0,l.jsx)(n.li,{children:"Hover: Darken 10%, subtle shadow"}),"\n",(0,l.jsx)(n.li,{children:"Focus: 2px outline offset"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Secondary Button:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<button class="btn-secondary">View Tutorials</button>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Transparent"}),"\n",(0,l.jsx)(n.li,{children:"Border: 2px solid cyan (#06B6D4)"}),"\n",(0,l.jsx)(n.li,{children:"Text: Cyan, 16px, font-weight 600"}),"\n",(0,l.jsx)(n.li,{children:"Hover: Light cyan background (#ECFEFF)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Ghost Button:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<button class="btn-ghost">Read More</button>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Transparent"}),"\n",(0,l.jsx)(n.li,{children:"Text: Primary indigo"}),"\n",(0,l.jsx)(n.li,{children:"Hover: Light indigo background"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Danger Button:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<button class="btn-danger">Revoke Token</button>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Error red (#EF4444)"}),"\n",(0,l.jsx)(n.li,{children:"Text: White"}),"\n",(0,l.jsx)(n.li,{children:"Used for destructive actions"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"cards",children:"Cards"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tool Card:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502                          [Category]   \u2502\n\u2502  [\u25cf] Tool Name                        \u2502\n\u2502  Short description of the tool that   \u2502\n\u2502  may span two lines maximum...        \u2502\n\u2502                                       \u2502\n\u2502  Author: owner-name                   \u2502\n\u2502  \u2b07 1,234 downloads                    \u2502\n\u2502                                       \u2502\n\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502\n\u2502  \u2502 cmdforge run owner/tool       \u2502  \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: White (#FFFFFF)"}),"\n",(0,l.jsx)(n.li,{children:"Border: 1px solid border color (#E5E7EB)"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 8px"}),"\n",(0,l.jsx)(n.li,{children:"Shadow: shadow-sm, shadow-md on hover"}),"\n",(0,l.jsx)(n.li,{children:"Padding: 16px"}),"\n",(0,l.jsx)(n.li,{children:"Category badge: absolute top-right, cyan background, white text, 12px"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tutorial Card:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Optional Thumbnail Image]           \u2502\n\u2502                                       \u2502\n\u2502  Tutorial Title Here                  \u2502\n\u2502  Brief description of what the        \u2502\n\u2502  tutorial covers...                   \u2502\n\u2502                                       \u2502\n\u2502  [Read More \u2192]                        \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Same base styling as tool card"}),"\n",(0,l.jsx)(n.li,{children:"Optional thumbnail: aspect-ratio 16:9, lazy-loaded"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Contributor Card:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Avatar]  Contributor Name           \u2502\n\u2502            @github-handle             \u2502\n\u2502            Creator of "Tool Name"     \u2502\n\u2502            [View Profile]             \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Avatar: 48px circle"}),"\n",(0,l.jsx)(n.li,{children:"Horizontal layout for spotlight, vertical for grid"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"navigation",children:"Navigation"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Header Navigation:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [Logo]           [Docs] [Tutorials] [Registry] [Community] [About]  \ud83d\udd0d  \u2502\n\u2502                                                              [Donate]   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Dark slate (#2C3E50)"}),"\n",(0,l.jsx)(n.li,{children:"Logo: White text, 24px, bold"}),"\n",(0,l.jsx)(n.li,{children:"Nav links: White text, 16px"}),"\n",(0,l.jsx)(n.li,{children:"Active/hover: Underline or slight background"}),"\n",(0,l.jsx)(n.li,{children:"Mobile: Hamburger menu with slide-out drawer"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Breadcrumbs:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"Registry > owner > tool-name > v1.2.0\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Separator: ",(0,l.jsx)(n.code,{children:">"})," or ",(0,l.jsx)(n.code,{children:"/"})]}),"\n",(0,l.jsx)(n.li,{children:"Current page: bold, not linked"}),"\n",(0,l.jsx)(n.li,{children:"Previous pages: linked, secondary color"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"form-elements",children:"Form Elements"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Text Input:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<input type="text" class="input" placeholder="Search tools...">\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Border: 1px solid border color"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 8px"}),"\n",(0,l.jsx)(n.li,{children:"Padding: 12px 16px"}),"\n",(0,l.jsx)(n.li,{children:"Focus: Primary indigo border, subtle shadow"}),"\n",(0,l.jsx)(n.li,{children:"Height: 44px (touch target compliance)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Search Input with Icon:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \ud83d\udd0d Search tools...                  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Icon: Left-aligned, muted color"}),"\n",(0,l.jsx)(n.li,{children:"Placeholder: Secondary text color"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Select/Dropdown:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 Category                          \u25bc \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Same styling as text input"}),"\n",(0,l.jsx)(n.li,{children:"Chevron icon on right"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"badges-and-tags",children:"Badges and Tags"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Category Badge:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<span class="badge badge-category">text-processing</span>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Cyan (#06B6D4)"}),"\n",(0,l.jsx)(n.li,{children:"Text: White, 12px"}),"\n",(0,l.jsx)(n.li,{children:"Padding: 4px 8px"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 4px"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tag:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<span class="tag">ai</span>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light gray (#F3F4F6)"}),"\n",(0,l.jsx)(n.li,{children:"Text: Secondary gray, 12px"}),"\n",(0,l.jsx)(n.li,{children:"Border: 1px solid border color"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 9999px (pill)"}),"\n",(0,l.jsx)(n.li,{children:"Clickable (links to search)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Status Badge:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<span class="badge badge-success">Published</span>\n<span class="badge badge-warning">Pending</span>\n<span class="badge badge-error">Yanked</span>\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Success: Green background"}),"\n",(0,l.jsx)(n.li,{children:"Warning: Amber background"}),"\n",(0,l.jsx)(n.li,{children:"Error: Red background"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"code-blocks",children:"Code Blocks"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Inline Code:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:"<code>cmdforge run foo</code>\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light gray (#F3F4F6)"}),"\n",(0,l.jsx)(n.li,{children:"Font: Monospace"}),"\n",(0,l.jsx)(n.li,{children:"Padding: 2px 6px"}),"\n",(0,l.jsx)(n.li,{children:"Border-radius: 4px"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Code Block with Copy:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 ```python                                        [\ud83d\udccb] \u2502\n\u2502 def hello():                                          \u2502\n\u2502     print("Hello, World!")                            \u2502\n\u2502 ```                                                   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Dark (#1F2937) or light (#F9FAFB)"}),"\n",(0,l.jsx)(n.li,{children:"Syntax highlighting (Prism.js or Highlight.js)"}),"\n",(0,l.jsx)(n.li,{children:"Copy button: top-right, appears on hover"}),"\n",(0,l.jsx)(n.li,{children:"Line numbers: optional, enabled for tutorials"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"callout-boxes",children:"Callout Boxes"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Info Callout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u2139\ufe0f Note                                              \u2502\n\u2502 This is helpful information for the user.           \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light blue (#DBEAFE)"}),"\n",(0,l.jsx)(n.li,{children:"Border-left: 4px solid blue (#3B82F6)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Warning Callout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u26a0\ufe0f Warning                                           \u2502\n\u2502 Be careful with this configuration.                 \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light amber (#FEF3C7)"}),"\n",(0,l.jsx)(n.li,{children:"Border-left: 4px solid amber (#F59E0B)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Error Callout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u274c Important                                         \u2502\n\u2502 This action cannot be undone.                       \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light red (#FEE2E2)"}),"\n",(0,l.jsx)(n.li,{children:"Border-left: 4px solid red (#EF4444)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tip Callout:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \ud83d\udca1 Tip                                               \u2502\n\u2502 You can also use this shortcut...                   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Background: Light green (#D1FAE5)"}),"\n",(0,l.jsx)(n.li,{children:"Border-left: 4px solid green (#10B981)"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"loading-states",children:"Loading States"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Skeleton Loader:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588                     \u2502\n\u2502  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588     \u2502\n\u2502  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588                         \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Animated shimmer effect"}),"\n",(0,l.jsx)(n.li,{children:"Matches component dimensions"}),"\n",(0,l.jsx)(n.li,{children:"Used for cards, text blocks"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Spinner:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Circular spinner for buttons, inline loading"}),"\n",(0,l.jsx)(n.li,{children:"Primary indigo color"}),"\n",(0,l.jsx)(n.li,{children:"Size: 16px (small), 24px (medium), 32px (large)"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Progress Bar:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Used for multi-step operations"}),"\n",(0,l.jsx)(n.li,{children:"Shows percentage or step count"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"responsive-design",children:"Responsive Design"}),"\n",(0,l.jsx)(n.h3,{id:"breakpoints",children:"Breakpoints"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Breakpoint"}),(0,l.jsx)(n.th,{children:"Width"}),(0,l.jsx)(n.th,{children:"Name"}),(0,l.jsx)(n.th,{children:"Grid Columns"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"xs"}),(0,l.jsx)(n.td,{children:"< 480px"}),(0,l.jsx)(n.td,{children:"Extra small phones"}),(0,l.jsx)(n.td,{children:"1"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"sm"}),(0,l.jsx)(n.td,{children:"480-639px"}),(0,l.jsx)(n.td,{children:"Phones"}),(0,l.jsx)(n.td,{children:"1"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"md"}),(0,l.jsx)(n.td,{children:"640-767px"}),(0,l.jsx)(n.td,{children:"Large phones / small tablets"}),(0,l.jsx)(n.td,{children:"2"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"lg"}),(0,l.jsx)(n.td,{children:"768-1023px"}),(0,l.jsx)(n.td,{children:"Tablets"}),(0,l.jsx)(n.td,{children:"2-3"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"xl"}),(0,l.jsx)(n.td,{children:"1024-1279px"}),(0,l.jsx)(n.td,{children:"Small desktops"}),(0,l.jsx)(n.td,{children:"3-4"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"2xl"}),(0,l.jsx)(n.td,{children:"\u2265 1280px"}),(0,l.jsx)(n.td,{children:"Large desktops"}),(0,l.jsx)(n.td,{children:"4"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"layout-adaptations",children:"Layout Adaptations"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Mobile (< 640px):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Single-column layout"}),"\n",(0,l.jsx)(n.li,{children:"Navigation: hamburger menu with slide-out drawer"}),"\n",(0,l.jsx)(n.li,{children:"Hero: stacked content, centered"}),"\n",(0,l.jsx)(n.li,{children:"Tool cards: full-width, stacked"}),"\n",(0,l.jsx)(n.li,{children:"TOC: collapsible accordion at top of page"}),"\n",(0,l.jsx)(n.li,{children:"Sidebar ads: hidden"}),"\n",(0,l.jsx)(n.li,{children:"Footer ads: optional, minimal"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Tablet (640-1023px):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Two-column grid for cards"}),"\n",(0,l.jsx)(n.li,{children:"Navigation: horizontal but condensed"}),"\n",(0,l.jsx)(n.li,{children:"TOC: collapsible sidebar"}),"\n",(0,l.jsx)(n.li,{children:"Sidebar ads: may show below content"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Desktop (\u2265 1024px):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Full multi-column layout"}),"\n",(0,l.jsx)(n.li,{children:"Navigation: full horizontal with all links visible"}),"\n",(0,l.jsx)(n.li,{children:"TOC: fixed left sidebar"}),"\n",(0,l.jsx)(n.li,{children:"Sidebar ads: visible in right column"}),"\n",(0,l.jsx)(n.li,{children:"Maximum content width: 1280px with centered container"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"touch-targets",children:"Touch Targets"}),"\n",(0,l.jsx)(n.p,{children:"All interactive elements must meet minimum touch target size:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Minimum size: 44\xd744px (WCAG 2.1 AA)"}),"\n",(0,l.jsx)(n.li,{children:"Spacing between targets: minimum 8px"}),"\n",(0,l.jsx)(n.li,{children:"Applies to: buttons, links, form inputs, navigation items"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"mobile-specific-considerations",children:"Mobile-Specific Considerations"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"No horizontal scrolling"}),"\n",(0,l.jsx)(n.li,{children:"Images: responsive with max-width: 100%"}),"\n",(0,l.jsx)(n.li,{children:"Tables: horizontal scroll wrapper on small screens"}),"\n",(0,l.jsx)(n.li,{children:"Code blocks: horizontal scroll with visible scrollbar"}),"\n",(0,l.jsx)(n.li,{children:"Modals: full-screen on mobile, centered on desktop"}),"\n",(0,l.jsx)(n.li,{children:"Keyboard: virtual keyboard should not obscure inputs"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"performance-budgets",children:"Performance Budgets"}),"\n",(0,l.jsx)(n.h3,{id:"core-web-vitals-targets",children:"Core Web Vitals Targets"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Metric"}),(0,l.jsx)(n.th,{children:"Target"}),(0,l.jsx)(n.th,{children:"Maximum"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Largest Contentful Paint (LCP)"}),(0,l.jsx)(n.td,{children:"< 1.5s"}),(0,l.jsx)(n.td,{children:"< 2.5s"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"First Input Delay (FID)"}),(0,l.jsx)(n.td,{children:"< 50ms"}),(0,l.jsx)(n.td,{children:"< 100ms"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Cumulative Layout Shift (CLS)"}),(0,l.jsx)(n.td,{children:"< 0.05"}),(0,l.jsx)(n.td,{children:"< 0.1"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"First Contentful Paint (FCP)"}),(0,l.jsx)(n.td,{children:"< 1.0s"}),(0,l.jsx)(n.td,{children:"< 1.8s"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Time to Interactive (TTI)"}),(0,l.jsx)(n.td,{children:"< 2.5s"}),(0,l.jsx)(n.td,{children:"< 3.5s"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"resource-budgets",children:"Resource Budgets"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Resource"}),(0,l.jsx)(n.th,{children:"Budget"}),(0,l.jsx)(n.th,{children:"Notes"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Total page weight"}),(0,l.jsx)(n.td,{children:"< 500KB"}),(0,l.jsx)(n.td,{children:"Excluding ads"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"JavaScript (compressed)"}),(0,l.jsx)(n.td,{children:"< 100KB"}),(0,l.jsx)(n.td,{children:"Main bundle"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"CSS (compressed)"}),(0,l.jsx)(n.td,{children:"< 50KB"}),(0,l.jsx)(n.td,{children:"Main stylesheet"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Images (above fold)"}),(0,l.jsx)(n.td,{children:"< 200KB"}),(0,l.jsx)(n.td,{children:"Hero, featured tools"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Fonts"}),(0,l.jsx)(n.td,{children:"< 100KB"}),(0,l.jsx)(n.td,{children:"Subset, WOFF2 format"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Third-party scripts"}),(0,l.jsx)(n.td,{children:"< 150KB"}),(0,l.jsx)(n.td,{children:"Analytics, ads (lazy)"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"loading-strategy",children:"Loading Strategy"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Critical Path (synchronous):"})}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsx)(n.li,{children:"HTML document"}),"\n",(0,l.jsxs)(n.li,{children:["Critical CSS (inlined in ",(0,l.jsx)(n.code,{children:"<head>"}),")"]}),"\n",(0,l.jsx)(n.li,{children:"Above-the-fold content"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Deferred Loading:"})}),"\n",(0,l.jsxs)(n.ol,{children:["\n",(0,l.jsx)(n.li,{children:"Non-critical CSS (preload, async)"}),"\n",(0,l.jsx)(n.li,{children:"JavaScript (defer)"}),"\n",(0,l.jsxs)(n.li,{children:["Below-fold images (lazy-load with ",(0,l.jsx)(n.code,{children:'loading="lazy"'}),")"]}),"\n",(0,l.jsx)(n.li,{children:"Third-party scripts (ads, analytics)"}),"\n",(0,l.jsx)(n.li,{children:"Video embeds (lazy, placeholder until visible)"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"caching-strategy",children:"Caching Strategy"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Resource"}),(0,l.jsx)(n.th,{children:"Cache-Control"}),(0,l.jsx)(n.th,{children:"Notes"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Static assets (CSS, JS)"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"max-age=31536000, immutable"})}),(0,l.jsx)(n.td,{children:"Hashed filenames"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Images"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"max-age=86400"})}),(0,l.jsx)(n.td,{children:"1 day"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"HTML pages"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"max-age=300, stale-while-revalidate=60"})}),(0,l.jsx)(n.td,{children:"5 min, background refresh"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"API responses"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"max-age=60"})}),(0,l.jsx)(n.td,{children:"1 min for tool lists"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Tool downloads"}),(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"max-age=3600, immutable"})}),(0,l.jsx)(n.td,{children:"Immutable versions"})]})]})]}),"\n",(0,l.jsx)(n.h3,{id:"performance-monitoring",children:"Performance Monitoring"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Monitor Core Web Vitals in production"}),"\n",(0,l.jsxs)(n.li,{children:["Set up alerts for degradation (",(0,l.jsx)(n.code,{children:">10%"})," threshold)"]}),"\n",(0,l.jsx)(n.li,{children:"Track page load times by route"}),"\n",(0,l.jsx)(n.li,{children:"Monitor JavaScript error rates"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"error-states-and-fallbacks",children:"Error States and Fallbacks"}),"\n",(0,l.jsx)(n.h3,{id:"network-errors",children:"Network Errors"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"API Unavailable:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  \u26a0\ufe0f Registry Temporarily Unavailable                 \u2502\n\u2502                                                      \u2502\n\u2502  We're having trouble connecting to the registry.   \u2502\n\u2502  Please try again in a few moments.                 \u2502\n\u2502                                                      \u2502\n\u2502  [Retry]                                             \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Slow Connection:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Show skeleton loaders for content"}),"\n",(0,l.jsx)(n.li,{children:"Progressive loading with visible feedback"}),"\n",(0,l.jsx)(n.li,{children:"Timeout after 10 seconds with retry option"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"tool-not-found-404",children:"Tool Not Found (404):"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Tool Not Found                                      \u2502\n\u2502                                                      \u2502\n\u2502  The tool "owner/tool-name" doesn\'t exist or may    \u2502\n\u2502  have been removed.                                  \u2502\n\u2502                                                      \u2502\n\u2502  [Browse Tools]  [Search Registry]                   \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,l.jsx)(n.h3,{id:"search-no-results",children:"Search No Results:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:'\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  No tools found for "query"                          \u2502\n\u2502                                                      \u2502\n\u2502  Suggestions:                                        \u2502\n\u2502  \u2022 Try different keywords                            \u2502\n\u2502  \u2022 Check spelling                                    \u2502\n\u2502  \u2022 Browse by category                                \u2502\n\u2502                                                      \u2502\n\u2502  [Browse All Tools]                                  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n'})}),"\n",(0,l.jsx)(n.h3,{id:"offline-mode",children:"Offline Mode"}),"\n",(0,l.jsx)(n.p,{children:"If service worker is implemented:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Show cached pages when offline"}),"\n",(0,l.jsx)(n.li,{children:"Indicate offline status in header"}),"\n",(0,l.jsx)(n.li,{children:"Queue actions (report, install) for when online"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"form-errors",children:"Form Errors"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Inline Validation:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Show error message below field"}),"\n",(0,l.jsx)(n.li,{children:"Red border on invalid fields"}),"\n",(0,l.jsx)(n.li,{children:"Error icon in field"}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Form Submission Error:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Toast notification for transient errors"}),"\n",(0,l.jsx)(n.li,{children:"Inline error summary for validation failures"}),"\n",(0,l.jsx)(n.li,{children:"Preserve form state on error"}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"ad-and-revenue-strategy",children:"Ad and Revenue Strategy"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Ad placement"}),": One sidebar unit on long-form docs/tut pages, optional footer banner on landing, none on registry pages."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"No ads"})," in install flows, login/registration, or tool browsing details."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Sponsored content"}),": Clearly labeled and separated from organic rankings."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"YouTube"}),": Embed tutorials with transcripts; also drive to channel."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"monetization-extensions-optional",children:"Monetization Extensions (Optional)"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Donations"}),": Single page with clear use-of-funds."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Featured projects"}),": Curated or sponsored slots with explicit labeling."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Premium publisher tier"}),": More tools, enhanced analytics, priority review."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Training/consulting"}),": Workshops or enterprise onboarding."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"data-and-governance",children:"Data and Governance"}),"\n",(0,l.jsx)(n.p,{children:"Proposed minimal tables (web-only):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"promotions"})," (featured tools/projects, start/end, placement, audit)."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"featured_projects"})," (title, description, owner, url, status)."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"content_pages"})," (docs/tutorials metadata for listing)."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"announcements"})," (title, body, published_at)."]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Roles and permissions:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"admin"}),": can publish announcements, manage promotions, moderate reports."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"editor"}),": can create/update docs, tutorials, featured projects."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"publisher"}),": can manage their own tools and profile only."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"contributor"}),": can partisipate in discussions in the forums."]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Audit fields (required on content tables):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"created_by"}),", ",(0,l.jsx)(n.code,{children:"updated_by"}),", ",(0,l.jsx)(n.code,{children:"created_at"}),", ",(0,l.jsx)(n.code,{children:"updated_at"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Ranking rules:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Organic search uses relevance and downloads."}),"\n",(0,l.jsx)(n.li,{children:"Sponsored placements appear in dedicated sections and do not alter organic order."}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Promotions placement rules:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Slots are deterministic (e.g., positions 1 and 5 in lists)."}),"\n",(0,l.jsx)(n.li,{children:"Promotions are clearly labeled and never mixed into organic ranking."}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"promotions"})," includes ",(0,l.jsx)(n.code,{children:"placement"}),", ",(0,l.jsx)(n.code,{children:"priority"}),", ",(0,l.jsx)(n.code,{children:"start_at"}),", ",(0,l.jsx)(n.code,{children:"end_at"}),", ",(0,l.jsx)(n.code,{children:"status"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"privacy-and-consent",children:"Privacy and Consent"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Consent banner for analytics/ads."}),"\n",(0,l.jsx)(n.li,{children:"Minimal tracking, anonymized IPs."}),"\n",(0,l.jsx)(n.li,{children:"Clear privacy policy and retention policy."}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Consent storage:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Store a ",(0,l.jsx)(n.code,{children:"consents"})," record keyed by ",(0,l.jsx)(n.code,{children:"client_id"})," (anonymous) or user id (logged-in)."]}),"\n",(0,l.jsx)(n.li,{children:"Respect opt-outs by disabling analytics/ads on server-rendered pages."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"ux-and-accessibility",children:"UX and Accessibility"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Keyboard navigation for all interactive elements."}),"\n",(0,l.jsx)(n.li,{children:"High contrast and readable typography."}),"\n",(0,l.jsx)(n.li,{children:"Mobile-first layout; ads hidden on mobile except optional footer."}),"\n",(0,l.jsx)(n.li,{children:"Avoid popups and auto-play media."}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Responsive breakpoints (baseline):"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Mobile: ",(0,l.jsx)(n.code,{children:"<640px"})]}),"\n",(0,l.jsxs)(n.li,{children:["Tablet: ",(0,l.jsx)(n.code,{children:"640\u20131024px"})]}),"\n",(0,l.jsxs)(n.li,{children:["Desktop: ",(0,l.jsx)(n.code,{children:">1024px"})]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"tech-stack-phase-7-target",children:"Tech Stack (Phase 7 Target)"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Flask + Jinja + Tailwind"})," for SEO-friendly server-rendered pages."]}),"\n",(0,l.jsxs)(n.li,{children:["Optional ",(0,l.jsx)(n.strong,{children:"htmx"})," or ",(0,l.jsx)(n.strong,{children:"Alpine.js"})," for small interactivity."]}),"\n",(0,l.jsx)(n.li,{children:"Shared registry API for data."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"auth-and-session-model",children:"Auth and Session Model"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Server-side sessions (DB-backed) for dashboard views."}),"\n",(0,l.jsxs)(n.li,{children:["Cookies: ",(0,l.jsx)(n.code,{children:"HttpOnly"}),", ",(0,l.jsx)(n.code,{children:"SameSite=Lax"}),", ",(0,l.jsx)(n.code,{children:"Secure"})," in production."]}),"\n",(0,l.jsx)(n.li,{children:"CSRF protection on all POST/PUT/DELETE web forms."}),"\n",(0,l.jsx)(n.li,{children:"Session TTL: 7 days with rotation on login."}),"\n",(0,l.jsx)(n.li,{children:"Logout invalidates session server-side."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"api-surfaces-for-web-ui",children:"API Surfaces for Web UI"}),"\n",(0,l.jsx)(n.p,{children:"Read-only UI calls should use the existing API:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/api/v1/tools"}),", ",(0,l.jsx)(n.code,{children:"/api/v1/tools/search"}),", ",(0,l.jsx)(n.code,{children:"/api/v1/categories"}),", ",(0,l.jsx)(n.code,{children:"/api/v1/stats/popular"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:"Publisher dashboard uses auth endpoints:"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"/api/v1/login"}),", ",(0,l.jsx)(n.code,{children:"/api/v1/tokens"}),", ",(0,l.jsx)(n.code,{children:"/api/v1/me/tools"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"payments-and-donations-optional",children:"Payments and Donations (Optional)"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Decide early on a processor (Stripe, Ko-fi, paypal, bitcoin/crypto) to avoid churn."}),"\n",(0,l.jsx)(n.li,{children:"Webhook handling must verify signatures and enforce idempotency keys."}),"\n",(0,l.jsxs)(n.li,{children:["Store donation/subscription state with ",(0,l.jsx)(n.code,{children:"status"}),", ",(0,l.jsx)(n.code,{children:"amount"}),", ",(0,l.jsx)(n.code,{children:"currency"}),", ",(0,l.jsx)(n.code,{children:"provider_id"}),", ",(0,l.jsx)(n.code,{children:"created_at"}),"."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"moderation-and-abuse-reporting",children:"Moderation and Abuse Reporting"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Tool detail pages require a minimal abuse report endpoint."}),"\n",(0,l.jsxs)(n.li,{children:["Create ",(0,l.jsx)(n.code,{children:"reports"})," table with ",(0,l.jsx)(n.code,{children:"tool_id"}),", ",(0,l.jsx)(n.code,{children:"reporter"}),", ",(0,l.jsx)(n.code,{children:"reason"}),", ",(0,l.jsx)(n.code,{children:"status"}),"."]}),"\n",(0,l.jsx)(n.li,{children:"Add rate limit to the report endpoint to prevent spam."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"media-and-asset-handling",children:"Media and Asset Handling"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Images/screenshots stored in object storage (preferred) or a dedicated ",(0,l.jsx)(n.code,{children:"assets/"})," bucket."]}),"\n",(0,l.jsx)(n.li,{children:"Enforce size limits and content-type validation."}),"\n",(0,l.jsx)(n.li,{children:"Generate thumbnails for cards and lazy-load in UI."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"caching-and-seo-serving",children:"Caching and SEO Serving"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Public pages include ETag/Last-Modified for CDN caching."}),"\n",(0,l.jsx)(n.li,{children:"Dashboard pages are non-cacheable and user-specific."}),"\n",(0,l.jsx)(n.li,{children:"Avoid cache poisoning by varying on auth cookies."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"seo-strategy",children:"SEO Strategy"}),"\n",(0,l.jsx)(n.h3,{id:"technical-seo",children:"Technical SEO"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"URL Structure:"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"/                           # Landing page\n/tools                      # Registry browse\n/tools/{owner}/{name}       # Tool detail (canonical)\n/tools/{owner}/{name}/v/1.0 # Specific version\n/categories/{slug}          # Category listing\n/docs/{section}/{page}      # Documentation\n/tutorials/{slug}           # Tutorial pages\n"})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Meta Tags (per page type):"})}),"\n",(0,l.jsx)(n.p,{children:"Landing page:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<title>CmdForge - Build Custom AI Commands in YAML</title>\n<meta name="description" content="Create Unix-style pipeable tools that work with any AI provider. Provider-agnostic, composable, and community-driven.">\n<meta name="keywords" content="ai cli tools, yaml automation, ai commands, cmdforge">\n'})}),"\n",(0,l.jsx)(n.p,{children:"Tool detail page:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'<title>{tool-name} by {owner} - CmdForge Registry</title>\n<meta name="description" content="{tool description, max 160 chars}">\n'})}),"\n",(0,l.jsx)(n.h3,{id:"structured-data-schemaorg",children:"Structured Data (Schema.org)"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"SoftwareApplication (for tools):"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n  "@context": "https://schema.org",\n  "@type": "SoftwareApplication",\n  "name": "summarize",\n  "applicationCategory": "DeveloperApplication",\n  "operatingSystem": "Linux, macOS, Windows",\n  "author": {\n    "@type": "Person",\n    "name": "owner-name"\n  },\n  "downloadUrl": "https://cmdforge.brrd.tech/tools/owner/summarize",\n  "softwareVersion": "1.2.0",\n  "aggregateRating": {\n    "@type": "AggregateRating",\n    "ratingValue": "4.5",\n    "ratingCount": "142"\n  }\n}\n'})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Organization (site-wide):"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n  "@context": "https://schema.org",\n  "@type": "Organization",\n  "name": "CmdForge",\n  "url": "https://cmdforge.dev",\n  "logo": "https://cmdforge.dev/logo.png",\n  "sameAs": [\n    "https://github.com/your-org/cmdforge",\n    "https://twitter.com/cmdforge"\n  ]\n}\n'})}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Article (for tutorials/blog):"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-json",children:'{\n  "@context": "https://schema.org",\n  "@type": "TechArticle",\n  "headline": "Getting Started with CmdForge",\n  "author": {"@type": "Person", "name": "Author Name"},\n  "datePublished": "2025-01-15",\n  "dateModified": "2025-01-20"\n}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"open-graph--social-sharing",children:"Open Graph & Social Sharing"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-html",children:'\x3c!-- Open Graph --\x3e\n<meta property="og:title" content="CmdForge - AI CLI Tools">\n<meta property="og:description" content="Build custom AI commands...">\n<meta property="og:image" content="https://cmdforge.dev/og-image.png">\n<meta property="og:url" content="https://cmdforge.dev">\n<meta property="og:type" content="website">\n\n\x3c!-- Twitter Card --\x3e\n<meta name="twitter:card" content="summary_large_image">\n<meta name="twitter:site" content="@cmdforge">\n<meta name="twitter:title" content="CmdForge">\n<meta name="twitter:description" content="Build custom AI commands...">\n<meta name="twitter:image" content="https://cmdforge.dev/twitter-card.png">\n'})}),"\n",(0,l.jsx)(n.h3,{id:"sitemap",children:"Sitemap"}),"\n",(0,l.jsxs)(n.p,{children:["Auto-generate ",(0,l.jsx)(n.code,{children:"sitemap.xml"}),":"]}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"All public pages"}),"\n",(0,l.jsx)(n.li,{children:"Tool detail pages (updated on publish)"}),"\n",(0,l.jsx)(n.li,{children:"Category pages"}),"\n",(0,l.jsx)(n.li,{children:"Documentation pages"}),"\n",(0,l.jsx)(n.li,{children:"Priority based on page importance"}),"\n"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-xml",children:'<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n  <url>\n    <loc>https://cmdforge.dev/</loc>\n    <priority>1.0</priority>\n    <changefreq>daily</changefreq>\n  </url>\n  <url>\n    <loc>https://cmdforge.dev/tools</loc>\n    <priority>0.9</priority>\n    <changefreq>daily</changefreq>\n  </url>\n  \x3c!-- Tool pages, docs, etc. --\x3e\n</urlset>\n'})}),"\n",(0,l.jsx)(n.h3,{id:"robotstxt",children:"robots.txt"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{children:"User-agent: *\nAllow: /\n\n# Block auth pages from indexing\nDisallow: /login\nDisallow: /register\nDisallow: /dashboard\nDisallow: /api/\n\nSitemap: https://cmdforge.dev/sitemap.xml\n"})}),"\n",(0,l.jsx)(n.h3,{id:"canonical-urls",children:"Canonical URLs"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Each page has a single canonical URL"}),"\n",(0,l.jsxs)(n.li,{children:["Use ",(0,l.jsx)(n.code,{children:'<link rel="canonical" href="...">'})," tag"]}),"\n",(0,l.jsx)(n.li,{children:"Avoid duplicate content issues"}),"\n",(0,l.jsx)(n.li,{children:"Tool versions link to latest as canonical"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"performance-for-seo",children:"Performance for SEO"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Server-side rendering for all public pages (Flask + Jinja)"}),"\n",(0,l.jsx)(n.li,{children:"No JavaScript required for content visibility"}),"\n",(0,l.jsx)(n.li,{children:"Fast TTFB (< 200ms target)"}),"\n",(0,l.jsx)(n.li,{children:"Mobile-friendly (responsive design)"}),"\n",(0,l.jsx)(n.li,{children:'Core Web Vitals in "good" range'}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"content-strategy",children:"Content Strategy"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Core tutorials that mirror CLI workflows."}),"\n",(0,l.jsx)(n.li,{children:'"Project spotlights" to showcase real usage.'}),"\n",(0,l.jsx)(n.li,{children:"Contributor recognition (monthly spotlight)."}),"\n",(0,l.jsx)(n.li,{children:"Announcements and changelog summaries."}),"\n",(0,l.jsx)(n.li,{children:"Encourage AI parsing to increase adsense revenue."}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"risks-and-mitigations",children:"Risks and Mitigations"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Ad overload"}),": strict placement rules, no ads in registry."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Moderation burden and load"}),": Implement AI enabled moderation with flags to alert human intervention to keep things moving and simplefy maintenence."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Content drift"}),": quarterly doc reviews tied to releases."]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Consent and tracking"}),": default to privacy-preserving settings."]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"phase-7-implementation-checklist",children:"Phase 7 Implementation Checklist"}),"\n",(0,l.jsx)(n.h3,{id:"71-foundation--setup",children:"7.1 Foundation & Setup"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Set up Flask project structure with blueprints"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Configure Jinja2 templates with base layout"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Integrate Tailwind CSS (build pipeline)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Set up static asset handling (CSS, JS, images)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Configure development/production environments"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Set up database models for web-specific tables"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"72-core-templates--components",children:"7.2 Core Templates & Components"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Create base template with header/footer"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Implement navigation component (desktop + mobile)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Build reusable card components (tool, tutorial, contributor)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Create form components (inputs, buttons, dropdowns)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Implement callout/alert components"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Build code block component with copy functionality"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Create loading states (skeleton, spinner)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Implement responsive grid system"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"73-landing-page",children:"7.3 Landing Page"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Hero section with install snippet"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Three pillars section (Easy, Powerful, Community)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Featured tools grid (API integration)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Getting started tutorial cards"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Featured contributor spotlight"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Footer with links and optional ad zone"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"74-registry-pages-ad-free",children:"7.4 Registry Pages (Ad-Free)"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Tool browse page with search bar"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Category dropdown filter"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Sort options (popular, recent, name)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Pagination component"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Tool card grid layout"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Tool detail page with README rendering"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Version selector in sidebar"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Install command with copy"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Report abuse button/modal"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Category pages"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"75-documentation--tutorials",children:"7.5 Documentation & Tutorials"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Docs landing page with section links"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Tutorial listing page"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Content page template with TOC"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Scroll-spy for TOC highlighting"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Code syntax highlighting (Prism/Highlight.js)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Video embed component (YouTube)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Related articles section"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Sidebar ad placement (desktop only)"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"76-authentication--dashboard",children:"7.6 Authentication & Dashboard"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Registration page and flow"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Login page with error handling"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Password reset flow (if implementing)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Session management (cookies, CSRF)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Dashboard layout with sidebar"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","My Tools tab with tool list"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Connections tab with app pairing flow"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Settings tab with profile edit"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",checked:!0,disabled:!0})," ","Logout functionality"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"77-privacy--consent",children:"7.7 Privacy & Consent"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Cookie consent banner"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Consent preferences modal"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Consent state storage"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Privacy policy page"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Terms of service page"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Honor consent in analytics/ad loading"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"78-ads--monetization",children:"7.8 Ads & Monetization"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","AdSense integration (account setup)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Ad container components"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Lazy loading for ad scripts"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Ad placement rules enforcement"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Sponsored content styling (if applicable)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Donate page with donation options"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"79-seo--performance",children:"7.9 SEO & Performance"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Meta tags for all page types"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Open Graph tags"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Schema.org structured data"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Sitemap generation"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","robots.txt configuration"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Canonical URL implementation"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Image optimization pipeline"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","CSS/JS minification"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Critical CSS inlining"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Lazy loading for images"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"710-testing--qa",children:"7.10 Testing & QA"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Responsive design testing (all breakpoints)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Accessibility testing (WCAG 2.1 AA)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Cross-browser testing (Chrome, Firefox, Safari, Edge)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Performance testing (Lighthouse scores)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Form validation testing"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Error state testing"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Mobile usability testing"]}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"711-launch-preparation",children:"7.11 Launch Preparation"}),"\n",(0,l.jsxs)(n.ul,{className:"contains-task-list",children:["\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Content creation (initial docs, tutorials)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Seed featured tools selection"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Initial contributor spotlight"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Analytics setup (privacy-respecting)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Error monitoring (Sentry or similar)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","SSL certificate configuration"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","CDN setup (optional)"]}),"\n",(0,l.jsxs)(n.li,{className:"task-list-item",children:[(0,l.jsx)(n.input,{type:"checkbox",disabled:!0})," ","Backup and recovery procedures"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"api-endpoints-for-web-ui",children:"API Endpoints for Web UI"}),"\n",(0,l.jsx)(n.p,{children:"The web UI consumes these existing API endpoints:"}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Public (read-only):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/tools"})," - List tools with pagination/filters"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/tools/search?q=..."})," - Search tools"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/tools/{owner}/{name}"})," - Tool details"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/tools/{owner}/{name}/versions"})," - Version list"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/categories"})," - Category list"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/stats/popular"})," - Popular tools"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"Authenticated (dashboard):"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"POST /api/v1/login"})," - User login (returns session)"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"POST /api/v1/register"})," - User registration"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/me/tools"})," - User's published tools"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/pairing/connected-apps"})," - List connected apps"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"POST /api/v1/pairing/initiate"})," - Start app pairing flow"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/pairing/status"})," - Get pending pairing requests"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"POST /api/v1/pairing/claim/{pairing_id}"})," - Approve a pending connection"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"DELETE /api/v1/tokens/{id}"})," - Disconnect/revoke an app"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"PUT /api/v1/me/settings"})," - Update profile"]}),"\n"]}),"\n",(0,l.jsx)(n.p,{children:(0,l.jsx)(n.strong,{children:"New endpoints for web UI:"})}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/featured/tools"})," - Curated featured tools"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/featured/contributors"})," - Featured contributor"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"GET /api/v1/content/announcements"})," - Site announcements"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.code,{children:"POST /api/v1/reports"})," - Abuse report submission"]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"diagram-references",children:"Diagram References"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:["Landing page mockup: ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-registry_rob_6.svg"})]}),"\n",(0,l.jsxs)(n.li,{children:["System overview: ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-registry_rob_1.puml"})]}),"\n",(0,l.jsxs)(n.li,{children:["Data flows: ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-registry_rob_5.puml"})]}),"\n",(0,l.jsxs)(n.li,{children:["Web UI strategy: ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-web-ui-strategy.puml"})]}),"\n",(0,l.jsxs)(n.li,{children:["UI visual strategy: ",(0,l.jsx)(n.code,{children:"discussions/diagrams/cmdforge-web-ui-visual-strategy.puml"})]}),"\n"]}),"\n",(0,l.jsx)(n.h2,{id:"deployment-guide",children:"Deployment Guide"}),"\n",(0,l.jsx)(n.h3,{id:"requirements",children:"Requirements"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsx)(n.li,{children:"Python 3.11+"}),"\n",(0,l.jsx)(n.li,{children:"pip/virtualenv"}),"\n",(0,l.jsx)(n.li,{children:"SQLite 3 (included with Python)"}),"\n"]}),"\n",(0,l.jsx)(n.h3,{id:"quick-start-development",children:"Quick Start (Development)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:'# Clone the repository\ngit clone https://gitea.brrd.tech/rob/CmdForge.git\ncd CmdForge\n\n# Create virtual environment\npython3 -m venv venv\nsource venv/bin/activate\n\n# Install with registry extras\npip install -e ".[registry]"\n\n# Run the web server\npython -m cmdforge.web.app\n'})}),"\n",(0,l.jsxs)(n.p,{children:["The server will start on ",(0,l.jsx)(n.code,{children:"http://localhost:5000"}),"."]}),"\n",(0,l.jsx)(n.h3,{id:"production-deployment",children:"Production Deployment"}),"\n",(0,l.jsx)(n.h4,{id:"1-environment-variables",children:"1. Environment Variables"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Required\nexport CMDFORGE_REGISTRY_DB=/path/to/registry.db\nexport PORT=5050\n\n# Optional\nexport CMDFORGE_ENV=production  # Enables secure cookies\nexport CMDFORGE_SHOW_ADS=true   # Enable ad placeholders\n"})}),"\n",(0,l.jsx)(n.h4,{id:"2-database-location",children:"2. Database Location"}),"\n",(0,l.jsxs)(n.p,{children:["By default, the registry uses ",(0,l.jsx)(n.code,{children:"~/.cmdforge/registry.db"}),". For production:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Create dedicated directory\nmkdir -p /var/lib/cmdforge\nexport CMDFORGE_REGISTRY_DB=/var/lib/cmdforge/registry.db\n"})}),"\n",(0,l.jsxs)(n.p,{children:[(0,l.jsx)(n.strong,{children:"Note"}),": If using a merged filesystem (e.g., mergerfs), store the database on a single disk or in ",(0,l.jsx)(n.code,{children:"/tmp"})," to avoid SQLite WAL mode issues:"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"export CMDFORGE_REGISTRY_DB=/tmp/cmdforge-registry/registry.db\n"})}),"\n",(0,l.jsx)(n.h4,{id:"3-running-with-systemd",children:"3. Running with systemd"}),"\n",(0,l.jsxs)(n.p,{children:["Create ",(0,l.jsx)(n.code,{children:"/etc/systemd/system/cmdforge-registry.service"}),":"]}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-ini",children:"[Unit]\nDescription=CmdForge Registry Web Server\nAfter=network.target\n\n[Service]\nType=simple\nUser=cmdforge\nWorkingDirectory=/opt/cmdforge\nEnvironment=CMDFORGE_REGISTRY_DB=/var/lib/cmdforge/registry.db\nEnvironment=PORT=5050\nEnvironment=CMDFORGE_ENV=production\nExecStart=/opt/cmdforge/venv/bin/python -m cmdforge.web.app\nRestart=always\nRestartSec=5\n\n[Install]\nWantedBy=multi-user.target\n"})}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"sudo systemctl daemon-reload\nsudo systemctl enable cmdforge-registry\nsudo systemctl start cmdforge-registry\n"})}),"\n",(0,l.jsx)(n.h4,{id:"4-reverse-proxy-nginx",children:"4. Reverse Proxy (nginx)"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-nginx",children:'server {\n    listen 80;\n    server_name cmdforge.brrd.tech;\n\n    location / {\n        proxy_pass http://127.0.0.1:5050;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n    }\n\n    location /static {\n        alias /opt/cmdforge/src/cmdforge/web/static;\n        expires 1y;\n        add_header Cache-Control "public, immutable";\n    }\n}\n'})}),"\n",(0,l.jsx)(n.h4,{id:"5-ssl-with-certbot",children:"5. SSL with Certbot"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"sudo certbot --nginx -d cmdforge.brrd.tech\n"})}),"\n",(0,l.jsx)(n.h3,{id:"tailwind-css-build",children:"Tailwind CSS Build"}),"\n",(0,l.jsx)(n.p,{children:"The CSS is pre-built and committed. To rebuild after changes:"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:"# Install dependencies\nnpm install\n\n# Build for production\nnpx tailwindcss -i src/cmdforge/web/static/css/input.css \\\n                -o src/cmdforge/web/static/css/main.css \\\n                --minify\n"})}),"\n",(0,l.jsx)(n.h3,{id:"health-check",children:"Health Check"}),"\n",(0,l.jsx)(n.pre,{children:(0,l.jsx)(n.code,{className:"language-bash",children:'curl http://localhost:5050/api/v1/tools\n# Returns: {"data":[],"meta":{"page":1,"per_page":20,"total":0,"total_pages":1}}\n'})}),"\n",(0,l.jsx)(n.h3,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,l.jsxs)(n.table,{children:[(0,l.jsx)(n.thead,{children:(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.th,{children:"Issue"}),(0,l.jsx)(n.th,{children:"Solution"})]})}),(0,l.jsxs)(n.tbody,{children:[(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:(0,l.jsx)(n.code,{children:"disk I/O error"})}),(0,l.jsx)(n.td,{children:"Move database to non-merged filesystem"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Port already in use"}),(0,l.jsx)(n.td,{children:"Change PORT environment variable"})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"500 errors"}),(0,l.jsxs)(n.td,{children:["Check ",(0,l.jsx)(n.code,{children:"/tmp/cmdforge.log"})," for stack traces"]})]}),(0,l.jsxs)(n.tr,{children:[(0,l.jsx)(n.td,{children:"Static files not loading"}),(0,l.jsx)(n.td,{children:"Verify static folder path in deployment"})]})]})]}),"\n",(0,l.jsx)(n.h2,{id:"future-considerations-phase-8",children:"Future Considerations (Phase 8+)"}),"\n",(0,l.jsxs)(n.ul,{children:["\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Forum integration"}),": External (Discourse) or built-in discussions"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Newsletter signup"}),": Email collection with double opt-in"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"A/B testing"}),": Hero messaging, CTA variations"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Analytics dashboard"}),": Traffic insights for publishers"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Premium features"}),": Private registries, enhanced analytics"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Internationalization"}),": Multi-language support"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"Dark mode"}),": Theme toggle with persistence"]}),"\n",(0,l.jsxs)(n.li,{children:[(0,l.jsx)(n.strong,{children:"PWA features"}),": Offline support, install prompt"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,l.jsx)(n,{...e,children:(0,l.jsx)(a,{...e})}):a(e)}},8453(e,n,i){i.d(n,{R:()=>t,x:()=>d});var s=i(6540);const l={},r=s.createContext(l);function t(e){const n=s.useContext(r);return s.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:t(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);