astro-components

Enforce Astro component prop typing and Tailwind styling conventions.

38|13|Updated Jun 30, 2025

Search Tags:#ui #frontend #components #tailwind #astro #web #props

Ready to run

npx skills add https://github.com/jhb-software/payload-astro-website-template --skill astro-components-jhb-software

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: astro-components
Source: https://github.com/jhb-software/payload-astro-website-template/tree/main/.claude/skills/astro-components
Command: npx skills add https://github.com/jhb-software/payload-astro-website-template --skill astro-components-jhb-software

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a consistent approach to building Astro components by enforcing prop typing, Tailwind styling, and standardized usage of custom components.

Core Features & Use Cases

Prop typing and destructuring from Astro.props to ensure type safety.
Tailwind-based styling with grouped class lists and inline comments for readability.
Guidance for using custom components like Img, RichText, and Link to maintain UI consistency across web/.

Quick Start

Implement the astro-components guidelines in all new and existing web/ components to ensure consistent, maintainable UI code.

Frequently Asked Questions about astro-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I define props in Astro components for type safety?▼

To define props in Astro components, destructure them directly from Astro.props and use CMS-provided types. This enforces type safety and ensures predictable, maintainable UI code across your web/ components.

What is the best way to apply Tailwind styling in .astro files?▼

The best way to apply Tailwind styling in .astro files is using grouped class lists with inline comments. This styling convention improves readability and maintains consistency across your Astro components.

Does this approach support custom Img, RichText, and Link components?▼

Yes, this approach supports custom Img, RichText, and Link components. It provides guidance on standardized usage to maintain UI consistency when building or updating .astro files in your web/ directory.

How do I structure Astro components to maintain UI consistency?▼

Structure Astro components by enforcing consistent patterns, prop typing, and Tailwind-based styling. Implementing these core guidelines ensures predictable and maintainable UI code across your project.

Can I use CMS-provided types with Astro component props?▼

Yes, you can use CMS-provided types with Astro component props. Destructuring these types from Astro.props ensures type safety and maintains predictable component behavior across your web/ directory.