Claude Skills by ham7a311

Run a hands-on accessibility pass on a web page or component - keyboard walk, focus visibility, names and roles, live announcements, reduced motion, contrast and zoom - verifying each check in a real browser rather than by reading code. Use before shipping UI, or when asked to check or fix accessibility.

Give a website a distinctive, coherent design where every component has its own idea - derived from the product's world, not from trends - while staying useful and restrained. Produces a direction (material, palette, type, motion vocabulary) and a per-component plan where each familiar control gets one new physical idea with a clear purpose. Use when starting a site or redesign, when a design feels generic, or when asked to make components unique, beautiful or memorable.

Design a reusable component's API before its looks - what is fixed, what is configurable, which variants exist - and keep its live preview, generated prompt and source code in agreement. Use when adding a configurable component to a library, or when a component has grown props that fight each other.

Write a self-contained, production-quality React UI component to Vitrine's house rules - one TSX file plus one CSS file, no UI libraries, paper and night themes, full keyboard support, reduced motion, realistic demo content and documentation fields. Use when building a new reusable component or cleaning one up for a library.

Map what a page says against what its visitor came to find out, then fix the order, headings, labels and length so the page reads in the right sequence - and so search engines and screen readers get the same outline. Use when a page is long but unclear, before writing a new page, or when headings don't tell the story on their own.

Walk the path from a page's first screen to the action that matters (sign up, book, buy), find where people hesitate or get lost, and fix the friction without dark patterns. Use when traffic is fine but conversions aren't, or before launching a pricing, sign-up or checkout flow.

Audit and rewrite website copy that reads as generic, inflated, repetitive, vague or machine-written - buzzwords, empty claims, symmetrical sentences, filler, generic CTAs - while keeping the personality that belongs to the product. Context-aware, evidence-only, no over-correction. Use when reviewing a landing page, product page, portfolio or any interface text before it ships.

Write the words in an interface - headlines, buttons, labels, empty states, errors, confirmations, notifications - and the realistic content that fills demos and designs (names, numbers, dates, messages), so the product reads as specific, honest and consistent. Use when writing or reviewing UI text, replacing placeholder content, writing demo data, or when copy sounds generic.

Critique an interface or component idea against Vitrine's quality bar (familiar job, new physics, meaningful motion, static quality, restraint) and the anti-gimmick list, then give a keep / refine / cut verdict with reasons. Use when reviewing a design, a screenshot, a component, or a list of ideas before building them.

Plan a landing page section by section - one hero idea, a proof sequence and one call to action - and choose a component for each slot with a reason, using the Vitrine library at tryvitrine.dev. Use when starting a product, launch or campaign page, or when a landing page feels like a stack of unrelated blocks.

Design and audit interface motion so every animation explains something - direction, amount, cause, state - with a shared vocabulary of durations and easings, interruptible transitions, cheap properties and a real reduced-motion version. Includes a Playwright script that records every animation a page runs and flags layout-costly, overlong, inconsistent or reduced-motion-violating motion. Use when adding animation, when motion feels random or sluggish, or before shipping animated UI.

Measure and fix how fast a site loads and responds on a mid-range phone - LCP, CLS, total blocking time, bytes by type, oversized images, font weight - with a Playwright script that throttles CPU and network, then fix the causes in order of impact and re-measure. Covers animated canvases and WebGL backgrounds, which must pause offscreen and fall back on weak devices. Use before launch, when a page feels slow on a phone, or after adding heavy visuals.

Turn a person's real work into a portfolio with a point of view - what to lead with, how to present each project, and which few components carry the personality - using components from tryvitrine.dev. Use when building or redesigning a personal, studio or case-study site.

Audit a web interface at phone, tablet and desktop widths with Playwright, measure what's broken (horizontal overflow, small touch targets, tiny text, console errors), make a contact sheet to review by eye, fix, and re-run until clean. Use when the user asks to check or fix mobile, responsive or "looks wrong on my phone" issues.

Improve a site's own search box - relevance, aliases and synonyms, typo tolerance, partial matching, ranking and empty states - and prove it with a table of real queries and the results they must return. Use when people search a component library, docs or catalogue and don't find what is there.

Audit on-page SEO page by page - title tags, meta descriptions, heading outline, semantic HTML, internal links, image alt text, content hierarchy and search intent - and write the exact replacement for each problem. Use before launch, after a redesign, or when pages don't appear for the searches they should.

Audit whether search engines can crawl, render, understand and correctly index a site - robots.txt, sitemap, canonical URLs, metadata, structured data, Open Graph and X cards, redirects, broken links, duplicate content, URL structure and programmatic pages - with Next.js App Router specifics. Use before launch, before a domain move, or when pages are missing from the index.

Find the tells that make a website or interface look generated, templated or low-effort - in the copy, the visual design and the code - and replace each one with something specific to the product. Scans the source with a script, reviews screenshots by eye, and returns a ranked list of fixes. Use when a site "looks like every other AI-built site", before a launch, or when reviewing generated UI or copy.

Build or repair a site's design tokens - colour, type, space, radius, motion - as CSS custom properties with a light and dark theme that are designed rather than inverted, every text/surface pair checked for WCAG contrast by a script, and components that consume roles instead of raw values. Use when setting up theming or dark mode, when colours are hard-coded across components, or when contrast or theme bugs appear.