Astro Components Skill

Purpose

Provides reusable UI components. Does NOT handle sections, layouts, or business logic.

Scope

Core Rules

1. •All styling via design-tokens — No hardcoded colors/spacing
2. •Token missing = build error — Never fallback to arbitrary values
3. •Mobile-first — Base styles for mobile, md: for larger
4. •44px minimum touch targets — All interactive elements
5. •Zero external dependencies — Pure Astro + Tailwind only

Semantic HTML Rules

Rule: If it does something → <button>. If it goes somewhere → <a>.

Component Variants

Fixed variants only. Claude cannot invent new variants.

New variant needed? → Update this skill first, then use.

Props Pattern (All Components)

interface Props {
  variant?: 'primary' | 'secondary';  // Explicit union, no string
  size?: 'sm' | 'md' | 'lg';          // Fixed sizes only
  class?: string;                      // Allow extension
  // ... component-specific
}

const { variant = 'primary', size = 'md' } = Astro.props;

JavaScript Rules

Exception: None. If JS needed, use island architecture.

Icon Handling

// If icon name not found → render nothing + console.warn
const path = icons[name];
if (!path) {
  console.warn(`Icon "${name}" not found`);
  return null;
}

No silent failures. Missing icon = visible warning in dev.

Form Components

Component Boundaries

Components must NOT:

• •Fetch data
• •Format/transform data
• •Access global state
• •Import other components (except Icon)
• •Contain business logic

Rule: Component receives props → renders UI. Nothing else.

File Structure

src/components/ui/
├── Button.astro
├── Input.astro
├── Card.astro
├── Badge.astro
├── Alert.astro
├── Icon.astro
└── index.ts

Forbidden

• •❌ External UI libraries
• •❌ Hardcoded colors/spacing
• •❌ Touch targets under 44px
• •❌ Missing focus states
• •❌ Inline JavaScript
• •❌ Inventing new variants
• •❌ Silent failures

References

• •button.md — Button component code
• •input.md — Input component code
• •card.md — Card component code
• •icon.md — Icon component + full icon list

Definition of Done

• • Uses design-tokens only
• • All interactive: focus states + 44px touch
• • TypeScript Props interface
• • No inline JavaScript
• • Tested on mobile 375px