docs(readme): custom PNG buttons, remove stars badge
Co-authored-by: Cursor <cursoragent@cursor.com>
@@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
|
||||
|
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 |
|
After Width: | Height: | Size: 1.9 KiB |
@@ -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 |
|
After Width: | Height: | Size: 1.4 KiB |
@@ -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 |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@@ -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 |
@@ -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");
|
||||
}
|
||||