css skills

AgnosticUI/agnosticui

Skill Claude CodeCodex

Update component documentation when code changes.

Unclecheng-li/AI-Animation-Skill

Skill Claude CodeCodex

A workflow that turns science or educational text into a visual presentation webpage styled like a slide deck. It can also turn generated animation pages into a flat, diagram-like interface.

maddhruv/absolute

Skill Claude CodeCodex

Build polished, intentional UIs with concrete CSS/Tailwind values — typography, color, layout, spacing, dark mode, accessibility, animations, components. Encodes specific, opinionated rules with exact values, not vague advice. Covers buttons, cards, forms, tables, navigation, dashboards, landing pages, onboarding, and…

MichealWayne/fe-tools

Skill Claude CodeCodex

Recommend 3-5 targeted frontend resources from the fe-tools curated directory for a user's question. Use when the user asks where to learn, what to use, how to choose frontend tools/resources/docs/platforms, or wants curated recommendations for CSS, JS/TS, React, Vue, Node/build, compatibility, AI tools, agent skills…

MichealWayne/fe-tools

Skill Claude CodeCodex

Extract a reusable project template from an existing codebase by removing business-specific code, preserving only the reusable engineering skeleton, and creating template usage docs such as README. Use when the user wants to turn a frontend or backend project into a reusable starter template, scaffold, or baseline…

MichealWayne/fe-tools

Skill Claude CodeCodex

Recommend the most suitable project template or initialization path from fe-tools project-templates based on product, framework, runtime, and delivery constraints. Use when the user asks which frontend or backend template to start from, how to bootstrap a React/Vue/Node/TypeScript project, or wants comparisons such as…

flornkm/shadow-plugin

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.

db-ux-design-system/core-web

Skill Claude CodeCodex

Creates a new DB UX Design System component with Mitosis source, SCSS, typed model, and Playwright tests.

db-ux-design-system/core-web

Skill Claude CodeCodex

Modifies an existing DB UX Design System Mitosis component (add variants, update props, change styles).

db-ux-design-system/core-web

Skill Claude CodeCodex

Runs, analyzes, and fixes Playwright and accessibility tests for a specific DB UX component.

usetrmnl/trmnl-framework

Skill Claude CodeCodex

House style for TRMNL framework documentation copy. Use whenever writing or editing docs pages (app/views/framework/.html.erb), intro paragraphs in frameworkhelper.rb, code example captions, or notice boxes.

joelmoss/proscenium

Skill Claude CodeCodex

Compile the Go shared library for local development.

joelmoss/proscenium

Skill Claude CodeCodex

Run Ruby and/or Go tests. Pass a file path to run a specific test, or no args to run all.

Ameyanagi/morphos

Skill Claude CodeCodex

Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs. Use when Codex is asked to generate Morphous motif images, light/dark design-system boards, reusable image prompts, generated web assets, shadcn/tweakcn theme exports, or the…

yuvrajangadsingh/brandmd

Skill Claude CodeCodex

Extract a website's design system into a DESIGN.md file. Use when starting a new frontend project, rebuilding a site, or when the user wants AI-generated UI to match an existing brand.

jpoindexter/design-md-extractor

Skill Claude CodeCodex

Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.

ericrisco/rsc-harness

Skill Claude CodeCodex

Build a web animation: whether it should animate at all, the purpose, the tool, the properties, the easing curve, the duration, interruption and exit. Writes the CSS or Motion code for dropdowns, modals, toasts, tooltips, accordions, press feedback, stagger and scroll reveals. Use to animate something or make a…

starling-browser/starling

Skill Claude CodeCodex

Orchestrates Aspire distributed applications using the Aspire CLI for running, debugging, and managing distributed apps. USE FOR: aspire start, aspire stop, start aspire app, aspire describe, list aspire integrations, debug aspire issues, view aspire logs, add aspire resource, aspire dashboard, update aspire apphost.…

starling-browser/starling

Skill Claude CodeCodex

Writing-style rules for any prose authored in this project — READMEs, design docs in browser-plan/, commit bodies, PR descriptions, status updates. USE WHEN about to write or edit prose (Markdown text, doc comments meant for humans, commit messages, PR bodies), or when reviewing prose for tone. Enforces: fifth-grade…

cjsimon2/Divi5-ToolKit

Skill Claude CodeCodex

Use this skill when validating CSS for Divi 5 / Divi 5.11 compatibility, checking unsupported features or units, troubleshooting Divi CSS that isn't applying, debugging plugin conflicts (WP Rocket, LiteSpeed, Wordfence, WooCommerce, Perfmatters), migrating from Divi 4 to Divi 5, understanding breakpoints, applying the…

cjsimon2/Divi5-ToolKit

Skill Claude CodeCodex

Use this skill when writing CSS for Divi 5 / Divi 5.11, styling Divi modules (buttons, sections, rows, blurbs, toggles, forms including the 5.3 Contact Form 7 Styler and 5.11 Gravity Forms module), the newer modules (Timeline, Breadcrumbs, SVG, Table of Contents, Instagram Feed, Tooltip, Post Filter, Charts, Payment…

cjsimon2/Divi5-ToolKit

Skill Claude CodeCodex

Use this skill when optimizing Divi 5 site performance, improving Core Web Vitals (LCP, INP, CLS), reducing render-blocking CSS, working with Divi's Critical CSS / Dynamic CSS / Inline Stylesheet system, configuring font loading (WOFF2, preload, font-display, variable fonts from 5.9), lazy-loading background images…

sabertaz/notes

Skill Claude CodeCodex

A workflow for adding user-provided commands, configuration, code, explanations, or output to an existing knowledge repository.

sabertaz/notes

Skill Claude CodeCodex

Use when note files exceed 1000 lines or need better organization. Splits large note files into smaller, focused files with index files for navigation, following progressive grouping principles with clear hierarchy.