Codex skills for presentations, frontend and UI
Install PopNow skills in Codex. Download a skill, unzip it into the skills folder, and call it by name in your next chat.
- Where skills go
For every project
~/.agents/skillsFor this project only
.agents/skills - How to call a skill
Mention the skill by name, or just describe the job and let Codex pick it.
$popnow-<skill> - Connect PopNow
Skills are free. To generate images, video or sound, set your PopNow API key in POPNOW_API_KEY. Calls using this key draw from your separate API balance in USD. Each paid generation is quoted first and waits for your approval.
POPNOW_API_KEY
- 1Copy the install prompt
Paste it into Codex. It downloads the skill with your API key and unzips it into the right folder.
- 2Ask for the result
Call the skill and say what you need in plain words: the topic, the audience, the length.
- 3Review and refine
Open the file it made, ask for changes in the chat, and ship when it looks right.
All skills
- Editable PowerPoint TemplateSlides
A polished deck built only from live text, shapes and charts, so the PowerPoint export stays fully editable.
- Design System ShowcaseWeb
Explore editable color tokens, measure contrast and export a consistent CSS and JSON token set.
- App and UI Icon GeneratorImage
One app icon and 10-30 matching UI icons, exported for iOS, Android adaptive, PWA and favicons.
- Landing Page from AI MockupsWeb
See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
- Interactive Grid HeroWeb
A dark grid of fine strands that bends toward the cursor and rolls a glowing ring out from every click.
- Developer Portfolio WebsiteWeb
A dark personal site for engineers with case studies, writing, talks, a résumé and a contact form.
From a Codex brief to an editable handoff
Build around an inspectable result
Codex presentation and frontend work benefits from a brief that defines how another person will inspect the output. For slides, specify which chart values must be checked and which objects need to stay editable. For interface work, name the states and screens that matter. Editable PowerPoint Template supplies a deck workflow with native text and shapes in its export. Design System Showcase offers a token editor, contrast matrix and CSS and JSON outputs. Choose between them according to whether the handoff is a presentation file or a reusable interface vocabulary.
Use the shared skills directory deliberately
PopNow lists ~/.agents/skills for personal Codex skills and .agents/skills for repository skills. A skill is a folder with SKILL.md and its resources, rather than an instruction pasted into arbitrary project code. Call it with the dollar form, for example $popnow-design-system-showcase, and state what you want to build. Claude Code has a different personal directory and uses slash invocation. Kimi Code shares the .agents locations listed here, but its call pattern is the plain skill name; check the relevant installation card when changing assistants.
Separate source decisions from visual polish
A practical Codex UI assignment starts with existing brand tokens, accurate interface labels and a concrete component inventory. Ask Design System Showcase to expose contrast issues before carrying the palette into a page. App and UI Icon Generator is useful when the project also needs an app identity and a matching set of interface icons; describe the actions those icons represent. Review exported assets in context instead of judging a detached icon sheet alone. When a result stalls, identify whether the missing piece is an instruction file, a local dependency, an approved asset or authorization for generated media. That diagnosis keeps repeated attempts from masking the actual problem.
Three ways to install
- Ask your agent
Copy a skill's install prompt into your agent. It reads the install guide, downloads the package with your key and unzips it into the right folder.
https://popnow.ai/api/skills/install.md - Use the CLI
popnow skills finds and installs skills from your terminal.
npm install -g @popnow/cli && popnow skills - Over MCP
With the developer MCP connected, ask for a style: find_skills suggests packages and install_skill hands over the playbook and the install commands.
find_skills → install_skill - Generation uses your API key
Skills are free. The images, video, music and voice they make through PopNow are charged in USD to the API balance behind POPNOW_API_KEY, after a quote you approve.
POPNOW_API_KEY
Install guides by agent
Same skills everywhere; only the folder changes.
Frequently asked questions
Where do repository-specific Codex skills belong?
Use .agents/skills within the repository for the project location listed by PopNow. Preserve each package as its own directory and keep its supporting files next to SKILL.md. The personal alternative, ~/.agents/skills, is useful for workflows you want available across your own projects.
What should follow a dollar-prefixed skill name?
Give Codex the intended artifact, its audience and the evidence it must use. A token showcase needs existing colors and spacing decisions; a presentation needs approved copy and data. Naming the skill alone identifies instructions but leaves the design problem underspecified.
Can I choose editable slides instead of generated slide pictures?
Yes. Editable PowerPoint Template explicitly targets live text, shapes and charts, with a handoff note distinguishing editable and picture objects. Tell Codex which objects must remain editable, then open the export in your target application to verify the result against that requirement.
How do I troubleshoot missing visual assets in Codex?
First ask which skill and source files were used. Then inspect the package requirements and distinguish bundled resources from optional generated media. Supply authorized assets where possible, and review a generation quote before approving that step. Reinstalling instructions will not repair a missing source image.
Start building in minutes
One key for every model, a USD balance you top up when you need to, and an exact price before every run.