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

Front-End Checklist npm Package Finder

by thedaviddias in 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.

MITAuto-check passedFrontend & Design

Install Front-End Checklist npm Package Finder

skills CLI
$ npx skills add thedaviddias/Front-End-Checklist --skill find-npm-packages -a claude-code

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

GitHub CLI
$ gh skill install thedaviddias/Front-End-Checklist find-npm-packages --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/find-npm-packages .claude/skills/find-npm-packages && 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
find-npm-packages
GitHub stars
74k
Token cost
~989 tokens
SKILL.md length
448 words
Files
1
Skills in repo
390
Repo updated
First seen
Licence
MIT

At a glance

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.

  • Works in 5 steps: Understand the rule → Identify candidates → Validate each candidate → …
  • Adding npm package references to a Front-End Checklist rule
  • SKILL.md covers What this skill does, Quality thresholds (mandatory…, Research steps and Validation after adding, plus 2 more sections
  • Calls curl, jq and pnpm; reaches npmjs.com and registry.npmjs.org

What it does

Working from a rule file in the Front-End Checklist content folder, this skill first works out what the rule checks, then looks for npm packages that detect the problem, fix or implement the pattern, or test for compliance. Candidates come from npm search and from the tools already listed in the rule, and packages from the official toolchain or with wide adoption are preferred.

Each candidate is checked against the npm registry before it is kept: more than 10,000 downloads a week, a release within the last 18 months, and a live registry listing. A package that misses any threshold is dropped however relevant it is. A rule gets at most three packages, ideally one detector, one fixer and one framework helper, and a single package or an empty field is acceptable when fewer than two pass. The agent must never invent a package, and it writes the survivors into the rule's npmPackages frontmatter field.

When your agent uses it

  • Adding npm package references to a Front-End Checklist rule
  • Checking whether a candidate package meets download and recency thresholds
  • Finding linters, fixers or test utilities that enforce a given frontend rule

Example prompts

  • “Find npm packages for the rule on minifying CSS and add them to its frontmatter.”
  • “Which popular npm packages help enforce the HTML lang attribute rule, and do they pass the thresholds?”
  • “Look up the weekly downloads and last publish date for these linter plugins before we list them in the rule.”

Requirements

  • Network access to the npm registry
  • curl and jq for the registry checks
  • A Front-End Checklist rule file to update

Workflow steps

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

  1. Understand the rule
  2. Identify candidates
  3. Validate each candidate
  4. Select 2–3 packages
  5. Update the rule frontmatter

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:

    • curl
    • jq
    • pnpm

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • npmjs.com
    • registry.npmjs.org
    • api.npmjs.org

    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

Front-End Checklist npm Package Finder loads about 989 tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 448 words of instructions outside code blocks.

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

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). 448 words, ~989 tokens.

Download SKILL.mdSave it as .claude/skills/find-npm-packages/SKILL.md (or your agent's skills folder).
name
find-npm-packages
description
Use when you need to find the 2-3 most popular and well-maintained npm packages relevant to a frontend checklist rule, validate they meet quality thresholds, and add them to the rule's frontmatter.
metadata.version
1.0.0
metadata.category
content
metadata.tags
npm,packages,rules,frontmatter

find-npm-packages

Identify, validate, and add npm package references to a Front-End Checklist rule.

What this skill does

Given a rule file or rule slug, this skill will:

  1. Understand what the rule is checking for
  2. Research which npm packages are commonly used to implement, automate, or enforce the rule
  3. Validate each candidate against quality thresholds (popularity + maintenance)
  4. Select the best 2–3 packages
  5. Add them to the rule's npmPackages frontmatter field

Quality thresholds (mandatory — do not skip)

Before selecting any package, check it against these criteria using the npm registry:

CriterionMinimum
Weekly downloads>10,000/week
Last publishWithin 18 months
npm registryMust be listed (registry.npmjs.org/{name})

Packages that fail any threshold must be excluded, regardless of how relevant they are.

Research steps

Step 1 — Understand the rule

Read the rule file: packages/content/rules/en/{category}/{slug}.mdx

Focus on:

  • What problem does this rule solve?
  • What technique, spec, or behavior does it enforce?
  • What tools or linters are mentioned in the tools: field?
Step 2 — Identify candidates

Search for packages that:

  • Detect the issue (linters, audit tools, CLI scanners)
  • Fix or implement the pattern (frameworks, utilities, polyfills)
  • Test for compliance (test utilities, CI integrations)

Use https://www.npmjs.com/search?q={keywords} and knowledge of the ecosystem to find candidates.

Prefer packages that are:

  • Part of the official toolchain (e.g., eslint, stylelint, official plugins)
  • Widely adopted across the industry
  • Actively maintained (recent commits, open issues responded to)
Step 3 — Validate each candidate

For each candidate package, fetch and verify:

bash
# Metadata
curl https://registry.npmjs.org/{package}/latest | jq '{name, version, description}'

# Weekly downloads
curl https://api.npmjs.org/downloads/point/last-week/{package} | jq '.downloads'

Record the weekly download count and last publish date. Reject any below threshold.

Show full SKILL.md (194 more words)Show less
Step 4 — Select 2–3 packages
  • Do not add more than 3 packages per rule
  • Prioritize diversity: prefer one detector, one fixer, one framework helper when relevant
  • If fewer than 2 pass the threshold, it's acceptable to add only 1 or leave the field empty
  • Never invent packages — only list packages that actually exist and pass validation
Step 5 — Update the rule frontmatter

Add a npmPackages array to the frontmatter with the package names only (metadata is fetched at build time):

yaml
npmPackages:
  - eslint
  - eslint-plugin-jsx-a11y
  - axe-core

Place it after tools: and before resources:.

Validation after adding

Run the validation script to confirm all packages pass thresholds:

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

If any package fails, either remove it or replace it with a better alternative.

Example output

For the rule accessibility/form-labels:

yaml
npmPackages:
  - eslint-plugin-jsx-a11y
  - axe-core
  - @testing-library/jest-dom

All three have >100k weekly downloads and were published within the last 6 months.

What NOT to do

  • ❌ Do not add packages with <10k weekly downloads
  • ❌ Do not add packages last published >18 months ago
  • ❌ Do not add more than 3 packages
  • ❌ Do not add general-purpose packages that are only tangentially related
  • ❌ Do not invent package names — verify each one exists on npm
  • ❌ Do not add the package version (it's fetched at build time)

© 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

Just SKILL.md in skills/find-npm-packages of thedaviddias/Front-End-Checklist.

Open the folder on GitHubat commit e8d14d0

Compare with similar skills

Front-End Checklist npm Package Finder 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.

Front-End Checklist npm Package Finder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Front-End Checklist npm Package Finder this skillthedaviddias/Front-End-Checklist74k—~989Automated safety check: PassMIT
Frontend Review Triagemizchi/skills360—~787Automated safety check: PassNone
SnapDOM Capture Guide2025Emma/vibe-coding-cn23k1 repos~1.9kAutomated safety check: PassMIT
Skin Developerningbainb/deepseek-harness-desktop789—~1.4kAutomated safety check: PassBSD-3-Clause
Tabler Dashboard UI Kittabler/tabler42k—~1.5kAutomated safety check: PassMIT
Preact Developeroaustegard/claude-skills150—~4.6kAutomated safety check: PassMIT

Similar skills

  • Frontend Review Triage

    mizchi/skills

    A skill your agent uses when starting a frontend review engagement or when the user asks for an initial assessment ("triage", "day 0", "what's the state of this repo").

    360 GitHub stars~787 tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • SnapDOM Capture Guide

    2025Emma/vibe-coding-cn

    Explains how to use the snapDOM library to turn an HTML element into an SVG, PNG, JPG or WebP image while keeping its fonts, pseudo-elements and shadows.

    23k GitHub starsUsed in 1 repo~1.9k tokens
    Frontend & DesignAuto-check passed

  • Skin Developer

    ningbainb/deepseek-harness-desktop

    Build a new skin for the dsh-web-ui skin collection (DSH Web GUI) and publish it into the skin-center plugin — scaffold with scripts/dsh-skin-new, author skin.json plus the apply/dispose +…

    789 GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • Tabler Dashboard UI Kit

    tabler/tabler

    Creates admin dashboards and app pages with the Tabler UI kit on Bootstrap 5, using the published docs for real markup instead of guessed class names.

    42k GitHub stars~1.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Preact Developer

    oaustegard/claude-skills

    Guides building standards-based Preact apps with native-first choices, HTM syntax, import maps and vendored ESM, from single-file demos to larger builds.

    150 GitHub stars~4.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • AO Desktop App Launcher

    OrchestratorInc/agent-orchestrator

    Launches, restarts and troubleshoots the real AO Electron desktop app from a checkout, with isolated or real local data and checks for stale processes.

    13k GitHub stars~2.4k tokensUpdated today
    DevelopmentAuto-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 5 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 5 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 5 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 5 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 5 days ago
    Auto-check passed

  • Improve a Front-End Checklist Rule

    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.

    74k GitHub stars~1.3k tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Front-End Checklist npm Package Finder

What does Front-End Checklist npm Package Finder do?

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. Working from a rule file in the Front-End Checklist content folder, this skill first works out what the rule checks, then looks for npm packages that detect the problem, fix or implement the pattern, or test for compliance. Candidates come from npm search and from the tools already listed in the rule, and packages from the official toolchain or with wide adoption are preferred.

When should I use Front-End Checklist npm Package Finder?

Front-End Checklist npm Package Finder fits situations like: adding npm package references to a Front-End Checklist rule; checking whether a candidate package meets download and recency thresholds; finding linters, fixers or test utilities that enforce a given frontend rule.

How do I install Front-End Checklist npm Package Finder in Claude Code?

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

How do I install Front-End Checklist npm Package Finder in Codex?

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

Can I use Front-End Checklist npm Package Finder 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 find-npm-packages -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/find-npm-packages, .gemini/skills/find-npm-packages, .github/skills/find-npm-packages and .opencode/skills/find-npm-packages in your project.

What does Front-End Checklist npm Package Finder need to run?

Going by SKILL.md and its folder, Front-End Checklist npm Package Finder needs the command-line tools its instructions call (curl, jq and pnpm). Our summary lists: Network access to the npm registry; curl and jq for the registry checks; A Front-End Checklist rule file to update.

Does Front-End Checklist npm Package Finder access the network?

SKILL.md names 3 domains. In commands or code: npmjs.com, registry.npmjs.org and api.npmjs.org; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.

Is Front-End Checklist npm Package Finder 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 Front-End Checklist npm Package Finder use?

Front-End Checklist npm Package Finder 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 Front-End Checklist npm Package Finder use?

About 989 tokens (SKILL.md is roughly 4k 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 Front-End Checklist npm Package Finder?

Skills that share tags, products or a category with Front-End Checklist npm Package Finder: Frontend Review Triage (mizchi/skills, 360 stars), SnapDOM Capture Guide (2025Emma/vibe-coding-cn, 23k stars), Skin Developer (ningbainb/deepseek-harness-desktop, 789 stars) and Tabler Dashboard UI Kit (tabler/tabler, 42k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Front-End Checklist npm Package Finder?

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.