@neuctra/ui-mcp 0.4.1 → 0.4.2

package/data/theme.json

@@ -3,8 +3,9 @@
   "rules": [
     "Theme colors only, compulsory, no exceptions: never use hardcoded Tailwind palette colors (text-blue-500, bg-red-500, border-gray-200, etc.), inline hex/rgb colors, or any other extra/arbitrary color not in the token list below, anywhere in generated UI — not even for a one-off accent, illustration, or 'just this one element'. Every color used must be one of the semantic tokens below.",
     "Always use the semantic token classes below (bg-primary, text-foreground, border-border, ...) so generated UI automatically follows the consumer's theme in both light and dark mode.",
-    "Every base token except background/foreground/border/input/ring has a matching '-foreground' token for text/icons placed on top of it (e.g. bg-primary + text-primary-foreground, bg-destructive + text-destructive-foreground).",
+    "Every base token except background/foreground/secondary/border/input/ring has a matching '-foreground' token for text/icons placed on top of it (e.g. bg-primary + text-primary-foreground, bg-destructive + text-destructive-foreground).",
     "Page background: bg-background. Card surfaces: bg-card. A distinct section within a page (not the whole page, not a card): bg-accent, or bg-card again if it needs to read as a panel. Popovers/dropdowns/tooltips: bg-popover. Never use bg-muted as a page, section, or card background — muted is reserved for non-surface fills only (skeleton placeholders, disabled-state fills, inline code backgrounds), not for anything a user reads content on top of.",
+    "Paragraph text color, compulsory: use text-secondary for all paragraph text (body copy, section descriptions, card descriptions, and supporting text under headings). Never use text-muted-foreground for paragraphs; it is too low-contrast for reading text. Keep text-muted-foreground for small, low-priority text only: timestamps, metadata, captions, placeholders, helper and hint text, and disabled states. Use text-foreground for headings, titles, and anything that needs full emphasis. secondary is a text color only: never use it as a background (no bg-secondary). Order of emphasis: text-foreground (headings), then text-secondary (paragraphs), then text-muted-foreground (metadata and hints).",
     "Status colors: success (positive/confirmation), warning (caution), info (neutral notice), destructive (danger/errors) — use these instead of ad-hoc green/yellow/blue/red.",
     "Dark mode requires no extra work in generated code: the same class names resolve to the .dark palette automatically because the consumer's CSS defines both blocks. Do not write dark: variants for color — only use dark: for things the token system doesn't cover (rare).",
     "Use the Card component, not a hand-rolled lookalike: this rule only applies once you've decided a group of content (a settings section, a stat/summary tile, a list item container, a form section, a feature block, etc.) needs a bounded/bordered panel treatment — it does not mean every grouping must be boxed (see the design rules' 'less UI is often better UI' guidance: whitespace-only grouping is often correct and a Card is often unnecessary). When a panel treatment is warranted, build it with <Card> — never a raw div styled to look like a card (e.g. bg-card border border-border rounded-lg p-4 by hand). <CardBody> is compulsory whenever the card has body content, not optional: <Card>'s own root element applies zero padding (only the border/background/radius) — all internal spacing lives in the sub-components via their shared padding context, so placing content directly as a child of <Card> without wrapping it in <CardBody> renders that content flush against the card's border with no padding, which visibly breaks the UI. <CardHeader> (title/description/icon/actions) and <CardFooter> (actions/meta) remain genuinely optional — include each only if that section is needed — but never skip <CardBody> when there is body content, and never place content as a direct child of <Card> itself.",
@@ -34,9 +35,10 @@
     { "token": "primary", "className": "bg-primary / text-primary / border-primary", "pairsWith": "primary-foreground", "light": "#00c214", "dark": "#00c214", "usage": "Brand color: primary buttons, active states, links, focus accents." },
     { "token": "primary-foreground", "className": "text-primary-foreground", "light": "#ffffff", "dark": "#ffffff", "usage": "Text/icons on top of bg-primary." },
     { "token": "background", "className": "bg-background", "light": "#ffffff", "dark": "#09090b", "usage": "Page/app background." },
-    { "token": "foreground", "className": "text-foreground", "light": "#09090b", "dark": "#fafafa", "usage": "Default body text color." },
+    { "token": "foreground", "className": "text-foreground", "light": "#09090b", "dark": "#fafafa", "usage": "Headings, titles, and anything that needs full emphasis." },
+    { "token": "secondary", "className": "text-secondary", "light": "#3f3f46", "dark": "#d4d4d8", "usage": "Paragraph text: body copy, section/card descriptions, supporting text under headings. Text color only, never a background (no bg-secondary)." },
     { "token": "muted", "className": "bg-muted", "pairsWith": "muted-foreground", "light": "#f4f4f5", "dark": "#27272a", "usage": "Subtle/secondary surfaces (skeletons, disabled fills, code blocks)." },
-    { "token": "muted-foreground", "className": "text-muted-foreground", "light": "#71717a", "dark": "#a1a1aa", "usage": "Secondary/helper text, placeholders, disabled text." },
+    { "token": "muted-foreground", "className": "text-muted-foreground", "light": "#71717a", "dark": "#a1a1aa", "usage": "Small, low-priority text only: timestamps, metadata, captions, placeholders, helper/hint text, disabled text. Never paragraphs (use text-secondary)." },
     { "token": "accent", "className": "bg-accent", "pairsWith": "accent-foreground", "light": "#e4e4e7", "dark": "#18181b", "usage": "Hover/active background for interactive rows and menu items." },
     { "token": "accent-foreground", "className": "text-accent-foreground", "light": "#09090b", "dark": "#fafafa", "usage": "Text on bg-accent." },
     { "token": "border", "className": "border-border", "light": "#e4e4e7", "dark": "#27272a", "usage": "Default border color for inputs, cards, dividers." },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuctra/ui-mcp",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "MCP server exposing the @neuctra/ui component registry (props, defaults, examples, theme tokens) so AI coding tools generate accurate Neuctra UI code.",
   "type": "module",
   "license": "MIT",

package/src/server.mjs

@@ -166,7 +166,7 @@ export function createServer(data) {
     {
       title: "Get Neuctra UI design rules",
       description:
-        "Get every design rule generated UI must follow when using @neuctra/ui. Covers two levels: (1) styling rules — token usage, surface/background conventions, component composition requirements like CardBody being compulsory whenever Card has body content, component-specific gotchas like Dropdown's trigger propagation, and the full set of rules for avoiding the visual tells that make UI look AI-generated (gradients, decorative shadows/blurs/glows, emoji-as-icons, etc.); (2) product/UX design rules — a numbered 50-section guide covering design philosophy, visual hierarchy, page/sidebar/navigation structure, per-component usage guidance (when to use Card, Modal vs Drawer, Table vs List, etc.), spacing/color/border/radius/shadow conventions, responsive design, accessibility, interaction design, a final UI quality checklist, and the rule against overwriting a component's built-in design. Call this before generating any UI — not just get_theme.",
+        "Get every design rule generated UI must follow when using @neuctra/ui. Covers two levels: (1) styling rules — token usage, surface/background conventions, component composition requirements like CardBody being compulsory whenever Card has body content, component-specific gotchas like Dropdown's trigger propagation, and the full set of rules for avoiding the visual tells that make UI look AI-generated (gradients, decorative shadows/blurs/glows, emoji-as-icons, etc.); (2) product/UX design rules — a numbered 51-section guide covering design philosophy, visual hierarchy, page/sidebar/navigation structure, per-component usage guidance (when to use Card, Modal vs Drawer, Table vs List, etc.), spacing/color/border/radius/shadow conventions, responsive design, accessibility, interaction design, a final UI quality checklist, the rule against overwriting a component's built-in design, and paragraph text color (text-secondary for paragraphs, text-muted-foreground only for metadata/hints). Call this before generating any UI — not just get_theme.",
       inputSchema: {},
     },
     async () => {