clerk-vue-patterns
'Vue 3 patterns with Clerk — composables (useAuth, useUser,
Open source Repository Open in the app JSON README (API)
About
'Vue 3 patterns with Clerk — composables (useAuth, useUser,
Details
- Kind
- Agent skills
- Topic
- No topic detected
- Publisher
- clerk
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 71
- Forks
- 4
- Open pull requests
- 7
- Last push
- 2026-09-04T17:57:41Z
- Repository state
- ativo
- Language
- Shell
- Added
- 2026-08-30 15:21:15
- Updated
- 2026-09-11 01:03:08
- Origin id
clerk/skills/clerk-vue-patterns
README
<p align="center">
<a href="https://clerk.com?utm_source=github&utm_medium=clerk_skills" target="_blank" rel="noopener noreferrer">
<img src="./assets/logo-pixel.svg" height="84">
</a>
<br />
</p>
<div align="center">
<h1>
Clerk Skills
</h1>
<a href="https://clerk.com/docs">
<img alt="Documentation" src="https://img.shields.io/badge/documentation-clerk-green.svg" />
</a>
<a href="https://clerk.com/discord">
<img alt="Discord" src="https://img.shields.io/discord/856971667393609759?color=7389D8&label&logo=discord&logoColor=ffffff" />
</a>
<a href="https://x.com/clerk">
<img alt="Follow on X" src="https://img.shields.io/twitter/url.svg?label=%40clerk&style=social&url=https%3A%2F%2Fx.com%2Fclerk" />
</a>
<br />
<br />
<p>
<strong>
Skills to help AI coding agents work more effectively with Clerk.
</strong>
</p>
</div>
---
Skills follow the [Agent Skills](https://agentskills.io/) format.
## Install
### Agent Skills
```bash
npx skills add clerk/skills
```
### Codex
```bash
codex plugin marketplace add clerk/skills
```
After adding the marketplace, restart Codex, open `/plugins`, select
**Clerk Skills**, install and enable `clerk-skills`, then start a new thread.
### Manual (Claude Code)
```bash
git clone https://github.com/clerk/skills ~/.claude/skills/clerk
```
## Skills
### Core
| Skill | Purpose | When to Use |
|-------|---------|-------------|
| `/clerk` | **Router** - Routes to the right skill | Always start here |
| `clerk-cli` | Clerk CLI operations | Users, orgs, apps, env keys, deploy checks |
| `clerk-setup` | Add Clerk to any framework | New projects, framework setup |
| `clerk-custom-ui` | Custom sign-in/up and appearance | Building custom forms, styling |
| `clerk-backend-api` | Backend REST API explorer | Browsing or calling API endpoints |
### Framework Patterns
| Skill | Framework | Patterns |
|-------|-----------|----------|
| `clerk-nextjs-patterns` | Next.js | Middleware, Server Actions, caching |
| `clerk-react-patterns` | React | Hooks, auth guards, protected routes |
| `clerk-react-router-patterns` | React Router | Loaders, actions, route protection |
| `clerk-vue-patterns` | Vue | Composables, Pinia integration |
| `clerk-nuxt-patterns` | Nuxt | Server middleware, SSR auth |
| `clerk-astro-patterns` | Astro | SSR auth, island components |
| `clerk-tanstack-patterns` | TanStack Start | Server functions, route protection |
| `clerk-chrome-extension-patterns` | Chrome Extension | Background scripts, popup auth |
### Features
| Skill | Purpose | When to Use |
|-------|---------|-------------|
| `clerk-orgs` | Multi-tenant B2B organizations | Team workspaces, RBAC |
| `clerk-billing` | Subscription billing and feature gating | Pricing tables, plans, per-seat, entitlements |
| `clerk-webhooks` | Real-time events and data syncing | Database sync, notifications |
| `clerk-testing` | E2E testing for auth flows | Playwright/Cypress tests |
### Native Mobile
| Skill | Platform | Patterns |
|-------|----------|----------|
| `clerk-swift` | iOS | ClerkKit, SwiftUI, Apple Sign-In |
| `clerk-android` | Android | Kotlin, Jetpack Compose |
| `clerk-expo` | Expo / React Native | Native components, custom flows, SMS OTP, OAuth |
## Quick Start
### 1. Set Up API Keys
Get your keys from the [Clerk Dashboard](https://dashboard.clerk.com/) and add them to `.env`:
```bash
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxx
CLERK_SECRET_KEY=sk_test_xxx
```
### 2. Ask Your Agent
| You Say | Skill Used |
|---------|------------|
| "List Clerk users" | `clerk-cli` |
| "Add Clerk auth to my Next.js app" | `clerk-setup` |
| "Use Server Actions with Clerk" | `clerk-nextjs-patterns` |
| "Add Clerk to my Vue app" | `clerk-vue-patterns` |
| "Add Clerk to my Nuxt app" | `clerk-nuxt-patterns` |
| "Add auth to my Expo app" | `clerk-expo` |
| "Add phone SMS auth to my Expo app" | `clerk-expo` |
| "Add Clerk to my Astro site" | `clerk-astro-patterns` |
| "Build custom sign-in form" | `clerk-custom-ui` |
| "Sync users to Prisma via webhooks" | `clerk-webhooks` |
| "Add Playwright tests for auth" | `clerk-testing` |
| "Set up organizations for my B2B app" | `clerk-orgs` |
| "Add subscription billing with pricing table" | `clerk-billing` |
| "Gate features by plan" | `clerk-billing` |
| "Add Clerk auth to my iOS app" | `clerk-swift` |
| "Add Clerk auth to my Android app" | `clerk-android` |
## Repository Structure
```
clerk-skills/
├── .agents/
│ └── plugins/
│ └── marketplace.json
├── .codex-plugin/
│ └── plugin.json
├── .claude-plugin/
│ └── marketplace.json
├── skills/
│ ├── core/
│ │ ├── clerk/ # Router skill
│ │ ├── clerk-cli/ # CLI operations
│ │ ├── clerk-setup/ # Framework setup
│ │ ├── clerk-custom-ui/ # Component customization
│ │ └── clerk-backend-api/ # REST API explorer
│ ├── frameworks/
│ │ ├── clerk-nextjs-patterns/
│ │ ├── clerk-react-patterns/
│ │ ├── clerk-react-router-patterns/
│ │ ├── clerk-vue-patterns/
│ │ ├── clerk-nuxt-patterns/
│ │ ├── clerk-astro-patterns/
│ │ ├── clerk-tanstack-patterns/
│ │ └── clerk-chrome-extension-patterns/
│ ├── features/
│ │ ├── clerk-orgs/
│ │ ├── clerk-billing/
│ │ ├── clerk-webhooks/
│ │ └── clerk-testing/
│ └── mobile/
│ ├── clerk-swift/
│ ├── clerk-android/
│ └── clerk-expo/
└── README.md
```
## Resources
- [Clerk Docs](https://clerk.com/docs)
- [Dashboard](https://dashboard.clerk.com)
- [Discord](https://clerk.com/discord)
## Request a Skill
Don't see what you need? [Request a skill](https://github.com/clerk/skills/issues/new?template=skill-request.md).
## License
MIT