responsive-layout-math

Derive, review, and debug responsive web layout math for fluid widths, media query ranges, viewport units, percentages, and CSS clamp() formulas. Use when building responsive layouts, converting fixed designs to fluid CSS, calculating breakpoints, choosing vw/svw/lvw/dvw units, or deciding whether CSS math or JavaScript measurement should own a layout behavior.

跳到安装

仓库: hashgraph-online/awesome-codex-plugins
最近来源活动: 2026年6月30日 21:30
检测到的 SKILL.md 语言: 英语
星标: 771
分支: 236

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/hashgraph-online/awesome-codex-plugins --skill responsive-layout-math

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

文件资源管理器

10 个文件

SKILL.md

来源说明 · 只读预览

返回搜索返回安装

amq-cli

Coordinate agents via the AMQ CLI for file-based inter-agent messaging. Use this skill whenever you need to send messages to another agent (codex, claude, or any named handle), check your inbox, drain queued messages, set up co-op mode between agents, join a swarm team, route messages across projects, or diagnose delivery issues. Also use it when you receive a message and need to know how to reply, inspect receipts, or handle priority. Covers any multi-agent coordination task where agents need to talk to each other — review requests, questions, status updates, decision threads, wake notifications, and orchestrator integration (Symphony, Kanban). For collaborative spec/design workflows specifically, prefer the /amq-spec skill which provides structured phase-by-phase guidance. Not intended for distributed systems design (RabbitMQ, Kafka), CI/CD pipelines, or single-agent tasks with no partner.

2026-08-05

amq-spec

Parallel-research-then-converge design workflow between two agents. Use this skill when the user wants two agents to independently think through a design problem before aligning on a solution — "spec X with codex", "design X together", "both agents think through X", "brainstorm architecture together", "parallel research then joint proposal", "think through separately then align", "careful thought from both sides before coding", or any variation where the user wants collaborative design rather than just splitting implementation work. Also use this when you receive a message labeled workflow:spec and need to know the correct receiver-side protocol. Not for sending simple messages or reviews (use /amq-cli), implementing completed designs, or creating document templates.

2026-08-05

brainstorming

Use when defining new features, product behavior, UI/component design, architecture choices, contract changes, or ambiguous medium/high-complexity work before implementation, or when the user asks to grill or pressure-test a plan or design.

2026-08-05

查看这个仓库的全部 Skills

Responsive Layout Math

Use this skill to turn fixed layout intentions into proportional, bounded, and testable responsive CSS. It is strongest when the task involves deriving a formula rather than picking arbitrary breakpoint values.

Quick Start

Read guidelines.md to select the smallest relevant file set.

Load references/fluid-layouts/rules.md for implementation decisions.

Load references/fluid-layouts/examples.md when editing code.

Use workflows/design-fluid-layout.md for multi-step derivation or debugging.

Contents

Resource

Purpose

guidelines.md

Routes tasks to the right reference files

references/source-map.md

Book source and chapter/section traceability

references/fluid-layouts/knowledge.md

Core concepts and terminology

references/fluid-layouts/rules.md

Practical rules, guidelines, and exceptions

references/fluid-layouts/examples.md

Bad/good examples and refactoring approach

references/fluid-layouts/patterns.md

Reusable formula and implementation patterns

references/fluid-layouts/checklist.md

Review checklist and red flags

workflows/design-fluid-layout.md

Step-by-step workflow

Source

Derived from Math for Web Design by Paul McFedries, Chapter 6: The mathematics of responsive design. Citations are tracked in references/source-map.md.

name	responsive-layout-math
description	Derive, review, and debug responsive web layout math for fluid widths, media query ranges, viewport units, percentages, and CSS clamp() formulas. Use when building responsive layouts, converting fixed designs to fluid CSS, calculating breakpoints, choosing vw/svw/lvw/dvw units, or deciding whether CSS math or JavaScript measurement should own a layout behavior.
license	MIT
compatibility	Codex, Claude Code, and other Agent Skills-compatible clients.
metadata	{"version":"0.1.0","displayName":"Responsive Layout Math","category":"Frontend","tags":"frontend,css,responsive-design,layout,math"}