frontend-design
vadimcomanescu/codex-skills · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por vadimcomanescu/codex-skills no skills.sh. Instale com: npx skills add vadimcomanescu/codex-skills@frontend-design
Details
- Kind
- Agent skills
- Publisher
- vadimcomanescu
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 25
- Forks
- 7
- Open pull requests
- 5
- Last push
- 2026-01-22T23:26:10Z
- Repository state
- ativo
- Language
- Python
- License
- MIT
- Added
- 2026-10-07 06:31:46
- Updated
- 2026-10-07 06:31:46
- Origin id
vadimcomanescu/codex-skills/frontend-design
README
# Codex Skills Catalog [](https://github.com/vadimcomanescu/codex-skills/actions/workflows/validate-skills.yml) [](LICENSE) Installable skills for Codex. This repository is a “skills catalog”: each skill lives under `skills/` and can be installed into your local Codex skills directory (typically `~/.codex/skills`). ## Contents - [Install](#install) - [Skills](#skills) - [Experimental Skills](#experimental-skills) - [Repository Layout](#repository-layout) - [Validation](#validation) - [Contributing](#contributing) - [Support](#support) - [License](#license) ## Install Use the official `npx` installer to fetch skills from this repo and install them into your Codex skills directory (defaults to `~/.codex/skills`, or `$CODEX_HOME/skills` if set). ### Install one or more skills (recommended) ```bash npx codex-skills-registry@latest --skill=design/frontend-design --yes ``` You can repeat `--skill` to install multiple skills: ```bash npx codex-skills-registry@latest \ --skill=design/frontend-design \ --skill=quality/code-reviewer \ --skill=security/security-compliance \ --yes ``` ### List available skills ```bash npx codex-skills-registry@latest --list ``` ### Install location and options - `--local`: install into `<repo>/.codex/skills` instead of the global Codex skills directory. - `--dest=<path>`: explicit install root (overrides `--local`). - Re-run the same command to update an installed skill; `--yes` overwrites without prompting. ### Requirements and installer docs - Requires Node.js and npm (so `npx` is available). - Installer docs: `https://github.com/vadimcomanescu/codex-skills-registry/tree/main/packages/codex-skills-registry` Restart Codex after installing to pick up new skills. ## Skills All skills listed below are in the `curated` tier (stable and recommended). ### Design (`design`) | Skill | What it’s for | Install path | | --- | --- | --- | | `frontend-design` | Next.js App Router–first UI redesigns with bold aesthetics, motion, accessibility, and AI-native UX patterns | `skills/.curated/design/frontend-design` | | `information-architect` | Information architecture workflows: navigation, sitemaps, taxonomy, labeling, content models, and findability | `skills/.curated/design/information-architect` | ### Platform (`platform`) | Skill | What it’s for | Install path | | --- | --- | --- | | `react-best-practices` | Vercel React/Next.js performance and architecture best practices | `skills/.curated/platform/react-best-practices` | | `senior-architect` | System design + architecture docs (ADRs, Mermaid diagrams, trade-offs) and lightweight repo analysis | `skills/.curated/platform/senior-architect` | | `senior-backend` | Backend API/service design workflows + backend design doc scaffold | `skills/.curated/platform/senior-backend` | | `senior-devops` | CI/CD, ops readiness, observability, safe deployments + repo ops inventory | `skills/.curated/platform/senior-devops` | ### Data (`data`) | Skill | What it’s for | Install path | | --- | --- | --- | | `senior-computer-vision` | CV system workflow + dataset inventory tooling (no ML deps) | `skills/.curated/data/senior-computer-vision` | | `senior-data-engineer` | Pipeline/data contract workflows + lightweight CSV profiling | `skills/.curated/data/senior-data-engineer` | | `senior-data-scientist` | Metrics/experiments/modeling workflow + CSV profiling | `skills/.curated/data/senior-data-scientist` | ### Quality (`quality`) | Skill | What it’s for | Install path | | --- | --- | --- | | `code-reviewer` | High-signal PR/diff review workflow + review report generator | `skills/.curated/quality/code-reviewer` | | `senior-qa` | Risk-based QA strategy + test plan scaffold | `skills/.curated/quality/senior-qa` | | `test-driven-development` | TDD workflow (red/green/refactor) + testing anti-patterns | `skills/.curated/quality/test-driven-development` | | `webapp-testing` | Local UI testing with Playwright + `with_server.py` helper | `skills/.curated/quality/webapp-testing` | ### Security (`security`) | Skill | What it’s for | Install path | | --- | --- | --- | | `security-compliance` | Threat modeling, controls checklists, lightweight secrets scanning | `skills/.curated/security/security-compliance` | | `senior-secops` | Incident/vuln triage workflow + log summary tooling | `skills/.curated/security/senior-secops` | ### AI (`ai`) | Skill | What it’s for | Install path | | --- | --- | --- | | `senior-prompt-engineer` | Prompt design + eval scaffolding | `skills/.curated/ai/senior-prompt-engineer` | ## Experimental Skills Experimental skills are usable but still changing. Expect breaking changes to prompts, assets, or scripts. ### Design (`design`) | Skill | What it’s for | Install path | | --- | --- | --- | | `accessibility-auditor` | WCAG audits, ARIA implementation, inclusive design remediation | `skills/.experimental/design/accessibility-auditor` | | `ui-design-system` | Design system tooling and token generation | `skills/.experimental/design/ui-design-system` | ### Platform (`platform`) | Skill | What it’s for | Install path | | --- | --- | --- | | `senior-frontend` | Production frontend workflows and scaffolding | `skills/.experimental/platform/senior-frontend` | | `senior-fullstack` | Full-stack architecture and scaffolding | `skills/.experimental/platform/senior-fullstack` | ### Quality (`quality`) | Skill | What it’s for | Install path | | --- | --- | --- | | `error-resolver` | Reproduce, isolate, and fix failing errors safely | `skills/.experimental/quality/error-resolver` | | `gh-fix-ci` | Inspect PR checks via `gh` and fix failing CI | `skills/.experimental/quality/gh-fix-ci` | | `systematic-debugging` | Root-cause debugging before fixes | `skills/.experimental/quality/systematic-debugging` | ### AI (`ai`) | Skill | What it’s for | Install path | | --- | --- | --- | | `audiocraft-audio-generation` | AudioCraft text-to-music and text-to-audio generation with MusicGen and AudioGen | `skills/.experimental/ai/audiocraft-audio-generation` | | `agents-crewai` | CrewAI agent team design and orchestration | `skills/.experimental/ai/agents-crewai` | | `api-integration-specialist` | Third-party API integrations with auth, retries, and rate limits | `skills/.experimental/ai/api-integration-specialist` | | `dispatching-parallel-agents` | Split complex tasks into parallel agent workloads | `skills/.experimental/ai/dispatching-parallel-agents` | ### Product (`product`) | Skill | What it’s for | Install path | | --- | --- | --- | | `feature-design-assistant` | Turn ideas into specs with scope, risks, and acceptance criteria | `skills/.experimental/product/feature-design-assistant` | | `meeting-insights-analyzer` | Extract communication insights from meeting transcripts | `skills/.experimental/product/meeting-insights-analyzer` | | `planning-with-files` | Persistent markdown planning and tracking | `skills/.experimental/product/planning-with-files` | | `product-manager-toolkit` | PRDs, RICE, discovery synthesis, prioritization | `skills/.experimental/product/product-manager-toolkit` | ### Devtools (`devtools`) | Skill | What it’s for | Install path | | --- | --- | --- | | `changelog-generator` | Turn git history into user-friendly changelogs | `skills/.experimental/devtools/changelog-generator` | | `file-organizer` | Safe file/folder cleanup and organization workflows | `skills/.experimental/devtools/file-organizer` | | `finishing-a-development-branch` | Finalize branches with clean status and checks | `skills/.experimental/devtools/finishing-a-development-branch` | | `gh-address-comments` | Address GitHub PR comments with `gh` | `skills/.experimental/devtools/gh-address-comments` | | `git-commit-helper` | Craft clear, conventional commits | `skills/.experimental/devtools/git-commit-helper` | | `using-git-worktrees` | Create isolated git worktrees safely | `skills/.experimental/devtools/using-git-worktrees` | ## Repository Layout This repo mirrors the common Codex “catalog” layout with categories: - `skills/.curated/<category>/<skill-name>/`: stable, recommended skills. - `skills/.experimental/<category>/<skill-name>/`: works-in-progress (APIs and wording may change more frequently). Each skill folder contains: - `SKILL.md`: the entrypoint. YAML frontmatter is intentionally minimal (`name` + `description`). - `LICENSE.txt`: license for that skill’s contents. - Optional `references/`, `assets/`, and `scripts/`. ## Validation Run the local validator before pushing: ```bash python scripts/validate_skills.py ``` CI runs the same validator on PRs and pushes to `main`. ## Contributing - Keep skills self-contained and avoid adding new runtime dependencies unless necessary. - Prefer small, copy/pasteable assets that work in real repos (for `frontend-design`, assume Next.js **App Router**). - Keep `SKILL.md` concise; move deep detail into `references/` (progressive disclosure). ## Sources & Acknowledgements We keep a list of upstream sources we reference for ideas, patterns, and skills and acknowledge them here: - `https://github.com/davila7/claude-code-templates` - `https://github.com/anthropics/skills` - `https://github.com/openai/skills` - Run `python scripts/validate_skills.py` before opening a PR. ## Support If this project saves you time, consider supporting it: [](https://buymeacoffee.com/vadim984) ## License Repository license: see `LICENSE`. Individual skills include a per-skill `LICENSE.txt`.