@neuctra/ui-mcp 0.4.1 → 0.4.2

package/README.md

@@ -36,8 +36,8 @@ generated from your actual TypeScript source. No guessing, no file-spelunking.
 neuctra-ui-package/src/components/basic/*.tsx     (your actual component source)
         │
         │  npm run registry:generate  (ts-morph reads props/JSDoc/defaults,
-        │                               scrapes one example per component
-        │                               from neuctra-ui-docs)
+        │                               scrapes one description + example per
+        │                               component from neuctra-ui-docs-v2)
         ▼
 neuctra-ui-package/registry/components.json        (source of truth)
         │
@@ -64,7 +64,7 @@ Three independently-regenerable files feed the server:
   the color-token rules ("never hardcode colors"), the anti-AI-look rules ("no
   gradients/shadows/blurs/glows/emoji-icons"), the recommended `@neuctra/ui-cli init`
   setup command, and how the standalone `toast()` API works.
-- **`data/aiDesignRules.json`** — also hand-curated, no generator. A 50-section
+- **`data/aiDesignRules.json`** — also hand-curated, no generator. A 51-section
   product/UX design guide (design philosophy, visual hierarchy, page/sidebar/navigation
   structure, per-component usage guidance, spacing/color/border/radius/shadow
   conventions, responsive design, accessibility, and a final UI quality checklist).
@@ -101,7 +101,7 @@ The tools are designed to be called in roughly this order when generating UI, no
 grabbed ad hoc:
 
 1. **`get_design_rules`** — call this first, before picking any component. It returns
-   the styling rules, the anti-AI-look rules, and the 50-section product/UX guide. This
+   the styling rules, the anti-AI-look rules, and the 51-section product/UX guide. This
    shapes *what* to build (hierarchy, when a group actually needs `Card`, when `Modal`
    vs `Drawer`, etc.) before you start reaching for components.
 2. **`get_theme`** — call alongside step 1, not instead of it. Tokens without the design
@@ -230,7 +230,7 @@ requirements — e.g. `CardBody` is compulsory whenever `Card` has body content,
 `Card` itself renders no padding — and component-specific gotchas like Dropdown's
 trigger already stopping propagation internally) and **`antiAiLookRules`** (no
 gradients/shadows/blurs/glows/emoji-icons/em-dashes — the visual tells that make UI read
-as AI-generated), plus **`productDesignGuide`** — a 50-section product/UX design guide
+as AI-generated), plus **`productDesignGuide`** — a 51-section product/UX design guide
 covering design philosophy, visual hierarchy, page/sidebar/navigation structure,
 per-component usage guidance (when to reach for `Card` vs plain whitespace, `Modal` vs
 `Drawer`, `Table` vs `List`, etc.), spacing/color/border/radius/shadow conventions,
@@ -258,7 +258,7 @@ Call this before generating any UI — see the recommended workflow above.
     "sections": [
       { "number": 1, "title": "Core Design Philosophy", "content": "..." },
       { "number": 7, "title": "Cards", "content": "..." },
-      // ...50 sections total
+      // ...51 sections total
     ],
     "goldenRule": { "title": "Golden Rule", "content": "..." }
   }
@@ -369,7 +369,7 @@ neuctra-ui-mcp/
 ├── data/
 │   ├── components.json      # synced (generated) — don't edit by hand
 │   ├── theme.json           # hand-curated token + styling/anti-AI-look rules
-│   └── aiDesignRules.json   # hand-curated 50-section product/UX design guide
+│   └── aiDesignRules.json   # hand-curated 51-section product/UX design guide
 └── package.json
 ```
 

package/data/aiDesignRules.json

@@ -50,7 +50,7 @@
     {
       "number": 10,
       "title": "Typography",
-      "content": "Typography should create hierarchy without requiring excessive decoration.\n\nRecommended hierarchy:\n\n```text\nPage title\n↓\nSection title\n↓\nComponent title\n↓\nBody text\n↓\nMetadata\n```\n\nUse:\n\n* Strong weight for headings\n* Regular weight for descriptions\n* Muted color for metadata\n* Comfortable line-height for reading\n\nAvoid:\n\n* Excessive bold text\n* Too many font sizes\n* All-caps body text\n* Huge headings on every page\n* Centering everything"
+      "content": "Typography should create hierarchy without requiring excessive decoration.\n\nRecommended hierarchy:\n\n```text\nPage title\n↓\nSection title\n↓\nComponent title\n↓\nBody text\n↓\nMetadata\n```\n\nUse:\n\n* Strong weight for headings\n* Regular weight for descriptions\n* `text-secondary` for paragraphs and descriptions\n* Muted color for metadata\n* Comfortable line-height for reading\n\nAvoid:\n\n* Excessive bold text\n* Too many font sizes\n* All-caps body text\n* Huge headings on every page\n* Centering everything"
     },
     {
       "number": 11,
@@ -185,7 +185,7 @@
     {
       "number": 37,
       "title": "Color Rules",
-      "content": "Use color semantically.\n\nPrimary color:\n\n* Primary actions\n* Active navigation\n* Important interactive elements\n* Focus states\n\nMuted colors:\n\n* Secondary information\n* Metadata\n* Supporting text\n\nSemantic colors:\n\n* Success\n* Warning\n* Error\n* Info\n\nDo not use many unrelated accent colors.\n\nA modern interface should generally have:\n\n```text\n1 primary brand color\n+\nneutral system\n+\nsemantic colors\n```"
+      "content": "Use color semantically.\n\nPrimary color:\n\n* Primary actions\n* Active navigation\n* Important interactive elements\n* Focus states\n\nText colors:\n\n* `text-foreground` for headings and titles\n* `text-secondary` for paragraphs and supporting text\n* `text-muted-foreground` for metadata and hints\n\nSemantic colors:\n\n* Success\n* Warning\n* Error\n* Info\n\nDo not use many unrelated accent colors.\n\nA modern interface should generally have:\n\n```text\n1 primary brand color\n+\nneutral system\n+\nsemantic colors\n```"
     },
     {
       "number": 38,
@@ -251,10 +251,15 @@
       "number": 50,
       "title": "Do Not Overwrite Built-in Component Design",
       "content": "Use each `@neuctra/ui` component's built-in design — its default spacing, radius, colors, and layout — as-is.\n\nDo not pass a `className` just to restyle a component's built-in appearance because of personal preference. The component's own design is already the intended, consistent look.\n\nOnly override with Tailwind's `!` important-modifier (e.g. `!bg-red-500`, `!p-2`, `!rounded-lg`) when there is a real, specific need:\n\n* The component's default would otherwise break the current page's existing layout.\n* The default collides or conflicts with the current UI/design of the site.\n* The component has no prop for the needed variation, and leaving the default would visually damage the surrounding design.\n\nNever reach for `!important` overrides as a routine styling habit, a stylistic preference, or 'just because'.\n\nPrefer:\n\n> built-in component design → prop-based variation (variant, size, etc.) → `!important` override (rare, only to prevent breakage)\n\nover:\n\n> restyle every component by default with className overrides\n\nA component that has been overridden with `!important` on every use is a sign the component itself, or the way it's being used, is wrong — not that every instance needs forcing."
+    },
+    {
+      "number": 51,
+      "title": "Paragraph Text Color",
+      "content": "Use `text-secondary` for all paragraph text: body copy, section descriptions, card descriptions, and supporting text under headings.\n\nDo not use `text-muted-foreground` for paragraphs. It is too low-contrast for reading text.\n\nKeep `text-muted-foreground` for small, low-priority text only:\n\n* Timestamps\n* Metadata\n* Captions\n* Placeholders\n* Helper and hint text\n* Disabled states\n\nUse `text-foreground` for headings, titles, and anything that needs full emphasis.\n\n`secondary` is a text color only. Do not use it as a background (`bg-secondary`).\n\nOrder of emphasis:\n\n```text\ntext-foreground        ← headings\n↓\ntext-secondary         ← paragraphs\n↓\ntext-muted-foreground  ← metadata and hints\n```\n\nToken values:\n\n* Light theme: `--secondary: #3f3f46`\n* Dark theme: `--secondary: #d4d4d8`"
     }
   ],
   "goldenRule": {
     "title": "Golden Rule",
     "content": "Do not ask:\n\n> \"Which components can I put on this page?\"\n\nAsk:\n\n> \"What does the user need to understand and do, and which Neuctra UI component communicates that most naturally?\"\n\nThe best Neuctra UI interface is not the one that uses the most components.\n\nIt is the one where **every component has a purpose.**"
   }
-}
+}