4,818 tagged CSS and styling, measured the same way as everything else here.
Browse within: skills 88accessibility 85ai-tools 83design-system 81claude-code-plugin 78animation 63ai-skills 58ai-coding 57css 56design-tools 51motion-design 51figma-motion-alternative 49agent-orchestration 38agentic 38
Skill Claude CodeCodex
Rules and patterns for building UI with shadcn/ui, Tailwind v4 or StyleX, and Motion against a Vois design token set. Use when building components, pages, or any UI that should conform to the workspace design system. Covers spacing, typography, color tokens, component architecture, animation, accessibility, and modern…
Skill Claude CodeCodex
Apply a restrained, Swiss/Japanese/Scandinavian/German-influenced product design system when building or refining UI in React, Next.js, TypeScript, and shadcn/ui — the stack-specific binding of the ui-principles core, with concrete numbers. Use when the user asks to build, refine, critique, redesign, or review a page…
Skill Claude CodeCodex
Discover shadcn-compatible components and registries across the entire ecosystem before writing any custom UI. Use PROACTIVELY before building tables, forms, modals, animations, dashboards, auth pages, or any UI component. Use when the user says "find a component for...", "is there something for...", "search…
YangsonHung/awesome-agent-skills
Skill Claude CodeCodex
Use when building, modifying, or reviewing frontend UI where text overflow, layout, responsiveness, accessibility, and visual polish must be verified.
Just-Agent/just-progress-bar-skill
Skill Claude CodeCodex
Design, select, generate, and audit accessible creative progress bars for React, HTML/CSS, Gallery demos, recipes, CLI workflows, and Agent/MCP integrations.
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for…
Skill Claude CodeCodex
Guides the design, layout, styling, and interactivity of kernel.chat editorial spreads and standalone artifact editions. Use this skill when editing or creating pages, React components, CSS files, or single-file HTML artifacts in the kernel.chat project to enforce the POPEYE-inspired bilingual design grammar and the…
Skill Claude CodeCodex
Use the ng-blatui Angular UI library in an app — install, import components (bui-prefixed, signal-based, zoneless, SSR-safe), theme with Tailwind v4 + oklch tokens, localize dates/numbers/labels, and discover the full catalog via the registry, api.json, llms.txt or the ng-blatui-mcp MCP server. Invoke when building…
Xialiang98/design-visual-frontend
Skill Claude CodeCodex
Design, build, redesign, or critically review distinctive frontend interfaces with strong composition, domain authenticity, responsive behavior, component coherence, and browser-verified visual quality. Use for websites, landing pages, login and form flows, dashboards, admin tools, product pages, portfolios, visual UI…
Skill Claude CodeCodex
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Skill Claude CodeCodex
Add CSS animations to HTML elements, React/JSX components, or WordPress PHP templates using Animate.css (v4.1.1). Use this skill whenever the user wants to animate UI elements, add entrance/exit effects, attention-seeker animations, or any CSS-based motion to their markup. Trigger on phrases like "add animation"…
doublesq97-ui/su-webstyle-top12
Skill Claude CodeCodex
Curated Top 12 overseas web styles with executable recipes: browse, choose, recommend, auto-select, and apply. Use for website visual direction, landing pages, style boards, artifacts (cards, dashboards, note readers, sticky-rail ops shells), and skinning existing layouts. Raises a minimum style floor (tokens…
Skill Claude CodeCodex
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. 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 file. Also triggers for…
Skill Claude CodeCodex
Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion.…
Skill Claude CodeCodex
Reference design-system presets for ux-design. Anti-slop shortcuts: instead of inventing tokens, elevation, and state contracts from scratch, reuse one of these battle-tested systems (shadcn/ui, Material 3, Radix) or drop in a medium-tuned DESIGN.md starter (Web or Mobile) as the implicit system when no DESIGN.md…
22duxiaoyu/replicate-webpage-skill
Skill Claude CodeCodex
A webpage-rebuilding workflow that recreates the visible layout, responsive behavior, and interactions of a reference URL in your codebase, then applies requested content or branding changes.
Skill Claude CodeCodex
Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user…
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Skill Claude CodeCodex
Use this agent when you need to design, audit, migrate, rewire, or rewrite UX/UI.
Skill Claude CodeCodex
Pixel-perfect website cloner. Given a URL, faithfully reproduces the page as a single self-contained HTML file. Uses Playwright to render the page in a real browser, then directly extracts the rendered DOM + all computed CSS — no manual rewriting. Handles static HTML, JS-rendered SPAs, Webflow, Next.js, and any…
Rodriguespn/improve-skills-workshop-aie-europe
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context.
Skill Claude CodeCodex
Build software with elite design principles focusing on user outcomes, trust, accessibility, and performance. Use when creating UI components, designing user flows, writing production code, reviewing code quality, or when the user mentions UX, accessibility, performance, or trust-focused development.
Skill Claude CodeCodex
Create stunning, interactive landing pages for products, startups, and side projects — zero dependencies, single HTML file. Use this skill whenever the user wants to build a landing page, product page, launch page, marketing page, or any promotional web page for their app, tool, SaaS, open-source project, or personal…
Skill Claude CodeCodex
Customize any running Electron desktop app (Slack, Codex, VS Code, Discord, Notion, etc.) live without modifying app files. Use when the user wants to change how an Electron app looks or behaves — move panels, change fonts, hide elements, inject features, restyle UI — all applied instantly via Chrome DevTools Protocol…
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: