skill

best-practices · davila7 — Claude Code skill: what it does, how to install

Q: How to install best-practices in Claude Code?

Run `npx claude-code-templates@latest --skill development/best-practices` in your terminal.

Q: Does this skill require external libraries?

For safe HTML injection patterns, your project must have `dompurify` installed.

Checks web code against Lighthouse standards, patches dependency vulnerabilities, and sets up browser security headers.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --skill development/best-practices

Open on GitHub

What best-practices does

This skill brings Lighthouse-aligned web quality checks into Claude Code. It scans front-end files for insecure code, missing metadata, and retired browser features. That keeps code current.

The instructions cover Content Security Policy rules, cookie attributes, and running npm audit. In HTML markup, the skill checks doctype tags, viewport declarations, and UTF-8 encoding. It also flags document.write and replaces synchronous XHR with fetch.

HTML sanitization patterns rely on having dompurify installed in the project.

What it helps with

configure strict CSP and HSTS HTTP headers
replace deprecated document.write and sync XHR calls
audit project dependencies with npm audit
enable passive event listeners for touch and wheel handlers

Example prompts for the agent

Run a security audit and patch vulnerable dependencies
Set up CSP and security headers for this web app
Review my code for deprecated browser APIs and unhandled errors

How to install best-practices

1claude-code-templates

npx claude-code-templates@latest --skill development/best-practices

2Skills CLI (Vercel)

npx skills add davila7/claude-code-templates --skill best-practices -a claude-code

3Manually: put the files in place

~/.claude/skills/best-practices/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/best-practices/

Manually: put the files in place

.agents/skills/best-practices/SKILL.md

For all projects use ~/.agents/skills/

Manually: put the files in place

.cursor/skills/best-practices/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install davila7/claude-code-templates best-practices

2Manually: put the files in place

.github/skills/best-practices/SKILL.md

Platform CLI

gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/best-practices

Manually: put the files in place

.devin/skills/best-practices/SKILL.md

The legacy .windsurf/skills/ path still works

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about best-practices

How to install best-practices in Claude Code?

Run npx claude-code-templates@latest --skill development/best-practices in your terminal.

What does best-practices do?

It guides Claude Code to audit front-end files using Lighthouse standards, configure security headers, and update deprecated web APIs.

Does this skill require external libraries?

For safe HTML injection patterns, your project must have dompurify installed.

Similar skills

All skills for Frontend and UI →

best-practices by other authors comes first.

best-practices MoizIbnYousaf Transforms vague instructions into detailed coding prompts with verification steps, file context, and explicit constraints. Useful for complex implementation tasks. CX Codex +1 528installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set804

The whole set →

episode-orchestrator This subagent validates episode details and passes them through a configured sequence of specialized agents. Use it for workflows that need conditional routing. 399installs troubleshooting-guide Writes a troubleshooting document with diagnostic steps, common failures and shell commands for checking a system. Useful when a service needs a runbook. 397installs fastapi-endpoint Guides you through planning and coding async FastAPI endpoints with Pydantic v2 schemas, SQLAlchemy 2.0, auth checks, and pytest suites. Gathers requirements before writing code. 393installs performance-budget-guard A Claude hook that measures your Next.js JS bundle after a build and blocks the deploy when it goes over the performance budget. 393installs podcast-editor Plans podcast post-production and prepares show notes with chapters and timestamps. Useful when getting an episode ready to publish. 392installs memory-spring-cleaning Walks through CLAUDE.md and markdown docs, checks the rules written there against the actual code, and drops what no longer holds. 391installs create-prp Builds a Product Requirement Prompt by reading your docs and code, searching the web for examples, and writing an implementation guide. 387installs neon-auth-specialist Configures Stack Auth integration with Neon database synchronization. Helps set up user management, protected routes, and safe query patterns. 387installs