archy/aiui/.claude/skills/new-grid/SKILL.md

name, description, allowed-tools

name	description	allowed-tools
new-grid	Generate a content grid component following AIUI glass-morphism patterns	Read, Write, Edit, Glob, Grep

Create a new content grid component at packages/app/src/components/content/{Name}Grid.vue.

Requirements

1. Read a reference: Read BookGrid.vue or PlaceGrid.vue as a template — they show the standard pattern.

2. Follow conventions:

   • <script setup lang="ts"> with props and emits
   • Glass morphism styling (bg-white/5, rounded-xl, hover:bg-white/10)
   • Dark/light mode support via useTheme()
   • Search input at top (if the content type has enough items)
   • Grid of cards with image fallback, title, subtitle, metadata
   • Touch targets min 44x44px
   • Empty state message when no items match
   • Custom scrollbar class

3. Props: Accept array of items + title string

4. Emits: select-{type} event when a card is clicked

5. Responsive: Works on mobile (full width) and desktop (sidebar width)

The user will specify the content type and its fields.