How do I install the Project Structure Vue skill?

Run npx skillmds@latest add irahardianto/project-structure-vue in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Project Structure Vue skill do?

Vue/React Frontend Layout It is listed under Web & Frontend on SkillMD.

Is Project Structure Vue safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Project Structure Vue?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Project Structure Vue free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Project Structure Vue?

irahardianto (@irahardianto) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Project Structure Vue by irahardianto

Name: Project Structure Vue
Author: irahardianto

File contents

Vue/React Frontend Layout

Vertical slice — features are self-contained modules, not scattered across global folders.

apps/
  frontend/
    src/
      assets/                       # Fonts, images
      features/                     # Vertical slices. Each SELF-CONTAINED.
        task/
          components/               # Feature-specific components (NOT in top-level)
            TaskForm.vue
            TaskListItem.vue
            TaskFilters.vue
            TaskInput.vue
            TaskInput.spec.ts       # Component unit tests
          store/
            task.store.ts           # Pinia store
            task.store.spec.ts
          api/
            task.api.ts             # interface TaskAPI
            task.api.backend.ts     # Production impl
            task.api.mock.ts        # Test impl
          services/
            task.service.ts
            task.service.spec.ts
          types/                    # TS interfaces (DTOs)
          composables/              # Feature-specific hooks
          index.ts                  # Public exports only
        order/
      composables/                  # Global reactive logic (useAuth, useTheme)
      components/
        ui/                         # Shared atoms/molecules. NO domain logic.
          BaseButton.vue
          BaseButton.spec.ts
          types.ts
          index.ts
        layout/                     # Organisms (header, sidebar, error boundary)
          AppHeader.vue
          AppSidebar.vue
          ErrorBoundary.vue
          EmptyState.vue
      layouts/                      # App shells (Sidebar, Navbar wrappers)
        MainLayout.vue
        AuthLayout.vue
      views/                        # Route entry points ("Glue")
        HomeView.vue
        TaskView.vue
      utils/                        # Pure stateless helpers. No domain, no reactivity.
      router/
      plugins/                      # Library configs (Axios, I18n)
      App.vue
      main.ts

Key: features/ = vertical slices, export via index.ts. components/ui/ = shared dumb UI. views/ compose features. Feature components inside feature, NOT top-level. Applies to React (.tsx), Vue (.vue), Svelte (.svelte) — swap state mgmt as needed.

Project Structure GEMINI.md § Project Structure
Vue Idioms and Patterns @.gemini/skills/vue-idioms/SKILL.md
TypeScript Idioms and Patterns @.gemini/skills/typescript-idioms/SKILL.md

---name: project-structure-vuedescription: Vue/React Frontend Layout---## Vue/React Frontend LayoutVertical slice — features are self-contained modules, not scattered across global folders.```apps/ frontend/ src/ assets/ # Fonts, images features/ # Vertical slices. Each SELF-CONTAINED. task/ components/ # Feature-specific components (NOT in top-level) TaskForm.vue TaskListItem.vue TaskFilters.vue TaskInput.vue TaskInput.spec.ts # Component unit tests store/ task.store.ts # Pinia store task.store.spec.ts api/ task.api.ts # interface TaskAPI task.api.backend.ts # Production impl task.api.mock.ts # Test impl services/ task.service.ts task.service.spec.ts types/ # TS interfaces (DTOs) composables/ # Feature-specific hooks index.ts # Public exports only order/ composables/ # Global reactive logic (useAuth, useTheme) components/ ui/ # Shared atoms/molecules. NO domain logic. BaseButton.vue BaseButton.spec.ts types.ts index.ts layout/ # Organisms (header, sidebar, error boundary) AppHeader.vue AppSidebar.vue ErrorBoundary.vue EmptyState.vue layouts/ # App shells (Sidebar, Navbar wrappers) MainLayout.vue AuthLayout.vue views/ # Route entry points ("Glue") HomeView.vue TaskView.vue utils/ # Pure stateless helpers. No domain, no reactivity. router/ plugins/ # Library configs (Axios, I18n) App.vue main.ts```Key: `features/` = vertical slices, export via `index.ts`. `components/ui/` = shared dumb UI. `views/` compose features. Feature components inside feature, NOT top-level. Applies to React (.tsx), Vue (.vue), Svelte (.svelte) — swap state mgmt as needed.### Related- Project Structure GEMINI.md § Project Structure- Vue Idioms and Patterns @.gemini/skills/vue-idioms/SKILL.md- TypeScript Idioms and Patterns @.gemini/skills/typescript-idioms/SKILL.md

Frequently asked questions

Project Structure Vue