AI agent skills for front-end teams and web designers

Toolkit for creating and maintaining scalable UI design systems with tokens, responsive rules, accessibility and developer handoff docs.

Build scalable, responsive, and accessible design systems with Tailwind CSS v4, design tokens, and reusable React UI components.

Guide to creating, controlling, and optimizing animations in Three.js, including keyframes, skeletal rigs, morph targets, blending, and procedural motion.

Guidelines and workflows for writing high-converting marketing copy for web pages, including headlines, CTAs, and page structures.

Checklist for reviewing UI code for compliance with comprehensive web interface, accessibility, performance, and content guidelines.

Applies psychological principles and mental models to design ethical, effective marketing, pricing, and growth strategies.

Guide for planning, implementing, and validating analytics tracking with GA4, GTM, and UTM strategies.

Design and implement purposeful UI motion, microinteractions, and feedback patterns to enhance usability and user delight.

Guidelines and workflows for designing and writing high-converting SaaS and service landing pages, covering structure, layout, copy, and SEO/AEO.

Guides creation of distinctive, production-grade frontend interfaces with bold, cohesive aesthetics and refined implementation.

Guide to implementing and debugging professional GSAP-based web animations, timelines, and ScrollTrigger interactions.

Inspects web interfaces for layout, responsive, accessibility, and visual issues, then applies targeted source code fixes and re-verifies results.

Comprehensive guide to using Anime.js v4 for JavaScript-driven web animations, timelines, SVG, scroll effects, and draggable interactions.

Guide to setting up, configuring, and integrating Vanta.js animated WebGL backgrounds, including React usage, resizing, and performance considerations.

Guides designing and implementing tasteful, high-performance product-grade web animation systems inspired by Stripe, Linear, Apple, and Vercel.

Teach how to create and customize CSS gradient borders using a pseudo-element mask, including Tailwind-friendly usage and common pitfalls.

Implement layered CSS progressive blur overlays at the top or bottom of the viewport using multiple masked backdrop-filter layers.

Guides using Aura’s asset library to source Unsplash-style images plus recommended crops and resolutions for design and marketing use.

Master modern responsive design techniques using container queries, fluid typography, CSS Grid, and mobile-first strategies for adaptive interfaces.

Framework and checklists for designing and writing a high-converting SaaS pricing page, including layout patterns, copy, FAQs, and SEO/AEO.

Implement a lightweight interactive WebGL globe with cobe.js, including responsive canvas setup, markers, interaction, and React/Next.js integration.

Guidelines and patterns for setting up Matter.js 2D physics scenes, interactions, and cleanup in web environments.

Apply CSS linear-gradient-based alpha masks for horizontal or vertical edge fades using mask-image and -webkit-mask-image.

Guides creating original visual design philosophies and expressing them as meticulously crafted, museum-quality PNG or PDF art with minimal text.

Guidelines and curated Unsplash picks for avatars, portraits, backgrounds, and wallpapers with correct sizes and aspect ratios.

Skill guide for creating and controlling animations in Three.js, including keyframes, skeletal rigs, morph targets, blending, and procedural motion.

621 views

11 Uses

Added by Nigel Alba

How to install shadcn/ui, set up dependencies, and structure your React app across multiple frameworks.

Arsal Idrees

ui.shadcn.com

Generates structured prompts for creating professional SaaS interfaces, landing pages, and dashboards with clear layout, components, and visual design rules.

Guides the design of premium light-mode SaaS marketing pages with editorial grids, restrained color, framing lines, subtle motion, and conversion-focused layouts.

Provides npm commands to install GSAP and its React integration package.

Saadat Myrzabek

Defines and structures brand strategy, storytelling, voice, and visual identity for consistent branding across touchpoints.

508 views

28 Uses

Added by kostja zhang

Implement a customizable progressive gradient blur overlay at the top or bottom of the viewport using layered CSS backdrop-filters.

Elroy Yeap

Guides the planning, copy, structure, and SEO of high-converting product features pages.

452 views

6 Uses

Added by kostja zhang

Guides generative engine optimization strategies to improve content visibility and citation in AI search answers across tools like ChatGPT, Perplexity, and AI Overviews.

419 views

9 Uses

Added by kostja zhang

Analyze and optimize webpage images for SEO, performance, formats, responsiveness, lazy loading, and CLS prevention.

409 views

3 Uses

Added by Jorge Jaramillo

Guidelines for designing a polished SaaS marketing interface with strong layout systems, realistic product dashboards, subtle motion, and refined visual hierarchy.

Guides creation of polished light-mode SaaS marketing interfaces with varied layouts, rich product UI components, strong hierarchy, and subtle motion.

Guides cold start strategy for AI/SaaS products to get first users, traction, and validate product-market fit from zero.

365 views

3 Uses

Added by kostja zhang

Guidance for creating, structuring, editing, packaging, and iterating reusable Claude skills with metadata, resources, and best practices.

363 views

Added by Alain Hensley

Builds complex single-file Claude artifacts with React, TypeScript, Tailwind CSS, and shadcn/ui using init and bundling scripts.

346 views

5 Uses

Added by Alain Hensley

Create generative art with p5.js using seeded randomness, noise, flow fields, particle systems, recursive forms, and palette-based experimentation.

335 views

3 Uses

Added by Alain Hensley

Guides writing internal company communications like status reports, leadership updates, newsletters, FAQs, and incident reports using preferred formats.

290 views

1 Uses

Added by Alain Hensley

A structured guide for selecting and applying web animation patterns across multiple technologies using a registry-first workflow.

Muhammad Talha Imtiaz

A skill for generating DESIGN.md files that encode premium, non-generic design systems for AI-driven screen generation.

Muhammad Talha Imtiaz

Guidance for optimizing in-app paywalls, upgrade prompts, and upsell flows to improve free-to-paid conversion without harming user trust.

221 views

9 Uses

Added by Phillip

Index of GSAP-related skills for AI agents, covering core animation, timelines, ScrollTrigger, plugins, React/framework integration, utilities, and performance.

194 views

4 Uses

Added by Mitul Chovatiya

Covers using GSAP in Vue, Svelte, and similar frameworks with proper lifecycle timing, selector scoping, and cleanup on unmount.

186 views

2 Uses

Added by Mitul Chovatiya

Explains how to build and control GSAP timelines for sequencing animations with position parameters, labels, nesting, defaults, and playback.

158 views

3 Uses

Added by Mitul Chovatiya

Covers GSAP core tween animation APIs, easing, stagger, responsive matchMedia usage, and accessibility-minded animation best practices.

153 views

6 Uses

Added by Mitul Chovatiya

Covers GSAP plugin registration and practical use of plugins for scroll, FLIP, draggable UI, text, SVG, easing, physics, and animation debugging.

144 views

1 Uses

Added by Mitul Chovatiya

A senior-level UI/UX engineering guide for architecting premium digital interfaces using strict component architecture, motion physics, and anti-bias design rules.

A comprehensive design guide and CLI tool for building accessible, responsive, and high-performance UI across multiple tech stacks and styles.

Robert Denton

Reference for GSAP utility helpers like clamp, mapRange, random, snap, toArray, wrap, and related value, unit, and collection utilities for animation code.

110 views

Added by Mitul Chovatiya

A semantic design system skill for Google Stitch that enforces premium UI standards through anti-generic rules and specific hardware-accelerated performance constraints.

Theweb3 Brothers

A comprehensive art direction system for generating high-end, implementation-friendly website design references with an emphasis on hierarchy, imagery, and anti-slop visual discipline.

Creates premium, website-like presentation decks using custom design systems, structured UI components, and executive storytelling principles.

Prosper Akingbohungbe

Expert guidelines for modern UI design covering layout, theme, color systems with oklch(), and accessibility for responsive web development.

Robert Denton

Teaches how to create customizable CSS gradient borders with a pseudo-element mask, including Tailwind-friendly usage and common implementation pitfalls.

Abiel A.R

Official GSAP guide for building scroll-linked animations with triggers, pinning, scrub behavior, batching, proxies, and cleanup best practices.

71 views

1 Uses

Added by Mitul Chovatiya

Master React 19, Next.js 15, and modern architecture to build performant, accessible, and scalable web applications.

Robert Denton

Expert guidance on advanced prompting techniques, LLM optimization, and production-ready AI system design using chain-of-thought and constitutional AI.

Robert Denton

Guidelines for using GSAP in React and Next.js with useGSAP, refs, scoped selectors, cleanup, and SSR-safe animation patterns.

61 views

1 Uses

Added by Mitul Chovatiya

Create self-contained HTML dashboards featuring KPI cards, Chart.js visualizations, interactive filters, and sortable data tables without external dependencies.

Robert Denton

Optimizes GSAP animations for smooth 60fps using transforms, batching, will-change, and efficient tweening patterns.

57 views

Added by Mitul Chovatiya

Write and review microcopy, error messages, and CTAs using principles of clarity, conciseness, and human-centric design.

Robert Denton

Art direction skill for generating high-fidelity, app-native mobile screen flows with clean hierarchy, rich textures, and premium device framing.

/ app.css Tailwind v4 CSS first configuration / @import "tailwindcss"; / Define your theme with @theme / @theme { / Semantic color tokens...

Youness Jamal

name: find skills description: Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill...

14 views

1 Uses

Added by hill

Create tactile web interfaces using layered gradients, stacked shadows, and micro-textures for a realistic physical aesthetic.

Apply exact Tailwind arbitrary shadow utilities for polished, layered neutral elevation across cards, controls, and modals.

Create a premium, futuristic dark-blue design system with procedural mesh gradients, hero shells, and minimal UI nodes.

Create a high-performance full-screen WebGL laser background with an atmospheric smoke effect and brand-integrated glowing cores.

Add vertical container-size guide lines and mini corner squares for precise, structured web layouts using CSS.

Create premium staggered word-reveal animations through overflow masks using GSAP ScrollTrigger for editorial-style scroll effects.

Create atmospheric monochrome procedural backgrounds with enlarged square pixels and visible Bayer-style ordered dithering.

Create a premium 3D particle globe with a luminous spherical core and orbital rings using Three.js and custom shaders.

Create high-fidelity 3D web visuals using WebGL and Three.js with physically based materials, lighting, and geometric depth for hero sections.

Implement precise chamfered edges and diagonal-cut corners for buttons and containers using CSS clip-path and polygon shapes.

Create minimal, editorial web layouts using thin boundary lines, L-shaped corner brackets, and strict grid-based section alignment.