agent-skills
Reusable AI agent skill definitions
a
addyosmani
Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.
Total Products
5
Software by addyosmani
web-quality-skills
# Web Quality Skills An (unofficial) comprehensive collection of [Agent Skills](https://agentskills.io/) for optimizing web projects based on [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) guidelines and Core Web Vitals best practices. **Stack-agnostic.** Works with any framework: React, Vue, Angular, Svelte, Next.js, Nuxt, Astro, plain HTML, and more. ## Why web quality skills? While interface guidelines tell you *what* to build, Web Quality Skills tell you *how* to build it performantly, accessibly, and optimally for search engines. These skills encode the collective wisdom from: - **150+ Lighthouse audits** across Performance, Accessibility, SEO, and Best Practices - **Core Web Vitals** optimization patterns (LCP, INP, CLS) - **Real-world performance engineering** experience - **WCAG 2.2** accessibility standards - **Modern SEO** requirements ## Available skills | Skill | Description | Use when | |-------|-------------|----------| | **[web-quality-audit](#web-quality-audit)** | Comprehensive quality review across all categories | "Audit my site", "Review this for quality", "Check web quality" | | **[performance](#performance)** | Loading speed, runtime efficiency, resource optimization | "Optimize performance", "Speed up my site", "Fix slow loading" | | **[core-web-vitals](#core-web-vitals)** | LCP, INP, CLS specific optimizations | "Improve Core Web Vitals", "Fix LCP", "Reduce CLS" | | **[accessibility](#accessibility)** | WCAG compliance, screen reader support, keyboard navigation | "Improve accessibility", "WCAG audit", "a11y review" | | **[seo](#seo)** | Search engine optimization, crawlability, structured data | "Optimize for SEO", "Improve search ranking", "Fix meta tags" | | **[best-practices](#best-practices)** | Security, modern APIs, code quality patterns | "Apply best practices", "Security audit", "Code quality review" | ## Quick start ### Installation add-skill is a powerful CLI tool that lets you install agent skills onto your coding agents from git repositories. Whether you're using OpenCode, Claude Code, Codex, or Cursor, the add-skill tool makes it simple to extend your agent's capabilities with specialized instruction sets. Use add-skill to automate release notes, create pull requests, integrate with external tools, and more. Simply run npx add-skill to get started. ```bash npx skills add addyosmani/web-quality-skills ``` or ``` npx add-skill addyosmani/web-quality-skills ``` Or manually: ```bash cp -r skills/* ~/.claude/skills/ ``` #### Claude Code (plugin) Install as a versioned, namespaced plugin from inside Claude Code: ```text /plugin marketplace add addyosmani/web-quality-skills /plugin install web-quality-skills@addy-web-quality-skills ``` Skills are then namespaced (e.g. `/web-quality-skills:performance`) and update with `/plugin update`. The plugin reads the same `skills/` directory as the manual copy above — no duplication. #### Codex Install directly via the Codex plugin marketplace (Codex CLI v0.122+): ```bash codex plugin marketplace add addyosmani/web-quality-skills ``` Once installed, invoke skills in chat using `@` (e.g. `@performance`, `@accessibility`). See [docs/codex-setup.md](docs/codex-setup.md) for local installation and troubleshooting. #### Gemini CLI Install directly via Gemini CLI extensions: ```bash gemini extensions install https://github.com/addyosmani/web-quality-skills ``` Skills are auto-discovered by Gemini and activate when prompts match their description. See [docs/gemini-setup.md](docs/gemini-setup.md) for workspace mode and troubleshooting. #### claude.ai Add skills to your project knowledge or paste the SKILL.md contents into your conversation. ### Usage Skills activate automatically when your request matches their description. Examples: ``` Audit this page for web quality issues ``` ``` Optimize performance and fix Core Web Vitals ``` ``` Review accessibility and suggest improvements ``` ``` Make this SEO-ready ``` ## Skill details ### web-quality-audit The comprehensive skill that orchestrates all other skills. Use this for full-site audits or when you're unsure which specific area needs attention. **Trigger phrases:** "audit my site", "quality review", "lighthouse audit", "check web quality" **What it checks:** - All Core Web Vitals metrics - 50+ performance patterns - 40+ accessibility rules - 30+ SEO requirements - 20+ security/best practice patterns ### performance Deep-dive into loading and runtime performance optimization. **Trigger phrases:** "speed up", "optimize performance", "reduce load time", "fix slow" **Key optimizations:** - Critical rendering path - JavaScript bundling and code splitting - Image optimization (formats, sizing, lazy loading) - Font loading strategies - Caching and preloading - Server response optimization ### core-web-vitals Specialized skill for the three Core Web Vitals that affect Google Search ranking. **Trigger phrases:** "Core Web Vitals", "LCP", "INP", "CLS", "page experience" **Metrics covered:** - **LCP** (Largest Contentful Paint) < 2.5s - **INP** (Interaction to Next Paint) < 200ms - **CLS** (Cumulative Layout Shift) < 0.1 ### accessibility Comprehensive accessibility audit following WCAG 2.2 guidelines. **Trigger phrases:** "accessibility", "a11y", "WCAG", "screen reader", "keyboard navigation" **Categories:** - Perceivable (text alternatives, captions, contrast) - Operable (keyboard, timing, seizures, navigation) - Understandable (readable, predictable, input assistance) - Robust (compatible with assistive technologies) ### seo Search engine optimization for better visibility and ranking. **Trigger phrases:** "SEO", "search optimization", "meta tags", "structured data", "sitemap" **What it covers:** - Technical SEO (crawlability, indexability) - On-page SEO (meta tags, headings, content structure) - Structured data (JSON-LD, schema.org) - Mobile-friendliness - Performance signals ### best-practices Modern web development standards and security practices. **Trigger phrases:** "best practices", "security audit", "modern standards", "code quality" **Areas covered:** - HTTPS and security headers - Modern JavaScript APIs - Browser compatibility - Error handling - Console cleanliness ## Thresholds reference ### Core Web Vitals | Metric | Good | Needs improvement | Poor | |--------|------|-------------------|------| | LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s | | INP | ≤ 200ms | 200ms – 500ms | > 500ms | | CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 | ### Performance budget recommendations | Resource type | Budget | |---------------|--------| | Total page weight | < 1.5 MB | | JavaScript | < 300 KB (compressed) | | CSS | < 100 KB (compressed) | | Images | < 500 KB total above-fold | | Fonts | < 100 KB | | Third-party | < 200 KB | ### Lighthouse score targets | Category | Target score | |----------|--------------| | Performance | ≥ 90 | | Accessibility | 100 | | Best Practices | ≥ 95 | | SEO | ≥ 95 | ## Framework-specific notes These skills are framework-agnostic, but some common patterns: **React/Next.js:** Use `next/image`, `React.lazy()`, `Suspense`, `useCallback`/`useMemo` for INP **Vue/Nuxt:** Use `nuxt/image`, async components, `v-once`, computed properties **Svelte/SvelteKit:** Use `{#await}`, `svelte:image`, reactive statements **Astro:** Use `<Image>`, partial hydration, view transitions **Static HTML:** Use native lazy loading, `<picture>`, preconnect hints ## Contributing Contributions welcome! Please follow the [Agent Skills specification](https://agentskills.io/specification). 1. Fork the repository 2. Create your skill in `skills/{skill-name}/SKILL.md` 3. Keep SKILL.md under 500 lines (use `references/` for details) 4. Include practical examples and patterns 5. Submit a pull request ## Resources - [Google Lighthouse Documentation](https://developer.chrome.com/docs/lighthouse/) - [web.dev Learn Performance](https://web.dev/learn/performance/) - [Core Web Vitals](https://web.dev/articles/vitals) - [WCAG 2.2 Guidelines](https://www.w3.org/WAI/WCAG22/quickref/) - [Agent Skills Specification](https://agentskills.io/specification) ## License MIT License - see [LICENSE](LICENSE) for details. --- Built with insights from the Chrome DevTools team, web performance experts, and accessibility advocates to help developers create high-quality web experiences.
chatty
<div align="center"> [<img src="demo-img.jpg">](https://chattyui.com/) </div> <h1 align="center"> Chatty </h1> <div align="center">     </div> **Chatty** is your private AI that leverages WebGPU to run large language models (LLMs) natively & privately in your browser, bringing you the most feature rich in-browser AI experience. # Features ✨ - **In-browser privacy:** All AI models run locally (client side) on your hardware, ensuring that your data is processed only on your pc. No server-side processing! - **Offline:** Once the initial download of a model is processed, you'll be able to use it without an active internet connection. - **Chat history:** Access and manage your conversation history. - **Supports new open-source models:** Chat with popular open-source models such as Gemma, Llama2 & 3 and Mistral! - **Responsive design:** If your phone supports WebGl, you'll be able to use Chatty just as you would on desktop. - **Intuitive UI:** Inspired by popular AI interfaces such as Gemini and ChatGPT to enhance similarity in the user experience. - **Markdown & code highlight:** Messages returned as markdown will be displayed as such & messages that include code, will be highlighted for easy access. - **Chat with files:** Load files (pdf & all non-binary files supported - even code files) and ask the models questions about them - fully local! Your documents never gets processed outside of your local environment, thanks to [XenovaTransformerEmbeddings](https://huggingface.co/Xenova/all-MiniLM-L6-v2) & [MemoryVectorStore](https://js.langchain.com/v0.1/docs/integrations/vectorstores/memory/) - **Custom memory support:** Add custom instructions/memory to allow the AI to provide better and more personalized responses. - **Export chat messages:** Seamlessly generate and save your chat messages in either json or markdown format. - **Voice input support:** Use voice interactions to interact with the models. - **Regenerate responses:** Not quite the response you were hoping for? Quickly regenerate it without having to write out your prompt again. - **Light & Dark mode:** Switch between light & dark mode. # Preview https://github.com/addyosmani/chatty/assets/114422072/a994cc5c-a99d-4fd2-9eab-c2d4267fcfd3 # Why? This project is meant to be the closest attempt at bringing the familarity & functionality from popular AI interfaces such as ChatGPT and Gemini into a in-browser experience. # Browser support By default, WebGPU is enabled and supported in both Chrome and Edge. However, it is possible to enable it in Firefox and Firefox Nightly. Check the [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API#browser_compatibility) for more information. # How to Install > If you just want to try out the app, it's live on [this](https://chattyui.com) website. > > This is a Next.js application and requires Node.js (18+) and npm installed to run the project locally. ## Install from source If you want to setup and run the project locally, follow the steps below: **1. Clone the repository to a directory on your pc via command prompt:** ``` git clone https://github.com/addyosmani/chatty ``` **2. Open the folder:** ``` cd chatty ``` **3. Install dependencies:** ``` npm install ``` **4. Start the development server:** ``` npm run dev ``` **5. Go to [localhost:3000](http://localhost:3000) and start chatting!** ## Docker > [!NOTE] > The Dockerfile has not yet been optimized for a production environment. If you wish to do so yourself, checkout the [Nextjs example](https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile) ``` docker build -t chattyui . docker run -d -p 3000:3000 chattyui ``` Or use `docker-compose`: ``` docker compose up ``` > If you've made changes and want to rebuild, you can simply run `docker-compose up --build` # Roadmap - [ ] **Multiple file embeddings:** The ability to embed multiple files instead of one at a time for each session. - [ ] **Prompt management system:** Select from and add different system prompts to quickly use in a session. # Contributing Contributions are more than welcome! However, please make sure to read the [contributing guidelines](https://github.com/addyosmani/chatty/blob/main/CONTRIBUTING.md) first :) # Hardware requirements > [!NOTE] > To run the models efficiently, you'll need a GPU with enough memory. 7B models require a GPU with about 6GB memory whilst 3B models require around 3GB. > > Smaller models might not be able to process file embeddings as efficient as larger ones. # Acknowledgements & credits Chatty is built using the [WebLLM](https://github.com/mlc-ai/web-llm) project, utilizing [HuggingFace](https://huggingface.co/), open source LLMs and [LangChain](https://www.langchain.com/). We want to acknowledge their great work and thank the open source community. # Authors Chatty is created and maintained by [Addy Osmani](https://github.com/addyosmani/) & [Jakob Hoeg Mørk](https://github.com/jakobhoeg).
agentic-seo
# agentic-seo [](https://www.npmjs.com/package/agentic-seo) [](https://www.npmjs.com/package/agentic-seo) [](https://github.com/addyosmani/agentic-seo/blob/main/LICENSE) [](https://nodejs.org) [](https://github.com/addyosmani/agentic-seo) Audit your documentation and website for **Agentic Engine Optimization (AEO)**: ensure your content is discoverable, parseable, and useful to AI coding agents. AI coding agents like Claude Code, Cursor, Cline, and Aider consume documentation fundamentally differently from humans. They issue single HTTP requests, strip HTML, count tokens, and either use your content as context or silently discard it. `agentic-seo` checks whether your documentation is ready for this new reality. ## Quick Start ```bash # Audit current directory (auto-detects framework) npx agentic-seo # Audit a specific directory npx agentic-seo ./my-docs-site # Audit a live URL npx agentic-seo --url https://docs.example.com # Scaffold missing AEO files npx agentic-seo init ``` ## What It Checks `agentic-seo` runs 10 checks across 5 categories, scoring your site out of 100: ### Discovery (25 points) | Check | Points | What it looks for | |---|---|---| | `robots-txt` | 10 | AI crawlers not blocked, explicit allow rules | | `llms-txt` | 10 | Structured index with descriptions and token counts | | `agents-md` | 5 | AGENTS.md/CLAUDE.md with project context | ### Content Structure (25 points) | Check | Points | What it looks for | |---|---|---| | `content-structure` | 15 | Heading hierarchy, semantic HTML, code examples, tables | | `markdown-availability` | 10 | Markdown source available, low HTML noise, no JS dependency | ### Token Economics (25 points) | Check | Points | What it looks for | |---|---|---| | `token-budget` | 15 | Per-page token counts, no oversized pages | | `meta-tags` | 10 | AI-friendly meta tags, descriptions, token count metadata | ### Capability Signaling (15 points) | Check | Points | What it looks for | |---|---|---| | `skill-md` | 10 | Capability descriptions, inputs, constraints | | `agent-permissions` | 5 | Agent access rules and rate limits | ### UX Bridge (10 points) | Check | Points | What it looks for | |---|---|---| | `copy-for-ai` | 10 | Copy-for-AI buttons, copy-to-clipboard, raw view links | ## Grading | Grade | Score | Meaning | |---|---|---| | **A** | 90-100% | Excellent agent readiness | | **B** | 75-89% | Good with minor improvements needed | | **C** | 60-74% | Functional but missing key signals | | **D** | 40-59% | Significant gaps in agent readiness | | **F** | 0-39% | Not optimized for AI agents | ## Installation ```bash # Global install npm install -g agentic-seo # Or use npx (no install needed) npx agentic-seo ``` ## Usage ### Audit a Local Directory ```bash # Auto-detects framework (Next.js, Docusaurus, 11ty, Astro, Hugo, etc.) agentic-seo ./my-project # Explicitly specify build output directory agentic-seo --output-dir ./my-project/build ``` Supported frameworks: Next.js, Docusaurus, Eleventy, Astro, Hugo, Jekyll, Gatsby, VitePress, MkDocs, Sphinx, Vite. ### Audit with Local Server ```bash # Spin up a server and run HTTP-based checks agentic-seo --serve ./build ``` ### Audit a Live URL ```bash agentic-seo --url https://docs.example.com ``` ### CI Mode ```bash # Exit with code 1 if score below threshold agentic-seo --json --threshold 60 # Just the score agentic-seo score --json ``` ### Scaffold AEO Files ```bash # Create missing llms.txt, AGENTS.md, skill.md, agent-permissions.json agentic-seo init ``` ### Run Specific Checks ```bash agentic-seo --checks robots-txt,llms-txt,token-budget ``` ## Configuration Create `.aeorc.json` in your project root, or add an `"aeo"` key to `package.json`: ```json { "outputDir": "_site", "checks": { "token-budget": { "maxTokensPerPage": 25000 }, "robots-txt": { "requiredAgents": ["ClaudeBot", "GPTBot"] } }, "ignore": ["**/node_modules/**", "**/vendor/**"], "threshold": 60 } ``` ## Programmatic API ```js import { audit, auditWithServer } from 'agentic-seo'; // Audit a directory const report = await audit('./my-site'); console.log(report.grade); // 'B' console.log(report.percentage); // 78 console.log(report.findings.errors); // [{ severity: 'error', message: '...' }] // Audit with a local server const report2 = await auditWithServer('./build'); // Access individual checkers import { checkers } from 'agentic-seo'; ``` ## How It Works `agentic-seo` does not require an API key. All checks are structural and heuristic: 1. **Framework Detection**: Auto-detects your build tool and locates the output directory 2. **File Analysis**: Checks for `robots.txt`, `llms.txt`, `AGENTS.md`, `skill.md`, and `agent-permissions.json` 3. **Content Analysis**: Parses HTML with Cheerio and Markdown with Remark to evaluate structure 4. **Token Counting**: Uses `gpt-tokenizer` to measure real token counts per page 5. **Agent Simulation**: Evaluates what AI agents would actually see when fetching your pages ## CLI Options ``` Options: --url, -u Audit a live URL --serve, -s Start local server and audit via HTTP --json Output results as JSON --verbose, -v Show all findings including info messages --threshold, -t Minimum score percentage (exit 1 if below) --checks Comma-separated checker IDs to run --output-dir Explicitly specify build output directory --help Show help --version Show version ``` ## Where to Start If you're new to AEO, here's the recommended priority order: 1. **Audit robots.txt**: Prevents silent agent lockout (10 min) 2. **Add llms.txt**: Immediate discoverability gains (a few hours) 3. **Measure token counts**: High-leverage insight into page sizes (weekend project) 4. **Write skill.md**: Start with your most-used APIs 5. **Add "Copy for AI" buttons**: Low effort, high signal for human+agent workflows 6. **Set up AI traffic monitoring**: Gives you data to justify further investment ## Disclaimer This is not an official Google project and is not endorsed by Google or Google Search. The concepts, checks, and recommendations in this tool are a best-effort community offering based on publicly available research and emerging practices around AI agent documentation consumption. Scores and recommendations should be taken as directional guidance, not as guarantees of any particular outcome. ## License MIT