Skip to content

The dsui skill

How to add the skill that makes AI tools such as Claude Code use dsui by its rules.

What the skill is

The dsui skill is a set of instructions that tells an AI coding tool (Claude Code and others) how to build screens with dsui: the order of work and the rules. With the skill, the AI follows the same steps every time: find an item, read it, install it, compose it by the rules, and check the result. It does not replace the component source; you still get that through Installation.

The skill covers:

  • how to find items (llms.txt, the MCP search_items tool) and how to install them
  • tokens only, checking light and dark, themes
  • the rules for copy tone (Korean haeyo style), the splash screen, floating components, input fields and shadow colour
  • one sound per action (playUiSound), motion tokens (motionTokens), reduced motion, IME composition
  • a checklist before you finish

Files

FileWhat it holds
SKILL.mdWhen to use it, the order of work, a summary of the rules
references/install.mdInstalling, where files go, the shared base, MCP tools
references/tokens.mdColour, radius, shadow and type tokens, themes and dark mode
references/experience.mdCopy tone, splash, floating components, input fields, shadow colour
references/sound-and-motion.mdThe 11 sound roles, motion tokens, reduced motion, IME
references/components.mdPicking items, composing them, common mistakes
references/checklist.mdA checklist before you finish

Every file is available as Markdown: https://dsui.vercel.app/skill/SKILL.md and https://dsui.vercel.app/skill/references/<name>.md.

Add it to your project

Download the files into .claude/skills/dsui/ in your project. To use it in every project on your computer, use ~/.claude/skills/dsui/ instead.

Source codebash
base=https://dsui.vercel.app/skill
dir=.claude/skills/dsui
mkdir -p $dir/references
curl -fsSL $base/SKILL.md -o $dir/SKILL.md
for f in install tokens experience sound-and-motion components checklist; do
  curl -fsSL $base/references/$f.md -o $dir/references/$f.md
done

Open a new conversation and the AI will find the dsui skill. It loads on its own when you ask it to build or change a screen with dsui, and you can call it with /. If you have a copy of the repository, you can also put its skills/dsui/ folder into .claude/skills/.

Use it with the MCP server

The skill tells the AI how to use dsui, and the MCP server tells it what exists. Together, the AI finds items with search_items, reads their source with get_item, and composes them by the skill's rules. The MCP server's get_skill tool also returns the skill, so an AI can fetch it when it needs it without you downloading the files. Without MCP the skill still works by reading llms.txt and the item Markdown addresses.

Keeping it current

When the rules change, the skill changes. Run the commands above again to overwrite the files with the latest. The Changelog shows which versions changed the skill. The skill text is written in Korean.