UI Components
Code-based UI component generation and styling
react-best-practices
by laguagu
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Next.js 16 + shadcn/ui
by laguagu
Claude Code skills for AI apps • Next.js 16 • AI SDK 6 • pgvector • bun • Ralph Loop
ai-elements
by laguagu
AI Elements component library for AI-native applications. Use when building chatbots, AI workflows, or integrating with Vercel AI SDK's useChat hook.
react-patterns
by rohitg00
React 19 patterns including Server Components, Actions, Suspense, hooks, and component composition
marimo-batch
by marimo-team
An opintionated skill to prepare a marimo notebook to make it ready for a scheduled run.
anywidget-generator
by marimo-team
Generate anywidget components for marimo notebooks.
ffmpeg-cli
by henkisdabro
FFmpeg CLI reference for video and audio processing, format conversion, filtering, and media automation. Use when converting video formats, resizing or cropping video, trimming by time, replacing or extracting audio, mixing audio tracks, overlaying text or images, burning subtitles, creating GIFs, generating thumbnails, building slideshows, changing playback speed, encoding with H264/H265/VP9, setting CRF/bitrate, using GPU acceleration, creating storyboards, or running ffprobe. Covers filter_complex, stream selectors, -map, -c copy, seeking, scale, pad, crop, concat, drawtext, zoompan, xfade.
ab-test-setup
by TerminalSkills
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.
alpine
by TerminalSkills
Alpine.js is a lightweight JavaScript framework for adding interactivity to HTML markup. It provides reactive data, event handling, and DOM manipulation through HTML attributes — like a modern jQuery replacement with declarative syntax.
angular
by TerminalSkills
Angular is Google's TypeScript-based frontend framework for building scalable single-page applications. It provides components, dependency injection, RxJS-based reactivity, routing, forms, HTTP client, and a powerful CLI for development.
front-ui-skills
by ihlamury
Front's UI design system. Use when building interfaces inspired by Front's aesthetic - light mode, Inter font, 4px grid.
github-ui-skills
by ihlamury
GitHub's UI design system. Use when building interfaces inspired by GitHub's aesthetic - dark mode, Inter font, 4px grid.
airtable-ui-skills
by ihlamury
Airtable's UI design system. Use when building interfaces inspired by Airtable's aesthetic - light mode, Inter font, 4px grid.
airbnb-ui-skills
by ihlamury
Airbnb's UI design system. Use when building interfaces inspired by Airbnb's aesthetic - light mode, Inter font, 4px grid.
bear-ui-skills
by ihlamury
Bear's UI design system. Use when building interfaces inspired by Bear's aesthetic - light mode, Inter font, 4px grid.
ghost-ui-skills
by ihlamury
Ghost's UI design system. Use when building interfaces inspired by Ghost's aesthetic - dark mode, Inter font, 4px grid.
framer-ui-skills
by ihlamury
Framer's UI design system. Use when building interfaces inspired by Framer's aesthetic - dark mode, Inter font, 4px grid.
anthropic-ui-skills
by ihlamury
Anthropic's UI design system. Use when building interfaces inspired by Anthropic's aesthetic - light mode, Inter font, 4px grid.
liveblocks-ui-skills
by ihlamury
Liveblocks's UI design system. Use when building interfaces inspired by Liveblocks's aesthetic - dark mode, Inter font, 4px grid.
craft-ui-skills
by ihlamury
Craft's UI design system. Use when building interfaces inspired by Craft's aesthetic - light mode, Inter font, 4px grid.
mailchimp-ui-skills
by ihlamury
Mailchimp's UI design system. Use when building interfaces inspired by Mailchimp's aesthetic - light mode, Inter font, 4px grid.
n26-ui-skills
by ihlamury
N26's UI design system. Use when building interfaces inspired by N26's aesthetic - dark mode, Inter font, 4px grid.
cal-ui-skills
by ihlamury
Cal's UI design system. Use when building interfaces inspired by Cal's aesthetic - light mode, Inter font, 4px grid.
mercury-ui-skills
by ihlamury
Mercury's UI design system. Use when building interfaces inspired by Mercury's aesthetic - light mode, Inter font, 4px grid.