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