A frontend design and review guide for websites, dashboards, forms, and reusable interface components. It covers layout hierarchy, accessibility, typography, color, motion, and interface wording.

Use it to design, audit, or polish user interfaces and to improve their visual structure, accessibility, and interaction details.

It helps find confusing or hard-to-use interface decisions before they become finished code, while keeping the work focused on the project’s existing design direction.

impeccable — Skill for Claude Code and Codex by sjarmak

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add sjarmak/coding-agent-workflows --skill impeccable

Clone the repo

git clone --depth 1 https://github.com/sjarmak/coding-agent-workflows

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/sjarmak/coding-agent-workflows/impeccable/github.svg)](https://agentmods.dev/skills/sjarmak/coding-agent-workflows/impeccable)

Your own site

<a href="https://agentmods.dev/skills/sjarmak/coding-agent-workflows/impeccable"><img src="https://agentmods.dev/badge/skills/sjarmak/coding-agent-workflows/impeccable/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/sjarmak/coding-agent-workflows/impeccable"><img src="https://agentmods.dev/badge/skills/sjarmak/coding-agent-workflows/impeccable.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 57 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 2,900 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00057	$0.02900
Opus 5.5	$0.00023	$0.01160
Sonnet 5.5	$0.00011	$0.00580
Haiku 4.5	$0.00006	$0.00290

Measured 29d ago against content hash f2dcfa11ce3c, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

impeccable scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 29d ago.

The scan reads SKILL.md. This mod also ships 20 executable files (scripts/cleanup-deprecated.mjs, scripts/critique-storage.mjs, scripts/design-parser.mjs, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

source/skills/impeccable/SKILL.md · 166 lines

How it starts

The opening of the file, as written. The whole thing — 166 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Set IMPECCABLE_SKILL_DIR to the directory containing this file before running a bundled script, for example IMPECCABLE_SKILL_DIR=.agents/skills/impeccable. The bundled scripts use only Node.js built-ins unless a procedure names an optional project dependency. Follow the referenced procedure directly and run bundled scripts with Node.js.

Setup

Before any design work or file edits:

Load context (PRODUCT.md / DESIGN.md) via the loader script.
Identify the register and load the matching register reference (brand.md or product.md).
If the user invoked a sub-command (e.g. craft, shape, audit), load its reference file too. This is non-negotiable: craft without craft.md loaded means you'll skip the shape-and-confirm step the user expects.

Skipping these produces generic output that ignores the project.

1. Context gathering

Two files, case-insensitive. The loader looks at the project root by default and falls back to .agents/context/ and docs/ if the root is clean. Override with IMPECCABLE_CONTEXT_DIR=path/to/dir (absolute or relative to cwd).

PRODUCT.md: required. Users, brand, tone, anti-references, strategic principles.
DESIGN.md: optional, strongly recommended. Colors, typography, elevation, components.

Load both in one call:

node $IMPECCABLE_SKILL_DIR/scripts/load-context.mjs

Consume the full JSON output. Never pipe through head, tail, grep, or jq. The output's contextDir field tells you where the files were resolved from.

If the output is already in this session's conversation history, don't re-run. Exceptions requiring a fresh load: you just ran the Impeccable teach procedure or the Impeccable document procedure (they rewrite the files), or the user manually edited one.

the Impeccable live procedure already warms context via live.mjs. If you've run live.mjs, don't also run load-context.mjs this session.

Read the full file on GitHub · 166 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

29d ago First seen · 166 lines · 57 tokens per session scan A f2dcfa11ce3c

Subscribe to this mod's changes

impeccable is a skill published in the GitHub repository sjarmak/coding-agent-workflows (7 stars, last pushed 5d ago), licensed MIT. It adds 57 tokens to every session and 2,900 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-02.

CSS and styling Claude Code Design and UX Developer Workflow Frontend agents-md ai-coding-agents codex skills

baseline-ui

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

ibelick/ui-skills · 34 tokens

design-artifact

Design principles and creative direction for building HTML artifacts — pages, reports, plans, landing pages, demos, decks, and small tools. Use when creating or restyling any visual HTML deliverable and deciding its palette, type pairing, layout, theming, or overall register, or when the output must not look…

plannotator/effective-html · 72 tokens

html-prototype

Direct-invocation specialist for polished, responsive, self-contained HTML mockups and interactive prototypes grounded in the user's conversation, product context, and design language. Use when the user explicitly invokes html-prototype or the broad html skill routes a mockup or prototype request here. Do not activate…

plannotator/effective-html · 87 tokens

html

Create or redesign self-contained single-file HTML artifacts with a visual direction shaped by the user's brief, project, and subject. Use when HTML is the deliverable for a report, explainer, landing page, presentation, tool, mixed artifact, or broad request. This is the collection's only implicit router. Route clear…

plannotator/effective-html · 107 tokens

migrate

Apply DESIGN, canon, and modules to every page in the inventory, producing a deployable static HTML site. Use to migrate or render the whole captured site into the redesigned static tree ("migrate the pages", "render the migrated site", "apply the design to all pages", "build the deployable site", "convert the…

adobe/skills · 128 tokens

frontend-design

A guide for building polished web interfaces such as pages, dashboards, applications, posters, and reusable React or Vue components. It covers visual direction, layout, typography, colors, animation, accessibility, and working HTML, CSS, or JavaScript code.

xstongxue/best-skills · 103 tokens