animal-island-ui

name

animal-island-ui

description

Cloud-first React component library skill for animal-island-ui (Animal Crossing style). Fetches component source from GitHub on demand — no local clone needed. Use when: (1) building UI with Animal Crossing / 动物森友会 style; (2) using animal-island-ui components; (3) creating warm, rounded, cozy React interfaces; (4) matching the animal-island-ui design language. Triggers: "animal island", "动物森友会风格", "animal-island-ui", "可爱圆润风格", "NookPhone".

animal-island-ui — Cloud-First Component Skill

Repo: https://github.com/guokaigdg/animal-island-ui Strategy: Inline API reference for fast generation; fetch full source from GitHub when you need pixel-exact CSS or component internals.

0. Quick Setup

npm install animal-island-ui

// app entry — MUST import before any component
import 'animal-island-ui/style';

Peer: react >= 17, react-dom >= 17.

---

1. Fetching Source from GitHub (Cloud-First)

When you need full component source code (CSS, animations, internals), fetch directly from GitHub — no clone required.

Fetch a single component

# Using gh CLI (preferred)
gh api repos/guokaigdg/animal-island-ui/contents/src/components/Button/Button.tsx --jq '.content' | base64 -d

# Using curl (fallback)
curl -s "https://api.github.com/repos/guokaigdg/animal-island-ui/contents/src/components/Button/Button.tsx" | python3 -c "import sys,json,base64; print(base64.b64decode(json.load(sys.stdin)['content']).decode())"

Fetch component CSS

gh api repos/guokaigdg/animal-island-ui/contents/src/components/Button/button.module.less --jq '.content' | base64 -d

Fetch design tokens

gh api repos/guokaigdg/animal-island-ui/contents/src/styles/variables.less --jq '.content' | base64 -d

Fetch any file by path

# Pattern: src/components/<Name>/<file>
gh api repos/guokaigdg/animal-island-ui/contents/<path> --jq '.content' | base64 -d

Batch fetch all components index

gh api repos/guokaigdg/animal-island-ui/contents/src/index.ts --jq '.content' | base64 -d

Full repo tree (when exploring)

gh api repos/guokaigdg/animal-island-ui/git/trees/main?recursive=1 --jq '.tree[].path'

Read extended docs from repo

# AI_USAGE.md — full API with all props (682 lines)
gh api repos/guokaigdg/animal-island-ui/contents/AI_USAGE.md --jq '.content' | base64 -d

# SKILL.md — pixel-exact CSS spec
gh api repos/guokaigdg/animal-island-ui/contents/skill/SKILL.md --jq '.content' | base64 -d

# DESIGN_PROMPT.md — prompts for v0/Figma AI/MJ/DALL-E
gh api repos/guokaigdg/animal-island-ui/contents/DESIGN_PROMPT.md --jq '.content' | base64 -d

---

2. Full API Reference (17 Components)

All named exports:

import {
  Button, Input, Switch, Modal, Card, Collapse,
  Cursor, Time, Phone, Footer, Divider, Typewriter,
  Icon, Select, Tabs, Checkbox, CodeBlock,
} from 'animal-island-ui';
import { ICON_LIST } from 'animal-island-ui';

2.1 Button

type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link';
type ButtonSize = 'small' | 'middle' | 'large';

interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
  type?: ButtonType;          // default 'default'
  size?: ButtonSize;          // default 'middle'
  danger?: boolean;           // default false
  ghost?: boolean;            // default false
  block?: boolean;            // default false
  loading?: boolean;          // default false
  disabled?: boolean;         // default false
  icon?: React.ReactNode;
  htmlType?: 'submit' | 'reset' | 'button';  // default 'button'
}

<Button type="primary" onClick={save}>Save</Button>
<Button type="primary" danger loading>Deleting...</Button>
<Button type="dashed" icon={<PlusIcon />} size="large" block>Add</Button>

2.2 Input

type InputSize = 'small' | 'middle' | 'large';

interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
  size?: InputSize;           // default 'middle'
  prefix?: React.ReactNode;
  suffix?: React.ReactNode;
  allowClear?: boolean;       // default false
  status?: 'error' | 'warning';
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onClear?: () => void;
}

<Input placeholder="Your name" allowClear />
<Input size="large" prefix={<SearchIcon />} />
<Input status="error" suffix="@gmail.com" />

2.3 Switch

type SwitchSize = 'small' | 'default';  // NOT 'middle'/'large'

interface SwitchProps {
  checked?: boolean;
  defaultChecked?: boolean;   // default false
  size?: SwitchSize;          // default 'default'
  disabled?: boolean;         // default false
  loading?: boolean;          // default false
  checkedChildren?: React.ReactNode;
  unCheckedChildren?: React.ReactNode;
  onChange?: (checked: boolean) => void;
  className?: string;
}

<Switch defaultChecked onChange={v => console.log(v)} />
<Switch size="small" checkedChildren="ON" unCheckedChildren="OFF" />

2.4 Modal

interface ModalProps {
  open: boolean;               // REQUIRED
  title?: React.ReactNode;
  width?: number | string;     // default 520
  maskClosable?: boolean;      // default true
  footer?: React.ReactNode | null;  // null = hide
  onClose?: () => void;
  onOk?: () => void;
  children?: React.ReactNode;
  className?: string;
  typeSpeed?: number;          // default 80 (ms/char)
  typewriter?: boolean;        // default true
}

<Modal open={open} title="Confirm" onClose={close} onOk={submit}>
  Proceed to delete this island?
</Modal>

2.5 Card

type CardType = 'default' | 'title' | 'dashed';
type CardColor =
  | 'default' | 'app-pink' | 'purple' | 'app-blue' | 'app-yellow'
  | 'app-orange' | 'app-teal' | 'app-green' | 'app-red'
  | 'lime-green' | 'yellow-green' | 'brown' | 'warm-peach-pink';

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  type?: CardType;    // default 'default'
  color?: CardColor;  // default 'default'
}

<Card>Default parchment card</Card>
<Card type="title">Chapter One</Card>
<Card color="app-yellow">Notification</Card>

2.6 Collapse

interface CollapseProps {
  question: React.ReactNode;   // REQUIRED
  answer: React.ReactNode;     // REQUIRED
  defaultExpanded?: boolean;   // default false
  disabled?: boolean;          // default false
  className?: string;
  style?: React.CSSProperties;
}

<Collapse question="What is Animal Island?" answer="A cozy React UI kit." />

2.7 Cursor

interface CursorProps {
  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

<Cursor><App /></Cursor>

2.8 Time

interface TimeProps { className?: string; }

<Time />  // auto-updates every second, shows weekday + date + clock

2.9 Phone

interface PhoneProps { className?: string; }

<Phone />  // fixed 527x788px, 3x3 NookPhone grid

2.10 Footer

type FooterType = 'sea' | 'tree';
interface FooterProps {
  type?: FooterType;  // default 'tree'
  className?: string;
  style?: React.CSSProperties;
}

<Footer />            {/* forest silhouette, 60px */}
<Footer type="sea" /> {/* ocean wave, 80px */}

2.11 Divider

type DividerType = 'line-brown' | 'line-teal' | 'line-white' | 'line-yellow' | 'wave-yellow';
interface DividerProps {
  type?: DividerType;  // default 'line-brown'
  className?: string;
  style?: React.CSSProperties;
}

<Divider type="wave-yellow" />

2.12 Typewriter

interface TypewriterProps {
  children?: React.ReactNode;
  speed?: number;       // ms per char, default 90
  trigger?: unknown;    // change to restart animation
  autoPlay?: boolean;   // default true
  onDone?: () => void;
}

<Typewriter speed={60} onDone={() => setStep(2)}>
  <p>Hello, <strong>traveler</strong>.</p>
</Typewriter>

2.13 Tabs

interface TabItem { key: string; label: React.ReactNode; children: React.ReactNode; }
interface TabsProps {
  items: TabItem[];            // REQUIRED
  defaultActiveKey?: string;
  activeKey?: string;          // controlled mode
  onChange?: (key: string) => void;
  className?: string;
  style?: React.CSSProperties;
  leafAnimation?: boolean;     // default true
}

2.14 Icon

type IconName =
  | 'icon-miles' | 'icon-camera' | 'icon-chat' | 'icon-critterpedia'
  | 'icon-design' | 'icon-diy' | 'icon-helicopter'
  | 'icon-map' | 'icon-shopping' | 'icon-variant';

interface IconProps {
  name: IconName;              // REQUIRED
  size?: number | string;      // default 24
  className?: string;
  style?: React.CSSProperties;
  bounce?: boolean;            // default false
}

2.15 Select

type SelectOption = { key: string; label: string };
interface SelectProps {
  options: SelectOption[];     // REQUIRED
  value: string;               // REQUIRED — controlled only
  onChange: (key: string) => void;  // REQUIRED
  placeholder?: string;        // default '请选择'
  disabled?: boolean;          // default false
}

2.16 Checkbox

type CheckboxSize = 'small' | 'middle' | 'large';
interface CheckboxOption { label: React.ReactNode; value: string | number; disabled?: boolean; }
interface CheckboxProps {
  options: CheckboxOption[];   // REQUIRED
  value?: Array<string | number>;
  defaultValue?: Array<string | number>;  // default []
  size?: CheckboxSize;         // default 'middle'
  disabled?: boolean;          // default false
  direction?: 'horizontal' | 'vertical';  // default 'horizontal'
  onChange?: (values: Array<string | number>) => void;
  className?: string;
  style?: React.CSSProperties;
}

2.17 CodeBlock

interface CodeBlockProps {
  code: string;                // REQUIRED
  style?: React.CSSProperties;
  className?: string;
}

---

3. Design Tokens (Quick Reference)

// Primary
@primary-color:        #19c8b9;
@primary-color-hover:  #3dd4c6;
@primary-color-active: #11a89b;

// Text
@text-color:           #794f27;
@text-color-body:      #725d42;
@text-color-secondary: #9f927d;

// Background
@bg-color:             #f8f8f0;
@bg-color-content:     rgb(247, 243, 223);

// Status
@success-color:        #6fba2c;
@warning-color:        #f5c31c;
@error-color:          #e05a5a;

// Game special
@focus-yellow:         #ffcc00;

// Shape: pill (border-radius: 50px), card (20px), title-card (40px 35px 45px 38px)
// 3D shadow: button 0 5px 0 #bdaea0, input 0 3px 0 #d4c9b4

For full pixel-exact CSS spec, fetch:

gh api repos/guokaigdg/animal-island-ui/contents/skill/SKILL.md --jq '.content' | base64 -d

---

4. HARD RULES

1. import 'animal-island-ui/style' only once, at app entry.
2. Do NOT invent props. Every prop must be listed above.
3. Modal.open is required; always provide onClose.
4. Collapse.question and Collapse.answer are required.
5. Button type = primary | default | dashed | text | link — NOT secondary/outline.
6. Switch size = 'small' | 'default' — NOT 'middle'/'large'.
7. Card color must be one of the 13 listed CardColor values.
8. Icon name must be one of the 10 IconName values.
9. Select is controlled-only: options, value, onChange all required.
10. CodeBlock only highlights JSX/TS — no language prop.
11. Never import from deep paths (animal-island-ui/lib/...).
12. Never use style={{ borderRadius: 0 }} — breaks design language.
13. Never override 3D bottom shadow on Button/Input/Switch.
14. Design tokens are NOT CSS custom properties — hard-code from above.

---

5. Recipes

Form row

<Card>
  <label>Email</label>
  <Input size="large" type="email" allowClear />
  <Switch checkedChildren="Subscribe" unCheckedChildren="Off" />
  <Button type="primary" htmlType="submit" block>Submit</Button>
</Card>

Confirm dialog

<Modal open={open} title="Delete save file?" onClose={close} onOk={remove}>
  This cannot be undone.
</Modal>

FAQ page

<Cursor>
  <h1>FAQ</h1>
  <Divider type="wave-yellow" />
  {faqs.map(f => <Collapse key={f.id} question={f.q} answer={f.a} />)}
  <Footer type="sea" />
</Cursor>

Minimal boilerplate

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'animal-island-ui/style';
import { Cursor, Button, Card, Input, Footer } from 'animal-island-ui';

function App() {
  return (
    <Cursor>
      <main style={{ padding: 32, maxWidth: 720, margin: '0 auto' }}>
        <Card type="title">Animal Island</Card>
        <Card>
          <Input placeholder="What's on your mind?" allowClear />
          <Button type="primary" block style={{ marginTop: 16 }}>Post</Button>
        </Card>
      </main>
      <Footer type="sea" />
    </Cursor>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

---

6. When to Fetch Full Source

Use the inline reference above for API shape and prop values.

Fetch from GitHub when you need:

• Pixel-exact CSS (shadows, animations, keyframes) → fetch skill/SKILL.md
• Component internals (hooks, state logic) → fetch src/components/<Name>/<Name>.tsx
• Component styles → fetch src/components/<Name>/<name>.module.less
• Design tokens → fetch src/styles/variables.less
• Full API with all edge cases → fetch AI_USAGE.md
• Prompts for other AI tools → fetch DESIGN_PROMPT.md

---

7. Cross-Platform Installation

Claude Code

Skill is at .claude/commands/skills/animal-island-ui/SKILL.md — auto-discovered.

GitHub Copilot

Create .github/skills/animal-island-ui.md with same content, or symlink:

# Windows (PowerShell as admin)
New-Item -ItemType SymbolicLink -Path ".github/skills/animal-island-ui.md" -Target ".claude/commands/skills/animal-island-ui/SKILL.md"

Codex

# Copy to Codex skills directory
cp .claude/commands/skills/animal-island-ui/SKILL.md ~/.codex/skills/animal-island-ui.md