Agent Skills

pagespeed-insights

التثبيت
CLI
npx skills add https://github.com/enderpuentes/ai-agent-skills --skill pagespeed-insights

قم بتثبيت هذه المهارة باستخدام واجهة سطر الأوامر (CLI) وابدأ في استخدام سير عمل SKILL.md في مساحة عملك.

آخر تحديث 4/22/2026

AI Agent Skills

Repository containing reusable skills for AI agents, following the skills.sh specification.

Available Skills

conventional-commits

Generate and validate commit messages following the Conventional Commits specification.

Location: conventional-commits/

Use when: Creating git commits, writing commit messages, reviewing commit history, generating changelogs, or when working with semantic versioning.

Features:

  • Complete Conventional Commits specification reference
  • Quick reference tables for commit types and structure
  • Common mistakes and best practices
  • Examples for all commit types
  • Breaking change handling
  • Semantic versioning correlation
  • reference.md: Official spec, commit types, SemVer correlation, tooling — indexable

Docs: Conventional Commits

pagespeed-insights

Audit web pages for performance optimization following PageSpeed Insights guidelines. Acts as a performance auditor that identifies bad practices and guides developers to achieve excellent PageSpeed scores.

Location: pagespeed-insights/

Use when: Analyzing page performance, optimizing web applications, reviewing performance metrics, implementing Core Web Vitals improvements, or when the user mentions page speed, performance optimization, Lighthouse scores, or Core Web Vitals.

Features:

  • Complete PageSpeed Insights guidelines reference
  • Core Web Vitals thresholds and best practices
  • Common performance issues and solutions
  • Lab and field data interpretation
  • Performance optimization checklist
  • Accessibility and SEO best practices
  • Code examples for common optimizations
  • reference.md: Official PageSpeed, Lighthouse, Core Web Vitals, optimization guides — indexable

Docs: PageSpeed Insights

tailwind-css

Set up and use Tailwind CSS v4 only with Next.js (App Router), Vite, or CLI. No tailwind.config.js—theme and config via @theme in CSS. Best practices from official docs.

Location: tailwind-css/

Use when: Styling with Tailwind, configuring Tailwind, installing Tailwind, utility classes, @theme, @layer, @utility, or when the user mentions Tailwind CSS or Tailwind v4.

Features:

  • Installation: Next.js (App Router, 15+), Vite, Tailwind CLI
  • Theme: @theme only (extend, override, namespaces, keyframes, inline)
  • Custom styles: @layer base / @layer components, @utility, @custom-variant
  • Arbitrary values and properties
  • Quick reference and common mistakes
  • reference.md: Official doc links, advanced theme options, default theme summary (indexable)

Docs: Tailwind CSS v4

shadcn-ui

Install and use shadcn/ui with Tailwind v4 and Next.js (App Router), Vite, or manual setup. Configure components.json, add components via CLI, theming with CSS only (no Tailwind config file).

Location: shadcn-ui/

Use when: Adding shadcn/ui, installing shadcn, using Button, Card, Dialog, Form, or any shadcn component, or when the user mentions shadcn, shadcn/ui, or Radix UI with Tailwind.

Features:

  • Quick start (shadcn create) and existing-project setup (Next.js, Vite)
  • components.json and path aliases
  • Full list of official components with CLI names and short descriptions (accordion, alert, button, card, dialog, form, sonner, table, etc.)
  • Theming with CSS variables and @theme (Tailwind v4)
  • Common patterns and mistakes
  • reference.md: Official doc links, Tailwind v4 + shadcn, component list, schema (indexable)

Docs: shadcn/ui

gsap

Install and use GSAP (GreenSock Animation Platform) for high-performance JavaScript animations. Covers core utilities, React integration, and popular plugins.

Location: gsap/

Use when: Creating complex animations, scroll-based effects, UI transitions, SVG animations, or when the user mentions GSAP, GreenSock, or ScrollTrigger.

Features:

  • Core utilities: Tween, Timeline, Eases
  • React integration with @gsap/react and useGSAP
  • Popular plugins: ScrollTrigger, Flip, Observer, etc.
  • Best practices for performance and FOUC prevention
  • reference.md: Official GSAP docs, core API, plugins, React integration — indexable

Docs: GSAP

jsdoc

Write and maintain API documentation using JSDoc comments colocated with JavaScript/TypeScript code. Covers comment rules, core tags, and CLI generation.

Location: jsdoc/

Use when: Documenting functions/classes/modules, standardizing @param and @returns, generating API docs, or when the user mentions JSDoc tags like @todo.

Features:

  • Comment block rules (/** ... */) and placement guidelines
  • Core tags (@param, @returns, @constructor, @todo)
  • Common examples for functions and constructor-style docs
  • CLI docs generation flow (jsdoc file.js)
  • reference.md: Official JSDoc docs links and command-line/config references — indexable

Docs: JSDoc

typescript

Use TypeScript for type-safe JavaScript: types, interfaces, generics, narrowing, tsconfig, modules, and strict mode.

Location: typescript/

Use when: Writing or reviewing TypeScript, configuring tsconfig.json, defining types or interfaces, generics, type inference, or when the user mentions TypeScript, TS, or type checking.

Features:

  • Everyday types, narrowing, functions, object types
  • Type manipulation: generics, keyof, typeof, mapped types, conditional types, utility types
  • Classes, modules
  • tsconfig.json and strict mode
  • reference.md: Official doc links (Handbook, Reference, TSConfig, Cheat Sheets) — indexable

Docs: TypeScript

zod

Define and use Zod schemas for TypeScript-first validation with static type inference (z.infer). Primitives, objects, arrays, unions, refinements, transform, parse, safeParse.

Location: zod/

Use when: Validating input, parsing API data, form validation with react-hook-form, or when the user mentions Zod, schema validation, or z.infer.

Features:

  • Primitives, strings (email, url, uuid, datetime), numbers, objects, arrays, tuples, unions, discriminated unions
  • Refinements, transform, pipe
  • z.infer, z.input, z.output; parse / safeParse, ZodError
  • React Hook Form integration (zodResolver)
  • reference.md: Official Zod docs and API sections (zod.dev, API, llms.txt), Zod Mini, ecosystem — indexable

Docs: Zod

storybook

Install and use Storybook for developing UI components in isolation. Colocated stories in system/ directory, CSF format, args, decorators, play functions, and testing.

Location: storybook/

Use when: Building component libraries, design systems, documenting UI components, testing components in isolation, or when the user mentions Storybook, stories, component development, or UI workshop.

Features:

  • Installation for Next.js, Vite, React, Vue, Angular, Svelte
  • system/ structure: components in folders with colocated *.stories.tsx
  • Component Story Format (CSF 3): meta, stories, args
  • Decorators, parameters, play functions for interaction tests
  • Vitest addon, accessibility, visual testing
  • reference.md: Official Storybook docs, frameworks, addons, testing — indexable

Docs: Storybook

Structure

Each skill follows the standard skills.sh structure:

skill-name/
├── SKILL.md          # Required: metadata + instructions
├── reference.md      # Optional: official docs, deep reference (tailwind-css, shadcn-ui)
└── LICENSE.md        # Optional

Installation

Install conventional-commits skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill conventional-commits

Install pagespeed-insights skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill pagespeed-insights

Install tailwind-css skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill tailwind-css

Install shadcn-ui skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill shadcn-ui

Install gsap skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill gsap

Install jsdoc skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill jsdoc

Install typescript skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill typescript

Install zod skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill zod

Install storybook skill

npx skills add https://github.com/EnderPuentes/ai-agent-skills --skill storybook

For more information about using skills in your agent, follow the skills.sh integration guide.

Contributing

When adding new skills, ensure they follow:

  • Skills.sh specification
  • Conventional Commits for commit messages
  • Clear, concise documentation
  • Practical examples