Merge pull request #55 from mmorerasanchez/fix/frontend-fixes-v3.3

fix(web): frontend polish pass — overview, AI pages, design pages (v3.3)

Author: mmorerasanchez

docs/claude-code-prompts-frontend-fixes.md

@@ -76,7 +76,7 @@ When generating or reviewing democrito code, apply this order:
 
 - React 18 + TypeScript 5
 - Vite 5
-- Tailwind CSS v3
+- Tailwind CSS v4
 - shadcn/ui (Radix primitives)
 - React Router v6
 

skill/democrito/SKILL.md

@@ -40,7 +40,7 @@ export function AppSidebar() {
 
   return (
     <Sidebar className="border-r border-sidebar-border bg-sidebar">
-      <SidebarContent className="pt-4">
+      <SidebarContent className="pt-6">
         {/* Documentation */}
         <SidebarGroup>
           <SidebarGroupLabel className="font-mono text-2xs uppercase tracking-widest text-muted-foreground">

src/components/AppSidebar.tsx

@@ -11,20 +11,20 @@ interface InstallPath {
 
 const PATHS: InstallPath[] = [
   {
-    title: "shadcn Registry",
+    title: "shadcn registry",
     recommended: true,
     description: "Installs the component registry and drops the AI context files into your project root.",
     code: INSTALL_COMMAND,
     language: "bash",
   },
   {
-    title: "Git Clone",
+    title: "Git clone",
     description: "Clone the full repo — useful if you want to browse, fork, or contribute.",
     code: "git clone https://github.com/mmorerasanchez/democrito.git",
     language: "bash",
   },
   {
-    title: "Manual Download",
+    title: "Manual download",
     description: "Download CLAUDE.md and DESIGN.md from the repo and drop them into your project root.",
     code: "https://github.com/mmorerasanchez/democrito",
     language: "url",
@@ -60,6 +60,18 @@ export function QuickStartSection({ showHeading = true }: QuickStartSectionProps
               {path.description}
             </Text>
             <CodeBlock code={path.code} language={path.language} />
+            {path.recommended && (
+              <div className="flex justify-end">
+                <a
+                  href="https://democrito.design/r/democrito.json"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="font-mono text-2xs text-muted-foreground transition-colors hover:text-accent"
+                >
+                  registry.json ↗
+                </a>
+              </div>
+            )}
           </div>
         ))}
       </div>

src/components/organisms/ai/QuickStartSection.tsx

@@ -40,8 +40,8 @@ const platforms = [
   {
     path: "/ai/github",
     icon: Github,
-    name: "GitHub",
-    badge: "Open Source",
+    name: "Terminal",
+    badge: "GitHub",
     desc: "Edit src/index.css directly. Two variables change the whole personality.",
   },
 ];

src/pages/AiPage.tsx

@@ -71,6 +71,13 @@ export default function AtomsPage() {
   const [switchOn, setSwitchOn] = useState(false);
   const [checked, setChecked] = useState(false);
 
+  const categories = [
+    { id: "cat-form",     label: "Form & Input",        count: 4 },
+    { id: "cat-labels",   label: "Labels & typography",  count: 4 },
+    { id: "cat-feedback", label: "Feedback & state",     count: 4 },
+    { id: "cat-utility",  label: "Utilities",            count: 3 },
+  ];
+
   return (
     <div className="space-y-12">
       <PageMeta
@@ -91,8 +98,23 @@ export default function AtomsPage() {
         <p className="mt-1 font-body text-base text-muted-foreground">
           Base-level components — the building blocks of the design system.
         </p>
+        <p className="mt-0.5 font-mono text-xs text-foreground-subtle">10 atoms · 4 categories</p>
       </div>
 
+      {/* ── CATEGORY JUMP NAV ── */}
+      <nav className="flex flex-wrap gap-2">
+        {categories.map((cat) => (
+          <a
+            key={cat.id}
+            href={`#${cat.id}`}
+            className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-display text-xs font-medium text-foreground transition-colors hover:border-accent hover:text-accent"
+          >
+            {cat.label}
+            <span className="font-mono text-2xs text-muted-foreground">{cat.count}</span>
+          </a>
+        ))}
+      </nav>
+
       {/* ═══════════════════════════════════════════════════════════ */}
       {/* CATEGORY: Form & Input                                      */}
       {/* ═══════════════════════════════════════════════════════════ */}

src/pages/AtomsPage.tsx

@@ -24,13 +24,13 @@ export default function ManifiestoPage() {
     <div className="mx-auto max-w-2xl space-y-14 py-4">
       <PageMeta
         title="Manifesto"
-        description="You can only be as good as your taste — why design systems still matter in the age of generation."
+        description="Why design systems still matter in the age of AI generation."
         path="/manifesto"
         jsonLd={{
           "@context": "https://schema.org",
           "@type": "Article",
           "name": "Manifesto · democrito",
-          "description": "You can only be as good as your taste — why design systems still matter in the age of generation.",
+          "description": "Why design systems still matter in the age of AI generation.",
           "url": "https://democrito.design/manifesto",
           "isPartOf": { "@type": "SoftwareApplication", "name": "democrito" },
         }}
@@ -44,16 +44,8 @@ export default function ManifiestoPage() {
         </p>
       </div>
 
-      {/* Opening: pull quote + intro paragraph */}
+      {/* Opening: intro paragraph */}
       <div className="space-y-4">
-        <blockquote className="border-l-2 border-accent pl-5 py-1">
-          <p className="font-display text-2xl font-bold text-accent">
-            "You can only be as good as your taste."
-          </p>
-          <cite className="mt-2 block font-mono text-xs text-muted-foreground not-italic">
-            — Mariano Morera, founder
-          </cite>
-        </blockquote>
         <p className="font-body text-base leading-relaxed text-muted-foreground">
           Every few months, a new headline declares something dead. Design has had its share.
           The line travels every feed — half provocation, half prophecy, full misreading.
@@ -70,23 +62,23 @@ export default function ManifiestoPage() {
           The Evidence
         </p>
         <div className="space-y-4">
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             <L href="https://www.mckinsey.com/capabilities/mckinsey-design/our-insights/the-business-value-of-design">
               McKinsey tracked 300+ public companies
             </L>{" "}
             across five years and 2 million financial data points. Companies in the top
             quartile of design maturity outperformed peers by 32 points in revenue growth
             and 56 points in shareholder returns.
           </p>
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             The{" "}
             <L href="https://www.dmi.org/page/DesignValue">
               Design Management Institute's Design Value Index
             </L>{" "}
             shows design-driven companies outperforming the S&P 500 by more than 200%
             over rolling ten-year windows.
           </p>
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             The same pattern holds in government. The countries ranking highest on digital
             service delivery — Denmark, Estonia, Singapore — invested in open, documented
             design systems:{" "}
@@ -100,7 +92,7 @@ export default function ManifiestoPage() {
             </L>{" "}
             now spans dozens of countries.
           </p>
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             Design maturity is one of the most consistently rewarded competitive advantages
             of the modern era.
           </p>
@@ -113,7 +105,7 @@ export default function ManifiestoPage() {
           The Last Twelve Months
         </p>
         <div className="space-y-4">
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             <L href="https://airbnb.design/">Airbnb invented a file format</L> because
             existing formats weren't expressive enough.{" "}
             <L href="https://developer.apple.com/design/">
@@ -132,10 +124,10 @@ export default function ManifiestoPage() {
             </L>, a tool whose entire pitch is the preservation of design systems and brand
             consistency. Lovable launched Aesthetics to give designers more expressive tools.
           </p>
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             Figma grew 41%. Adobe 11.5%. Canva 35% — adding 85 million users in a single year.
           </p>
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             These are not the numbers of a discipline in decline.
           </p>
         </div>
@@ -148,26 +140,26 @@ export default function ManifiestoPage() {
         <p className="font-mono text-2xs uppercase tracking-widest text-accent">
           The Gap AI Hasn't Closed
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           AI raises the floor. A model can generate a UI in thirty seconds, a brand system
           from a URL, a component from a prompt. But Joel Lewenstein, Anthropic's head of
           product design and the person who built Claude Design, confirmed the limit directly
           after launch:
         </p>
         {/* Blockquote */}
         <blockquote className="border-l-2 border-accent pl-5 py-1">
-          <p className="font-body text-base leading-relaxed text-foreground">
+          <p className="font-body text-base leading-relaxed text-muted-foreground">
             "Claude Design doesn't yet address that last mile craft and delight that
             differentiates the best products from the OK ones."
           </p>
           <p className="mt-2 font-mono text-xs text-muted-foreground">
             — Joel Lewenstein, Head of Product Design, Anthropic
           </p>
         </blockquote>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           The company that built the tool everyone fears most is the one naming the gap.
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           The 80% is automated. The 20% — why this surface, not that one; why this typeface
           for data and that one for prose; why one accent, not three — is still brain work.
           That is the craft difference that defines taste.
@@ -181,20 +173,20 @@ export default function ManifiestoPage() {
         <p className="font-mono text-2xs uppercase tracking-widest text-accent">
           democrito
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           democrito exists in that 20%.
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           Three surfaces. One accent. Three fonts, each with a specific semantic role.
           Every decision deliberate and documented, from the Sanzo Wada earth-tone palette
           to the JetBrains Mono.
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           democrito ships DESIGN.md — the layer that carries reasoning, not just tokens —
           along with CLAUDE.md, specific Claude instructions. When Claude, Lovable, or any
           AI agent reads it, it doesn't just know what to render. It knows why.
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           That is what separates a design system from a stylesheet. And what separates a
           product with taste from one without.
         </p>
@@ -204,15 +196,15 @@ export default function ManifiestoPage() {
 
       {/* Closing */}
       <div className="space-y-6">
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           "X is dead" is an old rhetorical move: a modern echo of the German
           post-Reformation philosophical tradition, where Nietzsche's "God is dead"
           announced the collapse of a shared moral frame. Used for design, the phrase
           keeps its theatrical cadence — half provocation, half prophecy — but it loses
           its accuracy. It becomes a kind of hallucination: dramatic in sound, empty
           in diagnosis.
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           What is actually happening is the opposite of decline. We are entering the
           greatest creative expansion of our time. Tools are improving, velocity is
           compounding, and the bar is rising alongside competition. In that environment,
@@ -221,7 +213,7 @@ export default function ManifiestoPage() {
           code), and deeper into judgment (choosing the right references, sensing the
           true signal, and shaping it into coherent craft).
         </p>
-        <p className="font-body text-base leading-relaxed text-foreground">
+        <p className="font-body text-base leading-relaxed text-muted-foreground">
           When generation becomes cheap, the advantage moves to what cannot be inferred
           automatically: intention, restraint, and the ability to make the right choices
           under constraint. That is where taste lives — and why design is not dying,

src/pages/ManifiestoPage.tsx

@@ -94,6 +94,13 @@ export default function MoleculesPage() {
   const [varName, setVarName] = useState("user_name");
   const [varValue, setVarValue] = useState("John Doe");
 
+  const categories = [
+    { id: "cat-form",       label: "Form & input",       count: 5 },
+    { id: "cat-navigation", label: "Navigation",          count: 3 },
+    { id: "cat-data",       label: "Data & display",      count: 5 },
+    { id: "cat-activity",   label: "Activity & status",   count: 3 },
+  ];
+
   return (
     <div className="space-y-12">
       <PageMeta
@@ -114,8 +121,23 @@ export default function MoleculesPage() {
         <p className="mt-1 font-body text-base text-muted-foreground">
           Composite components built from atoms. Each molecule combines 2+ atoms into a reusable pattern.
         </p>
+        <p className="mt-0.5 font-mono text-xs text-foreground-subtle">18 molecules · 4 categories</p>
       </div>
 
+      {/* ── CATEGORY JUMP NAV ── */}
+      <nav className="flex flex-wrap gap-2">
+        {categories.map((cat) => (
+          <a
+            key={cat.id}
+            href={`#${cat.id}`}
+            className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 font-display text-xs font-medium text-foreground transition-colors hover:border-accent hover:text-accent"
+          >
+            {cat.label}
+            <span className="font-mono text-2xs text-muted-foreground">{cat.count}</span>
+          </a>
+        ))}
+      </nav>
+
       {/* ═══════════════════════════════════════════════════════════ */}
       {/* CATEGORY: Form & Input                                      */}
       {/* ═══════════════════════════════════════════════════════════ */}