A Codex agent skill for creating distinctive, production-grade frontend interfaces with high design quality.
This is an agent skill for OpenAI Codex - the AI-powered coding agent. Skills extend Codex's capabilities by providing specialized knowledge, workflows, and tools for specific domains.
| Skill Overview | Skill Activation | Output Example |
|---|---|---|
 |
 |
 |
Copy the frontend-design/ folder to one of these locations:
| Scope | Location | Use Case |
|---|---|---|
| User | ~/.codex/skills/ |
Personal skills available in all projects |
| Repo | .codex/skills/ (in repo root) |
Team skills shared via version control |
| Admin | /etc/codex/skills/ |
System-wide skills for all users |
# User scope (personal)
cp -r frontend-design ~/.codex/skills/
# Repo scope (team)
mkdir -p .codex/skills
cp -r frontend-design .codex/skills/# In Codex CLI, use the skill-installer
$skill-installer frontend-design --from vipulgupta2048/frontend-design-skillfrontend-design/
├── SKILL.md # Main skill instructions (required)
├── references/
│ ├── aesthetic-playbook.md # Design direction presets
│ └── implementation-patterns.md # Code patterns & recipes
└── assets/
└── vanilla-starter/ # Ready-to-use starter template
├── index.html
├── style.css
└── script.js
Codex will automatically activate this skill when your task involves:
- Building or refining web components, pages, or apps
- Working with HTML/CSS/JS/React
- Requests for bold aesthetics, purposeful layouts, or motion design
- Accessibility-focused frontend work
In Codex CLI, mention the skill directly:
$frontend-design Create a landing page for a tech startup
- Aesthetic Directions - Pre-defined design systems (Brutalist, Editorial, Retro-Futuristic, Soft Craft, Industrial)
- Implementation Patterns - Code recipes for layouts, motion, responsive design, and accessibility
- Starter Template - A production-ready vanilla HTML/CSS/JS concept with:
- CSS custom properties for theming
- Gradient backgrounds with grain texture
- Staggered reveal animations
- Accessible structure with skip links
- Responsive design
# Create a landing page with a specific aesthetic
Create a brutalist portfolio page with oversized typography
# Refine existing UI
Add subtle motion and polish to this React component
# Build with constraints
Design a dark mode dashboard with industrial aesthetics, accessible for screen readers
MIT License - Feel free to use, modify, and distribute.
Created by Vipul Gupta