4,019 tagged CSS and styling, measured the same way as everything else here.
Browse within: agentic-ai 99skills 88accessibility 84design-system 82ai-tools 81agent 79claude-code-plugin 75animation 65ai-coding 60LLM 59ai-skills 59cli 55css 54agents 52
Skill Claude CodeCodex
Implement custom window chrome for Tauri v2 desktop apps, including app-drawn titlebars and toolbars, borderless windows, cross-platform caption controls, drag regions, and platform-specific window-frame behavior. On macOS, preserve native red/yellow/green traffic lights and restore transparent rounded shells, native…
KailasMahavarkar/agentic-skills
Skill Claude Code
Integrate Lenis smooth scroll into React and Next.js projects. Use when the user wants smooth scrolling, scroll-linked animations, parallax effects, GSAP ScrollTrigger sync, Framer Motion sync, programmatic scroll-to navigation, or scroll event listening in a React app. Covers ReactLenis provider setup, useLenis hook…
Skill Claude Code
Scaffold a shared UI component package inside an existing Bun/Turborepo monorepo. Base UI primitives, CVA variants, Tailwind v4 theming, Central Icons, auto-export script. Run /dlc-scaffold-monorepo first.
Skill Claude CodeCodex
A skill for studying the visual rules of real websites and turning them into a reusable design package for other web projects. It can capture measured colors, spacing, fonts, components, icons, and assets while keeping the evidence behind those rules.
Skill Claude CodeCodex
Frontend design taste guide: typography, color harmonies, spacing, layout patterns, and visual quality standards. / TR: Frontend tasarım zevki rehberi: modern web ve mobil arayüzler için tipografi, renk, boşluk, düzen kalıpları ve görsel kalite standartları.
Skill Claude CodeCodex
Ground-truth CSS/layout workflow using the csstruth MCP tools (mcpcsstruth) or CLI. Use whenever working on CSS, layout, styling, responsive design, or visual bugs in a web project with a reachable page (dev server or file over HTTP) — diagnosing why an element renders wrong, making CSS changes safely, or verifying…
Skill Claude Code
Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use…
Skill Claude Code
Scroll cinematográfico, parallax, animações avançadas e cenas 3D para websites — do CSS puro ao Three.js WebGPU. Use ao implementar efeitos de scroll, parallax, animações scroll-triggered ou cenas 3D em sites Next.js que pedem experiência imersiva.
Skill Claude CodeCodex
Create premium, Awwwards-quality website designs as React (.jsx) components that look like they were built by a top-tier agency charging $50k+ per project. Use this skill whenever the user asks for a website, landing page, portfolio, or web component that should look expensive, premium, luxury, editorial, high-end, or…
simongonzalezdc/web-typography-skill
Skill Claude CodeCodex
Expert front-end web typography — apply this whenever you are styling text on the web or making type decisions in HTML/CSS/JSX/Tailwind. Use it to choose and pair fonts, build a type scale, set body copy and headings, tune fluid/responsive type with clamp(), fix line-height, rhythm, measure and heading wraps, improve…
Skill Claude CodeCodex
Component Theme Generator that transforms color palettes into production-ready UI components. Use when the user requests themed components (buttons, cards, inputs, forms, etc.) based on a color system or palette, especially when consuming output from Hexed or other color generation tools. Generates complete component…
Skill Claude CodeCodex
Builds a pixel-faithful single-file HTML mockup from a reference screenshot by counting colors, photos, items, and states before writing markup. Use when a user says "turn this screenshot into HTML", "build a mockup that matches this design", "code this screen exactly", or pastes an image and asks for a coded version.…
namanmehta96/ultra-frontend-skill
Skill Claude CodeCodex
Master frontend skill for Claude Code. Synthesizes ultra-frontend design system, uiuxpromax design intelligence, superdesign.dev aesthetics, framer-motion + GSAP full plugin ecosystem, 21st.dev component patterns, Three.js 3D, shadcn/ui, and production-grade architecture. Invoke for ANY visual web task: landing pages…
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 Claude CodeCodex
Guide for creating custom variants for gluestack-ui v4 components - covers tva usage, extending components, variant patterns, and customization strategies.
Skill Claude Code
Create distinctive, production-grade web interfaces with high design quality using Tailwind CSS. Use for building UI components, pages, dashboards, apps, and web applications. Generates crafted, polished code that avoids generic AI aesthetics.
XINGANLIU/design-system-generator-skill
Skill Claude Code
Generate a complete, production-ready design system from a single brand color. Outputs OKLCH color palettes, W3C Design Tokens (JSON), CSS custom properties, component styles (Button, Card, Input, Badge, Alert, Modal, etc.), and a live preview HTML page with Light/Dark theme toggle. Trigger this skill when the user…
Skill Claude CodeCodex
Plans, designs, builds, validates, and prepares polished responsive websites and lightweight web apps from brief through hosting handoff. Use when creating or redesigning a landing page, portfolio, editorial site, knowledge hub, directory, dashboard, portal, tracker, internal tool, microsite, or small web app…
pnaque/pnaque_codex-universal-design-skill
Skill Claude Code
High-fidelity HTML design and prototype creation for both Claude Code and OpenAI Codex. Use this skill whenever the user asks to design, prototype, mock up, or build visual artifacts in HTML — including slide decks, interactive prototypes, landing pages, UI mockups, animations, or any visual design work. Also use when…
ChiliJoe/apex-copilot-workspace-template
Skill Claude Code
Patch an Oracle APEX plugin's PL/SQL render/AJAX logic or its static JS/CSS files. Edits the human-readable source files, re-encodes hex blobs, and syncs the plugin installation SQL file — then optionally installs and validates via SQLcl MCP. TRIGGER when: user asks to fix, modify, or add behaviour to an APEX plugin…
Skill Claude CodeCodex
Build, audit, or convert websites with the U.S. Web Design System (USWDS) using the unofficial uswds-mcp server. Use when work involves USWDS components, patterns, templates, accessibility guidance, design tokens, utilities, @uswds/uswds, or federal website implementation.
techniondigitalsolutions/odoo-mcp
Skill Codex
Design, inspect, implement, and safely modify Odoo website themes, pages, snippets, menus, QWeb views, assets, SCSS, and frontend JavaScript for Odoo 16, 17, 18, and 19. Use when creating an Odoo theme addon, changing website appearance or structure, debugging website editor behavior, or applying website changes…
Skill Claude CodeCodex
A self-contained frontend design, redesign, audit, implementation, anti-AI-slop, and rendered visual-QA skill for use directly inside a ChatGPT conversation or through a local MCP-accessible project.
Skill Claude CodeCodex
Write and verify HTML email that renders correctly across email clients. Use whenever building, editing, or reviewing an HTML email, an email template, or a transactional message, and whenever a question involves Outlook, Gmail, Apple Mail, or "will this render in email". Covers what CSS and HTML each client supports…
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: