Claude MarketplacesSubmit
brettatoms avatar

Alpinejs

brettatoms/agent-skills

This is a pattern guide that'll save you from the classic Alpine mistake of cramming entire JavaScript functions into HTML attributes. It gives you a clear cutoff rule (50 characters max in directives), shows you when to extract logic into proper functions versus keeping simple toggles inline, and covers the full directive set with event modifiers and transition helpers. The decision tree at the end is genuinely useful: simple state stays inline, anything with methods gets extracted, reusable stuff goes into Alpine.data(), and shared state becomes a store. If you've ever written a 300-character x-data attribute and felt dirty about it, this codifies the better way.

skills.sh installs
258
GitHub stars
3
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add brettatoms/agent-skills --skill alpinejs --agent claude-code

Installs into .claude/skills of the current project.

Files

AlpineJS Best Practices

Golden Rule: Keep Attributes Short

Never put complex logic in HTML attributes. If your x-data, x-init, or any directive exceeds ~50 characters, extract it.

Directive Cheatsheet

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/brettatoms/agent-skills
Categories
Frontend Development, Documentation, AI & Agent Building
First seen
Jun 3, 2026

Recommended

More Frontend Development
1mike-coulbourn avatarscriptwriting-methodologymike-coulbourn/claude-vibesDirect response copywriting frameworks for video scripts. Includes DR formula, PAS, AIDA, hook formulas, CTA best practices, and conversion optimization. Auto-a256skills.sh installs
2nexu-io avatarcritiquenexu-io/open-designRun a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–255skills.sh installs
3patricio0312rev avatarvscode-rest-client-generatorpatricio0312rev/skillsGenerates .http files for the VS Code REST Client extension from Express, Next.js, Fastify, or other API routes. Creates organized request files with variables,255skills.sh installs
4qodex-ai avatargenerate-swagger-docsqodex-ai/ai-agent-skillsGenerate OpenAPI documentation from source code. Analyzes repository to automatically discover API endpoints and create swagger.json and interactive HTML docume255skills.sh installs
5novotnyllc avatardotnet-uinovotnyllc/dotnet-artisanBuilds .NET UI apps across Blazor (Server, WASM, Hybrid, Auto), MAUI (XAML, MVVM, Shell, Native AOT), Uno Platform (MVUX, Extensions, Toolkit), WPF (.NET 8+, Fl254skills.sh installs
6prowler-cloud avatartypescriptprowler-cloud/prowlerTypeScript strict patterns and best practices. Trigger: When implementing or refactoring TypeScript in .ts/.tsx (types, interfaces, generics, const maps, type g254skills.sh installs