Claude Skills · DevOps & Infrastructure
Performance And Web Vitals
dembrandt/dembrandt-skillsAudit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising page load, fixing layout shift, reducing input delay, improving Lighthouse scores, or reviewing images, fonts, and render-blocking resources.
At a glance
This skill is for DevOps & Infrastructure and helps you audit page performance with lighthouse, fix core web vitals issues, and optimize page load speed.
git clone --depth 1 https://github.com/dembrandt/dembrandt-skills
cp -r dembrandt-skills/skills/performance-and-web-vitals ~/.claude/skills/performance-and-web-vitals
Setup, runtime and requirements describe dembrandt/dembrandt-skills, the repo this skill ships in.
lighthousecore-web-vitalsLcpclsInpPerformance Optimization
Also in dembrandt/dembrandt-skills
View the repoDerive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturat...
Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design...
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography,...
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should b...
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control...
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour...
When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized. Clicking...
Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use la...
Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout...
Configuration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, se...
Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius,...
Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dem...
Other DevOps & Infrastructure skills
Generate an interactive bash wizard that walks a human through a manual procedure — third-party setup, a one-off migration, an A→B state tra...
Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wan...
Configure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before f...
Wire dependency-cruiser into a TypeScript repo so each package is a deep module — implementation hidden in subfolders, reachable only throug...
Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-comm...
Manage Azure Container Registry via the az acr CLI including registries, images, cloud builds, ACR Tasks, authentication, tokens, geo-replic...