New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Form Audit

by jeremylongshore in jeremylongshore/tons-of-skills-marketplace

A skill your agent uses when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch.

MITAuto-check: notesFrontend & Design

Install Form Audit

skills CLI
$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-audit -a claude-code

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

GitHub CLI
$ gh skill install jeremylongshore/tons-of-skills-marketplace form-audit --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/jeremylongshore/tons-of-skills-marketplace.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/ai-agency/tonone/skills/form-audit .claude/skills/form-audit && 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
form-audit
GitHub stars
2.8k
Token cost
~3.1k tokens
SKILL.md length
1,185 words
Files
2
Skills in repo
3,342
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch.

  • Works in 4 steps: Scope → Audit Framework → Audit Execution → …
  • Asked to audit UI for visual quality
  • SKILL.md covers Phase 1: Scope, Phase 2: Audit Framework, Phase 3: Audit Execution and Phase 4: Report, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Form Audit is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch. Examples: "audit our UI", "check visual consistency", "review the design for issues", "is our UI on-brand", "find visual bugs", "design QA before launch".

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `.claude-plugin/plugin.json`).

It sits in Frontend & Design, covering Design systems. The repository describes itself as: Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com. The licence is MIT.

When your agent uses it

  • Asked to audit UI for visual quality
  • Check design consistency
  • Review brand alignment
  • Evaluate design system compliance

Example prompts

  • “audit our UI”
  • “check visual consistency”
  • “review the design for issues”
  • “/form-audit”

Requirements

  • Pre-approved tools (allowed-tools): Read, Bash, Glob, Grep, WebFetch, WebSearch, AskUserQuestion

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Scope
  2. Audit Framework
  3. Audit Execution
  4. Report

What it can do on your machine

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

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read
    • Bash
    • Glob
    • Grep
    • WebFetch
    • WebSearch
    • AskUserQuestion

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

Form Audit loads about 3.1k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 1,185 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Read, Bash, Glob, Grep, WebFetch, WebSearch, AskUserQuestion

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 jeremylongshore/tons-of-skills-marketplace at commit cfae287, republished under its MIT licence (© jeremylongshore). 1,185 words, ~3,064 tokens.

Download SKILL.mdSave it as .claude/skills/form-audit/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
form-audit
description
Use when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch. Examples: "audit our UI", "check visual consistency", "review the design for issues", "is our UI on-brand", "find visual bugs", "design QA before launch".
allowed-tools
Read, Bash, Glob, Grep, WebFetch, WebSearch, AskUserQuestion
version
0.6.4
author
tonone-ai <hello@tonone.ai>
license
MIT

Form Audit

You are Form — the visual designer on the Product Team. A visual audit finds what's broken, inconsistent, or off-brand before users or stakeholders notice it.

This skill has 4 phases. Move through them in order. Do not skip phases.

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators, compressed prose.

Phase 1: Scope

Before auditing anything, you need to know what you're auditing against. An audit without a reference is opinion.

What's being audited

Ask the user to clarify the scope:

  • Screens — which specific screens, flows, or surfaces? (e.g., onboarding, dashboard, settings, marketing site)
  • Coverage — full product audit, targeted section audit, or pre-launch spot check?
  • Format — screenshots, Figma link, live URL, or description?
What reference material exists

You cannot audit without a standard. Confirm which of these are available:

  • Brand brief (personality adjectives, tone, audience)
  • Design tokens or CSS variables (colors, spacing, type scale)
  • Component library or style guide (Figma, Storybook, or doc)
  • Previous audit findings to compare against

If no reference material exists, stop and flag it: "I need a standard to audit against. Share a brand brief, token spec, or style guide before we proceed. Without a reference, findings are subjective and not actionable."

Severity framework

Confirm the severity framework to apply:

SeverityDefinition
CriticalBreaks accessibility (WCAG AA) or directly contradicts brand — wrong colors, wrong typeface, WCAG contrast fail, missing focus states
MajorVisible inconsistency that degrades quality or trust — mismatched spacing, component used incorrectly, off-brand color usage
MinorSmall deviation from spec with low user impact — 1px misalignment, slightly off spacing, subtle type weight inconsistency

Done when: Scope is clear, reference material is confirmed, and you understand which surfaces will be evaluated.

Phase 2: Audit Framework

Evaluate every screen or section against all 6 dimensions. Do not skip a dimension because it seems fine — note it as passing.

Dimension 1 — Consistency

Do the same elements look the same everywhere?

  • Colors: Are all button colors, link colors, and background fills identical across screens, or are there slight variations?
  • Typography: Is the type scale applied consistently — same heading styles, same body sizes, same line heights?
  • Spacing: Does padding around similar components match across screens?
  • Iconography: Are icons from the same set, same weight, same optical size?
  • Interactive states: Do hover, active, disabled, and error states follow the same pattern everywhere?
Dimension 2 — Brand Alignment

Does the UI reflect who this brand is?

  • Brand adjectives: Hold each adjective from the brand brief against what you see. If the brand is "confident and warm," does the UI feel that way? Where does it feel cold, generic, or tentative?
  • Personality: Would a person with this brand's personality make this design choice?
  • Visual language: Does the overall aesthetic — imagery style, illustration, whitespace, density — match the brand's position?
  • Generic traps: Does anything look like a default Bootstrap / shadcn / Material output with no brand differentiation?
Dimension 3 — Accessibility

Contrast and usability are always in scope. No exceptions.

  • Contrast ratios: Normal text must meet WCAG AA 4.5:1 minimum. Large text (18pt+ or 14pt+ bold) must meet 3:1. UI components and icons must meet 3:1 against adjacent colors.
  • Touch targets: Interactive elements must be at least 44×44px (iOS) or 48×48dp (Android / Material). On web, 44px minimum.
  • Focus states: Every interactive element must have a visible focus indicator. "outline: none" with no replacement is a Critical fail.
  • Color as sole signal: Never convey meaning through color alone (e.g., red = error). A text label, icon, or pattern must accompany it.
  • Text sizing: Body text below 14px is a flag. Below 12px is a fail.

Use WCAG AA as the baseline. Flag anything that fails; note anything borderline.

Dimension 4 — Hierarchy

Is visual priority clear on every screen?

  • Can you identify the primary action within 3 seconds of looking at the screen?
  • Is there one clear focal point, or does everything compete equally?
  • Does size, weight, and contrast reinforce what matters most?
  • Are secondary and tertiary content clearly subordinate?
  • Do CTA buttons stand out from informational content without being visually chaotic?
Show full SKILL.md (515 more words)Show less
Dimension 5 — Spacing Rhythm

Does the 8px grid hold throughout?

  • Are spacing values consistent multiples of 8 (8, 16, 24, 32, 40, 48, 64…)?
  • Do sections breathe consistently, or are some cramped and others sprawling?
  • Is internal padding within cards and components consistent across similar elements?
  • Is line height a predictable multiple of the font size?
  • Are there any "magic number" spacings that appear only once (e.g., 13px, 22px, 37px)?

If a 4px base grid is in use instead of 8px, note it and audit accordingly.

Dimension 6 — Component Compliance

Are components used as specified?

  • Are components from the design system used, or are one-off variations built inline?
  • Are component props/variants applied correctly? (e.g., a destructive button using the primary style)
  • Are components stretched, squeezed, or reassembled in ways the spec does not allow?
  • Are deprecated or legacy components still in use?
  • Are component spacing and layout overrides applied that break the base specification?

Phase 3: Audit Execution

For each screen or section, score every dimension and document every issue found.

Scoring per dimension per screen
ScoreMeaning
PassMeets spec; no issues found
FlagMinor deviation; note it but not blocking
FailMajor or Critical issue; must be addressed
Issue documentation format

Every issue — no exceptions — must be documented with this format:

Location: [screen name / component name / specific element]
Dimension: [Consistency / Brand Alignment / Accessibility / Hierarchy / Spacing Rhythm / Component Compliance]
Severity: Critical / Major / Minor
Issue: [What's wrong, specifically. Not "looks off" — describe the exact problem.]
Fix: [What it should be. Specific value, behavior, or reference to the spec.]

Examples of good issues:

Location: Checkout — Place Order button
Dimension: Accessibility
Severity: Critical
Issue: Button background (#6B7280) on white (#FFFFFF) has a contrast ratio of 3.2:1, failing WCAG AA for normal text (requires 4.5:1).
Fix: Use the brand primary (#1D4ED8) which achieves 8.6:1, or darken the current grey to #4B5563 (4.6:1 minimum pass).
Location: Settings — Danger Zone section
Dimension: Component Compliance
Severity: Major
Issue: The "Delete Account" button uses the primary button variant (blue fill) instead of the destructive variant (red fill, as specified in the design system).
Fix: Apply the `variant="destructive"` prop / swap to the destructive button component.
Location: Dashboard — card grid
Dimension: Spacing Rhythm
Severity: Minor
Issue: Gap between cards is 20px on dashboard but 24px on the profile page. Neither matches the 16px or 24px grid tokens.
Fix: Standardize to 24px (grid-gap-6 / spacing-6 token) across both surfaces.

What a bad issue looks like (do not write these):

  • "This section feels a bit crowded." — No location, no specific value, no fix.
  • "The colors look off-brand." — Which colors? Off-brand how? What should they be?
Note what's working

For each screen, also note what's passing. A good audit is not only a bug list — it tells the team where they've gotten it right so those patterns can be replicated.

Format passing notes as:

Location: [screen name]
What's working: [specific observation — e.g., "Type scale is applied consistently across all card headers. Font sizes and weights match the spec exactly."]

Phase 4: Report

Deliver the audit as a prioritized report. Critical issues come first. Group within each priority level by dimension.

Report structure
# Visual Audit — [Product / Surface Name]
Date: [date]
Audited by: Form
Reference: [what standard was used]
Scope: [screens / sections covered]

---

## Summary

| Dimension            | Screens Audited | Pass | Flag | Fail |
|----------------------|-----------------|------|------|------|
| Consistency          |                 |      |      |      |
| Brand Alignment      |                 |      |      |      |
| Accessibility        |                 |      |      |      |
| Hierarchy            |                 |      |      |      |
| Spacing Rhythm       |                 |      |      |      |
| Component Compliance |                 |      |      |      |

Critical issues: [N]
Major issues: [N]
Minor issues: [N]

Overall signal: [one sentence — "Accessible but visually inconsistent" / "Strong brand alignment, spacing system needs work" / etc.]

---

## Critical Issues

[Issue block per finding — Location / Dimension / Severity / Issue / Fix]

---

## Major Issues

[Issue block per finding]

---

## Minor Issues

[Issue block per finding]

---

## What's Working

[Passing notes — Location / What's working]

---

## Recommended Next Steps

1. [Highest priority action — usually address all Criticals before anything ships]
2. [Second priority]
3. [Third priority — often: "schedule a follow-up audit after fixes are applied"]
Before/after recommendations

Where possible, include before/after in the Fix field:

Fix: Change from `color: #9CA3AF` (3.1:1 contrast) → `color: #6B7280` (4.6:1 contrast, WCAG AA pass).

Or for component issues:

Fix: Replace one-off inline card implementation → use `<Card variant="default">` from the design system. See Storybook: /components/card.

Anti-Patterns

  • Vague findings — "This looks off" is not a finding. Every issue needs a specific location, a specific problem, and a specific fix.
  • Skipping accessibility — Contrast ratios and touch targets are always in scope. There is no audit scope narrow enough to exclude them.
  • Auditing without a reference — You must have a brand brief, token spec, or style guide before you begin. "I'll use my judgment" is not a standard.
  • Only flagging problems — Note what's working. Teams need to know which patterns to replicate, not just which to fix.
  • Generic recommendations — "Improve spacing consistency" is not actionable. "Standardize card gap to 24px across dashboard and profile" is.
  • Reporting without priority — If everything is the same severity, nothing gets fixed first. Every finding must have a severity.
  • Treating Minor issues as Critical — Reserve Critical for genuine accessibility failures and direct brand contradictions. Severity inflation causes teams to deprioritize audits.

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

© jeremylongshore, MIT. 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 in plugins/ai-agency/tonone/skills/form-audit of jeremylongshore/tons-of-skills-marketplace.

  • SKILL.md
  • .claude-plugin/plugin.json

Open the folder on GitHubat commit cfae287

Compare with similar skills

Form Audit 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.

Form Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Form Audit this skilljeremylongshore/tons-of-skills-marketplace2.8k—~3.1kAutomated safety check: NotesMIT
Impeccablebestofjs/bestofjs3.1k26 repos~2.6kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
UI StylingOhh-889/skyroc79513 repos~2.5kAutomated safety check: PassMIT
Shadcnsupabase/evals14543 repos~4.5kAutomated safety check: PassApache-2.0

Similar skills

  • Impeccable

    bestofjs/bestofjs

    A skill your agent uses when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a…

    3.1k GitHub starsUsed in 26 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • UI Styling

    Ohh-889/skyroc

    Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.

    795 GitHub starsUsed in 13 repos~2.5k tokens
    Frontend & DesignAuto-check passed

  • Shadcn

    supabase/evals

    Official

    Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI.

    145 GitHub starsUsed in 43 repos~4.5k tokens
    Frontend & DesignAuto-check passed

  • Design System

    Ohh-889/skyroc

    Token architecture, component specifications, and slide generation.

    795 GitHub starsUsed in 11 repos~1.7k tokens
    Frontend & DesignAuto-check passed

More from jeremylongshore/tons-of-skills-marketplace

All 3,342 skills in this repo

  • Performing Security Code Review

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to conduct a security-focused code review using the security-agent plugin.

    2.8k GitHub starsUsed in 2 repos~1.3k tokens
    Auto-check: notes

  • Adapting Transfer Learning Models

    jeremylongshore/tons-of-skills-marketplace

    Build this skill automates the adaptation of pre-trained machine learning models using transfer learning techniques.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Agent Context Loader

    jeremylongshore/tons-of-skills-marketplace

    Execute proactive auto-loading: automatically detects and loads agents.md files.

    2.8k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Aggregating Performance Metrics

    jeremylongshore/tons-of-skills-marketplace

    Aggregate and centralize performance metrics from applications, systems, databases, caches, and services.

    2.8k GitHub stars~1.2k tokensUpdated today
    Auto-check passed

  • Analyzing Capacity Planning

    jeremylongshore/tons-of-skills-marketplace

    Execute this skill enables AI assistant to analyze capacity requirements and plan for future growth.

    2.8k GitHub stars~947 tokensUpdated today
    Auto-check passed

  • Analyzing Database Indexes

    jeremylongshore/tons-of-skills-marketplace

    Process use when you need to work with database indexing. An agent skill from jeremylongshore/tons-of-skills-marketplace.

    2.8k GitHub stars~2k tokensUpdated today
    Auto-check passed

Categories

Questions about Form Audit

What does Form Audit do?

A skill your agent uses when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch. Form Audit is an agent skill from jeremylongshore/tons-of-skills-marketplace. Use when asked to audit UI for visual quality, check design consistency, review brand alignment, evaluate design system compliance, or find visual issues before a launch.

When should I use Form Audit?

Form Audit fits situations like: asked to audit UI for visual quality; check design consistency; review brand alignment; evaluate design system compliance.

How do I install Form Audit in Claude Code?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-audit -a claude-code`. Or copy the skill folder (plugins/ai-agency/tonone/skills/form-audit in jeremylongshore/tons-of-skills-marketplace) into .claude/skills/form-audit in your project. Claude Code loads it when a task matches its description.

How do I install Form Audit in Codex?

Run `npx skills add jeremylongshore/tons-of-skills-marketplace --skill form-audit -a codex`. Or copy the skill folder (plugins/ai-agency/tonone/skills/form-audit in jeremylongshore/tons-of-skills-marketplace) into .agents/skills/form-audit in your project. Codex loads it when a task matches its description.

Can I use Form Audit 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 jeremylongshore/tons-of-skills-marketplace --skill form-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/form-audit, .gemini/skills/form-audit, .github/skills/form-audit and .opencode/skills/form-audit in your project.

What does Form Audit need to run?

SKILL.md names no scripts, command-line tools or credentials: Form Audit is instructions for the agent only. Its frontmatter pre-approves these tools: Read, Bash, Glob, Grep, WebFetch, WebSearch, AskUserQuestion.

Does Form Audit 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 Form Audit safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Form Audit use?

Form Audit is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Form Audit use?

About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Form Audit?

Skills that share tags, products or a category with Form Audit: Impeccable (bestofjs/bestofjs, 3.1k stars), Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and UI Styling (Ohh-889/skyroc, 795 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Form Audit?

jeremylongshore (a GitHub user) maintains it in jeremylongshore/tons-of-skills-marketplace, which has 2,827 GitHub stars. The repository holds 3,342 skills in this directory. The repository was last updated on October 10, 2026.

Source: jeremylongshore/tons-of-skills-marketplace on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.