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.

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

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

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

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.

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

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.

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

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

Elroy Yeap

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

409 views

3 Uses

Added by Jorge Jaramillo

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

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

Muhammad Talha Imtiaz

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

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

Abiel A.R

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

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

Youness Jamal

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.

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

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.