How do I install the Tomevault Design skill?

Run npx skillmds@latest add tomevault-io/tomevault-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 Tomevault 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 Tomevault 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 Tomevault Design free to use?

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

Who published Tomevault Design?

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

Tomevault Design by tomevault-io — Agent Skill

Name: Tomevault Design
Author: tomevault-io

Tomevault Design

AUTO-INVOKE on any task that touches frontend, UI, design, components, layout, page, styling, brand, logo, color, palette, font, typography, motion, animation, copy, button, modal, navbar, sidebar, card, form, table, chart, hero, landing, or anything that ships pixels to tomevault-web. Triggers on file edits to tomevault-web/src/**/*.tsx, tomevault-web/src/app/**, .css, tailwind config, globals.css, or any UI component file. Loads the internal tomevault-design Tome at /home/tomevault/tomevault-design/, which composes four upstream design skills (design-an-interface, impeccable, taste-skill, ui-ux-pro-max) with TomeVault-specific design context (palette, typography, brand, motion, light-dark, deploy discipline, voice, analytics). REPLACES the archived Anthropic frontend-design skill — do not re-introduce that skill. Skip ONLY for pure backend, pure pipeline, pure infra work with no UI surface. Use when this capability is needed. Use when this capability is needed. Use when this capability is needed. Use when t

tomevault-io Updated Sep 17, 2026

File contents

TomeVault Design (Tome Adapter)

This is a thin adapter that points at the internal tomevault-design Tome at /home/tomevault/tomevault-design/. The Tome is the source of truth — this file just routes you to it and sets the working directory expectation.

What to do

Read the Tome's orchestrator skill first:
```
/home/tomevault/tomevault-design/skills/tomevault-design/SKILL.md
```
Follow its instructions. It will tell you which TomeVault context files to load, which of the four bundled skills to apply, and in what order.
Resolve all paths in the orchestrator relative to the Tome root:
```
/home/tomevault/tomevault-design/
```
When the orchestrator says "load components/.impeccable.md", read /home/tomevault/tomevault-design/components/.impeccable.md. When it says "run skills/ui-ux-pro-max/scripts/search.py", run /home/tomevault/tomevault-design/skills/ui-ux-pro-max/scripts/search.py.
The Tome's four bundled skills are at:
- /home/tomevault/tomevault-design/skills/design-an-interface/SKILL.md
- /home/tomevault/tomevault-design/skills/impeccable/SKILL.md (plus reference/ subfiles)
- /home/tomevault/tomevault-design/skills/taste-skill/SKILL.md
- /home/tomevault/tomevault-design/skills/ui-ux-pro-max/SKILL.md (plus data/, scripts/, templates/)
TomeVault-specific design decisions live at:

/home/tomevault/tomevault-design/components/

These override the bundled skills when they conflict. Palette, typography, brand, motion, light/dark, deploy discipline, analytics, voice.

When this skill fires

Trigger on any of:

Frontend / UI / design work on tomevault-web/
Page layout, component design, form / button / modal / nav / card / table / chart
Brand, logo, favicon, color, font, motion
Visual review or polish requests

Skip when the task is pure backend, pure infra, or pure pipeline scripting with no UI surface.

Why this adapter exists

The internal Tome is a separate git repo at /home/tomevault/tomevault-design/. Symlinking it into .claude/skills/ directly would break the orchestrator's relative paths. This adapter is the cheap, removable indirection: parent harness discovers tomevault-design.md, which redirects to the real Tome.

Once we publish the Tome and decide to vendor it back into the parent (or install via a future Tome runtime), this adapter goes away.

Status

The Tome is currently internal and private (no public remote, no GitHub repo). We're dogfooding it on the next handful of design surfaces. After 3 uses, we'll evaluate whether the four bundled skill choices, the orchestration routing, and the components/ coverage are right.

Don't propose changes to the Tome's components/ files without an actual surface in front of you that needs the change — over-designing the design system pre-dogfood is exactly the failure mode we're trying to avoid.

Source: tomevault-io/companyos — distributed by TomeVault.

Source: tomevault-io/tomes — distributed by TomeVault.

Source: tomevault-io/skills-registry — distributed by TomeVault.

---name: tomevault-designdescription: AUTO-INVOKE on any task that touches frontend, UI, design, components, layout, page, styling, brand, logo, color, palette, font, typography, motion, animation, copy, button, modal, navbar, sidebar, card, form, table, chart, hero, landing, or anything that ships pixels to tomevault-web. Triggers on file edits to tomevault-web/src/**/*.tsx, tomevault-web/src/app/**, .css, tailwind config, globals.css, or any UI component file. Loads the internal tomevault-design Tome at /home/tomevault/tomevault-design/, which composes four upstream design skills (design-an-interface, impeccable, taste-skill, ui-ux-pro-max) with TomeVault-specific design context (palette, typography, brand, motion, light-dark, deploy discipline, voice, analytics). REPLACES the archived Anthropic frontend-design skill — do not re-introduce that skill. Skip ONLY for pure backend, pure pipeline, pure infra work with no UI surface. Use when this capability is needed. Use when this capability is needed. Use when this capability is needed. Use when t---# TomeVault Design (Tome Adapter)This is a thin adapter that points at the internal **tomevault-design Tome** at `/home/tomevault/tomevault-design/`. The Tome is the source of truth — this file just routes you to it and sets the working directory expectation.## What to do1. **Read the Tome's orchestrator skill first:** ``` /home/tomevault/tomevault-design/skills/tomevault-design/SKILL.md ``` Follow its instructions. It will tell you which TomeVault context files to load, which of the four bundled skills to apply, and in what order.2. **Resolve all paths in the orchestrator relative to the Tome root:** ``` /home/tomevault/tomevault-design/ ``` When the orchestrator says "load `components/.impeccable.md`", read `/home/tomevault/tomevault-design/components/.impeccable.md`. When it says "run `skills/ui-ux-pro-max/scripts/search.py`", run `/home/tomevault/tomevault-design/skills/ui-ux-pro-max/scripts/search.py`.3. **The Tome's four bundled skills are at:** - `/home/tomevault/tomevault-design/skills/design-an-interface/SKILL.md` - `/home/tomevault/tomevault-design/skills/impeccable/SKILL.md` (plus `reference/` subfiles) - `/home/tomevault/tomevault-design/skills/taste-skill/SKILL.md` - `/home/tomevault/tomevault-design/skills/ui-ux-pro-max/SKILL.md` (plus `data/`, `scripts/`, `templates/`)4. **TomeVault-specific design decisions live at:** `/home/tomevault/tomevault-design/components/` These override the bundled skills when they conflict. Palette, typography, brand, motion, light/dark, deploy discipline, analytics, voice.## When this skill firesTrigger on any of:- Frontend / UI / design work on `tomevault-web/`- Page layout, component design, form / button / modal / nav / card / table / chart- Brand, logo, favicon, color, font, motion- Visual review or polish requestsSkip when the task is pure backend, pure infra, or pure pipeline scripting with no UI surface.## Why this adapter existsThe internal Tome is a separate git repo at `/home/tomevault/tomevault-design/`. Symlinking it into `.claude/skills/` directly would break the orchestrator's relative paths. This adapter is the cheap, removable indirection: parent harness discovers `tomevault-design.md`, which redirects to the real Tome.Once we publish the Tome and decide to vendor it back into the parent (or install via a future Tome runtime), this adapter goes away.## StatusThe Tome is currently **internal and private** (no public remote, no GitHub repo). We're dogfooding it on the next handful of design surfaces. After 3 uses, we'll evaluate whether the four bundled skill choices, the orchestration routing, and the `components/` coverage are right.Don't propose changes to the Tome's `components/` files without an actual surface in front of you that needs the change — over-designing the design system pre-dogfood is exactly the failure mode we're trying to avoid.---> Source: [tomevault-io/companyos](https://github.com/tomevault-io/companyos) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/tomes](https://github.com/tomevault-io/tomes) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/tomes](https://github.com/tomevault-io/tomes) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/skills-registry](https://github.com/tomevault-io/skills-registry) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/skills-registry](https://github.com/tomevault-io/skills-registry) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/skills-registry](https://github.com/tomevault-io/skills-registry) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/skills-registry](https://github.com/tomevault-io/skills-registry) — distributed by [TomeVault](https://tomevault.io).---> Source: [tomevault-io/skills-registry](https://github.com/tomevault-io/skills-registry) — distributed by [TomeVault](https://tomevault.io).

Frequently asked questions