# Animal Island UI Style

> Use the animal-island-ui visual language to create or review React and Astro interfaces, components, layouts, and long-running blog features. Trigger for Animal Crossing-inspired, Animal Island, warm natural, rounded cute UI; use of the animal-island-ui React package; Astro integration through React islands or Astro-native CSS; and faithful extension of the upstream design tokens, component APIs, interaction rules, accessibility, or motion language.

- Skill: `mystic-stars/animal-island-ui-style` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add mystic-stars/animal-island-ui-style`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mystic-stars/animal-island-ui-style/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mystic-stars (https://skillmd.com/u/mystic-stars)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/mystic-stars/animal-island-ui-style

---


# Animal Island UI style

Apply the upstream Animal Island design language without inventing component APIs or turning an Astro site into a fully hydrated React app.

## Choose the implementation path

1. For Astro blogs, read `references/ASTRO_INTEGRATION.md` first.
2. Prefer Astro-native markup and CSS for static navigation, article layouts, cards, tags, callouts, and decoration.
3. Use `@astrojs/react` and `animal-island-ui` only when an interactive React island provides meaningful value.
4. When using library components, consult `references/AI_USAGE.md` before writing props, imports, or controlled-state logic.
5. When recreating or extending visuals, consult the relevant section of `references/UPSTREAM_STYLE_GUIDE.md` and enforce `references/UPSTREAM_CURSORS_RULES.md` section 7.3.
6. Use `references/DESIGN_PROMPT.md` only when preparing prompts for external visual-generation tools.

## Core visual contract

- Use warm earth tones, cream/parchment surfaces, mint accents, warm brown text, large rounded or pill silhouettes, and warm shadows.
- Never use pure black text, cold gray page backgrounds, cold blue focus rings, thin font weights, or square interactive controls.
- Reserve thick game-key 3D shadows for primary and danger-primary buttons. Keep default buttons subtle, inputs shadowless by default, switches without outer handle shadows, and cards without box shadows.
- Use Nunito for Latin text and Noto Sans SC for Chinese text. Keep body weight at 500, controls and headings at 600–700, and numeric emphasis at 900.
- Preserve semantic HTML, keyboard behavior, visible focus, reduced-motion support, readable article typography, and color contrast.
- Keep decorative motion restrained in long-form reading surfaces.

## Reference search strategy

The bundled upstream references are large. Search narrowly before reading:

- Component API: search `references/AI_USAGE.md` for `## <Component>` or the prop name.
- Pixel styling: search `references/UPSTREAM_STYLE_GUIDE.md` for `### <Component>`, `Design Tokens`, `Demo`, or the CSS property.
- Hard prohibitions: search `references/UPSTREAM_CURSORS_RULES.md` for `7.3`, `禁止`, or the component name.
- External prompts: search `references/DESIGN_PROMPT.md` for the target tool or visual element.

## Astro defaults

- Put shared CSS custom properties in `src/styles/tokens.css` and global foundations in `src/styles/global.css`.
- Keep static themed components under `src/components/island/` and interactive React islands under `src/components/react/`.
- Import `animal-island-ui/style` once from a shared entry when the npm package is used.
- Apply the narrowest hydration directive: no directive for static output, then prefer `client:visible` or `client:idle`; use `client:load` only for immediate interaction.
- Keep Content Collections, layouts, UI components, and design tokens separated for long-term maintenance.

## Provenance

Read `references/PROVENANCE.md` for the pinned upstream source and license. Preserve attribution when redistributing derived material.