Run any Skill in Manus with one click

mintral-design-system

Stars4

Forks3

UpdatedMay 7, 2026 at 20:17

Design system for Mintral — "Logística Minera", a mining-logistics control-tower web app built by MicroBoxLabs. Covers the brand (yellow + slate wordmark), Flowbite-blue product UI, Spanish/English dispatcher copy voice, and the 8-column shipping kanban workflow (driver validation → mission control → Sovos signature → monitoring → delivery → finalized). Invoke when designing anything in the Mintral product surface (kanban, trip cards, sidebar, drawer, login), the MicroBoxLabs marketing site, or any operator UI that shares this vocabulary (torre de control, faena, overlord, código negro).

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

microboxlabs

microboxlabs/modulariot

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Graphic DesignersArts, Design, Entertainment, Sports, and Media Occupations·SOC 27-1024

Market Research Analysts and Marketing SpecialistsSOC 13-1161

File Explorer

96 files

SKILL.md

readonly

name

Mintral Design System

description

Mintral Design System — Quick reference

Where things live

README.md — full context, content voice, visual foundations, iconography.
colors_and_type.css — tokens. Import first: <link rel="stylesheet" href="/colors_and_type.css">.
assets/logo-mintral.png — primary wordmark (yellow M + slate MINTRAL).
assets/logo-mintral-dark.png — inverse for dark surfaces.
assets/icons/conditions/*.svg — mining-state glyphs (código-negro, alerta-crítica, estable, en-observación, etc).
assets/icons/pin/{blue,red,yellow}.svg — map cluster pins.
assets/icons/totem/*.svg — kiosk check-in (QR, fingerprint, ID card).
ui_kits/mintral-app/ — working hi-fi recreation you can lift components from.

Commit to these tokens

Primary CTA: --blue-600 #1C64F2 (hover #1A56DB). One blue.
Ink: --fg-1 #111928. Body default: 14 px Inter 400 (dense operator UI — not 16 px).
Brand yellow #FFB017: logo mark and occasional warning. Never a button background except the "Requiere Overlord" solid badge.
Radius: 8 px on buttons / inputs / cards. Pill on badges and avatars.
Card: white + 1 px --border-subtle border + no shadow by default. Shadow only on hover / floating chrome.
Kanban columns: 280 px wide, --bg-sunken background, 12 px padding.

Voice — copy faithfully

Spanish first, English is a 1:1 translation. Sentence case on screen titles AND on status badges ("Aprobada", "Pendiente", "En curso" — never ALL CAPS).
Third-person status reports ("Trip started", "Viaje iniciado") + terse second-person imperatives ("Confirm delivery", "Return to Overlord").
Specialised vocabulary stays in Spanish even in the English UI: faena (mine site), torre de control, overlord, código negro, conductor, viaje, sovos.
No emoji. No exclamation marks. No "oops" / "let's" / "just".
Counts read "{count} visibles" / "{count} visible".

The kanban flow (shipping)

Driver/Transport Validation → Mission Control: Start Trip → SOVOS Digital Signature → Monitoring In Course → Confirm Destination Arrival → Confirm Delivery → Confirm Departure → Monitoring Finalized

Every card shows: trip code (VJ-24-8710, monospace 11 px) + status pill (top row), route title (14 px semibold), driver + truck icon (12 px), ETA/weight meta + driver avatar (11 px). Use the rose-pulse (animate-shadow-toggle) only for alerts that need operator action — nothing else pulses.

Iconography rule

UI icons → Flowbite Outline, 20 px, stroke 2. Use https://flowbite.com/icons/ or lift from the Icon object in ui_kits/mintral-app/atoms.jsx.
Domain semantics (driver states, pins, kiosk) → assets/icons/{conditions,pin,totem}/*.svg — bespoke.
Animated kiosk feedback → GIFs in assets/icons/totem/*.gif (not re-exported here; copy from source on demand).
No emoji, ever. No Unicode glyph substitution. If nothing exists, leave a 20 × 20 dashed placeholder and flag to user.

Light / dark

Dark mode is first class. [data-theme="dark"] selector in colors_and_type.css flips the neutral ramp. The login / onboarding surfaces have explicit dark treatments in Figma; the main app runs light by default.

Font substitution

Inter + DM Sans are loaded from Google Fonts. Havelock Titling Black (marketing hero only) is proprietary — currently substituted with Oswald 700. Flag to user if the hero visual matters.

More from this repository

same repository

miot-search

microboxlabs/modulariot

Resolve a free-text query typed into the ModularIoT app search box into a direct answer, a deep link to the right page, or a build request. Use when the user searches for a page or section, looks up an entity (truck, trailer, driver, task, service, expedition, booking, conversation), or asks a data question from the spotlight search.

2026-07-094

goal-loop

microboxlabs/modulariot

Drive a long, multi-stage objective to completion with the Claude Code `/goal` plugin — a Ralph-style autonomous workflow built on `/goal`'s single-condition evaluator loop instead of `/loop`+ScheduleWakeup. Use when the user wants to "drive a goal", "goal ladder", "ralph with /goal", "run the goal loop", "autonomous goal", or hands you a multi-phase brief to be executed via `/goal`. Bootstraps a goal ladder if none exists; otherwise resumes from `GOAL-LADDER.md`. For the ScheduleWakeup-based variant, use `plan-loop` instead.

2026-05-254

plan-loop

microboxlabs/modulariot

Drive a long, multi-task plan to completion via `/loop` + `ScheduleWakeup` + `Monitor` — a Ralph-style autonomous workflow that does NOT require the ralph-loop plugin. Use when the user wants to "drive a plan", "run a worklist autonomously", "iterate through phased tasks", "ralph-style loop", "long autonomous plan", or hands you a multi-phase brief that will take several hours and dozens of small commits to complete. Bootstraps a plan directory if none exists. Otherwise resumes from `RALPH-WORKLIST.md`.

2026-05-104

api-client-sync

microboxlabs/modulariot

Propagate OpenAPI spec changes through all three layers: (1) the hand-authored TypeScript client package — types, resource methods, tests, version bump; (2) the CLI package — commands, flags, table columns, tests, version bump; (3) the agent skill — SKILL.md workflows, business rules, and reference.md sections. Use when the user says the openapi.json has changed and needs to be reflected end-to-end. Triggers on phrases like "update the client from the new openapi", "sync the client with the API spec", "implement the api changes in the client", "the openapi.json changed, update the client package", "propagate the API changes", or "update all layers from the spec".

2026-05-084

miot-calendar

microboxlabs/modulariot

Query and manage ModularIoT Calendar services via the miot CLI. List calendars, check slot availability, create bookings, manage time windows, and run slot managers. Use when the user asks about schedules, appointments, bookings, availability, calendar configuration, time slots, capacity, or calendar services in their ModularIoT organization.

2026-05-084

miot-connections

microboxlabs/modulariot

Query and manage ModularIoT integration connections through the miot CLI. Use when the user asks to create or inspect external API connections, credential profiles, connection tests, operation contracts, provider auth, PostgREST/Alerce/N8N/Auth0/ECM/CUSTOM_HTTP integrations, or connection setup in a ModularIoT organization.

2026-04-294

name

Mintral Design System

description

Mintral Design System — Quick reference

Where things live

README.md — full context, content voice, visual foundations, iconography.
colors_and_type.css — tokens. Import first: <link rel="stylesheet" href="/colors_and_type.css">.
assets/logo-mintral.png — primary wordmark (yellow M + slate MINTRAL).
assets/logo-mintral-dark.png — inverse for dark surfaces.
assets/icons/conditions/*.svg — mining-state glyphs (código-negro, alerta-crítica, estable, en-observación, etc).
assets/icons/pin/{blue,red,yellow}.svg — map cluster pins.
assets/icons/totem/*.svg — kiosk check-in (QR, fingerprint, ID card).
ui_kits/mintral-app/ — working hi-fi recreation you can lift components from.

Commit to these tokens

Primary CTA: --blue-600 #1C64F2 (hover #1A56DB). One blue.
Ink: --fg-1 #111928. Body default: 14 px Inter 400 (dense operator UI — not 16 px).
Brand yellow #FFB017: logo mark and occasional warning. Never a button background except the "Requiere Overlord" solid badge.
Radius: 8 px on buttons / inputs / cards. Pill on badges and avatars.
Card: white + 1 px --border-subtle border + no shadow by default. Shadow only on hover / floating chrome.
Kanban columns: 280 px wide, --bg-sunken background, 12 px padding.

Voice — copy faithfully

Spanish first, English is a 1:1 translation. Sentence case on screen titles AND on status badges ("Aprobada", "Pendiente", "En curso" — never ALL CAPS).
Third-person status reports ("Trip started", "Viaje iniciado") + terse second-person imperatives ("Confirm delivery", "Return to Overlord").
Specialised vocabulary stays in Spanish even in the English UI: faena (mine site), torre de control, overlord, código negro, conductor, viaje, sovos.
No emoji. No exclamation marks. No "oops" / "let's" / "just".
Counts read "{count} visibles" / "{count} visible".

The kanban flow (shipping)

Iconography rule

UI icons → Flowbite Outline, 20 px, stroke 2. Use https://flowbite.com/icons/ or lift from the Icon object in ui_kits/mintral-app/atoms.jsx.
Domain semantics (driver states, pins, kiosk) → assets/icons/{conditions,pin,totem}/*.svg — bespoke.
Animated kiosk feedback → GIFs in assets/icons/totem/*.gif (not re-exported here; copy from source on demand).
No emoji, ever. No Unicode glyph substitution. If nothing exists, leave a 20 × 20 dashed placeholder and flag to user.

Light / dark

Font substitution

Inter + DM Sans are loaded from Google Fonts. Havelock Titling Black (marketing hero only) is proprietary — currently substituted with Oswald 700. Flag to user if the hero visual matters.