skills.rest
gabriellst
gabriellstCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component (astro)

Creates static-first Astro components with optional React islands for the landing and blog app.

4|Updated Jul 30, 2026
Search Tags:#landing page#component#i18n#tailwind#static site#astro#react islands
One-click install
npx skills add https://github.com/gabriellst/codm --skill component-astro-gabriellst
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component (astro)
Source: https://github.com/gabriellst/codm/tree/main/.claude/skills/component/astro
Command: npx skills add https://github.com/gabriellst/codm --skill component-astro-gabriellst

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building landing page and blog UI in Astro requires strict discipline: zero-JavaScript static rendering by default, route-based i18n, shared design tokens, and SEO metadata. This Skill encodes those rules so generated components follow the project's architecture instead of drifting into React patterns that break build-time rendering. ## Core Features & Use Cases - Static-first component generation: Produces .astro components with typed Props interfaces, frontmatter data loading via getCollection or fetch, and semantic HTML with accessibility attributes. - React island guidance: Wraps genuinely interactive widgets (toggles, forms) as .tsx islands mounted with the smallest viable client:* directive, keeping shipped JavaScript minimal. - Enforced conventions via registry: A registry.yaml of patterns and bad practices blocks React hooks in .astro files, hardcoded strings bypassing t(locale, key), inline hex colors, and cross-workspace imports from @codm/app-react. - Use Case: Add a localized feature grid section to the landing page that reads features from props, renders token-based Tailwind classes, emits role="list" semantics, and passes the i18n and SEO checklist. ## Quick Start Ask the agent to create a new Astro component such as a hero section or blog card for the landing app, specifying its props and whether it needs any interactive island.

Frequently Asked Questions about component (astro)

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

FAQPage Schema
How do I create an Astro component with interactive React islands?▼

Write the static markup in a .astro file and extract the interactive piece into a .tsx file, then mount it with a client directive such as <ThemeToggle client:visible />. Prefer client:visible over client:load so JavaScript only ships when the island scrolls into view.

When should I use client:load vs client:visible in Astro?▼

Use client:load only for critical above-the-fold interactivity, since it ships JavaScript during initial page load and can block LCP. Default to client:visible for below-the-fold widgets like newsletter forms or carousels, and client:idle for non-urgent UI.

Can I use React hooks like useState inside an .astro file?▼

No. Astro frontmatter runs at build or SSR time, so hooks like useState, useEffect, or useQuery never execute there. Move any stateful logic into a .tsx React island and mount it from the .astro file with a client directive.

How does i18n work in Astro components with multiple locales?▼

Detect the locale with Astro.currentLocale and pass it to a t() helper that reads dictionaries from src/i18n/<locale>.ts. Never hardcode user-facing strings in templates; tests assert on translation keys rather than literal text.

Why should Astro components avoid inline hex colors?▼

Inline hex or rgb values bypass the shared design tokens in @codm/app-ui/tokens.css, breaking dark mode and theme overrides. Use CSS variables like var(--primary) or Tailwind utilities mapped to tokens, and add new tokens to the shared file when needed.

When should I not build UI in the Astro workspace?▼

Avoid Astro for complex stateful interfaces like chat or multi-step forms; those belong in the React console app, linked from the landing page. Astro is for static marketing pages, blog content, and small islands, not application-grade state management.

Related Skills

Explore More Software Engineering Skills→
logseqlogseq
44.4k

logseq-i18n

Manage and validate Logseq internationalization keys and translation files.

Official
Intermediate
TOBIASpuchitoTOBIASpuchito

citec-seo-routing

Implements route metadata, JSON-LD, sitemap, RSS, and manifest SEO for the CITEC Astro frontend.

Community
Intermediate
KRISHNA0RKRISHNA0R
25

ui-pattern

Assemble reusable UI patterns from StyleSeed primitives with dynamic props.

Community
Intermediate
mattwoodcomattwoodco
3

react-flow

Create interactive node-based diagrams in React applications using React Flow.

Community
Intermediate