Guide · Agent skill
How to use the Front-End Checklist CLI agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The frontendchecklist skill lets an AI agent check your front-end code and public web pages against about 380 rules covering accessibility, performance, SEO, security, images, i18n and privacy. This guide explains what an agent skill is, how to install this one, how to ask for a check in plain language, and what to watch for. You do not need prior experience with agent skills.
Front-End Checklist CLIthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from this page and unzip it.
- 2Place the folder. Move the frontendchecklist folder into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload in the Claude apps. Alternatively, go to Settings → Capabilities → Skills and upload the skill there.
- 4Confirm Node.js is available. The CLI runs on Node.js. If no frontendchecklist binary is installed, the agent uses npx with @frontendchecklist/cli.
- 5Ask for a review. Name the files you changed and ask the agent to check them against the front-end rules.
- 6Fix and re-check. Let the agent apply the suggested fixes and re-run the review until high-priority findings are gone.
What the skill makes the agent do
Agent skills are instruction packages that an AI assistant loads when a task matches them. This skill teaches the agent to run the frontendchecklist command-line tool, which reviews frontend files (HTML, CSS, JavaScript, JSX, TSX, Vue, Svelte and Astro) and public pages against the Front-End Checklist rules.
The agent reads the JSON findings, looks up guidance for each rule, applies the suggested fix and re-runs the review until critical and high findings are resolved. Most checks are static heuristics that run offline on local files.
- Reviews changed files before a commit or pull request
- Audits a deployed public https URL
- Looks up rules by topic and explains why they matter
- Runs structured checklists such as a launch checklist
Install the skill from the ZIP download
Download the skill ZIP from this page and unzip it. For a personal setup, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
Alternatively, upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/frontendchecklist
- Single project: <your-project>/.claude/skills/frontendchecklist
- Claude apps: Settings → Capabilities → Skills
Make the CLI available
The skill calls the frontendchecklist CLI. If it is not installed, the agent runs it through npx with the package @frontendchecklist/cli, which requires Node.js and network access to the npm registry the first time it downloads the package.
The package is MIT licensed. Rules ship with the package, so reviews work offline.
- Requires Node.js
- Without an installed binary, the agent uses npx -y @frontendchecklist/cli
npx -y @frontendchecklist/cli review src/Trigger the skill with natural requests
You do not need to type commands yourself. Describe the task in plain words and the agent will load the skill when the request matches its description: writing, reviewing or shipping frontend code, before a commit or PR, or auditing a public URL.
Be specific about scope. Name the files or the URL so the agent knows what to check.
- "Review the HTML and CSS I changed for accessibility and SEO issues."
- "Check the files staged for commit against the front-end rules before I push."
- "Audit https://example.com and explain the high-priority findings."
- "Look up the rule about alt text and show me how to fix my image tags."
What the results look like
Reviews and audits return findings with a target, rule slug, title, priority, issue and optional fix. The exit code tells the agent whether findings reached the threshold: 0 means fine, 1 means findings at or above the --fail-on level, and 2 means bad input or a runtime error.
A clean result does not prove the code is compliant. The heuristics cannot see rendered contrast, focus order or real performance, so the agent is expected to point you to those areas separately.
- Exit 0: no findings at the fail level
- Exit 1: findings at or above --fail-on
- Exit 2: bad input or runtime error
frontendchecklist review src/ --min-priority medium --fail-on highSafety notes: scripts and network access
This skill runs scripts and uses the network. The audit command fetches the target page, and the npm registry is contacted if the package is not installed. The skill's own documentation says the tool may send audit results to the project's dashboard, so do not audit pages that are private or behind a login.
Only public https URLs are fetched by the audit command. Review the skill files before installing if your environment requires it.
- Do not audit private or internal pages behind login
- Expect network calls for audit and first-time npx downloads
- Results may be sent to the project's dashboard, per the tool's documentation
Tips for better results
Limit reviews to changed files to keep output focused. Use --focus to narrow categories such as accessibility or seo, and --min-priority to hide low-priority noise. Ask the agent to explain any rule it cites so you learn the reasoning rather than just applying fixes.
Remember that medium and low findings should still be mentioned rather than ignored, and that accessibility and legal sign-off need human testing.
- Use --focus accessibility,seo to narrow categories
- Use --min-priority high for a short list
- Ask for rule explanations with a specific slug
frontendchecklist search "image formats" -n 5What people use it for
- Catching missing alt text and form labels in HTML before a pull request
- Reviewing a component in JSX, Vue, Svelte or Astro for accessibility issues
- Running a structured pre-launch pass with a curated checklist
- Auditing a public marketing page and explaining its SEO findings
- Looking up the authoritative guidance for a single topic such as image formats
Frequently asked questions
Is the frontendchecklist skill free?
The CLI package @frontendchecklist/cli is licensed under MIT. The source does not describe pricing for the skill or the website, so check the project's page for any paid features.
Do I need to install anything before using it?
You need Node.js. If the frontendchecklist command is not installed, the agent runs it through npx -y @frontendchecklist/cli, which downloads the package from the npm registry the first time.
Where do I put the skill folder?
Place it in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder for one project. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Can it audit a page behind a login?
No. The audit command only fetches public https URLs. The tool may also send audit results to the project's dashboard, so avoid private or internal pages.
Does a clean result mean my site is accessible?
No. The checks are conservative static heuristics. They cannot see rendered contrast, focus order or real performance, so a clean result does not prove compliance and needs manual testing.
Does it work offline?
Reviews of local files run offline because the rules ship with the package. The audit command needs network access to fetch the target page.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits developers and teams who want an agent to catch common accessibility, SEO, performance and security issues in frontend code before a commit, pull request or launch, and to audit public URLs. It is not a substitute for manual accessibility testing, legal compliance review, or audits of private pages behind a login, so choose a dedicated testing tool for those needs.
Download the skill