field-notebook-ui

Files (3)

• SKILL.md
• evals.json · evals/
• trigger-evals.json · evals/

SKILL.md (first lines)

# 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.

| Role | Font | Usage |
|---|---|---|
| Display | Space Grotesk | Headings, labels on cards, tab names |
| Body | Inter | Prose, descriptions, detail text |
| Mono | JetBrains Mono | Eyebrows, code, technical labels, metadata |

Always load via Google Fonts in a `useEffect`:

```js
useEffect(() => {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap";
  document.head.appendChild(link);
}, []);
```

### Eyebrow pattern

Every section opens with a spaced uppercase mono eyebrow, then a sentence-case Space Grotesk heading.

```jsx
// Eyebrow component
function Eyebrow({ children, color = T.green }) {
  return (
    <div style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: "9px",
      fontWeight: 700,
      letterSpacing: "2.5px",
      textTransform: "uppercase",
      color,
      marginBottom: "5px",
    }}>
      {children}
    </div>
  );
}

// Usage: always eyebrow THEN heading
<Eyebrow>Chart structure</Eyebrow>
<h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: "16px" }}>
  File anatomy
</h2>
```

---

## Core components

### Card with colored left border

The standard content container. Hairline border, soft radius (0 on left to meet the accent stripe).

```jsx
function Card({ accent = T.green, fill, children, style = {} }) {
  return (
    <div style={{
      background: fill || T.surface,
      border: `1px solid ${T.ruleHair}`,
      borderLeft: `3px solid ${accent}`,
      borderRadius: "0 6px 6px 0",
      padding: "12px 14px",
      ...style,
    }}>
      {children}
    </div>
  );
}
```

From Tamircohen28/tamirs-superpowers, MIT.

More from Tamircohen28/tamirs-superpowers