animal-island-ui README

The project's README from github.com/guokaigdg/animal-island-ui. As one markdown file: README.md.

Animal-Island-UI


animal-island-ui

A React UI component library with a cute style

Stars License: CC BY-NC 4.0 Version
Coverage Tests Components Accessibility

guokaigdg%2Fanimal-island-ui | Trendshift Featured｜HelloGitHub

English | 简体中文

Introduction

This project is a lightweight UI component library built with React + TypeScript. It features an original, cozy island-style design language, created for personal front-end technical practice and component development learning.All visual elements, layouts, icons, and animations are independently designed and implemented from scratch.

🚀 Use AI to Generate animal-island-ui Pages (No Coding Needed)

Non-developer and don't want to write code yourself? Use the one-click prompt — no npm, no build step.

4 steps:

  1. Copy the prompt block from docs/one-click-prompt.md.
  2. Paste into any AI tool that can fetch URLs (Cursor / Claude / ChatGPT / Gemini / v0 / Bolt) and send.
  3. The AI asks what page you want — reply in one phrase (e.g. "personal blog", "product list", "FAQ").
  4. Save the index.html it returns and double-click to preview.

Using an AI coding agent (Claude Code / Codex / Cursor)? Install the animal-island-ui-style skill instead:

skills add guokaigdg/animal-island-ui

Installation

npm install animal-island-ui

Quick Start

⚠️ Important: Please make sure to import the styles with import 'animal-island-ui/style', otherwise the components will have no styles or fonts!

import { Button, Card } from 'animal-island-ui';
import 'animal-island-ui/style';

function App() {
    return (
        <div>
            <Button type="primary">Start Adventure</Button>
            <Card color="app-blue">Welcome to the island!</Card>
        </div>
    );
}

Documentation

Routed by audience and scenario (English primary; Chinese mirrors under docs/zh-CN/):

Document Purpose
docs/design-system/ 🎨 Canonical design definition (single source of truth) — tokens, design rules, pixel-exact per-component specs, CSS variable template.
skills/animal-island-ui-style/ 🤖 Installable Agent skill (skills add guokaigdg/animal-island-ui) — React project usage + standalone-HTML generation, with per-component props references.
docs/one-click-prompt.md 🚀 One-click prompt for non-developers — paste one bootstrap prompt, the AI fetches the specs itself and returns a ready index.html.
docs/design-prompts.md Prompts for design/image tools (v0 / Figma AI / Midjourney / DALL-E), linking to the canonical spec files.
docs/development/ Development guide for this repository — structure, component development, coding standards, testing, build contract.
docs/adr/ Architecture decision records.
AGENTS.md Entry point for coding agents working in this repository.
CONTRIBUTING.md Contributing guide.

Local Development

# Clone the repository
git clone https://github.com/guokaigdg/animal-island-ui.git
cd animal-island-ui

# Install dependencies
npm install

# Start Demo development server
npm run dev

# Build component library
npm run build

# Build Demo site
npm run build:demo

Notes

Contact

For any questions or copyright-related communications, please contact via Issue or email.

Keep the Island Running

If this project has been helpful to you, consider buying the developer's cat a can of tuna — meowsters are the real fuel that keeps the island running.

Sponsor this Island

License

Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) — see the LICENSE file for the full text.

animal-island-ui (guokaigdg/animal-island-ui)

Searching Database…

5K ·GitHub
Animal-island-ui
Что это?Animal-Island-UI — лёгкая библиотека UI-компонентов для React с оригинальным дизайнерским языком в стиле 'острова' — кастомные иконки, компоновки и анимации, созданные для личной фронтенд-практики.
Это полноценный фреймворк дизайн-системы или просто библиотека компонентов?Это библиотека компонентов на React + TypeScript, которую импортируют в существующие проекты, а не самостоятельное приложение или фреймворк; в комплекте отдельная папка документации дизайн-системы с токенами и спецификациями по каждому компоненту.
Как добавить её в свой React-проект?Установите из npm и обязательно импортируйте таблицу стилей, например import 'animal-island-ui/style', иначе компоненты отрисуются без стилей и шрифтов.
Что нужно иметь перед использованием?Нужен проект на React + TypeScript с Node.js 18 или новее; библиотека также подтягивает пакет naive-icons для своего набора иконок.
Можно ли использовать её в коммерческом продукте?Нет. Коммерческое использование, перепродажа или извлечение прибыли прямо запрещены — лицензия допускает только личное обучение, исследования и некоммерческую демонстрацию.
Для кого эта библиотека?Для фронтенд-разработчиков-любителей и тех, кто сосредоточен на учёбе и хочет милый готовый набор компонентов для личных проектов, портфолио или учёбы, — а не для команд, строящих коммерческие продукты.
Можно ли сгенерировать страницу, не написав ни строчки кода?Да — вставьте загрузочный промпт из docs/one-click-prompt.md в ИИ-инструмент вроде Cursor, Claude, ChatGPT, Gemini, v0 или Bolt, скажите, какую страницу хотите, и получите готовый index.html, который можно открыть двойным кликом для предпросмотра.
Интегрируется ли она с кодинг-агентами вроде Claude Code или Codex?Да, есть устанавливаемый agent skill ('skills add guokaigdg/animal-island-ui'), который даёт агентам вроде Claude Code, Codex и Cursor прямой доступ к пропсам компонентов и спецификациям дизайна.
Почему коммерческое использование запрещено?Автор делал это как личный учебный проект с полностью оригинальными нарисованными вручную иконками и анимациями и выбрал CC BY-NC 4.0 специально, чтобы удержать проект вне коммерческого/корпоративного использования.
What are similar projects?gpui-kit, vuetify, ChunUI, MaterialDesign, blueprint, fluentui, bolt-slides, hairline
Which topics is it in?vitest, ui-design, icons, design-system, vite, component-library, ci, cursor, ui-components, skills, testing, agent-skills
Creator
guokaigdg
Size
13.3 MB
Stars
5K
Updated
CommitOct 16Releasev2.2.1Oct 11
Age
6mo
Commits · 90 Days