Frontend Components Spaceplushy Portfolio

---
name: Frontend Components
description: Design and build reusable UI components following Astro's server-first architecture with islands, proper component composition, TypeScript props, and strategic client-side hydration. Use this skill when creating or modifying Astro components, React/Vue/Svelte islands, layout components, or any reusable UI elements. When working on .astro component files, framework component files (.jsx, .tsx, .vue, .svelte), layout components, page components, component prop interfaces, slot implementations, client directive usage (client:load, client:idle, client:visible), scoped component styles, or component documentation and examples.
---

# Frontend Components

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend components.

## When to use this skill

- When creating new Astro component files (.astro)
- When building React, Vue, Svelte, or other framework components for interactive islands
- When defining component props with TypeScript interfaces
- When implementing component composition using slots (default and named slots)
- When choosing and applying client directives (client:load, client:idle, client:visible, client:media, client:only)
- When writing scoped component styles or integrating Tailwind classes
- When creating layout components that wrap page content
- When building reusable UI elements (buttons, cards, forms, modals)
- When implementing component state management or shared state across islands
- When optimizing component performance through lazy loading or code splitting
- When documenting component props, usage examples, or component APIs

## Instructions

For details, refer to the information provided in this file:
[frontend components](../../../agent-os/standards/frontend/components.md)