tailwindcss
Hairy's curated collection of agent skills.
npx skills add https://github.com/hairyf/skills --skill tailwindcssInstallez cette compétence avec la CLI et commencez à utiliser le flux de travail SKILL.md dans votre espace de travail.
Hairy's Skills
Forked from antfu/skills
A curated collection of Agent Skills based on Anthony Fu's skills collection, extended with additional skills reflecting Hairyf's preferences, experience, and best practices for web development.
[!IMPORTANT]
This is a proof-of-concept project for generating agent skills from source documentation and keeping them in sync.
I haven't fully tested how well the skills perform in practice, so feedback and contributions are greatly welcome.
Installation
pnpx skills add hairyf/skills
or to install all of them globally:
pnpx skills add hairyf/skills --all -g
Learn more about the CLI usage at skills.
Skills
This collection extends Anthony Fu's original collection with additional skills from Hairyf. It includes skills from different sources with different scopes, covering both Vue/Vite/Nuxt ecosystem and React/Next.js ecosystem.
Hand-maintained Skills
Opinionated
Manually maintained skills reflecting personal preferences and best practices.
| Skill | Description | Maintainer |
|---|---|---|
| hairy | Hairyf's preferences and best practices for web development (TypeScript, ESLint, pnpm, Vitest, etc.) | Hairyf |
| antfu | Anthony Fu's preferences and best practices for app/library projects (eslint, pnpm, vitest, vue, etc.) | Anthony Fu |
| github-workflow | Standard flow from task source (link or description) to creating a PR: resolve task, create branch and TODO.md, create PR against origin only | Hairyf |
| openapi-specification-v2 | OpenAPI (Swagger) 2.0 — describe REST APIs (path, operation, parameter, response, schema). Use when writing, validating, or interpreting Swagger 2.0 specs | Hairyf |
| openapi-specification-v3.2 | OpenAPI 3.2 — OAD format, paths, operations, JSON Schema 2020-12, security. Use when authoring or validating OpenAPI 3.2 documents | Hairyf |
| create-skill-from-repo | Bootstrap modular Agent Skills from any repository: clone to sources/, extract docs into references/, register in AGENTS.md | Hairyf |
Skills Generated from Official Documentation
Unopinionated but with tilted focus (e.g. TypeScript, ESM, Composition API, and other modern stacks)
Generated from official documentation and fine-tuned for agent usage.
Vue Ecosystem
| Skill | Description | Source |
|---|---|---|
| vue | Vue.js core — reactivity, components, composition API | vuejs/docs |
| vue-router | Vue Router — official router for Vue.js; routing, navigation guards, nested routes, programmatic navigation | vuejs/router |
| nuxt | Nuxt framework — file-based routing, server routes, modules | nuxt/nuxt |
| pinia | Pinia — intuitive, type-safe state management for Vue | vuejs/pinia |
| vite | Vite build tool — config, plugins, SSR, library mode | vitejs/vite |
| vitepress | VitePress — static site generator powered by Vite | vuejs/vitepress |
| vitest | Vitest — unit testing framework powered by Vite | vitest-dev/vitest |
| unocss | UnoCSS — atomic CSS engine, presets, transformers | unocss/unocss |
Cross-Platform (uni-app)
| Skill | Description | Source |
|---|---|---|
| uniapp | uni-app — cross-platform app framework (Vue syntax, App/H5/mini-programs) | dcloud/unidocs-zh |
| uniapp-x | uni-app x — next-gen cross-platform engine (UTS/uvue/Vue, Android/iOS/HarmonyOS/Web/mini-programs) | dcloud/unidocs-uni-app-x-zh |
React Ecosystem
| Skill | Description | Source |
|---|---|---|
| react | React — library for building user interfaces; components, state, side effects, performance | reactjs/react.dev |
| react-router | React Router — multi-strategy router for React (Framework/Data/Declarative modes, loaders, actions) | remix-run/react-router |
| react-use | React Use — collection of essential React Hooks (sensors, UI, animations, side-effects, state) | streamich/react-use |
| next | Next.js — React framework with App Router, Server Components, data fetching, caching | vercel/next.js |
| tailwindcss | Tailwind CSS — utility-first CSS framework | tailwindlabs/tailwindcss.com |
| nativewind | NativeWind — use Tailwind CSS to style React Native components across web and native | nativewind/website |
Mobile (React Native & Flutter)
| Skill | Description | Source |
|---|---|---|
| react-native | React Native — build native mobile apps with React (iOS/Android, native components, platform APIs) | facebook/react-native-website |
| react-native-expo | Expo SDK — EAS Build, EAS Update, Continuous Native Generation; configure Expo projects, native modules, OTA updates | expo/expo |
| react-native-reusables | React Native Reusables — shadcn-style components for React Native (Expo) with Nativewind/Uniwind, RN Primitives, CLI | founded-labs/react-native-reusables |
| flutter | Flutter — build mobile, web, and desktop apps from one codebase; widgets, state, navigation, Material Design | flutter/flutter |
Desktop Apps
| Skill | Description | Source |
|---|---|---|
| electron | Electron - cross-platform desktop apps with JavaScript, HTML, and CSS | electron/electron |
| electron-forge | Electron Forge - tool for building Electron applications | electron-forge/electron-forge-docs |
| tauri | Tauri - cross-platform app toolkit with Rust backend and WebView frontend | tauri-apps/tauri-docs |
Backend & Tools
| Skill | Description | Source |
|---|---|---|
| nest | NestJS — progressive Node.js framework | nestjs/docs.nestjs.com |
| pnpm | pnpm — fast, disk-efficient package manager; workspaces, catalogs, patches, overrides | pnpm/pnpm.io |
| unplugin | unplugin — unified plugin system for Vite, Rollup, webpack, esbuild, Rspack, Farm, Rolldown, Bun | unjs/unplugin |
| unjs | UnJS ecosystem — agnostic JavaScript libraries (h3, nitro, ofetch, unstorage) and universal JS apps | unjs/website |
| undocs | undocs — minimal documentation theme and CLI for UnJS projects (Nuxt, Nuxt Content, Nuxt UI) | unjs/undocs |
| taze | taze — keep JavaScript/TypeScript dependencies fresh with safety rails and monorepo support | antfu-collective/taze |
Animation Libraries
| Skill | Description | Source |
|---|---|---|
| motion | Motion - animation library for the web | motiondivision/motion |
| anime | Anime.js - JavaScript animation engine | juliangarnier/anime |
State Management
| Skill | Description | Source |
|---|---|---|
| valtio | Valtio - proxy-state library for React and Vanilla | pmndrs/valtio |
Architecture & Starters
| Skill | Description | Source |
|---|---|---|
| arch-upkeep | Architecture health-check and upgrade orchestrator — detect repo shape and migrate to canonical tsdown-based starters | Internal |
| arch-nuxt | Vitesse-style Nuxt 4 starter (Vite, UnoCSS, Pinia, VueUse, PWA) | antfu/vitesse-nuxt |
| arch-nuxt-lite | Vitesse Lite — lightweight Vite + Vue 3 SPA with file-based routing | antfu-collective/vitesse-lite |
| arch-nuxt-module-builder | Build and ship Nuxt modules with @nuxt/module-builder | nuxt/module-builder |
| arch-tsdown | TypeScript library starter using tsdown, pnpm, Vitest | antfu/starter-ts |
| arch-tsdown-cli | TypeScript CLI starter using tsdown (library + bin) | hairyf/starter-cli |
| arch-tsdown-monorepo | pnpm monorepo starter for TypeScript libraries with tsdown per package | hairyf/starter-monorepo |
| arch-unplugin | Build universal build-tool plugins with unplugin-starter | unplugin/unplugin-starter |
| arch-vscode | VSCode extension starter (reactive-vscode, tsdown) | antfu/starter-vscode |
| arch-webext-vue | Browser extension with Vue 3 and Vite (popup, options, sidepanel, content script) | antfu-collective/vitesse-webext |
Writing & Workflow
| Skill | Description | Source |
|---|---|---|
| github-cli | GitHub CLI (gh) — repositories, issues, pull requests, Actions, projects, releases, gists, codespaces | github/awesome-copilot |
| writing-styles-juejin | Juejin-style technical article writing — structure, headlines, openings, and best practices for Simplified Chinese tech content | hairyf/juejin-excellent-article |
Vendored Skills
Synced from external repositories that maintain their own skills.
Official Skills
| Skill | Description | Source |
|---|---|---|
| slidev | Slidev — presentation slides for developers (Markdown, Vue components, code highlighting, animations) | slidevjs/slidev |
| vueuse-functions | VueUse — 200+ Vue composition utilities | vueuse/skills |
| turborepo | Turborepo — high-performance build system for monorepos | vercel/turborepo |
| tsdown | tsdown — TypeScript library bundler powered by Rolldown | rolldown/tsdown |
Hairyf's Projects
| Skill | Description | Source |
|---|---|---|
| hairy-utils | Hairy Utils - utility functions library | hairyf/hairylib |
| hairy-react-lib | Hairy React Lib - React utilities and components | hairyf/hairylib |
| valtio-define | Valtio Define - type-safe state management for Valtio | hairyf/valtio-define |
| overlastic | Overlastic - overlay management library | hairyf/overlastic |
Community & Third-Party
| Skill | Description | Source |
|---|---|---|
| create-skill | Guide for creating effective skills that extend Claude's capabilities with specialized knowledge, workflows, or tool integrations | anthropics/skills |
| vue-best-practices | Vue 3 + TypeScript best practices — Composition API, <script setup>, Volar, vue-tsc |
vuejs-ai/skills |
| vue-router-best-practices | Vue Router best practices | vuejs-ai/skills |
| vue-testing-best-practices | Vue testing best practices — Vitest, Vue Test Utils, component testing, mocking, Playwright E2E | vuejs-ai/skills |
| web-design-guidelines | Web design guidelines for building accessible, compliant interfaces; use when reviewing UI, accessibility, or UX | vercel-labs/agent-skills |
| e2e-testing | E2E testing patterns with Playwright for full-stack apps — test structure, page objects, selectors, auth reuse, CI | hieutrtr/ai1-skills |
| writing-humanizer | Remove signs of AI-generated writing from text; make copy sound more natural and human-written (English) | blader/humanizer |
| writing-humanizer-zh | Remove signs of AI-generated writing from text; make copy sound more natural and human-written (Simplified Chinese) | op7418/Humanizer-zh |
FAQ
What Makes This Collection Different?
This collection is based on Anthony Fu's skills collection and extends it with:
- Additional Skills: More skills covering React/Next.js ecosystem, animation libraries, backend frameworks, desktop apps (Electron, Tauri), API specifications (OpenAPI 2.0/3.2), and build tools (unplugin)
- Architecture & Starters: Skills for scaffolding Nuxt/Vue/TS libraries/CLI/VSCode/WebExtension projects (arch-nuxt, arch-tsdown, arch-unplugin, arch-vscode, arch-webext-vue, etc.)
- Hairyf's Projects: Skills for Hairyf's own open-source projects (hairylib, valtio-define, overlastic)
- Personal Preferences: Hairyf's own opinionated preferences and best practices
The key difference from the original collection is that it uses git submodules to directly reference source documentation. This provides more reliable context and allows the skills to stay up-to-date with upstream changes over time.
The project is also designed to be flexible - you can use it as a template to generate your own skills collection.
Skills vs llms.txt vs AGENTS.md
To me, the value of skills lies in being shareable and on-demand.
Being shareable makes prompts easier to manage and reuse across projects. Being on-demand means skills can be pulled in as needed, scaling far beyond what any agent's context window could fit at once.
You might hear people say "AGENTS.md outperforms skills". I think that's true — AGENTS.md loads everything upfront, so agents always respect it, whereas skills can have false negatives where agents don't pull them in when you'd expect. That said, I see this more as a gap in tooling and integration that will improve over time. Skills are really just a standardized format for agents to consume—plain markdown files at the end of the day. Think of them as a knowledge base for agents. If you want certain skills to always apply, you can reference them directly in your AGENTS.md.
Generate Your Own Skills
Fork this project to create your own customized skill collection.
- Fork or clone this repository
- Install dependencies:
pnpm install - Update
meta.tswith your own projects and skill sources - Run
nr start cleanupto remove existing submodules and skills - Run
nr start initto clone the submodules - Run
nr start syncto sync vendored skills - Ask your agent to "generate skills for <project> anthor <author>, use
." (recommended one at a time to manage token usage)
Ongoing maintenance:
- More, until all — When you say "more" (or ask for more coverage) for an existing skill, the agent compares current
references/with the source docs, identifies missing modules, adds new reference files, and updatesSKILL.md(andGENERATION.mdfor Type 1). - Update — When you say "update" (or ask to refresh from source) for a skill, the agent runs
git diffagainst the SHA inGENERATION.md/SYNC.md, then updates only the affected references,SKILL.md, and tracking metadata.
See AGENTS.md for detailed generation guidelines.
Credits
- Original project: antfu/skills by Anthony Fu
- Extended by: Hairyf
License
Skills and the scripts in this repository are MIT licensed.
Vendored skills from external repositories retain their original licenses - see each skill directory for details.