Claude Skills by HKamkar

Draw the site's own graphics as SVG in the lab - an icon beyond the families, a mark beside copy, an illustration, an animated logo or brand mark, a short 2D loop - starting from the artwork the site already has, looked at on the site's tokens in both schemes, at the sizes it ships and enlarged, and on a phone (`pnpm kit lab serve`), checked frame by frame and as the embedded image, shipped pre-rendered as the file a page embeds or as inline Icon data (`pnpm kit lab render`, `pnpm kit icons a...

Give a site its icons as families, not one drawing at a time - inventory every icon on the built pages beside the copy it sits with (`pnpm kit icons audit`), pick a family per kind with the owner (line icons from Lucide, other companies' marks from Simple Icons, the site's own marks generated from primitives), add them with `pnpm kit icons add` or render them with `pnpm kit icons family`, and prove the change. Use when an icon "looks like a template", "means nothing", is inconsistent with its...

Turn a screenshot claim ("unaligned", "too big", "appears too early", "looks broken", "cut off") into numbers before editing anything - the element's box, computed styles, stacking contexts, reveal state and timeline from `pnpm kit probe`, a crop from `pnpm kit shot` - so the fix follows the measurement. Use whenever the owner sends a screenshot or describes what a page looks like, and before touching any layout, spacing, size, z-index or timing.

Run a design round the way it works - the owner says what they want or what looks wrong, the agent brainstorms three to five ideas in one message, the owner picks which to build, the agent builds them as real components on a throwaway demo route (`pnpm kit demo new`) in the section's real frame with the page's real copy on the site's own theme, the current version last, the owner looks on the dev server and picks by letter or edits the pick in words, and on the owner's word the winner becomes...

Prove a change on the site's pixels with the screenshot harness - a baseline of the commit it starts from, a capture after, a compare read as a report - so a refactor shows it moved nothing and a design change shows it moved only what it meant to. Use before any merge that touches src/, styles or images, when asked to prove, verify, check parity or "make sure nothing else changed", and after a `SIZE`, `CHANGED` or `reflow` line needs reading.

Design a site built on agentic-cms, from the wireframe to a look of its own or from one look to the next - tokens first, then the chrome, then the sections - one element at a time through candidates the owner picks from, a build on the dev server the owner looks at, and a pixel proof before anything merges. Use when asked to design, restyle, theme, brand, redesign or "make it look like" anything on the site, or to start designing a site from scratch.

Draw the site's own graphics as SVG in the lab - an icon beyond the families, a mark beside copy, an illustration, an animated logo or brand mark, a short 2D loop - starting from the artwork the site already has, looked at on the site's tokens in both schemes, at the sizes it ships and enlarged, and on a phone (`pnpm kit lab serve`), checked frame by frame and as the embedded image, shipped pre-rendered as the file a page embeds or as inline Icon data (`pnpm kit lab render`, `pnpm kit icons a...

Give a site its icons as families, not one drawing at a time - inventory every icon on the built pages beside the copy it sits with (`pnpm kit icons audit`), pick a family per kind with the owner (line icons from Lucide, other companies' marks from Simple Icons, the site's own marks generated from primitives), add them with `pnpm kit icons add` or render them with `pnpm kit icons family`, and prove the change. Use when an icon "looks like a template", "means nothing", is inconsistent with its...

Turn a screenshot claim ("unaligned", "too big", "appears too early", "looks broken", "cut off") into numbers before editing anything - the element's box, computed styles, stacking contexts, reveal state and timeline from `pnpm kit probe`, a crop from `pnpm kit shot` - so the fix follows the measurement. Use whenever the owner sends a screenshot or describes what a page looks like, and before touching any layout, spacing, size, z-index or timing.

Run a design round the way it works - the owner says what they want or what looks wrong, the agent brainstorms three to five ideas in one message, the owner picks which to build, the agent builds them as real components on a throwaway demo route (`pnpm kit demo new`) in the section's real frame with the page's real copy on the site's own theme, the current version last, the owner looks on the dev server and picks by letter or edits the pick in words, and on the owner's word the winner becomes...

Prove a change on the site's pixels with the screenshot harness - a baseline of the commit it starts from, a capture after, a compare read as a report - so a refactor shows it moved nothing and a design change shows it moved only what it meant to. Use before any merge that touches src/, styles or images, when asked to prove, verify, check parity or "make sure nothing else changed", and after a `SIZE`, `CHANGED` or `reflow` line needs reading.

Design a site built on agentic-cms, from the wireframe to a look of its own or from one look to the next - tokens first, then the chrome, then the sections - one element at a time through candidates the owner picks from, a build on the dev server the owner looks at, and a pixel proof before anything merges. Use when asked to design, restyle, theme, brand, redesign or "make it look like" anything on the site, or to start designing a site from scratch.

Report the state of the site's content from the files, read-only, with nothing invented - posts by date with drafts and stale drafts, pages and when their copy changed, FAQ sets, reviews, use cases, the editorial calendar and backlog, the workshop's briefs in flight, recent changes, and the content lint's warnings by rule. Use when asked what is live, what is in draft, what is planned, what changed recently, or for a content status, blog status or editorial snapshot.

Critical editorial review of one post draft - a prose-quality critique as the reader content/VOICE.md describes (dead transitions, paragraphs that do not earn their place, ungrounded generalities, AI-tic sentences the writer rationalised, cuts the writer would not make) and a two-pass fact-check of every externally verifiable claim against primary sources, with a verdict, a confidence and an action per claim. Read-only on the draft. Use before a post ships, from write-post at its critique sta...

Add a site page as content/pages/<slug>.yaml made of existing section types, with its SEO block, structured data and OG image, then prove it with the lint, the build and a visual capture. Use when asked to add, create or scaffold a page, a landing page or a route on the site.

Add a blog post to content/blog/ as a draft, from a brief, a draft file or the workshop's drafts, with its images, frontmatter and the load-bearing body conventions, then prove it with the content lint and the build. Use when asked to add, create or import a post, bring a draft into the site, or publish a draft; to write one from scratch, write-post runs first and hands off here.

Take a post or a page off the site without breaking an indexed URL - a post becomes a draft (its URL stays indexed), a page is removed only once a redirect is in place - and prove it with the lint and the build. Use when asked to retire, unpublish, hide, take down, archive or delete a post or a page.

Review a content file against content/VOICE.md for what the lint cannot judge - claims, numbers, regulation naming, rhythm, structure - after quoting the lint's own findings on it, and report HIGH / MEDIUM / LOW with a verdict. Use when asked to brand-review, voice-check, lint, audit or read a draft or a page for voice, claims, AI-tic prose or readiness, or "is this on-brand" / "is this ready to publish".

Edit a published or draft post in content/blog/ (copy, frontmatter, images), keeping the two dates and the URL intact, then prove it with the content lint and the build. Use when asked to update, revise, fix, reword, retitle or re-image a post, or to change its SEO fields; a rewrite that needs an outline and a critique is write-post in revise mode.

Write a blog post from a brief in four stages with an approval gate after each - outline, body written straight into content/blog/<slug>.md as a draft, an independent critique by the voice-reviewer and critic agents, the SEO fields - or rewrite an existing post the same way. Use when asked to write, draft, author, compose or rewrite a post from a topic, a keyword, a brief or a calendar row; to import a finished draft, new-post is enough.