/linkyee-style-designer

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