Agent skill

Component Dev

Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

MPL-2.0Auto-check passedFrontend & Design

Install Component Dev

skills CLI

$ npx skills add mobazha/mobazha-unified --skill component-dev -a claude-code

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

GitHub CLI

$ gh skill install mobazha/mobazha-unified component-dev --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/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/component-dev .claude/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .claude/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev

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 mobazha/mobazha-unified --skill component-dev -a codex

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

GitHub CLI

$ gh skill install mobazha/mobazha-unified component-dev --agent codex

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

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/component-dev .agents/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .agents/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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 mobazha/mobazha-unified --skill component-dev -a cursor

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

GitHub CLI

$ gh skill install mobazha/mobazha-unified component-dev --agent cursor

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

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/component-dev .cursor/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .cursor/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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/mobazha/mobazha-unified.git --path .cursor/skills/component-dev

--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 mobazha/mobazha-unified --skill component-dev -a gemini-cli

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

GitHub CLI

$ gh skill install mobazha/mobazha-unified component-dev --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/mobazha/mobazha-unified.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/component-dev .gemini/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .gemini/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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 mobazha/mobazha-unified component-dev

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 mobazha/mobazha-unified --skill component-dev -a github-copilot

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

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/component-dev .github/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .github/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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 mobazha/mobazha-unified --skill component-dev -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 mobazha/mobazha-unified component-dev --agent opencode

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

Manual copy

$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/component-dev .opencode/skills/component-dev && 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 "component-dev" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/component-dev into .opencode/skills/component-dev/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-dev", 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-dev
GitHub stars: 165
Token cost: ~638 tokens
SKILL.md length: 108 words
Files: 2
Skills in repo: 29
Repo updated: Oct 3, 2026
First seen: Oct 7, 2026
Licence: MPL-2.0

At a glance

Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

Building new components
SKILL.md covers UI Component Libraries, Directory Structure, Component Template and Quick Checklist, plus 1 more section
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Reviewing component code

What it does

Component Dev is an agent skill from mobazha/mobazha-unified. Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing. Use when building new components, reviewing component code, or when the user asks about component patterns, spacing, accessibility, "组件开发", "创建组件", "间距规范", "无障碍".

Its SKILL.md is about 640 tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `reference.md`).

It sits in Frontend & Design, covering Accessibility and Design systems. It works with shadcn/ui. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.

When your agent uses it

Building new components
Reviewing component code
The user asks about component patterns

Example prompts

“/component-dev”

What it can do on your machine

Read from SKILL.md and the folder at commit 156c699. 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

Component Dev loads about 638 tokens when it runs. Until then it costs about 79 tokens; SKILL.md has 108 words of instructions outside code blocks.

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

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 mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 108 words, ~638 tokens.

Download SKILL.mdSave it as .claude/skills/component-dev/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: component-dev
description: Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing. Use when building new components, reviewing component code, or when the user asks about component patterns, spacing, accessibility, "组件开发", "创建组件", "间距规范", "无障碍".

Component Development Guide

UI Component Libraries

Scenario	Use
Form controls (Input, Select, Switch)	`@/components/ui` (shadcn/ui)
Dialogs (Dialog, AlertDialog)	`@/components/ui` (shadcn/ui)
Toast notifications	`@/components/ui` (shadcn/ui)
Business cards (ProductCard, OrderCard)	`@mobazha/ui`
Layout (Container, Grid)	`@mobazha/ui`

Directory Structure

packages/ui/components/
├── ProductCard/
│   ├── index.tsx           # Export
│   ├── ProductCard.tsx     # Main component
│   ├── ProductCard.test.tsx # Tests
│   └── types.ts            # Types (optional)

Component Template

tsx

'use client';

import { memo } from 'react';
import { cn } from '@/lib/utils';

export interface ProductCardProps {
  /** Product data */
  product: Product;
  /** Click callback */
  onClick?: (product: Product) => void;
  /** Custom styles */
  className?: string;
}

export const ProductCard = memo(function ProductCard({
  product,
  onClick,
  className,
}: ProductCardProps) {
  return (
    <article
      className={cn('rounded-lg border p-4', className)}
      onClick={() => onClick?.(product)}
      data-testid="product-card"
    >
      {/* content */}
    </article>
  );
});

Quick Checklist

Use memo for components receiving object props
Use useCallback for callbacks passed to children
Use cn() for merging class names
Use design tokens, not hardcoded colors
All clickable elements have aria-label
Images have alt attribute
Form inputs have aria-label or <label>
Add data-testid for E2E testing

For detailed spacing tables, testing examples, and interaction patterns, see reference.md.

Files

SKILL.md and 1 other file in .cursor/skills/component-dev of mobazha/mobazha-unified.

SKILL.md
reference.md

Open the folder on GitHubat commit 156c699

Compare with similar skills

Component Dev 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.

Component Dev compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Component Dev this skillmobazha/mobazha-unified	165	—	~638	Automated safety check: Pass	MPL-2.0	4 days ago
Extract DesignManavarya09/design-extract	4.2k	—	~786	Automated safety check: Notes	MIT	8 days ago
Better Designmarvkr/better-design	252	—	~1.2k	Automated safety check: Pass	MIT	15 days ago
UI Design Systemtry-works/role-model	117	—	~5k	Automated safety check: Pass	MIT	yesterday
Components BuildAsymmetric-al/core	382	—	~2.1k	Automated safety check: Pass	MIT	today
Audit AI Frontendjxnl/personal-monorepo-template	562	—	~1.3k	Automated safety check: Pass	None	3 mo ago

Similar skills

Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
4.2k GitHub stars~786 tokensUpdated 8 days ago
Frontend & DesignAuto-check: notes
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
252 GitHub stars~1.2k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
117 GitHub stars~5k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Components Build
Asymmetric-al/core
Build modern, composable, and accessible React UI components following the components.build specification.
382 GitHub stars~2.1k tokensUpdated today
Frontend & DesignAuto-check passed
Audit AI Frontend
jxnl/personal-monorepo-template
Audit AI-generated, AI-shaped, or AI-looking frontend code, UI screenshots, and design diffs.
562 GitHub stars~1.3k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed
Light Frontend Design
Light0305/Light-skills
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…
640 GitHub stars~3.1k tokensUpdated 3 mo ago
Frontend & DesignAuto-check passed

Questions about Component Dev

What does Component Dev do?

Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing. Component Dev is an agent skill from mobazha/mobazha-unified. Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.

When should I use Component Dev?

Component Dev fits situations like: building new components; reviewing component code; the user asks about component patterns.

How do I install Component Dev in Claude Code?

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

How do I install Component Dev in Codex?

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

Can I use Component Dev 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 mobazha/mobazha-unified --skill component-dev -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-dev, .gemini/skills/component-dev, .github/skills/component-dev and .opencode/skills/component-dev in your project.

What does Component Dev need to run?

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

Does Component Dev 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 Dev 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 Component Dev use?

Component Dev is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Component Dev use?

About 638 tokens (SKILL.md is roughly 2.6k 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 Dev?

Skills that share tags, products or a category with Component Dev: Extract Design (Manavarya09/design-extract, 4.2k stars), Better Design (marvkr/better-design, 252 stars), UI Design System (try-works/role-model, 117 stars) and Components Build (Asymmetric-al/core, 382 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Component Dev?

mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.

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

Component Dev

Install Component Dev

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Component Development Guide

UI Component Libraries

Directory Structure

Component Template

Quick Checklist

相关功能文档

Files

Compare with similar skills

Similar skills

Extract Design

Better Design

UI Design System

Components Build

Audit AI Frontend

Light Frontend Design

More from mobazha/mobazha-unified

A11y Guide

API Reference

Code Review

Code Simplifier

Commit Helper

Debug Troubleshoot

Questions about Component Dev

Install Component Dev

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Component Development Guide

UI Component Libraries

Directory Structure

Component Template

Quick Checklist

相关功能文档

Files

Compare with similar skills

Similar skills

More from mobazha/mobazha-unified

Related

Questions about Component Dev