Premium Visual Reference Library Skill for Codex
Use when Codex needs premium visual inspiration sources, website galleries, studio references, product-site references, motion references, UI examples, luxury/editorial/Squarespace/Raycast/Linear/Vercel-level references, or a non-generic reference set before designing a website.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/TheGoat395/Codex-Skills --skill premium-visual-reference-libraryWhat comes with it
4 747 bytes besides the instructionThe instruction itself
3 sections, as written by the authorPremium Visual Reference Library
Use this skill to pick reference sources before designing a premium website.
Workflow
- Identify the site category: product/devtool, luxury/editorial, portfolio, hospitality, commerce, personal, agency, or content/media.
- Read sources.md for the relevant source clusters.
- Select 3-7 references, mixing live product sites, galleries, and implementation examples.
- Extract concrete patterns: type, layout, density, media, motion, CTA, proof, navigation, section rhythm, and mobile behavior.
- State what not to copy.
- Convert the references into a Build-Ready UI Specification before coding.
Anti-Copy Rule
Use references to understand quality, not to clone compositions, copy assets, or imitate a brand too closely.
Other skills for the same job
different authors, same section of the catalogue
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
How to use it
Take thegoat395/premium-visual-reference-library from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.