3,911 tagged CSS and styling, measured the same way as everything else here.
Browse within: claude-code-plugin 89design-system 83accessibility 82animation 76ai-coding 62css 60ai-skills 55ui 46agentic-workflow 38design-systems 37design-tools 37motion-design 37agent-orchestration 36figma-motion-alternative 35
Skill Claude CodeCodex
Use when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at. A taste-first design system that makes generated pages look intentional and crafted instead of generic "AI-made". Provides an aesthetic-direction process, design tokens, a starter…
Skill Claude CodeCodex
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
Skill Claude CodeCodex
Produce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer,"…
maquina-app/maquina_components
Skill Claude CodeCodex
Build consistent, accessible UIs in Rails using maquinacomponents. Use this skill when implementing UI for features, creating views, building forms, or reviewing UI specs. Triggers on view creation, UI implementation, form building, layout design, or mentions of maquinacomponents usage.
Skill Claude CodeCodexCursor
A practical development guide for building JavaScript and React interfaces with Tailwind CSS and shadcn/ui, a collection of reusable interface components.
Skill Claude CodeCodex
Use when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed. Prevents the double-border artifact caused by pairing a border/ring with a shadow, by routing elevation through the smooth-shadow-ring- utilities.
Skill Claude CodeCodex
Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop. Use when building or restyling any website, landing page, hero, marketing page, portfolio, or web UI; when adding scroll animations, reveals, parallax, marquees, hover effects, page…
Skill Claude CodeCodex
Public-safe julilaoshi-design workflow for official Pencil MCP execution and the free browser-first julilaoshi-design Web 2.0 editor. Use when a task needs Pencil handshake/canvas edits, .pen execution, screenshot review, or lightweight HTML design-to-web tweaking without redistributing official Pencil or leaking…
Skill Claude CodeCodex
A set of instructions for building and reviewing product front ends, meaning the visible part of an application that users interact with. It covers pages, components, forms, data flow, layout, styling, responsive behavior, and animations.
Skill Claude CodeCodex
Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.
Skill Claude CodeCodexCursor
Turns a storyboard shot (video prompt + narration) into a self-contained fullscreen HTML CSS animation for the browser. Analyzes VO/旁白, searches related facts and usage cues, then builds a rich layered stage (camera, subject, secondary UI, light, micro-detail) with Fullscreen API and Space-to-play. Use when the user…
Skill Claude CodeCodex
Apply visual changes from the Retune overlay to source code. Use this skill when receiving output from retune MCP tools (retunegetformattedchanges, retunegetpendingchanges) OR when the user pastes structured visual change output containing "# Visual Changes", "# Comments", "Prop Changes", "Attribute Changes", "SVG…
Skill Claude CodeCodex
Reproduce a Claude Design prototype or design handoff (HTML/CSS, .dc.html export, tokens, screenshots) inside a Mendix app: build the palette with mxcli theme create --from, then apply classes in pages with MDL. Use when given a design artefact and asked to make the app look like it.
Skill Claude CodeCodex
Use when creating, redesigning, or reviewing web interfaces that need product-specific structure, clear hierarchy, responsive composition, accessible interaction, or relief from generic AI-generated SaaS aesthetics. Adapt grid, typography, imagery, motion, and product evidence to the established brand—including…
Skill Claude CodeCodex
Beautify or redesign an existing website through iterative pingfusi review rounds with a real human reviewer. Use when asked to "beautify this website," "make this page look professional," "polish this UI/design," "improve the visual design," or finish an AI-built page when there is no reference site to match. Do not…
Skill Claude CodeCodex
Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design"…
Skill Claude CodeCodex
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
Skill Claude CodeCodex
Cosmic Harbor design system for OrbitDock. Covers the full visual language: color tokens (status, feedback, tool, model, autonomy, diff, syntax), spacing (4pt grid), typography scale, corner radii, elevation/shadow/glow, opacity tiers, motion presets, icon sizing, component patterns (badges, cards, buttons, banners…
Skill Claude CodeCodex
A standard process for changing a page or component’s visual design, theme support, and interactions.
Skill Claude CodeCodex
Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system. Use for React/Tailwind pages, cards, dialogs, mobile layouts, theme work, navigation, forms, empty/loading/error states, and UI consistency reviews in AgentOS.
199-biotechnologies/motion-dev-animations-skill
Skill Claude CodeCodex
Creates 120fps GPU-accelerated animations with Motion.dev (Framer Motion successor) for React, Next.js, Svelte, and Astro projects. Use when user requests animation, motion, scroll effects, parallax, hero animations, gestures, drag interactions, spring physics, whileHover effects, whileInView animations, animated UI…
Skill Claude CodeCodex
Anti-slop frontend direction for landing pages, portfolios, editorial pages, and design-forward redesigns. Use after reading the brief to infer a fitting visual system, preserve existing product constraints, and run a strict pre-flight audit.
Skill Claude CodeCodex
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
Skill Claude CodeCodex
UI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types across 22 stacks (React, Next.js, Vue, Nuxt, Svelte, Astro, SwiftUI, React Native, Flutter…
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: