feat: various updates

2026-09-14 18:43:13 +08:00 · 2026-01-10 16:21:16 +01:00
parent d3712f7974
commit b4c5945e89
10 changed files with 34 additions and 28 deletions
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Julien Thibeaut
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -1,24 +1,15 @@
 # UI Skills

-![UI Skills](./assets/ui-skills.png)
+![UI Skills](./public/cover.webp)

-UI Skills is a small set of **opinionated constraints** to guide agents when building interfaces.
+UI Skills is a small set of **opinionated, evolving constraints** to guide agents when building interfaces.

 Every rule comes from things that bored me when using agents to build UI.

 Learn more about [Agent Skills](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview?utm_source=ui-skills.com)

-## Contributions
-
-Guidelines:
-
- MUST / SHOULD / NEVER only
- avoid obvious or model-native knowledge
- keep it sharp and token-efficient
- only add things that reduce AI-generated UI slop
-
 ---

 ## License

-MIT
+MIT [Julien Thibeaut](https://github.com/ibelick)
@@ -2,6 +2,7 @@
  "name": "ui-skills",
  "type": "module",
  "version": "0.0.1",
+  "license": "MIT",
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
@@ -1,9 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" rx="2" fill="#FAFAF6"/>
 </svg>
@@ -10,7 +10,7 @@ import "../styles/global.css";
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link
      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
    />
    <meta name="generator" content={Astro.generator} />
    <title>UI Skills</title>
@@ -7,7 +7,7 @@ import { CopyButton } from "../ui/copy-button";

 <Layout>
  <div
-    class="relative flex min-h-dvh flex-col items-center justify-end bg-[#fafaf5] px-4"
+    class="relative flex min-h-dvh flex-col items-center justify-end bg-[#fafaf5] px-0 sm:px-4"
  >
    <div
      class="pointer-events-none absolute inset-0 mask-b-from-80% mask-b-to-100%"
@@ -50,7 +50,7 @@ import { CopyButton } from "../ui/copy-button";
    <CopyButton content={skillsRaw} client:load />

    <div
-      class="relative mt-32 w-full max-w-3xl rounded-lg bg-white px-6 py-12 shadow-2xs ring-1 ring-black/10"
+      class="relative mt-32 w-full max-w-3xl rounded-none border-t border-b border-neutral-200 bg-white px-6 py-12 shadow-2xs sm:rounded-[8px] sm:border-none sm:shadow-2xs sm:ring-1 sm:ring-black/10"
    >
      <div class="mx-auto max-w-2xl">
        <div
@@ -62,7 +62,7 @@ import { CopyButton } from "../ui/copy-button";
    </div>

    <footer
-      class="flex items-center gap-2 py-14 text-sm font-medium text-neutral-400"
+      class="flex items-center gap-2 px-4 py-14 text-sm font-medium text-neutral-400 sm:px-0"
    >
      <a
        href="https://github.com/ibelick/ui-skills"
@@ -21,7 +21,7 @@ Opinionated constraints for building better interfaces with agents.
 ## Interaction

 - MUST use an `AlertDialog` for destructive or irreversible actions
- MUST eliminate dead click areas by increasing padding
+
 - SHOULD use structural skeletons for loading states
 - NEVER use `h-screen`, use `h-dvh`
 - MUST respect `safe-area-inset` for fixed elements
@@ -43,7 +43,6 @@ Opinionated constraints for building better interfaces with agents.

 ## Typography

- NEVER animate text properties
 - MUST use `text-balance` for headings and `text-pretty` for body/paragraphs
 - MUST use `tabular-nums` for data
 - SHOULD use `truncate` or `line-clamp` for dense UI
@@ -2,7 +2,7 @@
@plugin "@tailwindcss/typography";

@theme {
-  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
 }

@@ -20,7 +20,7 @@ export function CopyButton({ content }: CopyButtonProps) {
  };

  return (
-    <div className="sticky top-4 right-4 z-10 flex w-full items-center justify-end">
+    <div className="sticky top-4 z-10 flex w-full items-center justify-end px-4 sm:px-0">
      <button
        onClick={handleCopy}
        type="button"