# Perd Vue Components

> Perd-specific Vue SFC conventions for imports and responsive styling. Use whenever creating or reviewing `.vue` files in Perd. Excludes framework routing and app-level data fetching.

- Skill: `perdolique/perd-vue-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add perdolique/perd-vue-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/perdolique/perd-vue-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Perdolique (https://skillmd.com/u/perdolique)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/perdolique/perd-vue-components

---


# Perd Vue component conventions

Apply these project-specific rules with the repository instructions and nearby component patterns.

## Imports

- Auto-imports are disabled. Import every dependency explicitly.
- Import Vue APIs from `vue`, VueUse composables from `@vueuse/core`, and shared project code from `#shared/...`.
- Follow the owning feature's existing component import paths and ordering.

## Responsive styles

- Use container queries for component layouts that respond to available component space.
- Keep media queries for viewport layout, app-shell behavior, overlays, and user preferences.