Building With Lobe UI
lobehub/lobe-ui
Build UI with the LobeHub design ecosystem — @lobehub/ui (plus its base-ui, chat, mobile, awesome, brand, mdx, i18n namespaces), @lobehub/icons, @lobehub/charts, @lobehub/fluent-emoji and…
Generate comprehensive component guideline documentation for SEED Design System.
Install Component Guidelines Docs
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docs --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills_all/component-guidelines-docs .claude/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.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/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .claude/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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 install https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docsType 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.
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docs --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills_all/component-guidelines-docs .agents/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .agents/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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.
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docs --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills_all/component-guidelines-docs .cursor/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .cursor/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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 https://github.com/Microck/ordinary-claude-skills.git --path skills_all/component-guidelines-docs--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docs --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills_all/component-guidelines-docs .gemini/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.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/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .gemini/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docsInstalls 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).
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills_all/component-guidelines-docs .github/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.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/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .github/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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.
$ npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Microck/ordinary-claude-skills component-guidelines-docs --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Microck/ordinary-claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills_all/component-guidelines-docs .opencode/skills/component-guidelines-docs && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "component-guidelines-docs" agent skill from https://github.com/Microck/ordinary-claude-skills/tree/main/skills_all/component-guidelines-docs into .opencode/skills/component-guidelines-docs/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-guidelines-docs", 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
component-guidelines-docs- GitHub stars
- 403
- Token cost
- ~2.9k tokens
- SKILL.md length
- 730 words
- Files
- 2
- Skills in repo
- 91
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Generate comprehensive component guideline documentation for SEED Design System.
- Works in 9 steps: 사용자 입력 받기 → Rootage YAML 파일 읽기 → Props 테이블 생성 → …
- Updating design guideline documentation in ./docs/content/docs/components directory
- SKILL.md covers 목적, 사용 시나리오, 작업 흐름 and 사용 예시, plus 2 more sections
- Calls bun
What it does
Component Guidelines Docs is an agent skill from Microck/ordinary-claude-skills. Generate comprehensive component guideline documentation for SEED Design System. Use when creating or updating design guideline documentation in ./docs/content/docs/components directory. This skill helps create high-quality documentation similar to action-button.mdx.
Its SKILL.md is about 2.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `metadata.json`).
It sits in Frontend & Design, covering Markdown and Design systems. The repository describes itself as: An unappealing collection of Claude Skills and resources.
When your agent uses it
- Updating design guideline documentation in ./docs/content/docs/components directory
- Tasks that involve Markdown
- Tasks that involve Design systems
Example prompts
- “/component-guidelines-docs”
Requirements
- Pre-approved tools (allowed-tools): Read, Write, Glob, Grep, Bash
Workflow steps
9 steps, taken from the step headings in SKILL.md.
- 사용자 입력 받기
- Rootage YAML 파일 읽기
- Props 테이블 생성
- 문서 구조 생성
- 이미지 경로 규칙
- 한국어 작성 가이드라인
- 컴포넌트 참조
- 참조 자료
- 체크리스트
What it can do on your machine
Read from SKILL.md and the folder at commit 1056d29. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteGlobGrepBash
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
bun
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
Component Guidelines Docs loads about 2.9k tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 730 words of instructions outside code blocks.
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: notes
The automated check noted patterns worth knowing about, such as sudo or a known installer.
- NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
allowed-tools: Read, Write, Glob, Grep, Bash
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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 730 words (~2,929 tokens).
“이 스킬은 SEED Design System의 컴포넌트 가이드라인 문서를 생성합니다. Action Button과 같은 고품질 디자인 가이드라인 문서를 작성할 수 있도록 돕습니다.”
- name
- component-guidelines-docs
- allowed-tools
- Read, Write, Glob, Grep, Bash
Files
SKILL.md and 1 other file in skills_all/component-guidelines-docs of Microck/ordinary-claude-skills.
- SKILL.md
- metadata.json
Open the folder on GitHubat commit 1056d29
Compare with similar skills
Component Guidelines Docs 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Component Guidelines Docs this skillMicrock/ordinary-claude-skills | 403 | — | ~2.9k | Automated safety check: Notes | Custom licence | |
| Building With Lobe UIlobehub/lobe-ui | 2.2k | — | ~2k | Automated safety check: Pass | MIT | |
| Using Docs Kitlobehub/lobe-ui | 2.2k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Storybook Storyradix-ng/primitives | 274 | — | ~3.7k | Automated safety check: Pass | MIT | |
| Build Resource Pagesonvoyage-ai/gtm-engineer-skills | 1.3k | — | ~3.6k | Automated safety check: Pass | MIT | |
| React Component Documentationgetsentry/sentry | 46k | — | ~3.6k | Automated safety check: Pass | Custom licence |
Similar skills
Using Docs Kit
lobehub/lobe-ui
Set up and author a documentation site with @lobehub/docs-kit (the lobedocs CLI, React Router + Vite static docs used by ui.lobehub.com).
Storybook Story
radix-ng/primitives
Write or update Storybook stories and docs MDX for a Radix NG primitive following project conventions.
Build Resource Pages
onvoyage-ai/gtm-engineer-skills
Takes existing content markdown files and builds production-final resource center pages on client websites using their existing tech stack and design system.
- Official
React Component Documentation
getsentry/sentry
Create or update component documentation in Sentry's MDX stories format.
Write Stories
Endava/BEEQ
Write Storybook stories and MDX docs for BEEQ web components.
More from Microck/ordinary-claude-skills
All 91 skills in this repoEvery Style Editor
Microck/ordinary-claude-skills
This skill should be used when reviewing or editing copy to ensure adherence to Every's style guide.
Gemini Imagegen
Microck/ordinary-claude-skills
Generate and edit images using the Gemini API (Nano Banana Pro).
Andrew Kane Gem Writer
Microck/ordinary-claude-skills
Write Ruby gems following Andrew Kane's proven patterns and philosophy.
Codex
Microck/ordinary-claude-skills
Execute Codex CLI for code analysis, refactoring, and automated code changes.
Docs Review
Microck/ordinary-claude-skills
Review documentation changes for compliance with the Metabase writing style guide.
File Todos
Microck/ordinary-claude-skills
This skill should be used when managing the file-based todo tracking system in the todos/ directory.
Related
Categories
Questions about Component Guidelines Docs
What does Component Guidelines Docs do?
Generate comprehensive component guideline documentation for SEED Design System. Component Guidelines Docs is an agent skill from Microck/ordinary-claude-skills. Generate comprehensive component guideline documentation for SEED Design System.
When should I use Component Guidelines Docs?
Component Guidelines Docs fits situations like: updating design guideline documentation in ./docs/content/docs/components directory; tasks that involve Markdown; tasks that involve Design systems.
How do I install Component Guidelines Docs in Claude Code?
Run `npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a claude-code`. Or copy the skill folder (skills_all/component-guidelines-docs in Microck/ordinary-claude-skills) into .claude/skills/component-guidelines-docs in your project. Claude Code loads it when a task matches its description.
How do I install Component Guidelines Docs in Codex?
Run `npx skills add Microck/ordinary-claude-skills --skill component-guidelines-docs -a codex`. Or copy the skill folder (skills_all/component-guidelines-docs in Microck/ordinary-claude-skills) into .agents/skills/component-guidelines-docs in your project. Codex loads it when a task matches its description.
Can I use Component Guidelines Docs 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 Microck/ordinary-claude-skills --skill component-guidelines-docs -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/component-guidelines-docs, .gemini/skills/component-guidelines-docs, .github/skills/component-guidelines-docs and .opencode/skills/component-guidelines-docs in your project.
What does Component Guidelines Docs need to run?
Going by SKILL.md and its folder, Component Guidelines Docs needs the command-line tools its instructions call (bun). Its frontmatter pre-approves these tools: Read, Write, Glob, Grep, Bash.
Does Component Guidelines Docs 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 Component Guidelines Docs safe to install?
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
What licence does Component Guidelines Docs use?
Component Guidelines Docs has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Component Guidelines Docs use?
About 2.9k tokens (SKILL.md is roughly 12k 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 Component Guidelines Docs?
Skills that share tags, products or a category with Component Guidelines Docs: Building With Lobe UI (lobehub/lobe-ui, 2.2k stars), Using Docs Kit (lobehub/lobe-ui, 2.2k stars), Storybook Story (radix-ng/primitives, 274 stars) and Build Resource Pages (onvoyage-ai/gtm-engineer-skills, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Component Guidelines Docs?
Microck (a GitHub user) maintains it in Microck/ordinary-claude-skills, which has 403 GitHub stars. The repository holds 91 skills in this directory. The repository was last updated on September 6, 2026.
Source: Microck/ordinary-claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.