Frontend Components

根据Astro的以服务器优先架构，设计和构建可重用的UI组件，包括岛屿模式、合适的组件组合、TypeScript属性以及策略性的客户端激活。在创建或修改Astro组件、React/Vue/Svelte岛屿、布局组件或任何可重用UI元素时使用此技能。当处理.astro组件文件、框架组件文件(.jsx, .tsx, .vue, .svelte)、布局组件、页面组件、组件属性接口、插槽实现、客户端指令使用（client:load, client:idle, client:visible）、作用域组件样式或组件文档和示例时。

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