Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"changes": {
"crates/devup-mcp/Cargo.toml": "Patch"
},
"note": "Re-vendors the devup-ui skill from dev-five-git/devup-ui@c7295916, which answers two things readers previously worked out the hard way. `@devup-ui/reset-css` is a normalize rather than a preflight: for form controls it sets `margin: 0` and `-webkit-appearance: button`, and that second rule *preserves* the native control appearance instead of removing it, so button `padding`, `border` and `appearance` are deliberately untouched. That stays invisible until a button is sized in design units, because `box-sizing: border-box` is global and an explicit `8px` width cannot shrink below the `6 + 6 + 2 + 2 = 16px` that Chrome's default `padding: 1px 6px` and `border: 2px outset` already occupy - an 8x8 button from a design renders 16x8, which is the reset behaving as specified rather than a defect, and the document now says so with the call-site fix. The second is alpha: a token is a CSS custom property, which the `$token Scope` section already establishes, so a token at partial opacity is `color-mix()` over `var(--token)` and needs neither an alpha token nor a hardcoded copy of the colour. Without that, a screen hardcoded `#F7F3EC66` beside a `$bg` of the same value, which is not merely redundant but wrong under theming - `$bg` follows the active theme and the literal does not, so the surface stays light in dark mode. This matters here because devup-mcp vendors the document into the binary, so `devup_skills install` writes it on machines with no network, which are the machines least able to work either answer out for themselves.",
"date": "2026-09-21T23:15:00+09:00"
}
47 changes: 47 additions & 0 deletions crates/devup-mcp/src/server/skills/devup-ui/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -506,6 +506,34 @@ Do not add `include`, `optimizeDeps.exclude` or `ssr.noExternal` entries for it.
They are redundant, and writing them suggests to the next reader that a devup-ui
package needs wiring when none does.

**It is a normalize, not a preflight.** It sets `box-sizing: border-box`
globally and zeroes a few margins, but for form controls it does exactly two
things:

```ts
':where(button,input,select)': { m: 0 },
':where(button,[type=button i],[type=reset i],[type=submit i])': {
WebkitAppearance: 'button',
},
```

The second *preserves* the native control appearance rather than removing it.
Button `padding`, `border` and `appearance` are deliberately left alone, so a
button still carries the UA defaults — in Chrome `padding: 1px 6px` and
`border: 2px outset`.

That floor shows up the moment a button is sized in design units. Because
`box-sizing: border-box` is global, an explicit `8px` width cannot shrink below
the `6 + 6 + 2 + 2 = 16px` the horizontal padding and border already occupy, so
an 8x8 button from a design renders 16x8. Nothing is broken and no token is
wrong; the reset never claimed those properties.

When a button is meant to be a plain box, remove them at the call site:

```tsx
<Box as="button" appearance="none" border="none" p={0} w="8px" h="8px" />
```

## What Decides Static Extraction

One rule explains `Dynamic Values = CSS Variables`, `$token Scope` and
Expand Down Expand Up @@ -570,6 +598,25 @@ const colors = { active: 'var(--primary)' }
<Box bg={colors.active} />
```

### Token With Alpha

Because a token *is* a CSS custom property, a token at partial opacity is
`color-mix()` over `var(--token)`. There is no separate alpha token to define
and no hardcoded copy of the colour to keep in sync.

```tsx
// CORRECT - 40% of the theme's own background, still theme-reactive
<Box bg="color-mix(in srgb, var(--bg) 40%, transparent)" />

// WRONG - a literal copy, frozen at whatever the token was that day
<Box bg="#F7F3EC66" />
```

The literal is not merely redundant, it is wrong under theming: `$bg` follows
the active theme and `#F7F3EC66` does not, so the surface stays light in dark
mode. `opacity` is not a substitute either — it fades the element together
with everything inside it, while `color-mix()` fades only the paint.

## Inline Variant Pattern (Preferred)

Use inline object indexing instead of external config objects:
Expand Down
10 changes: 5 additions & 5 deletions crates/devup-mcp/src/server/skills/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
"usedFor": "The TSX devup_figma_export returns is devup-ui code. Without this the agent does not know its components are compile-time placeholders, that $token means devup.json, or that a style prop takes a responsive array.",
"repo": "dev-five-git/devup-ui",
"path": "SKILL.md",
"commit": "601dd15cd0f5d3c5b94076155a1ba25f70007c26",
"committedAt": "2026-09-15T06:31:11Z",
"commit": "c7295916e43657ee357e35f2682b78900c5232c2",
"committedAt": "2026-09-21T14:05:45Z",
"documents": [
{
"path": "SKILL.md",
"bytes": 21253,
"sha256": "2ef847f01a91a7b43d38b2d1a1072e05487624c1f38f2b8f3742ad0e82fd25a2"
"bytes": 23101,
"sha256": "12787e610016e90ef9e483bd2b82e3c9312aec4b106fed29f07c816e5b0c7fba"
}
],
"sourceUrl": "https://github.com/dev-five-git/devup-ui/blob/601dd15cd0f5d3c5b94076155a1ba25f70007c26/SKILL.md",
"sourceUrl": "https://github.com/dev-five-git/devup-ui/blob/c7295916e43657ee357e35f2682b78900c5232c2/SKILL.md",
"latestUrl": "https://github.com/dev-five-git/devup-ui/blob/HEAD/SKILL.md"
},
{
Expand Down
Loading