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

Improve a Front-End Checklist Rule

by thedaviddias in thedaviddias/Front-End-Checklist

Scores and rewrites a Front-End Checklist rule MDX file against a scored quality rubric, replacing generic stub prompts with specific, actionable ones.

MITAuto-check passedFrontend & Design

Install Improve a Front-End Checklist Rule

skills CLI
$ npx skills add thedaviddias/Front-End-Checklist --skill improve-rule -a claude-code

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

GitHub CLI
$ gh skill install thedaviddias/Front-End-Checklist improve-rule --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/thedaviddias/Front-End-Checklist.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/improve-rule .claude/skills/improve-rule && 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
improve-rule
GitHub stars
74k
Token cost
~1.3k tokens
SKILL.md length
656 words
Files
2 (incl. references)
Skills in repo
390
Repo updated
First seen
Licence
MIT

At a glance

Scores and rewrites a Front-End Checklist rule MDX file against a scored quality rubric, replacing generic stub prompts with specific, actionable ones.

  • Works in 8 steps: Fix stub prompts first — they have the… → Add aiContext — one sentence: "Applies… → Add/expand tldr — 3 bullets minimum,… → …
  • Raising a Front-End Checklist rule's quality score above the passing threshold
  • SKILL.md covers Quality Dimensions, Stub Prompts — What to Avoid, Check and Fix, plus 2 more sections
  • Calls pnpm

What it does

Each rule file is scored out of a 100-point base across dimensions such as prompts.check, prompts.fix and prompts.explain worth 10 points each, tldr and whyItMatters worth 5 points each, aiContext for stating when an agent should apply the rule, relatedRules for at least two linked slugs with reasons, codeExamples for at least three annotated right-or-wrong code blocks, and bodyDepth for at least 300 words of real content rather than a stub, with a passing target of 50 or more. Generic stub prompts that only restate the rule title are flagged as low quality and must be replaced with instructions naming exact HTML attributes, CSS properties or JavaScript patterns.

The agent runs pnpm score:rules against a specific rule file to see its current score and which dimensions are failing, then pnpm validate:rule-structure to check that the body follows the required section order: an intro paragraph, a Code Example section, a Why It Matters section, optional guidance, and a final Verification section. A newer Rule Contract V2 adds conditional sections such as Exceptions for caveats and false positives, and separate Automated Checks and Manual Checks subsections inside Verification when both apply.

When your agent uses it

  • Raising a Front-End Checklist rule's quality score above the passing threshold
  • Rewriting a generic stub prompt into a specific, actionable instruction
  • Adding missing code examples or related-rules links to a checklist rule

Example prompts

  • “Score packages/content/rules/en/accessibility/alt-text.mdx and tell me what's failing.”
  • “Rewrite the stub prompts in this rule file to name specific CSS properties.”
  • “Validate the section structure of this rule and fix any ordering problems.”

Requirements

  • Node.js with pnpm for the score:rules and validate:rule-structure scripts

Workflow steps

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

  1. Fix stub prompts first — they have the highest point value (30 pts combined)
  2. Add aiContext — one sentence: "Applies to any HTML page with [X]" or "Use when reviewing [Y] in [Z] context"
  3. Add/expand tldr — 3 bullets minimum, each ending with a concrete rule of thumb
  4. Enrich body content — add ✅ good example and ❌ bad example code blocks for each concept
  5. Add relatedRules — link 2+ rules with a reason explaining the connection
  6. Add resources — MDN docs, WCAG success criteria, relevant articles
  7. Fix structure lint issues — rename final Testing/Checklist-style headings to ## Verification, keep optional guidance between Why It…
  8. Add contract clarity where needed — use Exceptions, verification split, and standards/support notes only when the rule type actually…

What it can do on your machine

Read from SKILL.md and the folder at commit e8d14d0. 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:

    • pnpm

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

  • Network

    Links to these hosts (documentation or services it may open):

    • frontendchecklist.io

    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

Improve a Front-End Checklist Rule loads about 1.3k tokens when it runs, and up to ~2.2k if it reads all its reference files. Until then it costs about 47 tokens; SKILL.md has 656 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k
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 thedaviddias/Front-End-Checklist at commit e8d14d0, republished under its MIT licence (© thedaviddias). 656 words, ~1,311 tokens.

Download SKILL.mdSave it as .claude/skills/improve-rule/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
improve-rule
description
Use when reviewing or improving a Front-End Checklist rule MDX file to raise its quality score, fix stub prompts, add missing fields, or enrich content with real code examples.
metadata.category
meta
metadata.source
frontendchecklist.io
metadata.url
https://frontendchecklist.io

Improve a Front-End Checklist Rule

This skill helps you review and improve the quality of rule MDX files in the Front-End Checklist project. Use it to fix stub content, write better AI prompts, and enrich rules so they score well against the quality rubric.

Quality Dimensions

Every rule is scored across these dimensions (see references/scoring-rubric.md for full details):

DimensionMaxWhat "good" looks like
prompts.check10Specific audit instruction, not generic
prompts.fix10Actionable fix steps with CSS/HTML/JS specifics
prompts.explain10Explains the why, not just restates the title
tldr53+ concise bullets, each a standalone takeaway
whyItMatters51–2 sentences, concrete user impact
aiContext5"Applies to…" — when should an agent use this?
relatedRules52+ slug + reason pairs
codeExamples103+ ✅/❌ annotated blocks in the body
bodyDepth10300+ words, not a stub
resources5External links (MDN, WCAG, articles)
prompts.codeReview5Code review workflow prompt (optional)

Base score: 100 with additional conditional V2 points. Target: ≥ 50 (passing).

Stub Prompts — What to Avoid

These patterns are automatically detected as low-quality:

  • "Verify if the project adheres to: [Rule Title]"
  • "Update the codebase to align with: [Rule Title]"
  • "Explain the importance of [Rule Title]"

Replace them with specific, actionable instructions that name the exact HTML attributes, CSS properties, or JavaScript patterns involved.

Check

Run the quality scorer on a specific rule to see its current score:

bash
pnpm score:rules packages/content/rules/en/{category}/{slug}.mdx

Then open the MDX file and identify which dimensions are failing.

Run the structure validator as well:

bash
pnpm validate:rule-structure packages/content/rules/en/{category}/{slug}.mdx

The rule body must follow this order:

  • intro paragraph before any H2
  • ## Code Example or ## Code Examples
  • ## Why It Matters
  • optional guidance sections
  • final ## Verification

Rule Contract V2 adds conditional sections:

  • ## Exceptions for false positives, caveats, or valid exceptions
  • ### Automated Checks and ### Manual Checks inside ## Verification when both matter
  • ## Browser Support, ## Support Notes, or ## Standards when compatibility or compliance changes implementation decisions

Use the repo browser policy plus package-backed compatibility data for browser-support notes. Do not guess support ranges from memory.

Show full SKILL.md (331 more words)Show less

Fix

When improving a rule:

  1. Fix stub prompts first — they have the highest point value (30 pts combined)

    • check: name the exact attributes/patterns to audit
    • fix: give step-by-step remediation with code snippets
    • explain: explain the user impact, not just the technical detail

  2. Add aiContext — one sentence: "Applies to any HTML page with [X]" or "Use when reviewing [Y] in [Z] context"

  3. Add/expand tldr — 3 bullets minimum, each ending with a concrete rule of thumb

  4. Enrich body content — add ✅ good example and ❌ bad example code blocks for each concept

  5. Add relatedRules — link 2+ rules with a reason explaining the connection

  6. Add resources — MDN docs, WCAG success criteria, relevant articles

  7. Fix structure lint issues — rename final Testing/Checklist-style headings to ## Verification, keep optional guidance between Why It Matters and Verification, and never place H2 sections after Verification

  8. Add contract clarity where needed — use Exceptions, verification split, and standards/support notes only when the rule type actually benefits from them

Explain

The quality score is a proxy for how useful the rule is to both human developers and AI agents.

  • A rule with stub prompts gives Claude generic instructions — the AI can't provide targeted help
  • A rule without code examples is hard to learn from
  • A rule without aiContext won't trigger at the right moment when used as a Claude Code skill
  • A rule without relatedRules is an island — agents can't traverse the knowledge graph

High-quality rules become high-quality skills that Claude can use proactively and precisely.

Code Review

When reviewing a PR that adds or modifies rule MDX files, check:

  • No stub prompts (grep for "Verify if the project adheres to")
  • At least 3 tldr bullets
  • whyItMatters is specific (mentions user impact, not just "improves quality")
  • Body has at least one ✅ and one ❌ code example
  • ## Verification is the final H2 and ## Why It Matters appears before it
  • pnpm validate:rule-structure {file} passes
  • Score is ≥ 50: pnpm score:rules {file}

See references/scoring-rubric.md for the full scoring specification. Rule page: https://frontendchecklist.io

© thedaviddias, 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 (references) in skills/improve-rule of thedaviddias/Front-End-Checklist.

  • SKILL.md
  • references/scoring-rubric.md

Open the folder on GitHubat commit e8d14d0

Compare with similar skills

Improve a Front-End Checklist Rule 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.

Improve a Front-End Checklist Rule compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Improve a Front-End Checklist Rule this skillthedaviddias/Front-End-Checklist74k—~1.3kAutomated safety check: PassMIT
Migrate Content Iadocker/docs4.7k—~5.1kAutomated safety check: PassApache-2.0
Markdown Paged GuideBigStrongSun/ccswitchmulti121—~589Automated safety check: PassMIT
Fumadocsbetter-notify/better-notify313—~2.3kAutomated safety check: PassMIT
Using Docs Kitlobehub/lobe-ui2.2k—~2.8kAutomated safety check: PassMIT
Article Iconssmallnest/goal-workflow291—~1.6kAutomated safety check: PassMIT

Similar skills

  • Migrate Content Ia

    docker/docs

    Official

    Handle Hugo docs information-architecture moves: discover old vs new URLs, add front matter aliases (Phase 1), update in-repo links (Phase 2), interactive List 2 resolution and fragment validation…

    4.7k GitHub stars~5.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Markdown Paged Guide

    BigStrongSun/ccswitchmulti

    Render Markdown manuals into polished per-page PNG images and PDF deliverables.

    121 GitHub stars~589 tokensUpdated 6 days ago
    Documents & OfficeAuto-check passed

  • Fumadocs

    better-notify/better-notify

    A skill your agent uses when writing MDX documentation pages for a Fumadocs project — frontmatter, meta.json, page ordering, and fumadocs-ui React components available inside MDX content.

    313 GitHub stars~2.3k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Using Docs Kit

    lobehub/lobe-ui

    Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).

    2.2k GitHub stars~2.8k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Article Icons

    smallnest/goal-workflow

    Illustrate an article (Markdown, HTML, etc.) with animated-style icons from itshover.com/icons.

    291 GitHub stars~1.6k tokensUpdated 27 days ago
    Frontend & DesignAuto-check passed

  • Cookbook Add Model

    sgl-project/sglang

    Add a new model to the SGLang Cookbook (docs/, Mintlify), config-driven format — instantiate the model-agnostic template into a per-model config (+ benchmarks) JSX under src/snippets/configs/, an…

    37k GitHub starsUsed in 2 repos~4k tokens
    Frontend & DesignAuto-check passed

More from thedaviddias/Front-End-Checklist

All 390 skills in this repo

  • Content Dates Audit

    thedaviddias/Front-End-Checklist

    Audits article and blog pages for visible publish dates, Article JSON-LD with datePublished and dateModified, and Open Graph time tags, then fixes what is missing.

    74k GitHub stars~691 tokensUpdated 4 days ago
    Auto-check passed

  • FAQPage Schema Markup

    thedaviddias/Front-End-Checklist

    Adds, checks and fixes FAQPage JSON-LD on pages with visible question-and-answer sections so it matches what readers see and can qualify for rich results.

    74k GitHub stars~774 tokensUpdated 4 days ago
    Auto-check passed

  • Favicon Audit and Setup

    thedaviddias/Front-End-Checklist

    Checks that a site's favicon is linked, reachable and large enough for Google search results, and sets up ICO, SVG and Apple touch icon files when they are missing.

    74k GitHub stars~731 tokensUpdated 4 days ago
    Auto-check passed

  • Content Freshness Signals

    thedaviddias/Front-End-Checklist

    Audits article pages for freshness signals, covering the Last-Modified header, Article JSON-LD dateModified and a visible last-updated date, and fixes mismatches.

    74k GitHub stars~741 tokensUpdated 4 days ago
    Auto-check passed

  • Geo Meta Tags Audit

    thedaviddias/Front-End-Checklist

    Audits and fixes geo.region, geo.placename and geo.position meta tags on regional pages, noting where they help (Bing) and where they do not (Google).

    74k GitHub stars~763 tokensUpdated 4 days ago
    Auto-check passed

  • Front-End Checklist npm Package Finder

    thedaviddias/Front-End-Checklist

    Finds two or three well-maintained npm packages for a Front-End Checklist rule, checks download and release thresholds, and adds them to the rule's frontmatter.

    74k GitHub stars~989 tokensUpdated 4 days ago
    Auto-check passed

Categories

Questions about Improve a Front-End Checklist Rule

What does Improve a Front-End Checklist Rule do?

Scores and rewrites a Front-End Checklist rule MDX file against a scored quality rubric, replacing generic stub prompts with specific, actionable ones. explain worth 10 points each, tldr and whyItMatters worth 5 points each, aiContext for stating when an agent should apply the rule, relatedRules for at least two linked slugs with reasons, codeExamples for at least three annotated right-or-wrong code blocks, and bodyDepth for at least 300 words of real content rather than a stub, with a passing target of 50 or more. Generic stub prompts that only restate the rule title are flagged as low quality and must be replaced with instructions naming exact HTML attributes, CSS properties or JavaScript patterns.

When should I use Improve a Front-End Checklist Rule?

Improve a Front-End Checklist Rule fits situations like: raising a Front-End Checklist rule's quality score above the passing threshold; rewriting a generic stub prompt into a specific, actionable instruction; adding missing code examples or related-rules links to a checklist rule.

How do I install Improve a Front-End Checklist Rule in Claude Code?

Run `npx skills add thedaviddias/Front-End-Checklist --skill improve-rule -a claude-code`. Or copy the skill folder (skills/improve-rule in thedaviddias/Front-End-Checklist) into .claude/skills/improve-rule in your project. Claude Code loads it when a task matches its description.

How do I install Improve a Front-End Checklist Rule in Codex?

Run `npx skills add thedaviddias/Front-End-Checklist --skill improve-rule -a codex`. Or copy the skill folder (skills/improve-rule in thedaviddias/Front-End-Checklist) into .agents/skills/improve-rule in your project. Codex loads it when a task matches its description.

Can I use Improve a Front-End Checklist Rule 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 thedaviddias/Front-End-Checklist --skill improve-rule -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/improve-rule, .gemini/skills/improve-rule, .github/skills/improve-rule and .opencode/skills/improve-rule in your project.

What does Improve a Front-End Checklist Rule need to run?

Going by SKILL.md and its folder, Improve a Front-End Checklist Rule needs the command-line tools its instructions call (pnpm). Our summary lists: Node.js with pnpm for the score:rules and validate:rule-structure scripts.

Does Improve a Front-End Checklist Rule access the network?

SKILL.md names 1 domain. As links in the text: frontendchecklist.io. This is read from the text; nothing was executed.

Is Improve a Front-End Checklist Rule 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 Improve a Front-End Checklist Rule use?

Improve a Front-End Checklist Rule is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Improve a Front-End Checklist Rule use?

About 1.3k tokens (SKILL.md is roughly 5.2k 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 894 tokens, read only when the agent opens those files.

What are the alternatives to Improve a Front-End Checklist Rule?

Skills that share tags, products or a category with Improve a Front-End Checklist Rule: Migrate Content Ia (docker/docs, 4.7k stars), Markdown Paged Guide (BigStrongSun/ccswitchmulti, 121 stars), Fumadocs (better-notify/better-notify, 313 stars) and Using Docs Kit (lobehub/lobe-ui, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Improve a Front-End Checklist Rule?

thedaviddias (a GitHub user) maintains it in thedaviddias/Front-End-Checklist, which has 74,421 GitHub stars. The repository holds 390 skills in this directory. The repository was last updated on October 6, 2026.

Source: thedaviddias/Front-End-Checklist on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.