api-pattern
Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.
Best use case
api-pattern is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.
Teams using api-pattern should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/api-pattern/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How api-pattern Compares
| Feature / Agent | api-pattern | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# API Pattern Skill ## Purpose Provides Vue component structure templates and patterns for both Composition API and Options API styles. ## User Choice The user selects their preferred Vue API pattern: - `composition-api`: Modern functional approach (recommended for Vue 3) - `options-api`: Traditional object-based approach (familiar from Vue 2) ## When to Use Use this skill when generating: - Vue components (`src/components/**/*.vue`) - View components (`src/views/**/*.vue`) - Root App component (`src/App.vue`) - Any `.vue` single-file component ## Pattern Selection Logic **Composition API** should be used when: - User explicitly selects `composition-api` - Building new Vue 3 applications (recommended default) - Need better TypeScript integration - Want improved code reusability via composables - Working with complex component logic **Options API** should be used when: - User explicitly selects `options-api` - Migrating from Vue 2 applications - Team preference for object-based structure - Developer familiarity with Vue 2 patterns ## Templates See `examples.md` for complete component templates including: - Basic component structure - Component with props and emits - Component with lifecycle hooks - Component with computed properties - Component with watchers - Component with composables/mixins - View component examples - Store integration examples ## Key Differences Summary ### Composition API - Uses `<script setup lang="ts">` - Reactivity via `ref()`, `reactive()`, `computed()` - Lifecycle hooks as functions (`onMounted`, `onUpdated`, etc.) - Code organized by logical concern - Better tree-shaking and TypeScript inference ### Options API - Uses `defineComponent()` - Reactivity via `data()` return object - Lifecycle hooks as methods (`mounted()`, `updated()`, etc.) - Code organized by option type - Familiar structure for Vue 2 developers ## Notes - Always use TypeScript (`lang="ts"`) - Always use scoped styles (`<style scoped lang="scss">`) - Import theme variables: `@use '@/theme/' as *;` - Follow naming conventions: PascalCase for component names - Include proper type definitions for props and emits
Related Skills
midnight-dapp:testing-patterns
Use when writing unit tests for Midnight contract interaction code, integration testing without ZK proofs, E2E testing with Playwright or Cypress, or setting up CI/CD pipelines for Midnight DApps.
message-authentication-code-pattern
Security pattern for implementing Message Authentication Codes (MACs) to ensure data integrity and origin authentication. Use when implementing HMAC, CMAC, or other MAC algorithms, verifying message integrity, authenticating message origin with shared secrets, or when non-repudiation is NOT required. Specialization of Cryptographic action pattern.
e2e-testing-patterns
Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky tests, or establishing testing standards.
code-review-patterns
Internal skill. Use cc10x-router for all development tasks.
auth-implementation-patterns
Master authentication and authorization patterns including JWT, OAuth2, session management, and RBAC to build secure, scalable access control systems. Use when implementing auth systems, securing A...
responsive-design-patterns
Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components
react-fluent-ui-patterns
Skill for React TypeScript frontend development with Fluent UI Copilot components. Use when creating UI components, handling SSE streams, working with chat interfaces, or implementing theme support.
angular-rxjs-patterns
Use when handling async operations in Angular applications with observables, operators, and subjects.
8bit-docs-patterns
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
[PROJECT]-deployment-patterns
[PROJECT] CI/CD pipeline and deployment automation patterns
gitlab-ci-patterns
Build GitLab CI/CD pipelines with multi-stage workflows, caching, and distributed runners for scalable automation. Use when implementing GitLab CI/CD, optimizing pipeline performance, or setting up...
ecosystem-patterns
Use this when creating new projects, generating documentation, cleaning/organizing a repo, suggesting architecture, deploying containers and services, naming files/folders, or when the user references 'ecosystem', 'patterns', or 'containers'. This skill outlines naming conventions, stack preferences, project organization (iMi worktrees), Docker patterns, and PRD structures from past conversations.