跳到主要内容

frontendchecklist 精选

Review frontend code and live pages against the Front-End Checklist (380+ rules for accessibility, performance, SEO, security, HTML, CSS, JavaScript, images, i18n, privacy, testing) using the `frontendchecklist` CLI. Use when writing, reviewing, or shipping HTML/CSS/JS/JSX/TSX/Vue/Svelte/Astro code, before a commit or PR, or when asked to audit a public URL.

在 GitHub 打开

安装方式

cp -r packages/cli ~/.claude/skills/cli

把该 skill 目录放进客户端 skills 目录。不同客户端的目录可能不同,Claude Code 默认是 ~/.claude/skills/

整仓一次性获取:git clone --depth 1 https://github.com/thedaviddias/Front-End-Checklist.git

依赖与权限

  • 无需 API Key
  • 需要联网访问外部服务
  • 依赖外部命令:git npx
  • 以上为按正文与 frontmatter 自动推断的信号,仅供参考;安装前建议先阅读原文。
触发场景
writingreviewingbefore a commit

SKILL.md 正文

来源 thedaviddias/Front-End-Checklist@e8d14d0 · 许可 MIT · 内容未修改

Front-End Checklist CLI

frontendchecklist checks frontend code against the Front-End Checklist rules. It works offline,

prints JSON when its output is piped (which is how you will usually call it), and uses exit codes

you can branch on.

Run it with npx -y @frontendchecklist/cli <command> if frontendchecklist is not installed.

When to use it

  • After writing or editing frontend files: frontendchecklist review <paths>.
  • Before committing: git diff --cached | frontendchecklist review -.
  • When the user asks to audit a deployed page: frontendchecklist audit https://....
  • When you need the authoritative guidance for a topic: frontendchecklist search <topic>, then

frontendchecklist rule <slug>.

  • For a structured pass (launch, accessibility, SEO, performance): frontendchecklist checklists,

then frontendchecklist checklist <slug>.

Commands

CommandPurpose
`review <paths...\->`Static review of files, directories (walked; vendor dirs skipped), or stdin
audit <https-url>Fetch a public page and review its HTML
search [query] [--focus a,b] [-n 10]Find rules by keyword, technology, or category
rule <slug>Why a rule matters, how to check it, how to fix it
checklists / checklist <slug>Curated checklists and their rules
categoriesCategories with rule counts
schemaFull command reference as JSON

Useful flags: --focus accessibility,seo, --min-priority high, --fail-on high.

Reading results

  • review and audit return { findings: [{ target, rule, title, priority, issue, fix? }], failing }.
  • Exit code 0: fine. 1: findings at or above --fail-on. 2: bad input or runtime error, with

{ "error": "..." } on stdout.

  • Findings are conservative static heuristics. "No findings" means nothing provable was found, not

that the code is clean: follow up with search/rule for areas the heuristics cannot see

(rendered contrast, focus order, real performance).

Workflow

  1. frontendchecklist review <changed files> --min-priority medium
  2. For each finding, run frontendchecklist rule <rule> and apply its fix guidance.
  3. Re-run the review until no critical/high findings remain (--fail-on high exits 0).
  4. Mention any remaining medium/low findings to the user instead of silently ignoring them.

质量与来源

所属仓库
thedaviddias/Front-End-Checklist
仓库星标
7.4 万
最近更新
6 天前
采集时间
今天
commit
e8d14d049010
内容指纹
sha256:699424dff350173
文件路径
packages/cli/SKILL.md

同仓库其它 Skill

查看全部 50 个
frontend-checklist-global
Use when auditing or improving any frontend codebase against the full Front-End Checklist rule corpus through one entry point.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端
404-page
Use when reviewing templates, rendered HTML, or shared components related to Create a custom 404 error page. Validate the final browser-facing markup, not just the source framework abstraction.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端
about-page
Use when auditing metadata, crawlability, structured data, or indexability related to Create a dedicated About page. Verify the rendered HTML and HTTP response rather than relying only on source files.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端
accessibility-testing
Use when reviewing component libraries, page flows, or CI pipelines that need repeatable accessibility checks. Automated testing is strongest at catching structural and attribute-level issues; it does not replace keyboard, screen reader, and manual UX testing.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端
accessible-authentication
Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端
accessible-notifications
Use when reviewing templates, rendered HTML, or shared components related to Make notifications accessible. Validate the final browser-facing markup, not just the source framework abstraction.
精选 thedaviddias/Front-End-Checklist 7.4 万 原文
Claude CodeCodex CLIMCP 客户端

相似 Skill

更多「设计」
banner-design
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor
brand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor
design-system
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor
design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor
slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
精选 nextlevelbuilder/ui-ux-pro-max-skill 14 万 原文
Claude CodeCodex CLICursor