Agent skill

Daleui

Use the daleui React design system with semantic Panda CSS tokens and accessible components.

Install Daleui

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/daleui .claude/skills/daleui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .claude/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/DaleStudy/daleui/tree/main/skills/daleui

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/daleui .agents/skills/daleui && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .agents/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/daleui .cursor/skills/daleui && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .cursor/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/DaleStudy/daleui.git --path skills/daleui

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/daleui .gemini/skills/daleui && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .gemini/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/daleui .github/skills/daleui && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .github/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add DaleStudy/daleui --skill daleui -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install DaleStudy/daleui daleui --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/DaleStudy/daleui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/daleui .opencode/skills/daleui && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "daleui" agent skill from https://github.com/DaleStudy/daleui/tree/main/skills/daleui into .opencode/skills/daleui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "daleui", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: daleui
GitHub stars: 119
Token cost: ~675 tokens
SKILL.md length: 235 words
Files: 4
Skills in repo: 1
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Use the daleui React design system with semantic Panda CSS tokens and accessible components.

Works in 4 steps: 스타일 import 필수 — 앱 진입점에서 반드시 한 번 불러온다. → 시맨틱 토큰만 사용 — color: "#fff", padding:… → 폼 필드 접근성 — TextInput, Select,… → …
Building UI with daleui
SKILL.md covers 필수 규칙, 컴포넌트 선택 가이드 and 참고 문서
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Daleui is an agent skill from DaleStudy/daleui. Use the daleui React design system with semantic Panda CSS tokens and accessible components. Trigger when building UI with daleui, importing from "daleui", using daleui tokens, or implementing Korean-first React components with Box, Button, Card, forms, and layout primitives.

Its SKILL.md is about 680 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `components.md`, `examples.md` and `tokens.md`).

It sits in Frontend & Design, covering Design systems, React components and DataFrames. It works with React, Figma, ESLint and Prettier. The licence is MIT.

When your agent uses it

Building UI with daleui
Importing from daleui
Using daleui tokens
Implementing Korean-first React components with Box

Example prompts

“daleui”
“/daleui”

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

스타일 import 필수 — 앱 진입점에서 반드시 한 번 불러온다.
시맨틱 토큰만 사용 — color: "#fff", padding: "8px" 같은 raw 값 금지. 반드시 tokens.md의 토큰 키를 사용한다.
폼 필드 접근성 — TextInput, Select, PasswordInput, Checkbox, RadioGroup 등 모든 폼 요소에 label prop 또는 aria-label을 반드시 지정한다.
외부 링크 — Link에 external prop을 주면 target="_blank" + rel="noopener noreferrer"가 자동 적용된다.

What it can do on your machine

Read from SKILL.md and the folder at commit 1cd7656. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Daleui loads about 675 tokens when it runs. Until then it costs about 71 tokens; SKILL.md has 235 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~71
When it runs · the whole SKILL.md, loaded when a task matches: ~675

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from DaleStudy/daleui at commit 1cd7656, republished under its MIT licence (© DaleStudy). 235 words, ~675 tokens.

Download SKILL.mdSave it as .claude/skills/daleui/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

name: daleui
description: Use the daleui React design system with semantic Panda CSS tokens and accessible components. Trigger when building UI with daleui, importing from "daleui", using daleui tokens, or implementing Korean-first React components with Box, Button, Card, forms, and layout primitives.

daleui Agent Skill

한국어 우선 React 디자인 시스템 daleui를 사용해 UI를 구현하는 AI 에이전트 가이드입니다.

필수 규칙

스타일 import 필수 — 앱 진입점에서 반드시 한 번 불러온다.
tsx
```
import "daleui/styles.css";
```
시맨틱 토큰만 사용 — color: "#fff", padding: "8px" 같은 raw 값 금지. 반드시 tokens.md의 토큰 키를 사용한다.
폼 필드 접근성 — TextInput, Select, PasswordInput, Checkbox, RadioGroup 등 모든 폼 요소에 label prop 또는 aria-label을 반드시 지정한다.
외부 링크 — Link에 external prop을 주면 target="_blank" + rel="noopener noreferrer"가 자동 적용된다.

컴포넌트 선택 가이드

레이아웃

상황	추천 컴포넌트
기본 블록 컨테이너	`Box`
가로 배치 (중앙 정렬 기본)	`HStack`
세로 배치 (중앙 정렬 기본)	`VStack`
방향 전환·정렬 커스텀 필요	`Flex`
격자 레이아웃	`Grid` + `GridItem`

HStack과 VStack은 align 기본값이 center입니다. stretch 등 다른 정렬이 필요하면 Flex를 사용하세요.

폼 입력

상황	추천 컴포넌트
텍스트 입력	`TextInput`
비밀번호 입력	`PasswordInput`
드롭다운 선택 (6개 이상 옵션)	`Select`
단일 선택 (5개 이하 옵션)	`RadioGroup`
다중 선택	`CheckboxGroup`
단독 체크 (동의, 토글 등)	`Checkbox`

선택지가 5개 이하일 때 Select 대신 RadioGroup을 권장합니다.

텍스트

상황	추천 컴포넌트
페이지·섹션 제목	`Heading` (`level` prop으로 h1–h5 지정)
본문·레이블 텍스트	`Text`
입력 필드 레이블	`Label`

액션·내비게이션

상황	추천 컴포넌트
사용자 액션 유도 (클릭)	`Button`
페이지 이동·URL 연결	`Link`
카테고리·상태 표시	`Tag`

색조(tone) 사용 기준

tone	용도
`brand`	주요 액션, 브랜드 강조 (기본값)
`neutral`	일반 텍스트, 보조 요소
`danger`	오류, 삭제, 위험 경고
`success`	성공, 완료
`warning`	경고, 주의
`info`	정보 제공

참고 문서

components.md: 컴포넌트 레퍼런스
tokens.md: 토큰 이름·값·용도 표
examples.md: 조합 예시

Files

SKILL.md and 3 other files in skills/daleui of DaleStudy/daleui.

SKILL.md
components.md
examples.md
tokens.md

Open the folder on GitHubat commit 1cd7656

Compare with similar skills

Daleui next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Daleui compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Daleui this skillDaleStudy/daleui	119	—	~675	Automated safety check: Pass	MIT	2 days ago
Wonder BlocksKhan/wonder-blocks	163	—	~3.2k	Automated safety check: Pass	MIT	today
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types	111	—	~1.1k	Automated safety check: Pass	MIT	2 mo ago
Odc FrontendDouglasNeuroInformatics/OpenDataCapture	119	—	~2.3k	Automated safety check: Pass	Apache-2.0	2 days ago
Creative Tim UI Blockscreativetimofficial/ui	12k	—	~2.1k	Automated safety check: Notes	MIT	6 mo ago
Connect Component To Figmadequelabs/cauldron	129	—	~2k	Automated safety check: Pass	MPL-2.0	today

Similar skills

Wonder Blocks
Khan/wonder-blocks
Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library.
163 GitHub stars~3.2k tokensUpdated today
Frontend & DesignAuto-check passed
React Render Types Composition
HorusGoul/eslint-plugin-react-render-types
Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.
111 GitHub stars~1.1k tokensUpdated 2 mo ago
Frontend & DesignAuto-check passed
Odc Frontend
DouglasNeuroInformatics/OpenDataCapture
Write or change React UI in apps/web, apps/gateway or packages/react-core — a component (not the route file that renders it), its user-facing strings, its Storybook story, or moving it into…
119 GitHub stars~2.3k tokensUpdated 2 days ago
Frontend & DesignAuto-check passed
Creative Tim UI Blocks
creativetimofficial/ui
Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.
12k GitHub stars~2.1k tokensUpdated 6 mo ago
Frontend & DesignAuto-check: notes
Connect Component To Figma
dequelabs/cauldron
Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.
129 GitHub stars~2k tokensUpdated today
Frontend & DesignAuto-check passed
Storybook
Khan/wonder-blocks
Storybook best practices for Wonder Blocks component stories.
163 GitHub stars~4.2k tokensUpdated today
Frontend & DesignAuto-check passed

Works with

Questions about Daleui

What does Daleui do?

Use the daleui React design system with semantic Panda CSS tokens and accessible components. Daleui is an agent skill from DaleStudy/daleui. Use the daleui React design system with semantic Panda CSS tokens and accessible components.

When should I use Daleui?

Daleui fits situations like: building UI with daleui; importing from daleui; using daleui tokens; implementing Korean-first React components with Box.

How do I install Daleui in Claude Code?

Run `npx skills add DaleStudy/daleui --skill daleui -a claude-code`. Or copy the skill folder (skills/daleui in DaleStudy/daleui) into .claude/skills/daleui in your project. Claude Code loads it when a task matches its description.

How do I install Daleui in Codex?

Run `npx skills add DaleStudy/daleui --skill daleui -a codex`. Or copy the skill folder (skills/daleui in DaleStudy/daleui) into .agents/skills/daleui in your project. Codex loads it when a task matches its description.

Can I use Daleui in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add DaleStudy/daleui --skill daleui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/daleui, .gemini/skills/daleui, .github/skills/daleui and .opencode/skills/daleui in your project.

What does Daleui need to run?

SKILL.md names no scripts, command-line tools or credentials: Daleui is instructions for the agent only.

Does Daleui access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Daleui safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Daleui use?

Daleui is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Daleui use?

About 675 tokens (SKILL.md is roughly 2.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Daleui?

Skills that share tags, products or a category with Daleui: Wonder Blocks (Khan/wonder-blocks, 163 stars), React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars), Odc Frontend (DouglasNeuroInformatics/OpenDataCapture, 119 stars) and Creative Tim UI Blocks (creativetimofficial/ui, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Daleui?

DaleStudy (a GitHub organization) maintains it in DaleStudy/daleui, which has 119 GitHub stars. The repository was last updated on October 8, 2026.

Source: DaleStudy/daleui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Daleui

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

daleui Agent Skill

필수 규칙

컴포넌트 선택 가이드

레이아웃

폼 입력

텍스트

액션·내비게이션

색조(tone) 사용 기준

참고 문서

Files

Compare with similar skills

Similar skills

Wonder Blocks

React Render Types Composition

Odc Frontend

Creative Tim UI Blocks

Connect Component To Figma

Storybook

Related

Questions about Daleui