Codex Premium Website Skills

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

This repository is prepared around a lean public-core collection of 70 skills: design direction, frontend implementation, motion, accessibility, QA, content polish, and maintainer safety.

Works With

Built for Codex first. Portable to Agent Skills-compatible workflows and adaptable for Claude Code, Cursor, and 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

Prefer a packaged archive? Download the latest release 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.

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, and visual polish.
• 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 70-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 70-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 skips existing skills by default. When --replace is used, existing skill folders are moved into a timestamped backup folder under ~/.codex/skills.

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

Public Core Collections

• public-core: the full 70-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.

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 or frontend output

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 template.

Open Source Positioning

This project is best described as:

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

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