@nexub/mcp 3.2.0 → 3.4.0

package/README.md

@@ -37,6 +37,15 @@ claude plugin install nexub-ds@nexub
 | `get_tokens` | Color roles, typography, spacing, shape, elevation, motion, with Tailwind utilities (`section: "Motion"`) |
 | `get_react_native` | Mobile apps: `@nexub/react-native` setup, components, screen patterns and mobile rules |
 
+## Prompts
+
+Ready-made starting points, listed by your client (in Claude Code: `/mcp__nexub-ds__build_screen`). Each carries the guidelines, so the model has the rules without a separate call.
+
+| Prompt | Arguments |
+| --- | --- |
+| `build_screen` | `screen`: what to build; `platform`: `web` (default) or `mobile` |
+| `review_screen` | `code`: the UI to review against the checklist (optional) |
+
 ## Staying current
 
 The server reports the reference of the version it was published with, and it is versioned with `@nexub/react`. `npx -y @nexub/mcp` always fetches the latest release. Pin `@nexub/mcp@<version>` to match an older install.

package/dist/skill/SKILL.md

@@ -79,6 +79,7 @@ Starting points for typical SaaS screens:
 | Onboarding | `StepIndicator` + `CheckList` |
 | Search / commands | `CommandPalette` + `KeyboardShortcut` |
 | Empty, loading, error | `EmptyState`, `Skeleton`, `ErrorState`, `Toast` |
+| White-label / customer brand | `<ThemeProvider seed="#hex">` (native: `<NexubNativeProvider seed>`), plus `createSeedStylesheet(seed)` from `@nexub/tokens/seed` rendered on the server so there is no flash. Never hand-pick brand hex for roles; try colours at nexub.design/foundations/theme-builder |
 | Marketing / landing page | `@nexub/marketing` under `data-mode="marketing"`: `MarketingNav`, `Hero`, `LogoStrip`, `StatBand`, `FeatureSplit`, `HowItWorks`, `ProductGrid`, `TestimonialGrid`, `PricingTable`, `FAQ`, `CTABand`, `MarketingFooter` |
 
 Money: use `Amount` and `MoneyInput`. They use tabular figures, the currency's own minor unit and a true minus sign. Icons: import from `@nexub/icons`, not `lucide-react` directly.

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v3.2.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v3.4.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v3.2.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v3.4.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",

package/src/server.js

@@ -102,6 +102,45 @@ export function createServer() {
     async () => text(read('references/react-native.md')),
   );
 
+  // Prompts: ready-made starting points the user picks in their MCP client
+  // (e.g. "/mcp__nexub-ds__build_screen" in Claude Code). Each one carries the
+  // guidelines, so the model has the rules without a separate tool call.
+  const guidelines = () => read('SKILL.md').replace(/^---\n[\s\S]*?\n---\n/, '');
+  const user = (t) => ({ messages: [{ role: 'user', content: { type: 'text', text: t } }] });
+
+  server.registerPrompt(
+    'build_screen',
+    {
+      title: 'Build a screen with Nexub',
+      description: 'Build a page or screen from a short description, using only Nexub components, patterns and tokens.',
+      argsSchema: {
+        screen: z.string().describe('What to build, e.g. "billing settings with plan, payment method and invoices"'),
+        platform: z.string().optional().describe('"web" (default) or "mobile"'),
+      },
+    },
+    ({ screen, platform }) =>
+      user(
+        `Build this ${platform === 'mobile' ? 'React Native screen with @nexub/react-native' : 'screen with @nexub/react and @nexub/patterns'}: ${screen}\n\n` +
+          'Start from the matching row of "How to build a screen", call get_component for any component whose props you are unsure of, ' +
+          `use only tokens (no hex, no arbitrary px), and finish with the "Before you finish" checklist.\n\n---\n\n${guidelines()}`,
+      ),
+  );
+
+  server.registerPrompt(
+    'review_screen',
+    {
+      title: 'Review UI against Nexub',
+      description: 'Review UI code against the Nexub checklist and fix what is not a Nexub component or token.',
+      argsSchema: { code: z.string().optional().describe('The code to review. Leave empty to review the open file.') },
+    },
+    ({ code }) =>
+      user(
+        'Review this UI against the Nexub "Before you finish" checklist. List each problem with the line, then fix it: ' +
+          'swap custom controls for Nexub components, hex or palette colours for role tokens, arbitrary values for scale tokens, ' +
+          `and add missing labels.\n\n${code ? `\`\`\`tsx\n${code}\n\`\`\`\n\n` : ''}---\n\n${guidelines()}`,
+      ),
+  );
+
   return server;
 }