/linkyee-style-designer
Use when the user wants to design, customize, or generate a custom visual theme for their linkyee site (a Hexo-like LinkTree-style static site). Triggers on phrases like "design my linkyee page", "make a custom theme", "change the style", "I want my links to look like X",
$ npx -y skills add ZhgChgLi/linkyee --skill linkyee-style-designer --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/linkyee-style-designer
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when the user wants to design, customize, or generate a custom visual theme for their linkyee site (a Hexo-like LinkTree-style static site). Triggers on phrases like "design my linkyee page", "make a custom theme", "change the style", "I want my links to look like X",
SKILL.md
linkyee-style-designer.SKILL.mdname: linkyee-style-designer
description: Use when the user wants to design, customize, or generate a custom visual theme for their linkyee site (a Hexo-like LinkTree-style static site). Triggers on phrases like "design my linkyee page", "make a custom theme", "change the style", "I want my links to look like X", "create a new theme inspired by Y". Generates a complete theme directory under `themes/`, wires it up in `config.yml`, and verifies the build.
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
linkyee Style Designer
You help users design custom visual themes for **linkyee** — a Ruby/Liquid static site generator that builds a single-page LinkTree-style site. This skill teaches you the project's mechanics so you don't have to re-derive them, and codifies design quality standards so the output doesn't look like generic AI slop.
How linkyee builds a site
- Build command: `bundle exec ruby ./scaffold.rb`
- Output: `_output/` (committed to `gh-pages` branch by `deploy.sh` in CI)
- Theme switch: edit the `theme:` field at the top of `config.yml` to a directory name under `themes/`
- The build copies `themes/<theme>/` verbatim into `_output/`, then renders `_output/index.html` through Liquid using `config.yml` as variable scope
Theme directory contract
A theme dir **must** contain:
- `index.html` — Liquid template (see required hooks below)
- `styles.css` — the look
- `scripts.js` — can be empty, but the file must exist (default theme references it)
A theme dir **should** contain:
- `images/profile.jpeg` — sample avatar (so the theme works before the user replaces it)
- `images/favicons/favicon.ico` — at minimum a single favicon
For new themes, copy these two image assets from `themes/default/images/` rather than generating new ones.
Required Liquid variables and HTML hooks
Every `index.html` you generate **must** preserve these variables (the user's `config.yml` data flows through them):
| Variable | Purpose | |---|---| | `{{ lang }}` | `<html lang>` | | `{{ title }}` | `<title>`, OG/Twitter meta | | `{{ name }}` | Display name | | `{{ tagline }}` | Bio / description | | `{{ avatar }}` | Avatar image src | | `{{ links }}` | Loop: `{% for item in links %}{% assign link = item.link %}` then use `link.url`, `link.icon`, `link.text`, `link.title`, `link.alt`, `link.target` | | `{{ socials }}` | Loop: `{% for item in socials %}{% assign social = item.social %}` then use `social.url`, `social.icon`, `social.title`, `social.alt`, `social.target` | | `{{ footer }}` | Footer HTML | | `{{ copyright }}` | Footer copyright HTML | | `{{ last_modified_at }}` | Build timestamp meta | | `{{ google_analytics_id }}` | Wrap GA snippet in `{% if google_analytics_id %}…{% endif %}` | | `{{ vars.<PluginName> }}` | Plugin output (rare; user-controlled) |
**Required HTML structural elements** (preserve from `themes/default/index.html` so SEO/PWA features keep working):
- `<title>`, `<meta name="description">`, all `og:` and `twitter:` meta tags using the variables above
- Favicon `<link>` tags (paths point to `./images/favicons/...`)
- The GA `<script>` block wrapped in the Liquid `{% if %}` guard
- A `<script src="./scripts.js">` reference at the end of `<body>`
**Font Awesome**: link from CDN to keep theme dirs small:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
(The original `default` theme self-hosts Font Awesome; new themes use the CDN.)
Design principles — the "no AI slop" baseline
Distilled from [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design). If the user has that skill installed (`npx skills add alchaincyf/huashu-design`), defer to it for deeper design philosophy and animation/export tooling. The rules below are the minimum bar this skill enforces.
**Avoid these AI-design clichés:**
- Purple → pink gradients
- Emoji used as functional icons (Font Awesome icons exist for a reason)
- Generic "glassy gradient blob" backgrounds with no purpose
- Center-aligned everything with no hierarchy
- Drop shadows on every element
**Prefer these moves:**
- A clear typographic hierarchy: one display face for the name/headline, one body face for tagline + links
- `text-wrap: pretty` (or `balance`) on the tagline so line breaks don't look ragged
- Real units: a single accent color, deliberate whitespace, consistent border radius across all elements (don't mix 4px buttons with 24px cards)
- One signature move per theme (e.g. brutalist border-shadow, editorial drop cap, terminal scanlines) — don't pile effects
**Quality bar every theme must meet:**
- WCAG AA contrast on body text and button text
- Keyboard-accessible: visible `:focus-visible` styles on every link and button
- Respects `@media (prefers-reduced-motion: reduce)` if you use any motion (disable transitions/animations in that block)
- **Dark mode (auto-switch): see the dedicated section below — non-negotiable.**
- **Responsive (RWD): see the dedicated section below — non-negotiable, this is the single most common failure mode.**
Dark mode — required, auto-switch only
Every theme must work in both system appearances. The user does not click a button — the OS toggles between light and dark and the theme MUST follow. This is non-negotiable and a frequent source of regressions, so verify it explicitly.
**Hard rules:**
- Auto-switch via `@media (prefers-color-scheme: dark) { ... }` only. **No** JavaScript toggle. **No** `color-scheme: light only` (that disables auto-switching). **No** `<html data-theme="…">` workaround. The user's macOS / iOS / Windows / Android system setting is the source of truth.
- **Don't just invert.** Define a separate dark palette. Pure `#000` background causes banding on OLED panels and gives nothing for shadows or borders to push against — use elevated grays from the `#0d1117 / #14110d / #1c1814` family. White-on-black body text is harsh — pre
Read more
name: linkyee-style-designer description: Use when the user wants to design, customize, or generate a custom visual theme for their linkyee site (a Hexo-like LinkTree-style static site). Triggers on phrases like "design my linkyee page", "make a custom theme", "change the style", "I want my links to look like X", "create a new theme inspired by Y". Generates a complete theme directory under `themes/`, wires it up in `config.yml`, and verifies the build. allowed-tools: Read, Write, Edit, Bash, Glob, Grep
linkyee Style Designer
You help users design custom visual themes for **linkyee** — a Ruby/Liquid static site generator that builds a single-page LinkTree-style site. This skill teaches you the project's mechanics so you don't have to re-derive them, and codifies design quality standards so the output doesn't look like generic AI slop.
How linkyee builds a site
- Build command: `bundle exec ruby ./scaffold.rb`
- Output: `_output/` (committed to `gh-pages` branch by `deploy.sh` in CI)
- Theme switch: edit the `theme:` field at the top of `config.yml` to a directory name under `themes/`
- The build copies `themes/<theme>/` verbatim into `_output/`, then renders `_output/index.html` through Liquid using `config.yml` as variable scope
Theme directory contract
A theme dir **must** contain:
- `index.html` — Liquid template (see required hooks below)
- `styles.css` — the look
- `scripts.js` — can be empty, but the file must exist (default theme references it)
A theme dir **should** contain:
- `images/profile.jpeg` — sample avatar (so the theme works before the user replaces it)
- `images/favicons/favicon.ico` — at minimum a single favicon
For new themes, copy these two image assets from `themes/default/images/` rather than generating new ones.
Required Liquid variables and HTML hooks
Every `index.html` you generate **must** preserve these variables (the user's `config.yml` data flows through them):
| Variable | Purpose | |---|---| | `{{ lang }}` | `<html lang>` | | `{{ title }}` | `<title>`, OG/Twitter meta | | `{{ name }}` | Display name | | `{{ tagline }}` | Bio / description | | `{{ avatar }}` | Avatar image src | | `{{ links }}` | Loop: `{% for item in links %}{% assign link = item.link %}` then use `link.url`, `link.icon`, `link.text`, `link.title`, `link.alt`, `link.target` | | `{{ socials }}` | Loop: `{% for item in socials %}{% assign social = item.social %}` then use `social.url`, `social.icon`, `social.title`, `social.alt`, `social.target` | | `{{ footer }}` | Footer HTML | | `{{ copyright }}` | Footer copyright HTML | | `{{ last_modified_at }}` | Build timestamp meta | | `{{ google_analytics_id }}` | Wrap GA snippet in `{% if google_analytics_id %}…{% endif %}` | | `{{ vars.<PluginName> }}` | Plugin output (rare; user-controlled) |
**Required HTML structural elements** (preserve from `themes/default/index.html` so SEO/PWA features keep working):
- `<title>`, `<meta name="description">`, all `og:` and `twitter:` meta tags using the variables above
- Favicon `<link>` tags (paths point to `./images/favicons/...`)
- The GA `<script>` block wrapped in the Liquid `{% if %}` guard
- A `<script src="./scripts.js">` reference at the end of `<body>`
**Font Awesome**: link from CDN to keep theme dirs small:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
(The original `default` theme self-hosts Font Awesome; new themes use the CDN.)
Design principles — the "no AI slop" baseline
Distilled from [`alchaincyf/huashu-design`](https://github.com/alchaincyf/huashu-design). If the user has that skill installed (`npx skills add alchaincyf/huashu-design`), defer to it for deeper design philosophy and animation/export tooling. The rules below are the minimum bar this skill enforces.
**Avoid these AI-design clichés:**
- Purple → pink gradients
- Emoji used as functional icons (Font Awesome icons exist for a reason)
- Generic "glassy gradient blob" backgrounds with no purpose
- Center-aligned everything with no hierarchy
- Drop shadows on every element
**Prefer these moves:**
- A clear typographic hierarchy: one display face for the name/headline, one body face for tagline + links
- `text-wrap: pretty` (or `balance`) on the tagline so line breaks don't look ragged
- Real units: a single accent color, deliberate whitespace, consistent border radius across all elements (don't mix 4px buttons with 24px cards)
- One signature move per theme (e.g. brutalist border-shadow, editorial drop cap, terminal scanlines) — don't pile effects
**Quality bar every theme must meet:**
- WCAG AA contrast on body text and button text
- Keyboard-accessible: visible `:focus-visible` styles on every link and button
- Respects `@media (prefers-reduced-motion: reduce)` if you use any motion (disable transitions/animations in that block)
- **Dark mode (auto-switch): see the dedicated section below — non-negotiable.**
- **Responsive (RWD): see the dedicated section below — non-negotiable, this is the single most common failure mode.**
Dark mode — required, auto-switch only
Every theme must work in both system appearances. The user does not click a button — the OS toggles between light and dark and the theme MUST follow. This is non-negotiable and a frequent source of regressions, so verify it explicitly.
**Hard rules:**
- Auto-switch via `@media (prefers-color-scheme: dark) { ... }` only. **No** JavaScript toggle. **No** `color-scheme: light only` (that disables auto-switching). **No** `<html data-theme="…">` workaround. The user's macOS / iOS / Windows / Android system setting is the source of truth.
- **Don't just invert.** Define a separate dark palette. Pure `#000` background causes banding on OLED panels and gives nothing for shadows or borders to push against — use elevated grays from the `#0d1117 / #14110d / #1c1814` family. White-on-black body text is harsh — pre
A fully customized, 100% free, open-source LinkTree alternative — deployed straight to GitHub Pages. Inspired by Jekyllrb and LinkTree.
Repo: ZhgChgLi/linkyee