How do I install the Wikimind Design skill?

Run npx skillmds@latest add tomevault-io/wikimind-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wikimind Design safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wikimind Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wikimind Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wikimind Design?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wikimind Design by tomevault-io — Agent Skill

Name: Wikimind Design
Author: tomevault-io

File contents

WikiMind design skill

When the user asks for a WikiMind screen, flow, slide, landing page, or any artifact in the brand, load this design system before drawing anything.

Load order

Read README.md — the full visual + content system. Do not skip.
Copy colors_and_type.css into your artifact. Use var(--brand-600), var(--fg-2), etc. Never re-invent the palette.
Open ui_kits/app/index.html in a tab (or copy the relevant .jsx file) and lift components verbatim. The Inbox, Ask, and Wiki views are fully mocked with real data shapes.
Browse preview/ for any single-concept reference (colors, type, buttons, badges, chips, nav, source card, turn card, toast).

The five non-negotiables

If a design violates any of these, it's not WikiMind:

1px slate-200 borders separate everything. Borders carry the layout, not shadow or whitespace.
slate-50 canvas + pure white cards. No gradients, no tints, no imagery, no glass.
Sentence case in all UI. No Title Case. No marketing caps.
Emoji are nav-only and fixed. 🧠 📥 💬 📚 🕸️ 🩺 ⚙️ — and 📄 ✕. Do not invent new ones.
Inter everywhere. JetBrains Mono only for code.

Voice cheat-sheet

Declarative, spare, scholarly. "You feed it. You never write it."
Oppositional framing in three beats. "Not a note app · Not a chatbot · Not a RAG tool."
Use the dictionary: feed, compile, claim, confidence, file back, source, article, concept, backlink, orphan, lint, thread, turn.
No exclamation marks. No "users" (say "you"). No "AI-powered" / "revolutionary".

The confidence system is the signature pattern

Every LLM-produced claim gets tagged: sourced (emerald) · mixed (sky) · inferred (amber) · opinion (slate). If you're designing anything that surfaces a generated claim and you don't show confidence, you're off-brand.

When making slides, landing, or marketing

Keep the visual rules (1px borders, slate canvas, no imagery) — marketing is just product cards arranged with more air.
Instrument Serif italic is allowed for a single editorial pull-quote per page. Nowhere else.
Background color variety is OK: brand-50 tint, slate-900 inverted section. Still no gradients.

When designing new product screens

Start from ui_kits/app/ and extend. Don't mock from scratch.
Sidebar nav is fixed 224px. Wiki view has 240px concept tree left + 240px backlink rail right. Reader max-width 720px.
New icons → Lucide via CDN, currentColor, 16/14/20 px depending on context.

Source: manavgup/wikimind — distributed by TomeVault.

---name: wikimind-designdescription: Use when designing any surface of WikiMind — the personal LLM-powered knowledge OS where the wiki is the product. Covers the visual language, tone rules, and component vocabulary for the React web app at apps/web/.---# WikiMind design skillWhen the user asks for a WikiMind screen, flow, slide, landing page, or any artifact in the brand, load this design system before drawing anything.## Load order1. **Read `README.md`** — the full visual + content system. Do not skip.2. **Copy `colors_and_type.css` into your artifact.** Use `var(--brand-600)`, `var(--fg-2)`, etc. Never re-invent the palette.3. **Open `ui_kits/app/index.html` in a tab** (or copy the relevant `.jsx` file) and lift components verbatim. The Inbox, Ask, and Wiki views are fully mocked with real data shapes.4. **Browse `preview/`** for any single-concept reference (colors, type, buttons, badges, chips, nav, source card, turn card, toast).## The five non-negotiablesIf a design violates any of these, it's not WikiMind:1. **1px slate-200 borders separate everything.** Borders carry the layout, not shadow or whitespace.2. **`slate-50` canvas + pure white cards.** No gradients, no tints, no imagery, no glass.3. **Sentence case in all UI.** No Title Case. No marketing caps.4. **Emoji are nav-only and fixed.** 🧠 📥 💬 📚 🕸️ 🩺 ⚙️ — and 📄 ✕. Do not invent new ones.5. **Inter everywhere.** JetBrains Mono only for code.## Voice cheat-sheet- Declarative, spare, scholarly. "You feed it. You never write it."- Oppositional framing in three beats. "Not a note app · Not a chatbot · Not a RAG tool."- Use the dictionary: feed, compile, claim, confidence, file back, source, article, concept, backlink, orphan, lint, thread, turn.- No exclamation marks. No "users" (say "you"). No "AI-powered" / "revolutionary".## The confidence system is the signature patternEvery LLM-produced claim gets tagged: **sourced** (emerald) · **mixed** (sky) · **inferred** (amber) · **opinion** (slate). If you're designing anything that surfaces a generated claim and you don't show confidence, you're off-brand.## When making slides, landing, or marketing- Keep the visual rules (1px borders, slate canvas, no imagery) — marketing is just product cards arranged with more air.- `Instrument Serif` italic is allowed for a single editorial pull-quote per page. Nowhere else.- Background color variety is OK: brand-50 tint, slate-900 inverted section. Still no gradients.## When designing new product screens- Start from `ui_kits/app/` and extend. Don't mock from scratch.- Sidebar nav is fixed 224px. Wiki view has 240px concept tree left + 240px backlink rail right. Reader max-width 720px.- New icons → Lucide via CDN, `currentColor`, 16/14/20 px depending on context.---> Source: [manavgup/wikimind](https://github.com/manavgup/wikimind) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions

Wikimind Design