web-design-guidelines
Official sourceReview UI code against Vercel's Web Interface Guidelines — accessibility, UX, and design best practices — with terse file:line findings.
Search skills by skill, task, Agent platform, or publisher.
Review UI code against Vercel's Web Interface Guidelines — accessibility, UX, and design best practices — with terse file:line findings.
Vercel Engineering's 70 React/Next.js performance rules across 8 priority categories—waterfalls, bundle size, server-side, re-renders—for writing, reviewing, and refactoring code.
Deploys apps to Vercel, defaulting to preview, by detecting project/git/CLI state and choosing git-push, vercel deploy, link-first, or a no-auth sandbox fallback.
Domain knowledge for building videos in React with Remotion—frame-based animation via useCurrentFrame/interpolate, sequencing, assets, audio, captions, and rendering.
A fast Rust browser-automation CLI for AI agents using Chrome via CDP with accessibility-tree snapshots; a discovery stub that loads live workflows from the CLI itself.
React Native and Expo best practices across list performance, Reanimated animations, navigation, UI patterns, and monorepo config, organized by priority and impact.
Runs an observability-first Vercel cost and performance audit, collecting production metrics before investigating metric-backed candidates and producing ranked, file-grounded recommendations.
Discover and install agent skills from the open ecosystem via the npx skills CLI — when you wish you had a skill for some task.
Reproduces a reference mockup as a runnable frontend, extracting its design system then screenshot-comparing the build and iterating until the gap is minor and explained.
Clarifies the brief before design work by interrogating goal, user, JTBD, constraints, success, and scope, then writing a context.md the other design skills consume.
Audits an existing UI (URL, screenshot, or code) against usability, hierarchy, accessibility, and conversion heuristics, returning a severity-ranked issue list with fixes.
Implements native-feeling animations with React's View Transition API—shared elements, Suspense reveals, list reorder, directional navigation—without third-party animation libraries.
A framework-agnostic write-path discipline: the cancel-snapshot-patch-rollback-invalidate optimistic lifecycle, once-per-intent idempotency keys, and multi-cache coherence.
A framework-agnostic field-side observability system: one typed event taxonomy, best-effort non-blocking provider fan-out, real-user Web Vitals, error reporting, and consent gating.
A portable Lighthouse CI performance gate that blocks PRs unless the production build meets Core Web Vitals budgets and category score floors, with median-of-N runs.
A framework-agnostic discipline for type safety at the network edge: one typed API client, parse-don't-validate, a single response envelope, one ApiError type, and branded IDs.
A portable, framework-agnostic React/React Native architecture style: feature modules with page directories, barrel-only imports, server-vs-UI state split, and component-promotion rules.
Orchestrator for the design-* set that frames the brief, explores options, builds the chosen direction, gates with QA, and ships, routing each request to a sub-skill.
Rebuilds a live site as a clean editable local frontend by extracting design tokens into url-dna.md, then reconstructing in your stack and screenshot-comparing it.
Conformance-checks a built prototype against its mockup, context, and success criteria, flagging visual, behavioral, and a11y drift with expected-vs-actual and a verdict.
Wires static screens into a clickable runnable prototype with routing, interaction states, and stubbed data, then verifies the whole happy path plus an error state in a browser.
Generates 2-4 structurally distinct UI directions for a screen or flow, each with layout logic, component choices, and explicit optimizes/sacrifices mapped to the success criteria.
Takes a chosen visual to production-ready state via diagnose-then-fix passes: inpaint artifacts, balance composition, color-grade, sharpen text, and conform to final size.
Builds 2-4 named visual territories with palette, texture, typography, and 4-6 generated tiles each so a team can align and sign off on a direction before production spend.