SkillCodex - AI agent skills and reusable workflows for React & Next.js

SkillCodex is a curated skills system for AI agents: structured SKILL.md instructions that turn vague prompts into repeatable workflows with clear outcomes, safety boundaries, and modern dev tooling support. Built for Cursor, Claude Code, skills.sh, and any host that reads agent skills.

Use it as a developer productivity tool and lightweight automation framework for frontend teams - not a black-box plugin. Every skill is readable markdown on GitHub, with an optional npm package for apps and CI.

███████╗██╗  ██╗██╗██╗     ██╗     ███████╗
██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝
███████╗█████╔╝ ██║██║     ██║     ███████╗
╚════██║██╔═██╗ ██║██║     ██║     ╚════██║
███████║██║  ██╗██║███████╗███████╗███████║
╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝

Install into Cursor (.cursor/skills/), Claude Code, or skills.sh-compatible hosts.

For Node.js / tooling

npm install @skillcodex/skills
# or
pnpm add @skillcodex/skills

Requires Node.js 18+.

For contributors

git clone https://github.com/bh611627/skillcodex.git
cd skillcodex
pnpm install
pnpm validate

---

Usage

Load a skill in your agent

1. Pick a skill from the directory or table below.
2. Run npx skills add … --skill <slug> or copy skills/<slug>/SKILL.md into your agent skills folder.
3. Invoke with a concrete task (see examples).

Import from npm (TypeScript)

import seoAgent from "@skillcodex/skills/seo-agent";

seoAgent.name;           // "seo-agent"
seoAgent.description;    // one-line summary
seoAgent.instructions;   // agent body
seoAgent.outcomes;       // measurable results
seoAgent.skillMd;        // full SKILL.md source

import { skills, skillList } from "@skillcodex/skills";

More detail: docs/usage.md

---

Examples (what developers search for)

Goal	Skill	Example prompt
Next.js SEO + metadata	seo-agent	“Audit my About page metadata and add JSON-LD”
Small focused code diffs	code-assistant	“Fix login button styles without rewriting the file”
Vitest + RTL tests	testing-agent	“Add tests for UserCard.tsx”
WCAG 2.2 AA audit	accessibility-audit	“File:line a11y report for the checkout form”
JS → strict TypeScript	typescript-refactor	“Migrate utils/ to strict TS”
Core Web Vitals / bundle	performance-audit	“Find LCP and bundle issues in my App Router app”
Safe env setup	env-config-agent	“Create .env.example and typed env with zod”
Prisma schema	database-schema-agent	“Review schema for missing indexes”
Doc UI (skills.sh-style)	web-design-guidelines	“Build a skill browser with skeletons and outcomes”

Step-by-step host guides: Cursor · Claude Code

Before / after (agent behavior)

Without skill:  vague advice, full-file rewrites, mixed npm/pnpm
With skill:     scoped diff, file:line findings, stated outcomes, safety limits

---

Why this project matters

• Reusable workflows - capture how your team actually ships (SEO, a11y, TS strictness) once, reuse everywhere.
• Trust - full SKILL.md on GitHub; validation catches prompt-injection Unicode and missing safety sections.
• Modern dev tooling - pnpm, Next.js App Router, Vitest, Playwright, Prisma patterns baked in.
• AI + human readable - structured for agents and code review in PRs.

Compared to skills.sh: same npx skills add discovery, but outcomes instead of install counts, and every skill is auditable markdown.

---

Skill catalog

Skill	Outcome
web-design-guidelines	Doc UI build or file:line design audit
skillcodex-browser-ui	Full documentation browser UI
content-creator	Hooks, script, caption, hashtags
seo-agent	SEO outline, JSON-LD, OpenGraph checklist
code-assistant	Focused diffs + code review
skill-creator	Valid new SKILL.md + metadata
typescript-refactor	Strict TS migration or audit
testing-agent	Vitest/RTL + Playwright tests
accessibility-audit	WCAG 2.2 AA report
env-config-agent	Safe env + typed config
performance-audit	Bundle + CWV findings
database-schema-agent	Prisma schema or audit

---

Repository layout

Path	Purpose
skills/	Source of truth - one SKILL.md per skill
references/	Shared rules (design, SEO, safety)
package/	npm package @skillcodex/skills
docs/	Introduction, usage, contributing
examples/	Cursor and Claude Code guides

REPO_LAYOUT.md · GIT_WORKFLOW.md · CHANGELOG.md

---

Documentation

Doc	Description
docs/introduction.md	Concepts and ecosystem
docs/usage.md	Install paths and npm API
docs/contributing.md	Add or improve skills
SKILL_STANDARD.md	SKILL.md format spec
WHAT_IS_SKILLCODEX.md	Short overview
SECURITY.md · TRUST.md	Safety model

---

Roadmap

1. api-route-agent - Route Handlers + zod validation
2. i18n-agent - App Router i18n setup and audit
3. auth-agent - Session/OAuth without secret leakage
4. monorepo-agent - pnpm workspaces + Turborepo
5. storybook-agent - Stories aligned with design-guidelines

---

Contributing

PRs welcome. See .github/CONTRIBUTING.md and run pnpm validate before opening a PR.

pnpm new-skill   # interactive scaffold

MIT © SkillCodex contributors