Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard…

UnlicenseAuto-check passedMedia & Creative

Install Payload Admin

skills CLI
$ npx skills add textura-agency/next16-claude-starter --skill payload-admin -a claude-code

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

GitHub CLI
$ gh skill install textura-agency/next16-claude-starter payload-admin --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/textura-agency/next16-claude-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/payload-admin .claude/skills/payload-admin && 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
payload-admin
GitHub stars
133
Token cost
~1.5k tokens
SKILL.md length
755 words
Files
2 (incl. references)
Skills in repo
16
Repo updated
First seen
Licence
Unlicense

At a glance

Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard…

  • Works in 7 steps: Light only (admin.theme: "light"). One… → Calm, not loud. The first skin was bold… → Nothing merges. Every tab a bordered… → …
  • Says the admin looks bad
  • SKILL.md covers Principles (each was a…, §Skin —…, §Marks, welcome, rows and §Guide — /admin/guide, plus 1 more section
  • Calls yarn, node and bash

What it does

Payload Admin is an agent skill from textura-agency/next16-claude-starter. Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard welcome card, sidebar groups in reading order, rows named by their own copy, field notes in the editor's words, and an editor's guide inside the admin (/admin/guide) with a screenshot of every screen beside the entry that edits it, plus SEO and Analytics explained. Use after payload-cms is in, or when the user says the admin…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/skin-map.md`).

It sits in Media & Creative, covering Logo and visual identity. It works with Payload CMS. The repository describes itself as: AI-first Next.js 16 starter for animation-heavy sites, wired with an Obsidian vault & Claude Code hooks. The licence is Unlicense.

When your agent uses it

  • Says the admin looks bad
  • Everything merges
  • Make it in the sites style
  • Add documentation / a guide / hints in the admin

Example prompts

  • “s own tokens (calm, light, no added motion), the site”
  • “s words, and an editor”
  • “looks bad”
  • “/payload-admin”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

  1. Light only (admin.theme: "light"). One theme done well beats two half-done.
  2. Calm, not loud. The first skin was bold and "hurt the eyes"; the one that
  3. Nothing merges. Every tab a bordered pill, nested groups as soft panels
  4. Hover = colour only. No fills, underlines or shadows; **no transitions or
  5. The site's marks: wordmark on the login card, favicon in the nav.
  6. The sidebar is the site: Home page (numbered, scroll order) → Site →
  7. The editor's words everywhere: labels by what the reader sees

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • yarn
    • node
    • bash

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

  • Network

    No URLs in SKILL.md. Its commands use yarn, which can reach the network depending on how they are called.

    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

Payload Admin loads about 1.5k tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 178 tokens; SKILL.md has 755 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~178
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.2k

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 passed

The automated check found no risky patterns in SKILL.md.

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 textura-agency/next16-claude-starter at commit 6c6edf9, republished under its Unlicense licence (© textura-agency). 755 words, ~1,534 tokens.

Download SKILL.mdSave it as .claude/skills/payload-admin/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
payload-admin
description
Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard welcome card, sidebar groups in reading order, rows named by their own copy, field notes in the editor's words, and an editor's guide inside the admin (/admin/guide) with a screenshot of every screen beside the entry that edits it, plus SEO and Analytics explained. Use after `payload-cms` is in, or when the user says the admin "looks bad", "hurts the eyes", "everything merges", "make it in the site's style", "add documentation / a guide / hints in the admin", "the client won't understand the admin".

The admin's look and its guide

An owner judges the CMS in the first minute: does it look like their site, and can they find the hero? This skill is how the reference site's admin went from "it hurts the eyes, everything merges" to a quiet, branded tool with its own manual. Kits: admin and guide (bash .claude/skills/payload-cms/scaffold.sh admin guide).

Principles (each was a correction from the owner)

  1. Light only (admin.theme: "light"). One theme done well beats two half-done.
  2. Calm, not loud. The first skin was bold and "hurt the eyes"; the one that stuck: pale ground, one white panel per screen, 13px muted labels, headings that step down by size not weight, the accent only on what can be pressed.
  3. Nothing merges. Every tab a bordered pill, nested groups as soft panels with small headings (not a second big title on a vertical rule), array rows in one rounded clipped frame (Payload's own 4px corners otherwise show through).
  4. Hover = colour only. No fills, underlines or shadows; no transitions or animation added (starter motion rules). Payload's own are kept.
  5. The site's marks: wordmark on the login card, favicon in the nav.
  6. The sidebar is the site: Home page (numbered, scroll order) → Site → Pages & documents → Insights → Help → Settings last.
  7. The editor's words everywhere: labels by what the reader sees ("Accent (highlighted part)"), a one-line note per global with the rule that matters before Save, row labels from the row's own copy ("03 · Design & ID").

§Skin — src/app/(payload)/custom.css

  1. Fill the Tier 1 block at the top (--admin-surface/ground/field/line/ navy/ink/muted/accent/accent-strong/accent-deep/good/bad/live) from the site's --raw-* values in globals.css. Those are the only raw colours in the file; Payload's whole --color-base-* ramp and --color-success-* are mixed from them (color-mix, oklab). --admin-ground is a paler tint of the site's ground — the site's own ground is usually too strong for a full-screen form.
  2. Fonts: add @font-face blocks for the site's self-hosted files (family "Site Sans") — a url() that doesn't resolve fails the build, so the kit ships none and falls back to the system stack.
  3. Unlayered rules beat Payload's @layer — no !important needed.
  4. Settings (users, media) is Payload's first group because collections list before globals; the skin moves it last with flex order. Keep that block.
  5. Check contrast: --admin-muted on --admin-surface ≥ 4.5:1.

Selector map and what each block targets: references/skin-map.md.

§Marks, welcome, rows

  • graphics.tsx — import the wordmark's SVG path from the site's component (export it once; never a second copy). Falls back to the brand name as text.
  • welcome.tsx — above the dashboard: what this admin is for, "Open the site ↗", "Read the guide". Say what stays in code.
  • row-label.tsx — NAME_KEYS (title, name, label, text, lead…): extend with the keys this project's cards use for their name.
  • payload.config.ts: meta.titleSuffix: " — <Brand> Content", the favicon, i18n English only (unless the owner asks otherwise — ask once).
Show full SKILL.md (295 more words)Show less

§Guide — /admin/guide

The editor's documentation, inside the admin, read-only, no client code. Build it last: it documents the final sidebar.

  1. guide-content.tsx — plain data:
    • INTRO: how the admin works (sidebar = site; Save shows at once; blank is safe; what stays in code; no version history — retype to undo).
    • CHAPTERS: one entry per sidebar item, in sidebar order — where (the sidebar path), title (what they see), shot, fields (what changes, in the screen's words), notes (rules: a count the layout needs, links set in code, {name} placeholders, "keep it short — it paints with the first screen").
    • SEO (tab by tab, field by field, where each shows), ANALYTICS (number by number, how a visitor is counted, what is not stored), SETTINGS.
  2. Screenshots — the site's own screens, one per entry:
    bash
    yarn build && yarn start -p 4500
    node tools/qa/admin-shots.mjs --url http://localhost:4500/ \
      --shots "hero=#hero,header=header,footer=footer,not-found=/404" --save public/admin-guide
    1440 × 900, a person's UA (not the robot form), cookie banner and dev overlays hidden, each section scrolled into view and settled, 1200 px WebP (~40 KB). Look at every shot. Re-shoot when a screen changes — the guide shows whatever is in the folder.
  3. guide-body.tsx imports nothing of Payload's, so it can be rendered alone (that's how it is checked — Payload's template needs a signed-in user). guide-view.tsx wraps it in DefaultTemplate; guide-nav.tsx adds Help → Guide to the nav. yarn generate:importmap after adding them.
  4. next/image serves the WebPs — the admin pays for thumbnails.

Prove it

  • /admin/login, dashboard, a global with arrays + tabs (SEO), Media, Analytics, Guide — at 1440 and at 390 wide. Screenshot each and look.
  • Nothing merges: every tab, group and row has a visible edge.
  • Keyboard: focus ring visible (--accessibility-outline → accent).
  • yarn lint, yarn build.
  • After a Payload upgrade: the same tour — class names are not a public API.

© textura-agency, Unlicense. 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 (references) in .claude/skills/payload-admin of textura-agency/next16-claude-starter.

  • SKILL.md
  • references/skin-map.md

Open the folder on GitHubat commit 6c6edf9

Compare with similar skills

Payload Admin 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.

Payload Admin compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Payload Admin this skilltextura-agency/next16-claude-starter133—~1.5kAutomated safety check: PassUnlicense
Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill134k1 repos~3.5kAutomated safety check: PassMIT
Anthropic Brand Stylinganthropics/skills180k30 repos~559Automated safety check: PassApache-2.0
Logo Designkaankiziltug/logo-design-skill2.5k—~4.4kAutomated safety check: PassMIT
Logo Generatorop7418/logo-generator-skill2.2k—~1.8kAutomated safety check: NotesNone
Web Asset Generatoralonw0/web-asset-generator5141 repos~6.6kAutomated safety check: PassMIT

Similar skills

  • Brand and Design Toolkit

    nextlevelbuilder/ui-ux-pro-max-skill

    Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.

    134k GitHub starsUsed in 1 repo~3.5k tokens
    Media & CreativeAuto-check passed
  • Anthropic Brand Styling

    anthropics/skills

    Official

    Applies Anthropic's brand colors and fonts to artifacts such as PowerPoint slides, using fixed hex values for text and accents, Poppins headings and Lora body text.

    180k GitHub starsUsed in 30 repos~559 tokens
    Media & CreativeAuto-check passed
  • Logo Design

    kaankiziltug/logo-design-skill

    Professional logo and brand-mark design, from brief to production files.

    2.5k GitHub stars~4.4k tokensUpdated 10 days ago
    Media & CreativeAuto-check passed
  • Logo Generator

    op7418/logo-generator-skill

    Generate professional SVG logos and high-end showcase images.

    2.2k GitHub stars~1.8k tokensUpdated 5 mo ago
    Media & CreativeAuto-check: notes
  • Web Asset Generator

    alonw0/web-asset-generator

    Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.

    514 GitHub starsUsed in 1 repo~6.6k tokens
    Media & CreativeAuto-check passed
  • Image Generation

    onyx-dot-app/onyx

    Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via onyx-cli image.

    32k GitHub starsUsed in 1 repo~1.7k tokens
    Media & CreativeAuto-check passed

More from textura-agency/next16-claude-starter

All 16 skills in this repo
  • Mobile Device QA

    textura-agency/next16-claude-starter

    Make a site behave on real phones — the defects no Lighthouse run or headless scroll test sees, learned from site owners reviewing production sites on an iPhone.

    133 GitHub stars~5k tokensUpdated 3 days ago
    Auto-check: notes
  • Optimize Load

    textura-agency/next16-claude-starter

    Get a page into Lighthouse's green zone on desktop and mobile, for people AND for the robot form crawlers get — build it, audit all four categories (Performance, Accessibility, Best Practices, SEO)…

    133 GitHub stars~4.6k tokensUpdated 3 days ago
    Auto-check: notes
  • Optimize Performance

    textura-agency/next16-claude-starter

    Make a page in this starter actually smooth — build it, scroll it in real Chrome on PC and on an emulated phone, fix what the measurement blames, re-measure to prove it.

    133 GitHub stars~3.7k tokensUpdated 3 days ago
    Auto-check: notes
  • Payload Cms

    textura-agency/next16-claude-starter

    Put a Payload CMS admin on a site built from this starter — every visible string and content photo editable, derived from the site's own content objects with the code's copy as the fallback, a…

    133 GitHub stars~3.7k tokensUpdated 3 days ago
    Auto-check: notes
  • Aeo Visibility

    textura-agency/next16-claude-starter

    Answer Engine Optimisation — make the site citable by ChatGPT, Claude, Perplexity, Gemini and AI Overviews.

    133 GitHub stars~1.4k tokensUpdated 3 days ago
    Auto-check: notes
  • Figma To Section

    textura-agency/next16-claude-starter

    Turn a Figma frame or node into components in this starter — the MCP call order, recording node IDs so later passes can re-fetch, downloading and verifying assets, mapping design values onto the…

    133 GitHub stars~1.4k tokensUpdated 3 days ago
    Auto-check: notes

Works with

Questions about Payload Admin

What does Payload Admin do?

Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard…. Payload Admin is an agent skill from textura-agency/next16-claude-starter. Make a Payload admin feel like part of the site and explain itself — the skin re-tinted from the site's own tokens (calm, light, no added motion), the site's wordmark and favicon, a dashboard welcome card, sidebar groups in reading order, rows named by their own copy, field notes in the editor's words, and an editor's guide inside the admin (/admin/guide) with a screenshot of every screen beside the entry that edits it, plus SEO and Analytics explained.

When should I use Payload Admin?

Payload Admin fits situations like: says the admin looks bad; everything merges; make it in the sites style; add documentation / a guide / hints in the admin.

How do I install Payload Admin in Claude Code?

Run `npx skills add textura-agency/next16-claude-starter --skill payload-admin -a claude-code`. Or copy the skill folder (.claude/skills/payload-admin in textura-agency/next16-claude-starter) into .claude/skills/payload-admin in your project. Claude Code loads it when a task matches its description.

How do I install Payload Admin in Codex?

Run `npx skills add textura-agency/next16-claude-starter --skill payload-admin -a codex`. Or copy the skill folder (.claude/skills/payload-admin in textura-agency/next16-claude-starter) into .agents/skills/payload-admin in your project. Codex loads it when a task matches its description.

Can I use Payload Admin 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 textura-agency/next16-claude-starter --skill payload-admin -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/payload-admin, .gemini/skills/payload-admin, .github/skills/payload-admin and .opencode/skills/payload-admin in your project.

What does Payload Admin need to run?

Going by SKILL.md and its folder, Payload Admin needs the command-line tools its instructions call (yarn, node and bash).

Does Payload Admin 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 Payload Admin safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Payload Admin use?

Payload Admin is published under the Unlicense licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Payload Admin use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 703 tokens, read only when the agent opens those files.

What are the alternatives to Payload Admin?

Skills that share tags, products or a category with Payload Admin: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Anthropic Brand Styling (anthropics/skills, 180k stars), Logo Design (kaankiziltug/logo-design-skill, 2.5k stars) and Logo Generator (op7418/logo-generator-skill, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Payload Admin?

textura-agency (a GitHub organization) maintains it in textura-agency/next16-claude-starter, which has 133 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 7, 2026.

Source: textura-agency/next16-claude-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.