Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add punkadillo/figma-code-composer --skill nuxtjs-vue-typescriptgit clone --depth 1 https://github.com/punkadillo/figma-code-composerWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/punkadillo/figma-code-composer/nuxtjs-vue-typescript)<a href="https://agentmods.dev/skills/punkadillo/figma-code-composer/nuxtjs-vue-typescript"><img src="https://agentmods.dev/badge/skills/punkadillo/figma-code-composer/nuxtjs-vue-typescript.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00037 | $0.00504 |
| Opus 5 | $0.00018 | $0.00252 |
| Sonnet 5 | $0.00007 | $0.00101 |
| Haiku 4.5 | $0.00004 | $0.00050 |
Grade A, and why
nuxtjs-vue-typescript scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
NuxtJS Vue TypeScript Development
You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.
Code Style and Structure
- Write concise, technical TypeScript with accurate examples
- Employ composition API with declarative patterns; avoid options API
- Favor iteration and modularity over code duplication
- Use descriptive variable names with auxiliary verbs (isLoading, hasError)
- Organize files: exported component, composables, helpers, static content, types
Naming Conventions
- Directories: lowercase with dashes (components/auth-wizard)
- Components: PascalCase (AuthWizard.vue)
- Composables: camelCase (useAuthState.ts)
TypeScript Usage
- Utilize TypeScript throughout; prefer types over interfaces
- Avoid enums; use const objects instead
- Leverage Vue 3 with TypeScript, defineComponent, and PropType
Syntax and Formatting
- Use arrow functions for methods and computed properties
- Minimize curly braces in conditionals
- Employ template syntax for declarative rendering
UI and Styling
- Implement Shadcn Vue, Radix Vue, and Tailwind
- Design responsively with mobile-first Tailwind approach
Performance
- Leverage Nuxt's built-in optimizations
- Use Suspense for async components
- Implement lazy loading for routes and components
- Optimize images: WebP format, size data, lazy loading
Key Conventions
- VueUse for common composables
- Pinia for state management
- Optimize Web Vitals (LCP, CLS, FID)
- Use Nuxt's auto-imports feature
Nuxt-Specific Guidelines
- Follow Nuxt 3 directory structure (pages/, components/, composables/)
- Leverage auto-imports, file-based routing, server routes, plugins
- Use useFetch and useAsyncData for data fetching
- Implement SEO with useHead and useSeoMeta
Vue 3 Composition API Best Practices
- Use
<script setup>syntax - Leverage ref, reactive, and computed
- Use provide/inject for dependency injection
- Create custom composables for reusable logic
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 68 lines · 37 tokens per session scan A b6c4cff0fb07
nuxtjs-vue-typescript is a skill published in the GitHub repository punkadillo/figma-code-composer (3 stars, last pushed 19d ago), licensed MIT. It adds 37 tokens to every session and 504 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
nuxtjs-vue-typescript
Best practices for building Nuxt 3 and Vue 3 applications with TypeScript, the Composition API, and Tailwind CSS. Use when structuring Nuxt/Vue projects, writing composables, typing components and props, wiring up server routes and plugins, or optimizing Nuxt builds and Web Vitals.
inertia-rails-typescript
TypeScript type safety for Inertia Rails (React, Vue, Svelte): shared props, flash, and errors via InertiaConfig module augmentation in globals.d.ts. Use when setting up TypeScript types, configuring shared props typing, fixing TS2344 or TS2339 errors in Inertia components, or adding new shared data.
nuxt-modules
Use when creating Nuxt modules: (1) Published npm modules (@nuxtjs/, nuxt-), (2) Local project modules (modules/ directory), (3) Runtime extensions (components, composables, plugins), (4) Server extensions (API routes, middleware), (5) Releasing/publishing modules to npm, (6) Setting up CI/CD workflows for modules.…
vue-admin-skill
A planned Vue 3 and TypeScript skill for generating an administration interface: a back-office web application with pages, forms, tables, charts, navigation, and permissions. It describes a starter structure using Element Plus, Pinia, Vue Router, Vite, and related tools, but is not yet complete.
typescript-strict
Use when writing or reviewing TypeScript in Vue, Nuxt, Node, or shared TS utilities, fixing type errors, or deciding how to type API responses and composables.
fec-vue3-project-standard
A Vue 3 and TypeScript project standard covering component boundaries, composables, routing, Pinia state, API layers, errors, styles, and project structure. Vue is a frontend framework, and composables are reusable functions for sharing component logic.