skills.henryzh.dev

Agent skills

A working directory of 140 skills for coding agents — Claude Code, Cursor, and friends. Each one is a single SKILL.md the agent loads on demand.

Made by me · 8

Planning & Design

Development

app-screenshots

Capture and curate screenshots of a GUI desktop app for a README, landing page, or docs.

blast-radius

Prove the runtime safety fact most likely to fail when a change crosses boundaries.

clipsmith

Plan and run a custom video-editing pipeline from a plain-language brief: highlight reels, jump-cuts, captions, beat-synced and vertical edits.

clone-site

Clone any URL into a pixel-faithful Next.js codebase: asset/CSS extraction, parallel section builders, animation porting, fidelity verification.

code-review

Review changes since a fixed point along two axes at once: repo coding standards and the originating spec.

codebase-design

Design deep modules with small interfaces, hidden complexity, and testable boundaries.

create-verification-skill

Build a reusable project-local feature map and live verification recipe.

diagnosing-bugs

Reproduce, minimize, hypothesize, instrument, fix, and regression-test difficult failures.

implement

Build a piece of work from an approved spec or set of tickets.

improve-codebase-architecture

Find deepening opportunities, informed by domain language and ADRs.

interrogate

Run an adversarial multi-agent review panel against an implementation, plan, or claim.

maintain-verification-skill

Update a project's verification skill as its surfaces and workflows drift.

make-interfaces-feel-better

Design engineering principles for polished interfaces (animations, hover states, typography, micro-interactions).

nibv0.1.1

Turn an idea or article into original hand-drawn editorial illustrations starring a recurring avatar you own.

prune

Audit a codebase for dead code, duplication, and cruft, then safely remove what no longer earns its place.

resolving-merge-conflicts

Resolve an active merge or rebase from the intent behind both sides, then finish and verify it.

scaffold-exercises

Create exercise directory structures with sections, problems, solutions, and explainers.

superdesign

Design UI, presentations, and graphics on the Superdesign canvas, including reusable systems and model comparisons.

swarm

Run isolated parallel agents with a coverage matrix, resource budget, output contracts, and a root aggregator.

tdd

Test-driven development with red-green-refactor loop.

tldraw-offline

Drive the offline tldraw canvas app: inspect, edit, arrange, connect, lint, and script `.tldraw` files.

triage

Triage a bug or issue to root cause, then plan a TDD-based fix.

ui-skills-root

Route UI work into the smallest relevant upstream UI-skill context.

Platform & Operations

Apple Platforms

Frontend Best Practices

Design & Taste

awesome-design-md

A library of 74 real-brand DESIGN.md design systems (Stripe, Apple, Vercel, Linear, …) to match a brand's look.

brandkit

Premium brand-kit image generation: logo systems, identity decks, and visual-world boards.

design-taste-frontend

Anti-slop frontend skill for landing pages, portfolios, and redesigns; infers the right design direction and ships non-templated interfaces.

design-taste-frontend-v1

The original v1 taste skill, preserved for backward compatibility.

full-output-enforcement

Override LLM truncation: enforce complete, unabridged code output and ban placeholders.

gpt-taste

Elite UX/UI + GSAP motion skill: AIDA structure, wide editorial type, bento grids, scroll-driven motion.

high-end-visual-design

High-end visual design: the exact fonts, spacing, shadows, and animations that make a site feel expensive.

image-to-code

Image-to-code for Codex: generate the design image, analyze it, then build the site to match.

imagegen-frontend-mobile

Generate premium app-native mobile screen concepts and flows inside phone mockups.

imagegen-frontend-web

Generate premium per-section website design reference images (one image per section).

industrial-brutalist-ui

Raw industrial-brutalist UI: rigid grids, extreme type contrast, analog degradation, declassified-blueprint feel.

minimalist-ui

Clean editorial interfaces: warm monochrome, typographic contrast, flat bento grids, no gradients.

redesign-existing-projects

Upgrade existing sites/apps to premium quality; audit generic AI patterns and fix without breaking functionality.

stitch-design-taste

Generate agent-friendly DESIGN.md files enforcing premium, anti-generic UI standards (for Google Stitch).

Tooling & Setup

Writing & Knowledge

Research & Reporting

Session & Output

Engineering Principles

Productivity / Weekly

Other

baseline-ui

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues.

buildspace-ci-cd

Configure and troubleshoot BuildSpace reusable GitHub Actions workflows and blocks for automated releases.

chat-adapter-imessage

Connect the Vercel AI SDK to iMessage.

create-adaptable-composable

Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter.

create-design-md

Create or update a DESIGN.md from an existing product repository or public website.

fixing-accessibility

Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors.

fixing-metadatav1.0.1

Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives.

fixing-motion-performance

Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

imessage

Build, debug, or migrate iMessage integrations with Photon.

improve-ui

Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent.

photon-cli

Use when working with the Photon CLI — the `photon` binary (alias `pho`). Reach for this skill to set up / bootstrap Photon for a user and run it yourself non-interactively (create a project, capture the id + secret, verify) — when the user says "set this up for me," that is your job to do, not hand back. Also covers running any CLI command, authenticating (device-authorization login / logout / whoami / auth status), managing projects (create, show, list, rename, regenerate the Spectrum API secret, delete, open in the dashboard), managing Spectrum resources (lines, users, platforms, profile, avatar), resolving config and environment (PHOTON_PROJECT_ID, PHOTON_TOKEN, PHOTON_API_HOST, credentials storage, multi-backend), and billing/upgrades (plans, checkout, manage, `projects upgrade`). Answers operational questions like "how many lines do I have?", "what's my project secret?", "how do I make this a business line?", and "how do I point the CLI at a different backend?". This is the entry point; the happy-path setup is right below — consult the topic files for full reference. Keywords: photon, pho, photon cli, photon-ai cli, @photon-ai/cli, photon dashboard, command line, terminal, login, device authorization, oauth device flow, logout, whoami, auth status, credentials, PHOTON_PROJECT_ID, PHOTON_TOKEN, PHOTON_API_HOST, PHOTON_CONFIG_DIR, projects, create project, bootstrap, project id, project secret, regenerate-secret, rotate secret, check-phone, upgrade, billing, plans, checkout, stripe, manage, portal, free tier, pro, business, enterprise, dedicated line, spectrum, lines, add line, imessage line, users, invite, platforms, enable, disable, profile, avatar, ping, env, config, json output, api-host, multi-backend, backend, bun, commander, eden, dashboard-api, quickstart, agent setup, automated setup, non-interactive, scriptable bootstrap, set up photon.

spectrum

Build or review messaging agents with Photon Spectrum (`spectrum-ts`).

vue-debug-guides

Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues.

vue-jsx-best-practicesv2.0.0

JSX syntax in Vue (e.g., class vs className, JSX plugin config).

vue-options-api-best-practicesv2.0.0

Vue 3 Options API style (data(), methods, this context).

vue-router-best-practicesv1.0.0

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

vue-testing-best-practicesv1.0.0

Use for Vue.js testing.