SkillAtlasSkill 详情

reduced-motion-design

An unofficial, open-source, Codex-first Agent Skills library for premium frontend, website, desi...

审核状态:已审核Quality 80Security 100

复制安装命令

用 Codex 或 Claude 安装复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它先审查 Skill 页面再帮你安装。

复制前请先查看来源、License 和安全提示。

项目 README

来源文件:README.md

抓取于 2026年9月13日

Codex Premium Website Skills

Validate Skills Latest Release

An unofficial, open-source, Codex-first Agent Skills library for premium frontend, website, design-engineering, and reliable agent workflows.

This repository is prepared around a curated public-core collection of 80 skills: design direction, frontend implementation, motion, accessibility, QA, content polish, maintainer safety, and agent-quality workflows.

Codex Skills modular capabilities visualized

Works With

Built for Codex first. Portable to Agent Skills-compatible workflows and adaptable for Claude Code, Cursor, and Gemini CLI.

ToolSupport LevelPath
CodexNative supportedscripts/install_skills.py
Claude CodeNative-compatible SKILL.md foldersadapters/claude-code/
CursorProject rules adapteradapters/cursor/
Gemini CLIProject context adapteradapters/gemini-cli/

See COMPATIBILITY.md for support levels and setup notes.

Quick Start

Get value in under 3 minutes:

git clone https://github.com/TheGoat395/Codex-Skills.git
cd Codex-Skills
python3 scripts/install_skills.py --dry-run
python3 scripts/install_skills.py

Start a new Codex conversation so skill discovery refreshes, then ask:

Use the Codex website skills to review my homepage and tell me the highest-impact improvements before launch.

For a smaller first install:

python3 scripts/install_skills.py --collection taste-and-build-gates

For the newest reviewed skill changes, use the current main branch. Published release archives are versioned snapshots and may predate later fixes. To use a specific published snapshot, download it from GitHub Releases, extract it, then run the same install commands from the extracted folder.

Premium Website Showcase

This repository includes a proof-of-output demo gallery:

examples/premium-website-showcase/gallery/index.html

The showcase contains nine confirmed local websites and hero/portfolio demos generated through the premium website skill workflow. They are meant to show practical potential: install the skills, provide a prompt/reference/spec, and use the workflow to produce polished local frontend artifacts quickly.

See DEMOS.md for the complete list, EVIDENCE.md for the current evidence summary, and INSTALL.md for local install and preview instructions.

Measured Benchmarks

Two paired baseline-vs-skill-assisted runs are checked in with fixed prompts, saved source, explicit limitations, and scoring against BENCHMARKS.md.

RunBaselineSkill-assistedChangeEvidence
Atlas19/3023/30+4Source and structural checks
Signal / Matter23/3028/30+5Desktop/mobile screenshots and automated Chromium QA

The Signal / Matter run used the same prompt, model, and three-file constraint in isolated directories. Both conditions were capable; the assisted workflow produced stronger visual differentiation, implementation detail, accessible state language, and first-viewport behavior. These are repository rubric scores, not an OpenAI evaluation, endorsement, or universal causal claim.

Share Your Work

Used these skills on a real project? Open a Showcase issue with the skills used, what changed, and any screenshots, links, or workflow notes that would help others evaluate the library.

For stronger evidence, submit a measured benchmark using examples/benchmarks/measured-premium-website-template/.

What This Is

  • A domain-specific Codex skill pack for modern website and app work.
  • A Codex-first skill library with adapter paths for Claude Code, Cursor, and Gemini CLI workflows.
  • A curated public core, not a loose dump of every local skill.
  • A practical toolkit for React, Next.js, Tailwind, GSAP/Motion, QA, copy, accessibility, source research, visual polish, and evidence-led agent work.
  • A repo designed to be inspected, installed selectively, benchmarked, and improved in public.

What This Is Not

  • Not an official OpenAI project.
  • Not a guarantee that Codex will produce perfect design or production-ready code without review.
  • Not a replacement for project context, real assets, rendered browser inspection, accessibility testing, or engineering judgment.
  • Not a reason to install every skill at once. The default install is public-core.
  • Not a security guarantee. Inspect the repo and installer before running anything.

Repository Contents

  • skills/ contains individual Codex skill folders.
  • COMPATIBILITY.md documents Codex, Claude Code, Cursor, and Gemini CLI usage paths.
  • CATALOG.md gives a cleaner audience-facing map of collections and high-value skills.
  • adapters/ contains Claude Code, Cursor, and Gemini CLI adapter guidance.
  • curated_collections.json defines the default 80-skill public core and smaller installable subcollections.
  • scripts/install_skills.py installs public-core by default or selected collections with --collection.
  • THIRD_PARTY_NOTICES.md records license and notice expectations for the public core.
  • EVIDENCE.md, BENCHMARKS.md, SKILL_QUALITY_STANDARD.md, and SECURITY.md define how this repo should be evaluated and maintained.
  • manifest.json and SKILL_INVENTORY.md are generated inventory files and should be regenerated before a public release.
  • examples/premium-website-showcase/ contains the local proof-of-output gallery and demo preview files.
  • DEMOS.md documents the confirmed demo set and local preview paths.
  • INSTALL.md gives a compact install and demo-preview flow.
  • MAINTAINERS.md, docs/maintainer-workflow.md, and docs/usage-signals.md document release checks, evidence levels, and public usage signals.

Install

Clone the repo, inspect it, then dry-run the default public core:

python3 scripts/install_skills.py --dry-run

Install the default 80-skill public core:

python3 scripts/install_skills.py

Install a focused collection:

python3 scripts/install_skills.py --collection motion-core --dry-run
python3 scripts/install_skills.py --collection motion-core

List available collections:

python3 scripts/install_skills.py --list-collections

Replace existing skills only after review:

python3 scripts/install_skills.py --replace

The installer uses $CODEX_HOME/skills when CODEX_HOME is set, otherwise ~/.codex/skills; an explicit --dest takes precedence. It skips existing skills by default. When --replace is used, existing skill folders are moved into a timestamped backup folder inside the selected destination.

After installing, start a new Codex conversation so skill discovery refreshes.

Public Core Collections

  • public-core: the full 80-skill public release.
  • taste-and-build-gates: design direction, build gates, anti-generic review, browser inspection, handoff.
  • visual-direction: references, art direction, typography, color, layout, imagery.
  • frontend-implementation: React, Next.js, Tailwind, primitives, states, forms, accessibility.
  • qa-production-core: accessibility, performance, responsive, cross-browser, visual regression, SEO.
  • motion-core: motion language, React motion, easing, jank prevention, reduced motion, GSAP performance.
  • content-conversion-core: copy, IA, CTA language, conversion polish, proof.
  • maintainer-safety-core: checkpoint, undo/revert, install-safety review.
  • agent-quality-core: critical and logical thinking, creativity, research, evidence reconciliation, debugging, agent architecture, memory provenance, evaluation, and completion verification.

See CATALOG.md for the audience-facing catalog and CURATED_COLLECTIONS.md for the full map.

Quality Bar

Every skill should have:

  • a narrow trigger and clear description
  • concrete actions rather than vague taste language
  • explicit boundaries for when it should not run
  • no hidden network, filesystem, or dependency side effects
  • project-local dependency guidance
  • verification steps when it changes code, frontend output, or agent workflow state

See SKILL_QUALITY_STANDARD.md for contribution criteria.

Licensing

The root LICENSE covers original repository packaging, docs, scripts, and skills that do not carry separate notices. If a skill folder includes a more specific notice, that notice controls for that folder. See THIRD_PARTY_NOTICES.md.

Benchmarking

The goal is not to claim that more skills automatically make better output. The goal is to show measurable workflow improvement. Benchmarks should compare the same task with and without selected skill collections, including screenshots, build logs, accessibility checks, browser QA notes, and final code links.

Use BENCHMARKS.md, examples/README.md, and examples/benchmarks/measured-premium-website-template/ as the reporting protocol. Atlas is the first source-checked comparison; Signal / Matter adds rendered desktop/mobile evidence and automated Chromium QA. Future runs should preserve the same controls and disclose operator corrections and browser limitations.

Open Source Positioning

This project is best described as:

An open-source Codex skill library for premium frontend, website, design-engineering, and evidence-led agent workflows.

The strongest public contribution is not the size of the library. It is the curation: an installable public core, focused groups, quality standards, safety policy, benchmarks, examples, and real maintenance practices for people building with Codex.

其他

低风险

  • 来源需自行核对维护者身份。
  • 未检测到明显脚本安装指令。
  • 未检测到明显外部权限要求。
  • 未检测到高风险命令。
  • 扫描发现:0 条。

Codex — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/TheGoat395/Codex-Skills.git
  3. 将 "skills/reduced-motion-design" 文件夹复制到 Codex 的 skills 目录中。
  4. 重启 Codex 让新的 skill 生效。

Codex — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Codex 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Codex 让新的 skill 生效。

Claude Code — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/TheGoat395/Codex-Skills.git
  3. 将 "skills/reduced-motion-design" 文件夹复制到 Claude Code 的 skills 目录中。
  4. 重启 Claude Code 让新的 skill 生效。

Claude Code — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Claude Code 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Claude Code 让新的 skill 生效。

Cursor — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/TheGoat395/Codex-Skills.git
  3. 将 "skills/reduced-motion-design" 文件夹复制到 Cursor 的 skills 目录中。
  4. 重启 Cursor 让新的 skill 生效。

Cursor — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Cursor 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Cursor 让新的 skill 生效。

GitHub Copilot — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/TheGoat395/Codex-Skills.git
  3. 将 "skills/reduced-motion-design" 文件夹复制到 GitHub Copilot 的 skills 目录中。
  4. 重启 GitHub Copilot 让新的 skill 生效。

GitHub Copilot — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 GitHub Copilot 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 GitHub Copilot 让新的 skill 生效。

Windsurf — Git Clone 安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 克隆仓库:git clone https://github.com/TheGoat395/Codex-Skills.git
  3. 将 "skills/reduced-motion-design" 文件夹复制到 Windsurf 的 skills 目录中。
  4. 重启 Windsurf 让新的 skill 生效。

Windsurf — 手动复制安装

  1. 安装前请先查看来源仓库和风险报告。
  2. 从源仓库下载 SKILL.md 及相关文件。
  3. 在 Windsurf 的 skills 目录中创建新文件夹。
  4. 将所有 skill 文件复制到新文件夹中。
  5. 重启 Windsurf 让新的 skill 生效。
查看 SKILL.md 原文
name: reduced-motion-design
description: "Implement prefers-reduced-motion alternatives."

Reduced Motion Design

Use This Skill

Use this skill for design reduced-motion alternatives for premium interactions.

Scoped execution

Apply the shared web contract once when execution crosses phases; reuse it if already read. Load only the specialist guidance relevant to the requested surface and deliverable.

Required Reference

Read references/reduced-motion-design-guide.md before making architectural or visible UI changes with this skill.

发现问题?提交给管理员复核

评分:

评论 (0)

暂无评论,成为第一个评论者吧!