angora-component

Component: $ARGUMENTS

Before you start

1. Read src/system.md — check anti-patterns and decisions log. Stay consistent.
2. Read src/styles/global.css — know the available tokens. All color values must come from the semantic tokens inside @theme. The primitive palette (defined outside @theme) generates no Tailwind utility classes — only semantic tokens produce usable classes. This is structural enforcement for dark mode compatibility.
3. Read design-principles.md — hierarchy, spacing, typography, color, depth, dark mode, and finishing touches guidance.
4. Read tailwind-conventions.md — Tailwind v4 syntax rules for consistent class authoring.
5. Check existing components — look in src/components/. If the component already exists, read it first. Understand what's there before making changes. If building a new component, read 2–3 existing project components to learn the established patterns (styling conventions, prop style, layout approach).
6. If landmark or content — read src/components/Section.astro to understand the Section pattern.

Composition

Four types: primitives, composites, landmarks, and content components.

Primitives

Atomic, single-purpose elements. Single file. Take props directly.

Children-first composition. Even for primitives, visual content (icons, badges, decorative elements) composes through <slot /> — not through dedicated props. The consumer controls order by placement. This keeps the API surface minimal and the component maximally flexible.

<!-- Bad — prop for visual content -->
<Button icon={ArrowRight} label="Continue" />

<!-- Good — children control content and order -->
<Button>Continue <ArrowRight /></Button>

Only accept behavior/layout props (variant, size, disabled) and a default <slot />.

Examples: Button, TextInput, Toggle, Badge, Section, FormRow, FieldGroup.

Composites

Layout shells that arrange content through sub-components, not prop bags. Directory structure groups the shell with its sub-components.