field-notebook-uilisted
Install: claude install-skill Tamircohen28/tamirs-superpowers
# Field-Notebook UI Skill
Generates React artifacts in a warm "engineer's field-notebook" visual system.
Every artifact you produce using this skill must feel like a page from a physical technical
notebook — structured, readable, purposeful — translated to an interactive screen.
---
## Design token system
Copy these tokens verbatim into every artifact. Never invent replacements.
```js
const T = {
// Backgrounds
bg: "#ECE9DF", // stone-paper — the page itself
surface: "#E5E1D5", // slightly darker for cards / panels
surfaceB: "#DDD9CC", // code block background
// Text
ink: "#172423", // petrol-black — primary text
inkMid: "#3D4F4E", // secondary text
inkDim: "#6E7D7C", // captions, placeholders
rule: "#C8C3B4", // dividers, borders
ruleHair: "#B8B2A2", // hairline card borders
// Primary
green: "#0F6E56", // petrol-green — primary actions, success, structural
greenFill: "#0F6E5612", // low-alpha fill
greenBg: "#0F6E5620",
// Semantic accents (use 2–3 per view, never all at once)
rust: "#B94A2C", // errors, rollback, danger
rustFill: "#B94A2C14",
amber: "#C17D11", // warnings, overrides, caution
amberFill: "#C17D1114",
purple: "#5B3F8C", // model, template, AI concepts
purpleFill:"#5B3F8C12",
blue: "#1B5FA8", // agent, commands, informational
blueFill: "#1B5FA812",
};
```
---
## Typography
Three fonts, three distinct roles. Never swap them.
|