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.

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.

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

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

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.

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

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.

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

Elroy Yeap

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.

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 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

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

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

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

Robert Denton

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

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

Robert Denton

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.

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

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.

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