AgentToolHub
Skill

frontend-design

frontend-design — a Claude Code skill from am-will/codex-skills

Features

  • ✓Comprehensive planning with sprints and atomic tasks
  • ✓Enhanced planning for detailed analysis
  • ✓Parallel task execution with subagents
  • ✓Multi-agent orchestration for complex tasks
  • ✓Up-to-date library documentation via Context7 CLI
  • ✓Query OpenAI developer docs using CLI
  • ✓Markdown-friendly website views
  • ✓Read and search GitHub repos with gitmcp.io
  • ✓Frontend design system guidance
  • ✓Responsive UI standards
  • ✓React/Next.js performance best practices
  • ✓Create and update Codex hooks
  • ✓Install Codex plugins from GitHub
  • ✓Custom Codex agent creation
  • ✓Browser automation with Gemini 2.5 and Playwright
  • ✓Rust-based headless browser automation
  • ✓Visit [GitHub repo](https://github.com/am-will/codex-skills) for more

Installation Guide

Install skills using the skills.sh CLI:

bash
# List available skills before installing
npx skills add am-will/codex-skills --list

# Install specific skills to user scope (global)
npx skills add am-will/codex-skills --skill planner --skill context7 -g

# Install all skills interactively (prompts for selection)
npx skills add am-will/codex-skills -g

# Install to specific agents
npx skills add am-will/codex-skills --skill planner -a claude-code -a codex -g

# Install to current project (instead of global)
npx skills add am-will/codex-skills --skill planner

# Non-interactive install (skip prompts)
npx skills add am-will/codex-skills --skill planner -g -y

CLI Options:
| Flag | Purpose |
|------|---------|
| -g, --global | Install to user directory (global for all projects) |
| -a, --agent <agents...> | Target specific agents (claude-code, codex, etc.) |
| -s, --skill <skills...> | Install specific skills by name |
| -l, --list | List available skills without installing |
| -y, --yes | Skip confirmation prompts |

Other commands:

bash
npx skills list          # Show installed skills
npx skills remove <name> # Uninstall a skill
npx skills update        # Update all installed skills

Note on Browser Tools: The repo includes two browser automation tools (gemini-computer-use and agent-browser). You don't need to install both - choose the one that best fits your workflow. I recommend agent-browser for speed and simplicity.

Note on Context7: The ctx7old skill requires a Context7 API key in CONTEXT7_API_KEY. See skills/ctx7old/.env.example for setup.

Note on Gemini Computer Use Skill: This skill requires a GEMINI_API_KEY. Ask Codex to help you set it up.

Note on llm-council: This skill requires API keys or Active Subscriptions for multiple providers (Claude/Anthropic, OpenAI for Codex, Google for Gemini). Run ./setup.sh in the skill directory to configure. Includes a real-time web UI that auto-launches during planning sessions.

---

Codex Hook Catalog

The hooks/ directory contains a catalog of 50 ready-to-install Codex hook bundles, generated from davila7/claude-code-templates and adapted for the Codex event model.

Categories:

| Category | Bundles | Examples |
|---|---|---|
| automation | 18 | Slack/Discord/Telegram notifications, Vercel auto-deploy, dependency checker, change logger |
| development-tools | 8 | Debug window, lint-on-save, smart formatting, file backup, worktree ghostty |
| git | 3 | Conventional commits, prevent direct push, validate branch name |
| git-workflow | 2 | Auto git-add, smart commit |
| monitoring | 2 | Desktop notification on stop, LangSmith tracing |
| performance | 2 | Performance budget guard, performance monitor |
| post-tool | 4 | Format JS/Python files, git-add changes, run tests after changes |
| pre-tool | 4 | Backup before edit, console-log cleaner, notify before bash, update search year |
| quality-gates | 3 | Plan gate, scope guard, TDD gate |
| security | 4 | Dangerous command blocker, file protection, secret scanner, security scanner |
| testing | 1 | Test runner |

Install a bundle:

bash
python3 hooks/aitmpl-codex/install-bundle.py hooks/aitmpl-codex/<category>/<bundle> <target-repo>

Manual install: Copy the bundle's hooks.json into <repo>/.codex/hooks.json and its .codex/hooks/ scripts into <repo>/.codex/hooks/, then restart Codex.

See [hooks/README.md](hooks/README.md) for full details on compatibility, testing harness, and bundle structure.

---

Custom Multi-Agents for Codex

The agents/ directory contains custom multi-agent configurations for Codex. These TOML-based agent definitions provide specialized roles (architect, frontend, backend, security, etc.) and worker tiers for parallel task execution. Use them with Codex to spin up purpose-built agents tailored to your workflow.

Reviews