4,822 tagged CSS and styling, measured the same way as everything else here.
Browse within: accessibility 88claude-code-plugin 77design-system 74animation 66ai-coding 63css 57ai-skills 55design-tools 51motion-design 51figma-motion-alternative 49agent-orchestration 45agentic-workflow 39claude-code-skills 34codex-skills 34
Michael-Obele/shadcn-svelte-mcp
Skill Claude CodeCodex
Use when building, redesigning, beautifying, or refactoring SvelteKit pages and reusable components with shadcn-svelte, Bits UI, or the shadcn-svelte MCP. Trigger on landing pages, dashboards, marketing sites, app shells, forms, navbars, tables, dialogs, responsive layouts, theming, icon selection, and requests to…
Skill Claude CodeCodex
Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via…
Skill Claude CodeCodex
Build a web animation: whether it should animate at all, the purpose, the tool, the properties, the easing curve, the duration, interruption and exit. Writes the CSS or Motion code for dropdowns, modals, toasts, tooltips, accordions, press feedback, stagger and scroll reveals. Use to animate something or make a…
Skill Claude CodeCodex
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"). Use this skill when asked to "de-slop a UI", "make a design look less AI-generated", "audit a component or page for AI design tells", or "fix Claude/Codex-generated frontend that looks generic". Covers HTML/CSS and React/Tailwind/shadcn.…
Skill Claude CodeCodex
Design UIs in Pencil (.pen files) and generate production code from them. Use when working with .pen files, designing screens or components in Pencil, or generating code from Pencil designs. Triggers on tasks involving Pencil, .pen files, design-to-code workflows, or UI design with the Pencil MCP tools.
Skill Claude CodeCodex
Frontend design mode for strong visual direction, UI polish, redesigns, landing pages, and production-grade interface work, including shadcn-based surfaces. Use when the user says /fd or explicitly asks for better design, styling, layout, visual quality, or UX polish.
Skill Claude CodeCodex
Use this skill when designing, improving, or modifying the Clauder web management interface.
wechat-miniprogram/skyline-skills
Skill Claude CodeCodex
A development guide for Skyline, a mobile interface framework, covering scrolling, carousels, forms, images, text, draggable panels, and page animations. It also documents Skyline-specific components such as list views, grid views, sticky headers, and shared-element transitions.
egorfedorov/Slot-Casino-Game-Developer-Skills-for-Stake-Engine
Skill Claude CodeCodex
Design CSS animation systems and motion recipes for casino game UI. Use when building round transitions, idle loops, inter-round motion, background patterns, or CSS-only animation specs.
Skill Claude CodeCodex
Build or restyle frontends with two deliberately separate modes: App Mode for a clean, restrained macOS-style desktop-tool shell (left nav + content, soft surfaces, raised cards, single brand accent, settings-list language, light and dark themes), and Website Mode for public web frontends such as marketing sites…
LovroPodobnik/refactoring-ui-skill
Skill Claude CodeCodex
Tactical user interface design guide for fixing layouts, selecting colors/fonts, and creating professional UIs. Use when the user asks to "make this look better," needs help with CSS/styling decisions, wants to create a design system, or needs to fix a cluttered interface.
Skill Claude CodeCodex
Frontend/design system skill for the svelteflare monorepo. Use this whenever the user wants to build or modify UI — pages, sections, components, layouts, forms, cards, tables, dialogs, dashboards, or landing pages. Also invoke for anything theme-related: light/dark mode, custom colors, design tokens, typography, or…
Skill Claude CodeCodex
Build production-ready design systems with Tailwind CSS v4, including CSS-first configuration, design tokens, component variants, and accessibility. Use when working with Tailwind projects.
Skill Claude CodeCodex
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling.
Skill Claude CodeCodex
Replace Tailwind CSS linear gradients with smooth eased gradients using tw-easing-gradients. Use when upgrading bg-gradient-to-, creating fading backgrounds, or smooth color transitions.
Skill Claude CodeCodex
Cross-platform animation and motion-design craft for web AND React Native (Expo or bare). Use when deciding whether/how something should animate, choosing easing/duration/springs, building transitions, drawers, toasts, gestures and drag-to-dismiss, reviewing UI motion, or fixing jank in animations, gestures, or…
Skill Claude CodeCodex
Professional design system with color palette rules, typography, spacing, multi-page architecture, service/product detail pages, navigation limits, no-emoji policy, section spacing, and deployment guides (Astro + Cloudflare). Enforces multi-page website structure with individual service/product pages.
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.
Skill Claude CodeCodex
Operational playbook for framework-agnostic UI/UX/a11y — semantic-element-first markup, keyboard/focus verification, responsive layout checks, reuse of existing tokens over new CSS. Read in full at the start of every task on this team.
Skill Claude CodeCodex
CSS and UI animation patterns for responsive, polished interfaces. Use when implementing hover effects, tooltips, button feedback, transitions, or fixing animation issues like flicker and shakiness.
TommyChryst/claude-web-animations
Skill Claude CodeCodex
Create a scroll-driven video scrub section where a video's playback position is controlled by scroll progress. Use when the user wants a scroll-scrub animation, cinematic scroll effect, video timeline scrubbing, parallax video, scroll-synced video, or wants to sync a video to scroll progress. Handles ffmpeg…
Skill Claude CodeCodex
Comprehensive skill for Anime.js v4 - a fast and flexible JavaScript animation library. This skill should be used when implementing web animations, creating timelines, working with SVG animations, scroll-based animations, draggable elements, staggered effects, or any JavaScript-based animation on the web. Triggers on…
Skill Claude CodeCodex
Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, or error state shakes. Triggers on "add a transition", "animate the dropdown", "make…
Skill Claude CodeCodex
Build UIs with @bitrix24/b24ui-nuxt v2 — 130+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, building forms, or composing layouts for a Bitrix24 application.
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: