4,769 tagged CSS and styling, measured the same way as everything else here.
Browse within: skills 89ai-tools 85accessibility 84design-system 82claude-code-plugin 76animation 65ai-skills 61ai-coding 60css 54design-tools 51motion-design 51figma-motion-alternative 49agent-orchestration 40agentic-workflow 39
ngocanhnckh/liquid-glass-frontend-skill
Skill Claude CodeCodex
Use when building a beautiful, distinctive, awwwards-tier web frontend — landing pages, dashboards, web apps, marketing sites — that needs Apple-style liquid-glass surfaces, choreographed motion.dev animations, and creative editorial layouts instead of the generic SaaS look (icon-card rows, centered heroes, default…
Skill Claude CodeCodex
Search Adobe Fonts (Typekit) families, create and manage web kits/projects, and return ready-to-use embed snippets plus CSS font-family values. Use when the user asks to find Adobe fonts, compare font options, set up Typekit for a website, add fonts to kits, publish kits, or generate copy/paste font embed metadata for…
Skill Claude Code
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page…
yuqizhang1228-blip/AI-color-system
Skill Claude CodeCodex
A brand-based UI colour system covering brand, background, text, and semantic colours, with light and dark modes, accessibility checks, and platform token names.
Skill Claude CodeCodex
Design and build "instrument-grade" UI — marketing pages AND in-product surfaces (app pages, dashboards, panels, subpanels) that read like the product itself, not like a template. Distilled from the sectorRRG "The Instrument" landing redesign: dark editorial ground, single-accent color discipline, serif display +…
Skill Codex
Create, modify, or validate Backchat color-theme plugins and migrate frontend visual values into the semantic theme-token contract. Use when a user asks for a Backchat skin, theme, color scheme, editor-style appearance pack, theme preview, or tokenization work under openma-desktop.
Skill Claude Code
Frontend design partner. Kills AI-slop by teaching 10 tells with positive direction. Five commands: detect, audit, deslop, shape, craft. Model-invoked: flag tells, run detect. User-invoked: grill first.
Skill Claude CodeCodex
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
Skill Claude Code
Build or update a reusable UI component in src/components/ — primitives, composites, landmarks, content components. Trigger whenever the user wants to create or modify any .astro file under src/components/, add a variant or state to an existing component, do a visual refactor (spacing, hover lift, type), or build a…
Skill Codex
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
Skill Codex
Direct, design, implement, animate, critique, audit, polish, and deploy distinctive production frontend interfaces for websites, landing pages, web apps, dashboards, mobile concepts, and desktop shells. Use for new frontend builds, redesigns, bland or visually generic UI, messy interfaces, design systems, Vue Bits or…
Skill Claude CodeCodex
Use when you know what component, flow, or interface you need but not yet the right accessibility approach. Best for turning WCAG 2.2 requirements into an accessible implementation plan with WAI-ARIA APG patterns before code hardens bad interaction and state patterns.
Skill Claude Code
The finalized visual rules for this app — colour, accent, type, spacing, radius tokens, plus the entry-thumbnail, segmented-control, and empty/loading patterns. Use before building or editing any UI in this app, and any time you are about to pick a size, colour, gap, or radius.
kesslerio/ultimate-frontend-design-openclaw-skill
Skill Claude CodeCodex
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites…
Skill Claude Code
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
Skill Claude CodeCodex
Extrai o design system de um HTML/URL/print e gera um design-system.html canônico (11 seções, anatomia replicável, regras do/dont, tokens CSS, classes .ds-, WCAG AA, voz, versionamento) preservando 100% das classes/animações originais. Salva o DS mestre do seu OS em contexto/design-system.html e a referência extraída…
Skill Codex
Orchestrate UI direction, composition, motion provider selection, implementation, and browser-proven quality for polished frontend work. Use when Codex needs to improve a visual surface with animation or interactive polish; when a request mixes design intent, component choice, browser validation, accessibility, or…
Skill Claude Code
CSS, JavaScript, and HTML coding standards for this Kona theme. Covers Tailwind CSS v4 utility-first patterns, Vite build pipeline, island hydration architecture, design tokens via @theme, Web Components, defensive CSS, and progressive enhancement. Use when writing CSS/JS/HTML in .liquid files or theme frontend source…
Skill Claude CodeCodex
Use this skill whenever building interfaces that should feel physically responsive, alive, and polished. Trigger for spring animations, gesture-driven UI, interruptible animations, physics-based motion, drag interactions, momentum scrolling, layout animations, shared element transitions, spatial UI…
Skill Claude Code
Creates dropdown menus with proper click-outside detection and z-index stacking for list contexts. Use when building action menus, context menus, or any dropdown that appears in cards/list items.
Skill Claude CodeCodex
Audits and implements web accessibility (a11y) following WCAG 2.1 guidelines with ARIA patterns, keyboard navigation, screen reader support, and contrast checking. Use when users request "accessibility audit", "a11y review", "WCAG compliance", "screen reader support", or "keyboard navigation".
Skill Claude CodeCodex
DNA de design de 20 sites premium (engenharia reversa via DevTools) — a fórmula Webflow/HTML + Lenis + GSAP/ScrollTrigger destilada em leis, calibres medidos e 22 efeitos nomeados com código. Use ao criar landing pages animadas, sites com scrollytelling, heroes tipográficos, vídeo-fundo, marquees, pin/scrub ou…
Skill Claude CodeCodex
Design and implement high-quality web interfaces by synthesizing proven design philosophies from Dieter Rams, Brad Frost (Atomic Design), Google Material Design, and modern web best practices. Triggered when the user asks to design a web page, UI component, design system, layout, or when asked to review/improve…
Skill Claude CodeCodex
Helps with authoring and reviewing modern CSS for robust, responsive, and accessible UIs — cascade layers, @scope, :has(), nesting, container queries, fluid typography with clamp(), oklch() colors, light-dark() and color-scheme, logical properties, subgrid, and prefers-reduced-motion. Use this skill when the user asks…
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: