---
name: tolbnet-design
description: Use this skill to generate well-branded interfaces and assets for TolbNet (personal apps by @dtolb, web + iOS), either for production or throwaway prototypes/mocks/etc. TolbNet is the brand; Mantis is the design system it uses. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

Read the `README.md` file within this skill, and explore the other available files.

Key entry points:
- `colors_and_type.css` — all design tokens (color scale, type ramp, radii, shadow, motion).
- `assets/` — TolbNet brand logo + Mantis design-system reference logos.
- `ui_kits/web/` — high-fi React/JSX recreation of a TolbNet web app using the Mantis design system (dashboard, auth, customer, kanban, invoice, mail).
- `ui_kits/ios/` — iOS companion kit echoing Mantis tokens over SF Pro / HIG patterns.
- `preview/` — small HTML cards demonstrating each token / component cluster.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and
create static HTML files for the user to view. Always start by linking `colors_and_type.css`,
adding the `.mantis` class to the root (the class name reflects the design system, not the brand),
and pulling components from `ui_kits/` rather than restyling from scratch. **The brand wordmark
is always "TolbNet"** — never put "Mantis" in user-visible UI; Mantis is the design system
behind the scenes.

If working on production code, you can copy assets and read the rules here to become an expert
in designing with this brand. Mantis is **Ant Design v5–based** — production work should
prefer the real `antd` React components and let this skill drive token values, layout density,
and copy tone.

If the user invokes this skill without any other guidance, ask them what they want to build or
design, ask some questions, and act as an expert designer who outputs HTML artifacts **or**
production code, depending on the need.