Skills and MCP tagged “css”

emil-design-eng emilkowalski skill This skill guides UI polish, component details, and animation choices. Use it when an interface works but its states and transitions need closer review. Claude Code CX Codex Cursor +1 385,500installs review-animations emilkowalski skill Reviews UI animation and motion code against Emil Kowalski's design standards. Flags slow easings, non-GPU properties, and unnecessary transitions. Claude Code CX Codex Cursor +1 254,100installs improve-animations emilkowalski skill Surveys motion and animation code across your project, then generates self-contained fix plans. It spots janky keyframes and poor easing without altering source files. Claude Code CX Codex Cursor +1 222,000installs animate emilkowalski skill Builds UI animations from scratch following Emil Kowalski's motion philosophy. Use it when adding motion, transitions, or component interactions. Claude Code CX Codex Cursor +1 170,400installs hallmark Nutlope skill Enforces strict frontend design constraints to stop coding assistants from producing generic, AI-looking web pages. Claude Code CX Codex Cursor +1 69,100installs design-system claudekit skill This skill builds design tokens, component specs, and presentation slides. Use it when an interface and its slides need to follow one visual system. Claude Code CX Codex Cursor +1 42,200installs brand claudekit skill Keeps brand voice, visual rules and design tokens in one markdown file, then feeds them to your agent's prompts and to your CSS variables. Claude Code CX Codex Cursor +1 39,500installs banner-design claudekit skill Generates banners for social media, ads, and web hero sections using HTML/CSS. Useful when you need fast visual creative assets directly in your coding agent. Claude Code CX Codex Cursor +1 39,000installs mobile-native emilkowalski skill Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug. Claude Code CX Codex Cursor +1 84,500installs animation-performance emilkowalski skill A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead. Claude Code CX Codex Cursor +1 34,700installs daisyui saadeghi skill This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own. Claude Code CX Codex Cursor +1 12,000installs better-ui jakubkrehel skill This skill sets concrete rules for surface details, icons, shadows, and motion. Use it to polish an interface after its underlying interactions work. Claude Code CX Codex Cursor +1 38,900installs web-design-engineer ConardLi skill Directs your coding agent to craft polished web interfaces in HTML, CSS, JavaScript, and React. Useful for building dashboards, UI prototypes, slide decks, and animations. Claude Code CX Codex Cursor +1 8,700installs fixing-motion-performance ibelick skill Audits and fixes UI animation performance issues like layout thrashing, blur lag, and scroll jank. It optimizes CSS and JS motion without switching your animation libraries. Claude Code CX Codex Cursor +1 26,800installs stitch::extract-design-md official google-labs-code skill Extracts a complete DESIGN.md design system directly from frontend source files without building or rendering the project. Useful for styling audits and Stitch exports. Claude Code CX Codex Cursor +1 10,500installs design-system affaan-m skill Builds a design system out of the styles already in your repo, or audits them: tokens, a ten-point UI score, and a check for generic AI styling. Claude Code CX Codex Cursor +1 4,900installs better-typography jakubkrehel skill Reviews interface typography and applies fixes through the project’s styling system. Use it to check text hierarchy, wrapping, truncation and punctuation. Claude Code CX Codex Cursor +1 33,800installs baseline-ui ibelick skill Cleans up AI-generated UI code by fixing layout issues, typography, spacing, and animations. Useful for a fast frontend polish pass before merging. Claude Code CX Codex Cursor +1 24,100installs make-interfaces-feel-better affaan-m skill This skill helps review and refine interface details such as spacing, typography, interaction states, and motion. Use it when a component feels unfinished or visually off. Claude Code CX Codex Cursor +1 4,600installs better-colors jakubkrehel skill Audits color systems, generates ramps, and maps semantic tokens to roles. Use it when hardcoded hex values pile up or text contrast needs verifiable measurement. Claude Code CX Codex Cursor +1 32,200installs better-layout jakubkrehel skill A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. Claude Code CX Codex Cursor +1 30,400installs transitions-dev Jakubantalik skill Twelve standalone CSS transitions for modals, dropdowns, badges, and card resizes. Helps coding agents wire production-ready UI animations without external libraries. Claude Code CX Codex Cursor +1 1,900installs modern-web-guidance GoogleChrome skill A skill that searches a catalog of modern web guides and feeds the matching one to your agent. Useful when the model's training data has stale HTML, CSS or client-side JS patterns. Claude Code CX Codex Cursor +1 34,900installs motion-design LottieFiles skill This skill guides UI animation choices, from timing and easing to choreography. Use it when planning micro-interactions, loading states, or page transitions. Claude Code CX Codex Cursor +1 19,700installs extract-design-system arvindrk skill This skill extracts design primitives from a public website and generates starter tokens.json and tokens.css files for your project. Claude Code CX Codex Cursor +1 130,600installs chakra-ui-refactor chakra-ui skill Reviews components against Chakra UI v3 patterns and converts markup from HTML, Tailwind, or styled-components. Useful for UI refactoring and accessibility audits. Claude Code CX Codex Cursor +1 2,800installs frontend-design nexu-io skill Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards. Claude Code CX Codex Cursor +1 4,800installs transitions-polish Jakubantalik skill This skill audits existing animations and maps timing, distance, scale, blur, and easing to motion tokens. Use it when motion feels off. Claude Code CX Codex Cursor +1 10,600installs explain-interface jakubkrehel skill Explains how a visual effect, animation, or website layout was built from a live page or a screenshot. It breaks down the underlying layer stack. Claude Code CX Codex Cursor +1 13,900installs interaction-design Seth Hobson skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns. Claude Code CX Codex Cursor 16,146installs unocss Anthony Fu skill A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it. Claude Code CX Codex Cursor +1 16,000installs popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) skill 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands. Claude Code CX Codex Cursor +1 914installs visual-edit-precision Adit Jain skill Enforces targeted, minimal UI edits when you provide screenshots or annotations. It stops the agent from rewriting surrounding component code. Claude Code CX Codex Cursor 2,800installs ui-designer Seth Hobson subagent Designs interfaces, components, and responsive layouts with implementation in mind. Use it when building screens, forms, tables, or a design system. Claude Code CX Codex Cursor 1,979installs ui-design-system Alireza Rezvani skill This skill builds design tokens, component structures, and responsive calculations. Use it when a project needs a consistent UI system or a developer handoff. Claude Code 1,076installs epic-design Abbas Mir skill Builds cinematic 2.5D websites using scroll storytelling and parallax depth without WebGL. Useful for product launch sites, hero sections, and interactive landing pages. Claude Code 701installs game-ui-frontend official OpenAI skill Guides browser game interface design for HUDs, overlays, and menus. Keeps the playfield clear and isolates camera input during UI interactions. CX Codex GP ChatGPT 98installs figma-implement-motion official Figma skill Translates Figma animations and transitions into production code using motion.dev or CSS keyframes. Useful when implementing motion for UI components from a design. CX Codex GP ChatGPT 6installs