docs(readme): custom PNG buttons, remove stars badge

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Leonxlnx
2026-06-17 15:38:32 +02:00
parent 09e694df73
commit 24af0b6946
12 changed files with 81 additions and 8 deletions
+5 -8
View File
@@ -10,8 +10,7 @@
<p align="center">
<a href="https://tasteskill.dev" title="Visit tasteskill.dev">
<img src="assets/taste-skill-logo.png" alt="" width="52" height="52" valign="middle" />
<img src="https://img.shields.io/badge/tasteskill.dev-000000?style=for-the-badge&labelColor=0a0a0a&color=171717" alt="tasteskill.dev" height="56" valign="middle" />
<img src="assets/readme-buttons/btn-site.png" alt="Visit tasteskill.dev" height="72" />
</a>
</p>
@@ -34,15 +33,13 @@
Portable **Agent Skills** that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes **image-generation skills** for reference boards (web, mobile, brand kits). Pair them with **ChatGPT Images** or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation.
<p align="center">
<a href="https://github.com/Leonxlnx/taste-skill/stargazers"><img src="https://img.shields.io/github/stars/Leonxlnx/taste-skill?style=flat-square&logo=github&logoColor=white&label=Stars&labelColor=000000&color=404040" alt="GitHub stars" /></a>
<a href="LICENSE"><img src="assets/readme-buttons/btn-mit.png" alt="MIT License" height="44" /></a>
&nbsp;
<a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-404040?style=flat-square&labelColor=000000" alt="MIT License" /></a>
<a href="https://github.com/vercel-labs/agent-skills"><img src="assets/readme-buttons/btn-agent-skills.png" alt="Agent Skills compatible" height="44" /></a>
&nbsp;
<a href="https://github.com/vercel-labs/agent-skills"><img src="https://img.shields.io/badge/Agent%20Skills-Compatible-404040?style=flat-square&labelColor=000000" alt="Agent Skills compatible" /></a>
<a href="#installing"><img src="assets/readme-buttons/btn-tools.png" alt="Codex, Cursor, Claude" height="44" /></a>
&nbsp;
<a href="#installing"><img src="https://img.shields.io/badge/Cursor%20%C2%B7%20Codex%20%C2%B7%20Claude-737373?style=flat-square&label=Agents&labelColor=000000" alt="Supported agents" /></a>
&nbsp;
<a href="https://www.tasteskill.dev/changelog"><img src="https://img.shields.io/badge/Changelog-Latest-525252?style=flat-square&labelColor=000000" alt="Changelog" /></a>
<a href="https://www.tasteskill.dev/changelog"><img src="assets/readme-buttons/btn-changelog.png" alt="Changelog" height="44" /></a>
</p>
## Disclaimer
Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="248" height="44" viewBox="0 0 248 44" role="img" aria-label="Agent Skills Compatible">
<rect width="248" height="44" rx="8" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.25"/>
<line x1="118" y1="10" x2="118" y2="34" stroke="#525252" stroke-width="1"/>
<text x="59" y="27" text-anchor="middle" fill="#a3a3a3" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600" letter-spacing="0.04em">AGENT SKILLS</text>
<text x="183" y="27" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600">Compatible</text>
</svg>

After

Width:  |  Height:  |  Size: 708 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="176" height="44" viewBox="0 0 176 44" role="img" aria-label="Changelog Latest">
<rect width="176" height="44" rx="8" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.25"/>
<line x1="98" y1="10" x2="98" y2="34" stroke="#525252" stroke-width="1"/>
<text x="49" y="27" text-anchor="middle" fill="#a3a3a3" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600" letter-spacing="0.04em">CHANGELOG</text>
<text x="137" y="27" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600">Latest</text>
</svg>

After

Width:  |  Height:  |  Size: 692 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="132" height="44" viewBox="0 0 132 44" role="img" aria-label="License MIT">
<rect width="132" height="44" rx="8" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.25"/>
<line x1="72" y1="10" x2="72" y2="34" stroke="#525252" stroke-width="1"/>
<text x="36" y="27" text-anchor="middle" fill="#a3a3a3" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600" letter-spacing="0.04em">LICENSE</text>
<text x="102" y="27" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600">MIT</text>
</svg>

After

Width:  |  Height:  |  Size: 682 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="292" height="44" viewBox="0 0 292 44" role="img" aria-label="Agents Cursor · Codex · Claude">
<rect width="292" height="44" rx="8" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.25"/>
<line x1="78" y1="10" x2="78" y2="34" stroke="#525252" stroke-width="1"/>
<text x="39" y="27" text-anchor="middle" fill="#a3a3a3" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600" letter-spacing="0.04em">AGENTS</text>
<text x="185" y="27" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600">Cursor · Codex · Claude</text>
</svg>

After

Width:  |  Height:  |  Size: 724 B

+47
View File
@@ -0,0 +1,47 @@
const fs = require("fs");
const path = require("path");
const { execSync } = require("child_process");
const root = path.join(__dirname, "..");
const outDir = path.join(root, "assets/readme-buttons");
fs.mkdirSync(outDir, { recursive: true });
const logoB64 = fs
.readFileSync(path.join(root, "assets/taste-skill-logo.png"))
.toString("base64");
function splitBadge(id, width, label, value, labelWidth) {
const valueWidth = width - labelWidth;
const valueX = labelWidth + valueWidth / 2;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="44" viewBox="0 0 ${width} 44" role="img" aria-label="${label} ${value}">
<rect width="${width}" height="44" rx="8" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.25"/>
<line x1="${labelWidth}" y1="10" x2="${labelWidth}" y2="34" stroke="#525252" stroke-width="1"/>
<text x="${labelWidth / 2}" y="27" text-anchor="middle" fill="#a3a3a3" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600" letter-spacing="0.04em">${label.toUpperCase()}</text>
<text x="${valueX}" y="27" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="12" font-weight="600">${value}</text>
</svg>`;
}
const siteButton = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320" height="72" viewBox="0 0 320 72" role="img" aria-label="Visit tasteskill.dev">
<rect width="320" height="72" rx="10" fill="#0a0a0a" stroke="#ffffff" stroke-width="1.5"/>
<image xlink:href="data:image/png;base64,${logoB64}" x="18" y="12" width="48" height="48" preserveAspectRatio="xMidYMid meet"/>
<text x="168" y="42" text-anchor="middle" fill="#ffffff" font-family="ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif" font-size="20" font-weight="600" letter-spacing="0.02em">tasteskill.dev</text>
</svg>`;
const badges = [
["btn-site", siteButton],
["btn-mit", splitBadge("mit", 132, "License", "MIT", 72)],
["btn-agent-skills", splitBadge("agent-skills", 248, "Agent Skills", "Compatible", 118)],
["btn-tools", splitBadge("tools", 292, "Agents", "Cursor · Codex · Claude", 78)],
["btn-changelog", splitBadge("changelog", 176, "Changelog", "Latest", 98)],
];
for (const [name, svg] of badges) {
const svgPath = path.join(outDir, `${name}.svg`);
const pngPath = path.join(outDir, `${name}.png`);
fs.writeFileSync(svgPath, svg);
execSync(`npx --yes @resvg/resvg-js-cli "${svgPath}" "${pngPath}"`, {
stdio: "inherit",
cwd: root,
});
console.log(name, fs.statSync(pngPath).size, "bytes");
}