rugged-gemini: Skill for Claude Code

Vue Idioms and Patterns

Vue 3 Composition API default. <script setup> canonical syntax. Think reactive data flows, not lifecycle hooks. Composables (use*) = primary logic reuse unit.

Scope: Vue 3 coding idioms. TS type system: @.gemini/skills/typescript-idioms/SKILL.md. Layout: @.gemini/skills/project-structure-vue/SKILL.md. Tests: GEMINI.md § Testing Strategy. Logging: @.gemini/skills/logging-and-observability-principles/SKILL.md.

<script setup> — Only Style

Always <script setup lang="ts">. Never Options API or class-style for new code.

Canonical ordering inside <script setup>:

<script setup lang="ts">
// 1. Framework imports
import { ref, computed, onMounted } from 'vue';

// 2. Third-party imports
import { useIntersectionObserver } from '@vueuse/core';

// 3. Internal imports — feature-relative paths
import type { Task } from './types';
import { useAuth } from '@/composables/useAuth';

// 4. Props & Emits — typed interfaces
interface Props {
    title: string;
    variant?: 'compact' | 'full';
}
const props = withDefaults(defineProps<Props>(), { variant: 'full' });
const emit = defineEmits<{ select: [item: Task]; close: [] }>();

// 5. Composables
const { user } = useAuth();

// 6. Reactive state
const isVisible = ref(false);

// 7. Computed
const doubled = computed(() => (props.count ?? 0) * 2);

// 8. Methods — always named functions (not arrow)
function handleSelect(item: Task) {
    emit('select', item);
}

// 9. Lifecycle (always last before template)
onMounted(() => { /* setup */ });
</script>

<!-- ❌ Options API — not for new components -->
<script lang="ts">
export default { props: { title: String }, ... }
</script>

Named functions for methods: Use function handleClick() — not const handleClick = () =>. Named functions produce readable stack traces, hoist predictably, and clearly signal "this is an action". Reserve arrow functions for callbacks and inline expressions.

Reactivity: ref vs reactive