AgentSkillsCN

Frontend Components

遵循Astro的服务器优先架构，以岛屿组件、合理的组件组合、TypeScript Props，以及有策略的客户端侧渲染，设计并构建可复用的UI组件。在创建或修改Astro组件、React/Vue/Svelte岛屿组件、布局组件，或任何可复用的UI元素时使用此技能。在处理.Astro组件文件、框架组件文件（.jsx、.tsx、.vue、.svelte）、布局组件、页面组件、组件Props接口、Slot实现、客户端指令的使用（client:load、client:idle、client:visible）、作用域内的组件样式，或组件文档与示例时使用此技能。

SKILL.md
--- frontmatter
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