Skip to content

v3.0.0

Latest

Choose a tag to compare

@github-actions github-actions released this 26 Oct 00:42
· 1 commit to main since this release

2,144 design systems, fetched when you use one. Gemini CLI and Antigravity.
And the ten short token names deprecated in 2.x are gone
, which is why this is
a major version. Read "Breaking" below before you upgrade a project that uses
CSS built by build_tokens.

Breaking: the short token names are removed. Since 2.x,
scripts/build_tokens.mjs emitted ten short names as aliases next to the token
source's own names. It no longer does. A theme or page that still uses a name on
the left gets an undefined variable and has to use the name on the right. The
value behind each name is unchanged.

Removed Use instead
--color-action-danger --color-action-destructive
--color-action-danger-hover --color-action-destructive-hover
--color-text-error --color-feedback-error-text
--color-feedback-error --color-feedback-error-icon
--color-feedback-success --color-feedback-success-icon
--color-feedback-warning --color-feedback-warning-icon
--color-success --color-feedback-success-icon
--radius-pill --radius-full
--duration-normal --duration-base
--ease-emphasized --ease-spring

Every page, skill and script the kit ships moved first (190 renames), and the
move was checked on the render, not assumed. All 49 example pages were rendered
in light, dark and data-theme="dark", before and after the move. Every colour,
duration and easing resolved to the same value under the new name. One value
moved: the brandkit theme's --radius-pill, 980px, became --radius-full,
9999px. Every screenshot of an element it shapes came out byte-identical.
lint_intent.mjs still reads --color-action-danger, because it checks your
project, which may not have moved yet. The same table is in
workflows/governance.md, under "Removed in 3.0.0".

The library: 2,144 design systems, up from 138.

  • npm. The package ships an index, design-systems/library.json. It holds
    each spec's name, category, description, size and sha256, but no spec text.
    When a spec is needed, it is fetched from this repository at the release tag
    (ref) by npx ux-ui-skills library get <name>, or all of them by
    library pull. The fetch tries GitHub raw first, then jsDelivr. A spec whose
    bytes do not match the index is refused and nothing is written.
  • Package size. Measured with npm pack --dry-run, the 3.0.0 package is
    3,880,585 bytes packed and 6,129,907 unpacked, in 283 files. 2.10.0, as the
    registry reports it, was 6,401,000 bytes unpacked in 416 files, and it carried
    138 specs.
  • MCP server. get_design_system lists from the index. Run from npm, it
    fetches a spec the first time one is asked for, checks it the same way, and
    caches it under $XDG_CACHE_HOME (default ~/.cache)/ux-ui-agent-skills/<tag>/.
  • Plugin and git clone. Both still carry every spec locally. Nothing is
    fetched.
  • design_systems.py lists and searches the index too. show on a spec
    this install does not have yet prints the command that fetches it.

Gemini CLI and Antigravity.

  • Gemini CLI. gemini extensions install https://github.com/plugin87/ux-ui-agent-skills installs an extension:
    GEMINI.md, 23 ported skills and the MCP server. The extension is built by
    release.yml and attached to the release as its only asset. It cannot live at
    the repository root as skills/, because Claude Code would load those skills
    as well as its own (measured with claude plugin details, 2.1.310).
  • Per project. npx ux-ui-skills init --agent gemini (or --agent antigravity, which writes the same files) installs GEMINI.md,
    .agents/skills/ and every gate. Gemini CLI reads workspace skills only in a
    trusted folder: untrusted it loaded none of them, trusted all 23.
  • What porting a skill means. A skill's paths are rewritten for where it
    lands, because neither tool expands ${CLAUDE_SKILL_DIR}. critique,
    observe and scaffold-project need Claude Code, so they are left out, each
    with its reason in bin/port-skills.js.
  • What was run. The extension and the workspace install were both run
    against Gemini CLI 0.65.0: the extension validated, listed 23 skills, and its
    MCP server connected. Antigravity was not driven end to end. That half follows
    its documentation: it reads GEMINI.md and .agents/skills/, and truncates a
    rule file at 24,000 bytes. A test holds GEMINI.md under that limit.

Python scripts work on a non-UTF-8 console. Every script reads and writes
text files as UTF-8 and sets its own output to UTF-8. This matters because
findings quote what they found: an arrow, an emoji, a Thai name. On a Windows
console in a legacy code page, printing one crashed the script. The fixtures
that reproduced the crash now run under PYTHONIOENCODING=ascii in
unit/encoding.test.mjs.

No em dash or en dash, and the build holds it. Like emoji, the two dashes
are a tell of machine-written text. Every one the kit wrote is gone: docs,
skills, rules, specs, token descriptions, scripts and their output, about 1,470
lines, each sentence rewritten with a colon, a comma, parentheses or a full
stop. check_no_emoji.py already refused a dash in UI files; it now refuses one
in every file it is given, and with no arguments in every text file the
repository tracks. Exempt, each for a stated reason: the measured third-party
specs and the two files generated from them, the blind-eval output kept as a
record, and the fixture whose dash is the defect under test. Pointed at your own
project, it now fails on a dash in any file there (Markdown, JSON, CSS), not only
in UI files. The fast-gate hook hands it UI files only, as before, so what the
hook catches has not changed.

iPhone Duo. Safari gives a page on iPhone Duo one of five viewports, which
WebKit published for Safari 27.1: 382, 385, 594, 669 and 951px wide.

  • Widths. verify_responsive.mjs now tests all five by default, beside
    280, 320 and 414. Nothing checked 594 to 951 before, which is where a layout
    grows from one column to two. Every example passed at all five, at 1x and at a
    1.25x root font, before anything was changed.
  • The fold. The gate also renders each page at 951x620 half closed: two
    viewport segments, with a 40px hinge at 455 to 495px, emulated in Chrome. The
    hinge band was measured by a third party in Apple's simulator; Apple does not
    publish it. A page whose layout does not change when the fold appears is left
    alone, because Safari keeps the fold APIs behind feature flags and one layout
    across the hinge is what most visitors get. A page whose layout does change
    has claimed to know where the hinge is, and fails if any text or control sits
    on it.
  • How the gate decides. Text and controls scrolled out of an ancestor's box
    do not count, because they are not on screen. A page whose layout differs
    between two identical loads is reported as one the fold could not be judged
    on, rather than passed.
  • An example that answers the fold. examples/templates/crm.html now puts
    the pipeline on one segment and the selected deal on the other, with the gap
    between them set to the hinge.
  • A simulator. examples/foldable/index.html shows the template in all six
    poses: closed upright, closed on its side, open upright, open on its side, two
    windows, and half closed. Each pose is the real page in an iframe at its exact
    CSS width. A desktop browser has no fold to report, so in the half-closed pose
    the page is told where the fold is through the URL, and runs the same layout
    Safari would. The simulator is gated with the front door, which keeps the
    report at 52 checks.
  • Rules. .claude/rules/components.md has a new section, "Foldables: iPhone
    Duo", and the starter template carries a short version of it.
  • Not proven. The fold is emulated in Chrome, not Safari, and only the book
    pose on its side is tested. Nothing here ran on a real iPhone Duo.

The README header cannot be overwritten by the screenshot script.
screenshot_docs.mjs still rendered the old cover.html into hero.png, the
<img> fallback of the README's cover. Run once, it would have replaced the cover
with a page the README stopped showing. hero.png is now copied from
.github/brand/xias-cover-dark.png, and --check, which CI runs, fails when the
two differ. cover.html had no other use and is removed.

Not measured yet. These need the v3.0.0 tag to exist on GitHub, and are
checked after the release:

  • fetching all 2,144 specs from the tag;
  • gemini extensions install from the release asset.

So far, 138 specs fetched from v2.10.0 in 6.6 seconds, each sha256-checked.

Includes 2.10.1. Version 2.10.1 below was never published to npm. Its fixes
reach npm in this release.