Skills.
Give your AI a better way to work.
A skill is a set of written instructions that teaches an AI how to do one job the way it should be done: review a pull request, plan a migration, write the release notes.
Install one here and it travels with your account into Claude, Claude Code, Cursor and every other client you sign in with.
Category: Web & browsing
2,461 results · page 51 of 83
- View details
final-client-handoffSkillWeb & browsing
Prepare final website handoff. Use after completing a site, app, landing page, redesign, deployment, or production QA to summarize changed files, commands run, checks passed, local/deployed URLs, environment variables, content/CMS notes, known limitations, untested areas, and recommended next steps.
Ready to connect★ 124
- View details
frontend-quality-auditorSkillWeb & browsing
Audit frontend websites and apps before launch. Use for production-readiness reviews, visual polish checks, responsive QA, accessibility risks, performance and SEO basics, interaction states, forms, media, copy clarity, trust signals, and ship/no-ship recommendations for React, Next.js, static sites
Ready to connect★ 124
- View details
frontend-tooling-trust-gateSkillWeb & browsing
Use before installing or recommending npm packages, GitHub repos, templates, MCP servers, plugins, Codex skills, ChatGPT skills, scripts, CLI tools, design libraries, scraping tools, or AI agent tools for frontend or website work. Produces trust classifications, install-safety decisions, safer alter
Ready to connect★ 124
- View details
hero-image-art-directionSkillWeb & browsing
Art-direct website hero imagery. Use for landing pages, homepages, product pages, portfolios, venue sites, editorial pages, and premium first viewports that need real or generated media, text-safe composition, responsive focal points, visual hierarchy, contrast, aspect ratios, and anti-generic image
Ready to connect★ 124
- View details
image-crop-responsive-qaSkillWeb & browsing
Run responsive image crop QA for websites. Use after adding or changing images, hero media, galleries, product grids, portraits, venue photos, screenshots, background images, object-fit/object-position rules, art-directed picture sources, image dimensions, layout stability, and mobile crop polish.
Ready to connect★ 124
- View details
mobile-responsive-qaSkillWeb & browsing
Run mobile responsive QA for websites and apps. Use after layout, media, navigation, form, pricing, dashboard, gallery, checkout, or motion changes to inspect phone and tablet viewports, prevent horizontal overflow, fix crop issues, verify touch targets, and make mobile feel intentionally composed.
Ready to connect★ 124
- View details
modern-site-engineeringSkillWeb & browsing
Implement beautiful modern websites and web apps with an opinionated premium frontend stack. Use for Next.js, React, Tailwind, Motion, GSAP, Lenis, Three.js/React Three Fiber, shadcn/ui customization, responsive layouts, landing pages, portfolios, cinematic sites, luxury brand sites, Squarespace-lik
Ready to connect★ 124
- View details
motion-language-directorSkillWeb & browsing
Define website motion direction before implementation. Use for cinematic websites, Viktor-style motion, GSAP/ScrollTrigger pages, Motion for React microinteractions, Framer-like transitions, scroll reveals, product storytelling, luxury pacing, and any site where animation should feel intentional rat
Ready to connect★ 124
- View details
motion-performance-qaSkillWeb & browsing
Run motion performance QA for websites and apps. Use after adding Motion, GSAP, Lenis, scroll scenes, page transitions, hover states, carousels, WebGL sync, observers, timers, RAF loops, or any animation-heavy UI to catch jank, layout shift, leaks, cleanup bugs, reduced-motion gaps, and mobile issue
Ready to connect★ 124
- View details
motion-react-patternsSkillWeb & browsing
Implement Motion for React animation patterns for premium websites and apps. Use for motion/react, motion components, variants, initial/animate/exit, whileHover, whileTap, whileInView, useAnimate, useInView, useReducedMotion, MotionConfig, LazyMotion, microinteractions, reveal animations, and React-
Ready to connect★ 124
- View details
nextjs-app-router-routingSkillWeb & browsing
Plan and implement Next.js App Router routing for premium websites and apps. Use when working with app/ routes, pages, layouts, templates, loading, error, not-found files, route groups, dynamic segments, nested navigation, Link usage, or homepage structure in a Next.js project.
Ready to connect★ 124
- View details
nextjs-site-architectureSkillWeb & browsing
Structure modern Next.js websites and landing pages. Use for App Router projects, TypeScript, metadata, fonts, images, static pages, route groups, sections, component organization, performance, SEO basics, and production-ready architecture for premium websites.
Ready to connect★ 124
- View details
non-generic-web-copySkillWeb & browsing
Write and revise website copy so it feels specific, credible, and non-generic. Use for headlines, subheads, CTAs, navigation, product copy, service copy, luxury/editorial language, testimonials, empty states, forms, pricing, and any website where placeholder marketing or AI-sounding copy would weake
Ready to connect★ 124
- View details
performance-audit-websitesSkillWeb & browsing
Audit website performance. Use for Core Web Vitals, LCP, INP, CLS, Lighthouse or browser performance checks, bundle and asset weight, image/video loading, font loading, third-party scripts, animation cost, hydration cost, and production-readiness performance review.
Ready to connect★ 124
- View details
performance-budget-labSkillWeb & browsing
Use for website performance planning, Lighthouse/web-vitals checks, bundle/media/font budgets, Core Web Vitals triage, image/video optimization, animation performance, deployment readiness, and premium-site speed audits.
Ready to connect★ 124
- View details
premium-visual-reference-librarySkillWeb & browsing
Use when Codex needs premium visual inspiration sources, website galleries, studio references, product-site references, motion references, UI examples, luxury/editorial/Squarespace/Raycast/Linear/Vercel-level references, or a non-generic reference set before designing a website.
Ready to connect★ 124
- View details
premium-web-build-gateSkillWeb & browsing
Premium website pre-build gate for cinematic, editorial, Squarespace-polished, Raycast/Linear/Vercel-precise, or motion-heavy web work. Use before implementing or redesigning a homepage, landing page, portfolio, product site, agency/studio site, or high-polish web app when the user wants non-generic
Ready to connect★ 124
- View details
react-accessible-componentsSkillWeb & browsing
Build accessible React components for websites and apps. Use when creating buttons, links, menus, dialogs, tabs, accordions, carousels, forms, icon buttons, nav, skip links, focus states, keyboard behavior, ARIA, semantic markup, or reusable UI primitives.
Ready to connect★ 124
- View details
react-component-compositionSkillWeb & browsing
Craft React component composition for websites and apps. Use when splitting large JSX files, creating reusable sections, primitives, slots, children-based composition, product UI components, portfolio sections, landing-page modules, design-system primitives, or maintainable component structure.
Ready to connect★ 124
- View details
react-component-craftSkillWeb & browsing
Craft polished React components for websites and apps. Use for reusable sections, UI primitives, composition, props, state, responsive behavior, interaction states, accessibility, and avoiding monolithic or brittle frontend implementations.
Ready to connect★ 124
- View details
react-error-loading-empty-statesSkillWeb & browsing
Design and implement React loading, error, empty, offline, retry, not-found, Suspense, skeleton, and route-boundary states. Use when a website or app needs polished fallbacks for data fetching, async UI, lists, forms, dashboards, product pages, commerce, portfolios, or Next.js route files.
Ready to connect★ 124
- View details
react-responsive-componentsSkillWeb & browsing
Build responsive React components and sections for premium websites. Use when components need mobile, tablet, desktop, container-query, CSS-grid, flex, aspect-ratio, text-fit, overflow, media-crop, navigation, dashboard density, or responsive interaction behavior.
Ready to connect★ 124
- View details
reduced-motion-designSkillWeb & browsing
Design reduced-motion alternatives for websites and apps. Use for prefers-reduced-motion, Motion useReducedMotion, CSS media queries, disabling parallax, replacing large movement, simplifying scroll scenes, preserving state feedback, accessibility, vestibular-sensitive animation, and motion QA.
Ready to connect★ 124
- View details
responsive-visual-polish-qaSkillWeb & browsing
Run responsive visual QA and polish for websites and apps. Use after building or editing any frontend to inspect desktop, laptop, tablet, and mobile widths; fix typography, spacing, overlaps, media crops, interactions, motion, forms, canvas rendering, accessibility, and final build quality.
Ready to connect★ 124
- View details
section-layout-systemsSkillWeb & browsing
Design non-generic website section layouts. Use when a page needs alternatives to card grids, bento overuse, generic feature blocks, repetitive centered sections, bland stat strips, or template-like section sequencing.
Ready to connect★ 124
- View details
seo-technical-qaSkillWeb & browsing
Run technical SEO QA for websites. Use for metadata, titles, descriptions, canonical URLs, robots, sitemap, Open Graph, structured data, heading structure, internal links, image alt, crawlability, noindex mistakes, redirects, JavaScript-rendered content, and launch readiness.
Ready to connect★ 124
- View details
surface-shadow-material-systemsSkillWeb & browsing
Design surface, shadow, border, material, radius, glass, elevation, overlay, divider, and depth systems for premium websites and apps. Use when cards, panels, modals, nav, product UI, dashboards, luxury sections, or editorial layouts need polished material hierarchy without generic glassmorphism or
Ready to connect★ 124
- View details
tailwind-design-tokensSkillWeb & browsing
Create token-driven Tailwind and CSS variable systems for premium websites. Use for color tokens, typography tokens, spacing rhythm, radius, shadows, gradients, surfaces, responsive constraints, dark/light modes, and avoiding random utility-class styling.
Ready to connect★ 124
- View details
tailwind-responsive-layoutsSkillWeb & browsing
Build responsive Tailwind CSS layouts for premium websites and apps. Use for breakpoints, mobile-first layout, grids, flex, spacing, container widths, aspect ratios, responsive typography, media crops, nav adaptation, dashboard density, and preventing mobile stacking from looking generic.
Ready to connect★ 124
- View details
testimonial-proof-systemsSkillWeb & browsing
Create testimonial and proof systems for websites. Use for testimonials, reviews, customer quotes, logo walls, metrics, press quotes, case-study excerpts, ratings, social proof, proof strips, trust sections, and copy that must be credible, approved, and specific.
Ready to connect★ 124
What is a skill?
A skill is plain text, usually a SKILL.md file and the scripts it refers to, written for an AI rather than for a person. It carries the steps, the house rules and the examples a good answer needs, so you stop pasting the same briefing into every new chat.
55,111 of the 55,543 skills listed here can be served through ahel today, and they come from public repositories. Each one has its own page with the instructions themselves on it, so you can read what a skill will tell your AI to do before you install it.
Install one and every AI you use gets it
Installing a skill adds it to your gateway and turns it on in the same step. Claude Code surfaces it as a slash command; any client can read the full instructions with the skill_read tool.
Nothing is copied into a project folder. The instructions are served from your account, so the same skill is there in every AI you connect, and turning it off removes it from all of them at once.