457 tagged css, measured the same way as everything else here.
Browse within: checklist 197front-end-developer-tool 197front-end-development 197html 80antigravity 65ui 65javascript 59design-system 50codingchallenges 47agentic-skills 39accessibility 36design-systems 30templates 30web-development 30
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…
crazyzlnofficial/layout-discipline
Skill Claude CodeCodex
A set of rules for keeping AI-generated web pages visually consistent, including their text sizes, spacing, alignment, cards, and colors.
Skill Claude CodeCodex
Pre-commit/ship code review: Codex default; optional Claude or Pi.
Skill Claude CodeCodex
Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.
Skill Claude CodeCodex
Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.
Skill Claude CodeCodex
Verify rendered CSS/layout truth after EVERY visual edit using the Visionaire MCP tools. Use this skill whenever you change CSS, HTML structure, layout, spacing, alignment, colors, responsive breakpoints, or any styling — even if the user did not explicitly ask you to "verify". Claude cannot see rendered pixels; this…
Skill Claude CodeCodex
Generate premium brand reference images for a design system, covering logo concepts, color and type boards, and product mockups. Use when a brief needs visual references or a brand kit before or alongside building the UI. Tool-agnostic (works with Nano Banana / Gemini, Higgsfield, Midjourney, or any image model).
Skill Claude CodeCodex
Generate a unique, production-grade brand design system from a short brief. Use when starting a new site or product, defining or extending design tokens (color, type, spacing, radii, shadows, motion), producing a token file plus Tailwind config plus a brand rules doc plus a storybook, or giving a project a distinct…
Skill Claude CodeCodex
Production-grade web motion design for React and Tailwind sites. Use when building, choosing, or reviewing animations, scroll effects, reveals, page transitions, hovers, counters, marquees, or micro-interactions. Encodes easing, timing, spring, origin, and reduced-motion rules, and ships a drop-in component library.
Lucxar/premium-web-design-skill
Skill Claude CodeCodex
Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating…
Skill Claude CodeCodex
Strict issue-to-PR lifecycle for GitHub issues in the Plumb Rust workspace. Investigates, plans, implements (TDD), verifies, reviews, creates PR, waits for CI, and cleans up. Supports worktree isolation and durable run state for session resumption.
Skill Claude CodeCodex
Convert a Plumb runbook spec (YAML) into a parent tracking issue plus grouped child workstream issues organized into sequential batches with phase gates. Generates markdown drafts and an idempotent gh issue create script; never creates GitHub issues without explicit approval.
Skill Claude CodeCodex
Execute implementation plans in Plumb via fresh subagents per task, parallel batches for independent work, and a 4-gate review chain (spec → code-quality → architecture → test). Use when a plan has multiple independent tasks and you want to stay in this session.
RoninForge/roninforge-tailwind-v4
Skill Claude CodeCodex
Generate a UI component using correct Tailwind CSS v4 utility classes, CSS variable theming, and accessibility best practices. Prevents v3 syntax hallucination by grounding output in verified v4 patterns.
RoninForge/roninforge-tailwind-v4
Skill Claude CodeCodex
Analyze a Tailwind CSS v3 project and generate a complete migration plan to v4. Scans config, CSS, and template files for v3 patterns and produces a prioritized checklist with exact find-and-replace commands.
RoninForge/roninforge-tailwind-v4
Skill Claude CodeCodex
Scan a Tailwind CSS project for v3/v4 version mixing, deprecated patterns, and common mistakes. Reports issues with exact file locations and suggested fixes.
truman-t3/tinted-ui-tokens-skills
Skill Claude CodeCodex
A design-token generator that turns one brand colour into coordinated colours for interface backgrounds, borders, text, shadows, semantic states, gradients, icons, and dark mode. Design tokens are named colour values reused across a product's interface.
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
Extract design information from Figma files. Pull design tokens, component structure, colors, typography, spacing, and export assets. Use when the user asks about their Figma designs, needs to extract design tokens, or wants to convert Figma designs to code. Triggers on: "figma", "design tokens", "get colors from…
XINGANLIU/design-system-generator-skill
Skill Claude CodeCodex
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
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…
manutej/luxor-claude-marketplace
Skill Claude CodeCodex
Mobile-first responsive design covering fluid layouts, media queries, flexbox, grid, viewport units, and responsive images.
Skill Claude CodeCodex
Coverage analysis measures code exercised during fuzzing. Use when assessing harness effectiveness or identifying fuzzing blockers.
Skill Claude CodeCodex
Fuzzing dictionaries guide fuzzers with domain-specific tokens. Use when fuzzing parsers, protocols, or format-specific code.
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: