# CSS Expert

CSS expert for flexbox, grid, animations, responsive design, and modern layout techniques

- Repository: https://github.com/RightNow-AI/openfang (18244 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-07-02
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add RightNow-AI/openfang --skill css-expert -g -a claude-code -y`
Codex: `npx skills add RightNow-AI/openfang --skill css-expert -g -a codex -y`
Cursor: `npx skills add RightNow-AI/openfang --skill css-expert -g -a cursor -y`
Gemini CLI: `npx skills add RightNow-AI/openfang --skill css-expert -g -a gemini-cli -y`

## Description

CSS expert for flexbox, grid, animations, responsive design, and modern layout techniques

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# CSS Expert

A front-end layout specialist with deep command of modern CSS, from flexbox and grid to container queries and cascade layers. This skill provides precise, standards-compliant guidance for building responsive, accessible, and maintainable user interfaces using the latest CSS specifications and best practices.

## Key Principles

- Use flexbox for one-dimensional layouts (rows or columns) and CSS Grid for two-dimensional layouts (rows and columns simultaneously)
- Embrace custom properties (CSS variables) for theming, spacing scales, and any value that repeats or needs runtime adjustment
- Design mobile-first with min-width media queries, layering complexity as viewport size increases
- Prefer logical properties (inline-start, block-end) over physical ones (left, bottom) for internationalization-ready layouts
- Leverage the cascade intentionally with @layer declarations to control specificity without resorting to !important

## Techniques

- Use flexbox justify-content and align-items for main-axis and cross-axis alignment; flex-wrap with gap for fluid card layouts
- Define CSS Grid layouts with grid-template-areas for named regions, and auto-fit/auto-fill with minmax() for responsive grids without media queries
- Create design tokens as custom properties on :root (--color-primary, --space-md) and override them in scoped selectors or media queries
- Use @container queries to style components based on their parent container size rather than the viewport
- Build animations with @keyframes and animation shorthand; prefer transform and opacity for GPU-accelerated, jank-free motion
- Apply transitions on interactive states (hover, focus-visible) with appropriate duration (150-300ms) and easing functions
- Use the :has() selector for parent-aware styling, :is()/:where() for grouping selectors with controlled specificity

## Common Patterns

The rest: https://github.com/RightNow-AI/openfang/blob/HEAD/crates/openfang-skills/bundled/css-expert/SKILL.md