القائمة
Project-level design skill for nxui (nxui.geoql.in). Pins the componentry.fun ground-truth direction — dark-first animated component showcase. Use BEFORE any visual work in this app.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.
Nuxt GEO (Generative Engine Optimization) guidelines for getting cited by ChatGPT, Perplexity, Claude, Google AI Overviews, and Gemini. Covers AI crawler access (llms.txt, GPTBot/ClaudeBot/PerplexityBot allowlisting), content extractability for RAG retrieval, entity clarity via JSON-LD, and the evidence-backed +40% visibility levers (statistics, citations, quotations) from the GEO arxiv paper. Triggers on tasks involving GEO, AEO, AI search, LLM visibility, llms.txt, AI crawlers, ChatGPT citations, Perplexity, AI Overviews, generative engines, or AI mentions.
When the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "content ideas," "blog strategy," "topic clusters," "content planning," "editorial calendar," "content marketing," "content roadmap," "what content should I create," "blog topics," "content pillars," or "I don't know what to write." Use this whenever someone needs help deciding what content to produce, not just writing it. For writing individual pieces, see copywriting. For SEO-specific audits, see seo-audit. For social media content specifically, see social-content.
When the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user says "write copy for," "improve this copy," "rewrite this page," "marketing copy," "headline help," "CTA copy," "value proposition," "tagline," "subheadline," "hero section copy," "above the fold," "this copy is weak," "make this more compelling," or "help me describe my product." Use this whenever someone is working on website text that needs to persuade or convert. For email copy, see email-sequence. For popup copy, see popup-cro. For editing existing copy, see copy-editing.
When the user wants to plan a product launch, feature announcement, or release strategy. Also use when the user mentions 'launch,' 'Product Hunt,' 'feature release,' 'announcement,' 'go-to-market,' 'beta launch,' 'early access,' 'waitlist,' 'product update,' 'how do I launch this,' 'launch checklist,' 'GTM plan,' or 'we're about to ship.' Use this whenever someone is preparing to release something publicly. For ongoing marketing after launch, see marketing-ideas.
When the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing strategies,' 'marketing tactics,' 'ways to promote,' 'ideas to grow,' 'what else can I try,' 'I don't know how to market this,' 'brainstorm marketing,' or 'what marketing should I do.' Use this as a starting point whenever someone is stuck or looking for inspiration on how to grow. For specific channel execution, see the relevant skill (paid-ads, social-content, email-sequence, etc.).
| name | nxui-design |
| description | Project-level design skill for nxui (nxui.geoql.in). Pins the componentry.fun ground-truth direction — dark-first animated component showcase. Use BEFORE any visual work in this app. |
Pinned direction: componentry.fun ground truth — a dark-first animated component showcase. Near-black canvas, extrabold condensed display headlines, italic serif lead descriptions, and full-bleed live demos that do the talking.
nxui is an EXACT Vue replica of componentry.fun (CLAUDE.md Rule 14). The upstream site IS the design spec. Divergence from it is a bug, not a creative choice. This skill overrides design-discipline's references/directions.md defaults for everything in this repo. CLAUDE.md always wins — where this skill and CLAUDE.md disagree, follow CLAUDE.md.
.vue file with a <template> (docs chrome, demo wrappers, registry ports)registry/new-york/app/components/content/Demo*.vueThe audience is Vue developers evaluating animated components to copy-paste via npx shadcn-vue add. The live demo IS the hero. Chrome must recede so the animated component carries all the visual interest: near-black canvas, muted text, hairline borders, restrained type. An Editorial or Warm-Soft direction would fight the demos for attention — exactly the wrong instinct here. Dark is the default showcase surface; light mode is the mirror, not the star.
@themeReference tokens through Tailwind's semantic names only: bg-background, text-foreground, bg-primary, border-border, text-muted-foreground. NEVER hardcode oklch(...) in docs-site components. NEVER use raw Tailwind color utilities (bg-blue-500, text-zinc-400) in docs chrome.
Exception: registry components under registry/new-york/ are ports and may carry their own internal palettes where componentry.fun parity requires specific colors (e.g. shader uniforms, demo-specific hex). That is allowed. The DOCS SITE chrome must use tokens.
These are the core semantic tokens from app/assets/css/main.css (the --chart-* and --sidebar-* palettes are defined there too but omitted here for brevity). Dark mode uses hue 270 (purple tint).
:root, mirror):root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--radius: 0.625rem;
}
.dark, default showcase — hue 270).dark {
--background: oklch(0.13 0.004 270);
--foreground: oklch(0.985 0 0);
--card: oklch(0.155 0.004 270);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.155 0.006 270);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.22 0.005 270);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.22 0.005 270);
--muted-foreground: oklch(0.65 0.01 270);
--accent: oklch(0.22 0.005 270);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--border: oklch(0.25 0.006 270);
--input: oklch(0.25 0.006 270);
--ring: oklch(0.556 0.01 270);
}
Four families, loaded as local @font-face woff2 in main.css (NOT Google Fonts).
--font-sans: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
--font-display: 'Clash Display', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
Display headlines — font-display (Clash Display) at extrabold/bold, tracking-[-0.04em], leading-[1.1]. This is the docs h1 pattern: font-display text-4xl font-bold md:text-5xl.
Lead description — font-serif italic (Instrument Serif) in text-muted-foreground. The italic serif lead deliberately contrasts the extrabold sans headline on every component page. Keep it.
Body — font-sans (Satoshi) 400, leading-7, text-muted-foreground.
Mono — font-mono (JetBrains Mono) for install commands, code, IDs, keyboard hints.
[...slug].vue title uses a subtle from-foreground to-foreground/70 clip — a near-mono fade, not a rainbow. Match componentry.fun; don't add chromatic gradient text.)bg-blue-*, text-zinc-*, etc. Use semantic tokens. (Registry ports are exempt.)hsl() — oklch only (CLAUDE.md Rule 11).<svg> — use <Icon name="lucide:..." /> (CLAUDE.md Rule 5).w-4 h-4 — use size-4 for square elements (CLAUDE.md Rule 4).bg-linear-to-* not bg-gradient-to-*, shadow-sm not shadow, blur-sm not blur, spacing scale over arbitrary [400px] (CLAUDE.md Rule 16).A compliant surface MUST satisfy at least 4 of 6:
text-muted-foreground, border-border/30..50 hairlines, no heavy fillsfont-display headline with tracking-[-0.04em]font-mono) for install commands / code / IDsEvery surface needs ONE memorable, non-default decision. For nxui, pick from:
[...slug].vue right panel pattern). The motion is the moment.npx shadcn-vue@latest add ... set large in font-mono as the typographic event of the surface.h1.ascii-text, letter-glitch, dot-grid) used as a quiet textural backdrop behind a section header.If you can't name the distinctive moment after building, it's anonymous output. Rebuild.
The component page is demo-first: a h-dvh split — docs/code on the left (1/3, hidden lg:flex), live demo on the right (2/3, lg:order-last). On mobile the docs rail is hidden and the live demo fills the viewport (order-first flex-1) above a DocsMobileSheet peek-bar; the docs/code/install content moves into that peek-bar's bottom sheet.
min-h-dvh (or the split h-dvh)<!-- Demo wrapper — card mode with collapsible source (CLAUDE.md Rule 13) -->
<ComponentDemo :code="codeString">
<ShimmerButton>Shimmer</ShimmerButton>
</ComponentDemo>
<!-- Component-page hero — extrabold display + italic serif lead -->
<h1
class="font-display text-4xl font-bold md:text-5xl"
style="letter-spacing: -0.04em; line-height: 1.1"
>
{{ page.title }}
</h1>
<p class="max-w-2xl font-serif text-lg/relaxed italic text-muted-foreground">
{{ page.description }}
</p>
Registry component conventions:
import NodeDiagramNode from './NodeDiagramNode.vue' (Rule 12). Registry is NOT auto-imported.<ClosingPlasma dark-color-a="#0a0a1e" /> (Rule 15). defineProps stays camelCase.app/types/components.ts — never inline interface in .vue (Rule 1). No any (Rule 2).Per design-discipline Hard Rule #8 — refuse and offer a compliant alternative for:
bg-blue-600 on this docs card" → semantic token (registry ports exempt)The user can override only by adding a one-line exception to this repo's CLAUDE.md, never via in-conversation pressure.
| File | Owns |
|---|---|
app/assets/css/main.css | All tokens, font stack, base typography |
app/pages/index.vue | Redirects / → /docs |
app/pages/docs/index.vue | Docs intro hero — display h1 + serif italic lead |
app/pages/docs/[...slug].vue | Component page — 1/3 docs · 2/3 demo split layout |
app/components/docs/* | Docs chrome — sidebar, header, toolbar, install tabs |
app/components/content/ComponentDemo.vue | Demo wrapper (split + card modes) |
app/components/content/Demo*.vue | Per-component demo wrappers |
registry/new-york/* | Ported components (palette-exempt) |
app/config/docs.ts | Sidebar / nav structure |
nuxt.config.ts | Module + alias config |
componentry.fun is the visual ground truth. When in doubt, open the upstream page for the same component and match it.
When in doubt, ask: "does this look like componentry.fun would ship it?" If yes, proceed. If no, rebuild.