What makes Vue3 Project Standard notable?

959 downloads. Trust evidence available

How should Vue3 Project Standard be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Vue3 Project Standard

Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibil Skill: Vue3 Project Standard Owner: bovinphang Summary: Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibil Tags: latest:2.9.0 Version history: v2.9.0 | 2026-09-26T14:41:4

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

959

Updated

Oct 12, 2026

Version

2.9.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 959 downloads reported by the source. Last updated 10/12/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 12, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 12, 2026
Adoption signal: 959 downloadsadoption · observed Oct 12, 2026
Latest release: 2.9.0release · observed Sep 26, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 2.9.0release
## fec-vue3-project-standard v2.9.0 - Translated SKILL.md content from Chinese to English, standardizing terminology for an international audience. - Added a LICENSE file for clearer project licensing. - Removed the skill-card.md file.
Observed Sep 26, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s175m64gr8tsfc06cj22czzfys83mp52:fec-vue3-project-standard

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-bovinphang-fec-vue3-project-standard/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

82,999 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: fec-vue3-project-standard
description: Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include Vue 3 project specification, Vue component architecture.
---

# Vue 3 project specifications

For repositories using Vue 3 + TypeScript.

## Purpose

Provides project structure, component boundaries, Composables, and default implementation conventions for Vue 3 + TypeScript projects to ensure conventional development and type safety.

## Procedure

1. Identify the existing Vue conventions in the warehouse: directory, routing, Pinia, request layer, style system, component library and test framework.
2. Demarcate the boundaries between pages, business components, common components, composables, stores, services and utils.
3. Prioritize the existing automatic import/module export conventions of `<script setup lang="ts">`, composite API and warehouse.
4. Complete state ownership, API layer, error handling, style isolation and special skill offloading when outputting.
5. Pages and modules must have recoverable error UI; global `errorHandler`, `onErrorCaptured`, request error mapping and routing error page have clear division of labor.
6. Tailwind token/variant or responsive layout requirements should be diverted to corresponding special skills to avoid stuffing style system rules into Vue component specifications.
7. When the state ownership is complex, first make a state list; when the boundaries of DTO, public props, generic composable or `tsconfig` are complex, first use the TypeScript project specification process to converge cross-framework type contracts.
8. When designing reusable composables, clarify whether the input supports plain value, ref, computed or getter; when testing Vue components, cover the common boundaries of Pinia, Router, Teleport, Suspense and async setup.

## Detailed reference

Load more detailed reference files as needed:

- Project directory, component layering, component specifications, annotations, and TypeScript: Load [references/vue3-project-structure.md](references/vue3-project-structure.md).
- Composables, slots, Provide/Inject and routing organizations: Load [references/vue3-composables-routing.md](references/vue3-composables-routing.md).
- Pinia, API layer, error handling, directives, styles, tests, anti-patterns and output checklist: Loading [references/vue3-state-api-quality.md](references/vue3-state-api-quality.md).
- Lightweight performance conventions at the Vue project specification level: Load [references/vue3-performance-patterns.md](references/vue3-performance-patterns.md).

## Constraints

- Use `<script setup lang="ts">` to disable using Options API to add new components
- The size

README.md

# Vue 3 project specifications

Organize Vue 3 and TypeScript SFCs, composables, routes, Pinia, and project boundaries.

## Skill

- ID: `fec-vue3-project-standard`
- Category: `project-standard`
- Version: `2.9.0`
- Source: `skills/fec-vue3-project-standard/SKILL.md`

## Description

Use when designing or reviewing Vue 3 + TypeScript project structure, SFC/component boundaries, composables organization, route composition, Pinia ownership, API/error/styling defaults, directives, or repository-wide Vue conventions. Prefer narrower skills for forms, data fetching, tests, accessibility, virtualization, animation, or security deep dives; Chinese triggers include Vue 3 project specification, Vue component architecture.

## Usage

Install or import this package with any skill runtime that understands the standard `SKILL.md` layout. The canonical source remains the Frontend Craft repository.

## Packaged Files

- [references/vue3-composables-routing.md](references/vue3-composables-routing.md)
- [references/vue3-performance-patterns.md](references/vue3-performance-patterns.md)
- [references/vue3-project-structure.md](references/vue3-project-structure.md)
- [references/vue3-state-api-quality.md](references/vue3-state-api-quality.md)

## Optional Related Packages

- `@bovinphang/fec-typescript-project-standard`
- `@bovinphang/fec-state-management`
- `@bovinphang/fec-tailwind-design-system`
- `@bovinphang/fec-responsive-layout`
- `@bovinphang/fec-form-handling`
- `@bovinphang/fec-data-fetching`
- `@bovinphang/fec-component-testing`
- `@bovinphang/fec-e2e-testing`
- `@bovinphang/fec-accessibility-check`
- `@bovinphang/fec-security-review`
- `@bovinphang/fec-list-virtualization`
- `@bovinphang/fec-svg-animation`
- `@bovinphang/fec-canvas-threejs`

## License

MIT

_meta.json

{
  "ownerId": "kn7b0nh7hvj1pffeqc8y0dqwwh83m726",
  "slug": "fec-vue3-project-standard",
  "version": "2.9.0",
  "publishedAt": 1790433706275
}

references/vue3-composables-routing.md

# Vue 3 composables and routing patterns

## Composables specification

### Design principles

- Named with `use` prefix
- Use objects as return values and clearly mark the type
- Internal processing loading / error / data tri-state
-Support parameter responsiveness (accepts `Ref` or getter)
- Library level composable to clarify whether the parameter supports normal values, `Ref`, `computed` or getter, and parse the latest value inside the side effect

```typescript
export function useUserList(params: MaybeRef<QueryParams>) {
  const data = ref<User[]>([]);
  const loading = ref(false);
  const error = ref<Error | null>(null);

  async function fetch() {
    loading.value = true;
    error.value = null;
    try {
      const res = await getUserList(toValue(params));
      data.value = res.list;
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  }

  watchEffect(() => {
    fetch();
  });

  return {
    data: readonly(data),
    loading: readonly(loading),
    error: readonly(error),
    refetch: fetch,
  };
}
```

### Composable usage principles

- Return a `readonly` reference to prevent accidental modification by outsiders
- In data request scenarios, libraries such as VueQuery / VueUse are preferred (if the project has been introduced)
- Clean up timers, event listeners and other side effects in `onUnmounted`
- Avoid directly manipulating DOM in composable
- Read-only inputs accept normal values, refs, computed or getters; inputs that require bidirectional writing only accept writable refs or explicit setters.
- If the parameter itself is a callback, comparator or predicate, do not design it as a getter type input, otherwise the business function may be mistakenly called during parsing.

### Vue Router / Pinia / Test common boundaries

- Changes in routing parameters will not recreate the same routing component; data that relies on `route.params` must watch clear fields and handle cancellation and race conditions.
- Avoid old-style `next()` multi-branch repeated calls in navigation guards; give priority to returning `false`, redirecting objects or throwing handleable errors.
- Use `storeToRefs` when destructuring the Pinia store will lose responsiveness; the setup store must return state, getters and actions that need to be tracked externally.
- UI temporary status, form input, and pop-up window switches do not enter the global store; URL query, server-side cache, and local component status are returned to their respective places first.
- Vue Test Utils tests prioritize user-visible behavior and do not use snapshots as the only proof; asynchronous updates use `await`, `flushPromises` or the waiting method recommended by the framework.
- When testing using Pinia, Router, Teleport, Suspense, async setup or `defineAsyncComponent`, explicitly install the plugin in the test fixture, mount the target container and wait for async to stabilize.

## Slots and Provide/Inject

### Slots

- Use `<slot>`

references/vue3-performance-patterns.md

# Vue 3 performance patterns

This file keeps lightweight Vue project-standard performance guidance. Use the frontend performance workflow when the task needs metrics, traces, profiles, bundle analysis, network evidence, or a formal performance report.

## Performance

- Use `shallowRef` / `shallowReactive` to optimize large objects
- Use virtual scrolling for large lists
- Avoid using `v-if` in `v-for` (extract to computed filtering)
- Use `defineAsyncComponent` to lazily load heavy components
- `v-for` must have a stable `:key`
- Routing components are loaded on demand using dynamic `import()`

Github ReposUpdated 4d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular