New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Personal Website

by clacky-ai in clacky-ai/openclacky

Generate a beautiful personal homepage (linktree-style) and publish it online for the user.

MITAuto-check: notesFrontend & Design

Install Personal Website

skills CLI
$ npx skills add clacky-ai/openclacky --skill personal-website -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install clacky-ai/openclacky personal-website --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/clacky-ai/openclacky.git skills-src && mkdir -p .claude/skills && cp -r skills-src/lib/clacky/default_skills/personal-website .claude/skills/personal-website && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
personal-website
GitHub stars
1.2k
Token cost
~963 tokens
SKILL.md length
388 words
Files
2
Skills in repo
20
Repo updated
First seen
Licence
MIT

At a glance

Generate a beautiful personal homepage (linktree-style) and publish it online for the user.

  • Works in 5 steps: Read user info → Handle delete request → Design & generate the HTML → …
  • Generate my card
  • SKILL.md covers Step 1 — Read user info, Step 2 — Handle delete request, Step 3 — Design & generate the… and Step 4 — Publish, plus 1 more section
  • Runs Ruby scripts from its folder; calls ruby

What it does

Personal Website is an agent skill from clacky-ai/openclacky. Generate a beautiful personal homepage (linktree-style) and publish it online for the user. Reads user info from ~/.clacky/agents/USER.md and AI info from ~/.clacky/agents/SOUL.md. Returns a public URL the user can share. Trigger on: "profile card", "homepage", "personal page", "generate my card", "make my card", "publish my card", "生成名片", "做名片", "我的名片", "个人主页", "发布主页", "delete my card", "删除名片", "删除主页".

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.

It sits in Frontend & Design. The repository describes itself as: The most Token-efficient open-source AI Agent. The licence is MIT.

When your agent uses it

  • Generate my card
  • Publish my card

Example prompts

  • “profile card”
  • “homepage”
  • “personal page”
  • “/personal-website”

Requirements

  • Pre-approved tools (allowed-tools): Bash, Read, Write

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Read user info
  2. Handle delete request
  3. Design & generate the HTML
  4. Publish
  5. Done

What it can do on your machine

Read from SKILL.md and the folder at commit 7e41f3a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (Ruby), which the agent can run.

    Shell commands in SKILL.md call:

    • ruby

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Personal Website loads about 963 tokens when it runs. Until then it costs about 106 tokens; SKILL.md has 388 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~106
When it runs · the whole SKILL.md, loaded when a task matches
~963

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from clacky-ai/openclacky at commit 7e41f3a, republished under its MIT licence (© clacky-ai). 388 words, ~963 tokens.

Download SKILL.mdSave it as .claude/skills/personal-website/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
personal-website
description
Generate a beautiful personal homepage (linktree-style) and publish it online for the user. Reads user info from ~/.clacky/agents/USER.md and AI info from ~/.clacky/agents/SOUL.md. Returns a public URL the user can share. Trigger on: "profile card", "homepage", "personal page", "generate my card", "make my card", "publish my card", "生成名片", "做名片", "我的名片", "个人主页", "发布主页", "delete my card", "删除名片", "删除主页".
allowed-tools
Bash, Read, Write
name_zh
个人主页
description_zh
根据你的资料生成一张精美的个人主页并发布上线，得到可分享的链接。

Profile Homepage Skill

Generate a beautiful personal homepage and publish it at a public URL.

Step 1 — Read user info

Read ~/.clacky/agents/USER.md and ~/.clacky/agents/SOUL.md.

Extract everything you can find:

  • name — display name (fallback: "Friend")
  • occupation — job title or role (fallback: "")
  • bio — short personal description (fallback: "")
  • links — all social/contact links found, preserve their labels. Common ones to look for: GitHub, Twitter/X, LinkedIn, Website, Blog, Email, Instagram, YouTube, Telegram, WeChat, etc. Each link: { label, url, type } where type helps pick an icon emoji.
  • ai_name — AI assistant name from SOUL.md (fallback: "Clacky")
  • personality — professional / friendly / creative / concise (from SOUL.md, fallback: "friendly")

Step 2 — Handle delete request

If the user asked to delete their homepage:

  1. Find the skill's own directory (same folder as this SKILL.md). Call it SKILL_DIR.
  2. Run:
    bash
    ruby SKILL_DIR/publish.rb delete
    The script reads the slug automatically from ~/clacky_workspace/personal_website/token.json.
  3. Tell the user their homepage has been removed. Stop here.

Step 3 — Design & generate the HTML

Write a complete, self-contained HTML file to /tmp/profile-card.html.

You have full creative freedom on:
  • Layout, typography, spacing, color palette
  • Background (solid / gradient / subtle pattern / animated)
  • Link button style (pill / card / underline / ghost / anything)
  • Avatar treatment (large initial letter with color, emoji, geometric shape — no real image needed)
  • Animations (subtle hover effects, entrance fade, etc.)
  • Overall vibe — make it feel like a real personal brand page, not a template
Show full SKILL.md (168 more words)Show less
Hard constraints (must follow):
  • Single HTML file, zero external resources — no CDN, no Google Fonts URLs, no <img src="http...">. Use system fonts: 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', sans-serif
  • Mobile-first, responsive — <meta name="viewport"> required, works on phone screens
  • Valid HTML5
  • All links open in _blank with rel="noopener"
  • Badge somewhere subtle: made by {ai_name} personal assistant — small, not intrusive
  • Page <title>: {name}'s Homepage or similar
Link icons (use emoji prefix in button text):
TypeEmoji
github🐙
twitter/x🐦
linkedin💼
website/blog🌐
email📧
instagram📸
youtube▶️
telegram✈️
default🔗

Step 4 — Publish

Find the skill directory (same folder as this SKILL.md). Call it SKILL_DIR.

Run:

bash
ruby SKILL_DIR/publish.rb publish \
  --name "NAME" \
  --html-file /tmp/profile-card.html
  • First publish → creates new page, saves token to ~/clacky_workspace/personal_website/token.json
  • Subsequent runs → updates existing page at the same URL

Capture stdout. Extract the URL from the output line starting with ✅.

Step 5 — Done

Tell the user their homepage is live. Share the URL. Be warm and natural.

Example (adapt tone to personality):

Your homepage is live 🌟 → http://localhost:3000/~ya-fei

It's got all your links in one place. Share it anywhere.

© clacky-ai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in lib/clacky/default_skills/personal-website of clacky-ai/openclacky.

  • SKILL.md
  • publish.rb

Open the folder on GitHubat commit 7e41f3a

Compare with similar skills

Personal Website next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Personal Website compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Personal Website this skillclacky-ai/openclacky1.2k—~963Automated safety check: NotesMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Web Interface Guidelines Reviewervercel-labs/openreview1.7k97 repos~308Automated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 97 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Tailwindcss Development

    anonaddy/anonaddy

    Always invoke when the user's message includes 'tailwind' in any form.

    4.9k GitHub starsUsed in 10 repos~865 tokens
    Frontend & DesignAuto-check passed

More from clacky-ai/openclacky

All 20 skills in this repo

  • Skill Add

    clacky-ai/openclacky

    Install skills from a zip URL or local zip file path. An agent skill from clacky-ai/openclacky.

    1.2k GitHub stars~560 tokensUpdated today
    Auto-check passed

  • Media Gen

    clacky-ai/openclacky

    Generate or edit images, videos, or audio in the current task.

    1.2k GitHub stars~7.5k tokensUpdated today
    Auto-check passed

  • Browser Setup

    clacky-ai/openclacky

    Configure the browser tool for Clacky. An agent skill from clacky-ai/openclacky.

    1.2k GitHub stars~3.1k tokensUpdated today
    Auto-check: notes

  • Cron Task Creator

    clacky-ai/openclacky

    Create, manage, and run scheduled automated tasks (cron jobs) in Clacky.

    1.2k GitHub stars~2k tokensUpdated today
    Auto-check passed

  • Deploy

    clacky-ai/openclacky

    Deploy Rails applications to Railway. An agent skill from clacky-ai/openclacky.

    1.2k GitHub stars~1.9k tokensUpdated today
    Auto-check passed

  • MCP Manager

    clacky-ai/openclacky

    Manage MCP (Model Context Protocol) servers for openclacky: add, list, probe, remove, reconfigure.

    1.2k GitHub stars~3k tokensUpdated today
    Auto-check passed

Categories

Questions about Personal Website

What does Personal Website do?

Generate a beautiful personal homepage (linktree-style) and publish it online for the user. Personal Website is an agent skill from clacky-ai/openclacky. Generate a beautiful personal homepage (linktree-style) and publish it online for the user.

When should I use Personal Website?

Personal Website fits situations like: generate my card; publish my card.

How do I install Personal Website in Claude Code?

Run `npx skills add clacky-ai/openclacky --skill personal-website -a claude-code`. Or copy the skill folder (lib/clacky/default_skills/personal-website in clacky-ai/openclacky) into .claude/skills/personal-website in your project. Claude Code loads it when a task matches its description.

How do I install Personal Website in Codex?

Run `npx skills add clacky-ai/openclacky --skill personal-website -a codex`. Or copy the skill folder (lib/clacky/default_skills/personal-website in clacky-ai/openclacky) into .agents/skills/personal-website in your project. Codex loads it when a task matches its description.

Can I use Personal Website in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add clacky-ai/openclacky --skill personal-website -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/personal-website, .gemini/skills/personal-website, .github/skills/personal-website and .opencode/skills/personal-website in your project.

What does Personal Website need to run?

Going by SKILL.md and its folder, Personal Website needs Ruby for the scripts in its folder and the command-line tools its instructions call (ruby). Its frontmatter pre-approves these tools: Bash, Read, Write.

Does Personal Website access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Personal Website safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Personal Website use?

Personal Website is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Personal Website use?

About 963 tokens (SKILL.md is roughly 3.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Personal Website?

Skills that share tags, products or a category with Personal Website: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), Impeccable (bestofjs/bestofjs, 3.1k stars) and Figma Design System Builder (warpdotdev/warp, 65k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Personal Website?

clacky-ai (a GitHub organization) maintains it in clacky-ai/openclacky, which has 1,202 GitHub stars. The repository holds 20 skills in this directory. The repository was last updated on October 11, 2026.

Source: clacky-ai/openclacky on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.