frontend skills

AI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs

The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.

Developers building UI components and design systems using shadcn/ui

The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.

Frontend developers and designers using AI agents to review UI code or implement design system improvements

This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.

Developers building animations in React, Vue, Svelte, or vanilla JavaScript who need to implement tweens, timelines, or responsive animation logic

The gsap-core skill provides instructions and patterns for using the GreenSock Animation Platform (GSAP) core API. It covers tween methods, easing, stagger, transforms, accessibility via gsap.matchMedia, and best practices for performant animations in JavaScript environments.