Senior Frontend
borghei/Claude-Skills
Frontend development for React, Next.js, TypeScript, and Tailwind CSS.
Extract reusable UI components from inline patterns. An agent skill from bitovi/ai-enablement-prompts.
Install Extract UI Component
$ npx skills add bitovi/ai-enablement-prompts --skill extract-ui-component -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install bitovi/ai-enablement-prompts extract-ui-component --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/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .claude/skills/extract-ui-component && 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 "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .claude/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-componentType 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 bitovi/ai-enablement-prompts --skill extract-ui-component -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install bitovi/ai-enablement-prompts extract-ui-component --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .agents/skills/extract-ui-component && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .agents/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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 bitovi/ai-enablement-prompts --skill extract-ui-component -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install bitovi/ai-enablement-prompts extract-ui-component --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .cursor/skills/extract-ui-component && 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 "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .cursor/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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/bitovi/ai-enablement-prompts.git --path plugins/react/skills/extract-ui-component--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 bitovi/ai-enablement-prompts --skill extract-ui-component -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install bitovi/ai-enablement-prompts extract-ui-component --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .gemini/skills/extract-ui-component && 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 "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .gemini/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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 bitovi/ai-enablement-prompts extract-ui-componentInstalls 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 bitovi/ai-enablement-prompts --skill extract-ui-component -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .github/skills/extract-ui-component && 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 "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .github/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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 bitovi/ai-enablement-prompts --skill extract-ui-component -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install bitovi/ai-enablement-prompts extract-ui-component --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/react/skills/extract-ui-component .opencode/skills/extract-ui-component && 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 "extract-ui-component" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/react/skills/extract-ui-component into .opencode/skills/extract-ui-component/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "extract-ui-component", 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
extract-ui-component- GitHub stars
- 121
- Token cost
- ~1.1k tokens
- SKILL.md length
- 456 words
- Files
- 1
- Skills in repo
- 40
- Repo updated
- First seen
- Licence
- MIT
At a glance
Extract reusable UI components from inline patterns. An agent skill from bitovi/ai-enablement-prompts.
- Works in 8 steps: Analyze Existing Patterns → Design Component API → Implement Component → …
- Tasks that involve Refactoring
- SKILL.md covers When to Use, When NOT to Use, 8-Step Workflow and Accessibility Guidelines, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Extract UI Component is an agent skill from bitovi/ai-enablement-prompts. Extract reusable UI components from inline patterns. Covers component design, TypeScript props, Storybook stories, refactoring strategy, and best practices for creating shared UI primitives.
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Refactoring and Accessibility. It works with Storybook and TypeScript. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.
When your agent uses it
- Tasks that involve Refactoring
- Tasks that involve Accessibility
Example prompts
- “/extract-ui-component”
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit df229b1. 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 and bash).
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
Extract UI Component loads about 1.1k tokens when it runs. Until then it costs about 53 tokens; SKILL.md has 456 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 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 bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 456 words, ~1,123 tokens.
Download SKILL.mdSave it as
.claude/skills/extract-ui-component/SKILL.md (or your agent's skills folder).- name
- extract-ui-component
- description
- Extract reusable UI components from inline patterns. Covers component design, TypeScript props, Storybook stories, refactoring strategy, and best practices for creating shared UI primitives.
Skill: Extract UI Component
Extract reusable React components from inline patterns found in the codebase.
When to Use
- You notice a UI pattern repeated 2+ times across different files
- A component has grown too large and contains extractable sub-patterns
- The component registry flags patterns as "needs extraction"
When NOT to Use
- The pattern appears only once (no reuse benefit)
- The pattern is already a component in the registry
8-Step Workflow
Step 1: Analyze Existing Patterns
Before extracting, find 3-5 instances of the pattern in the codebase:
# Search for common button patterns
grep -rn "className.*btn\|className.*button" src/ --include="*.tsx" | head -20
# Search for card-like patterns
grep -rn "className.*card\|className.*rounded.*shadow" src/ --include="*.tsx" | head -20Document:
- Where each instance appears (file + line)
- What props/data each instance uses
- How instances differ from each other
- Common vs unique aspects
Step 2: Design Component API
Based on the pattern analysis:
- Identify the common interface — what props are shared across all instances
- Identify variants — how instances differ (use discriminated unions for structural differences)
- Design the props interface — extend
React.HTMLAttributes<HTMLElement>for native HTML compatibility
// Good: discriminated union for structural variants
type CardProps =
| { variant: 'simple'; title: string; children: React.ReactNode }
| { variant: 'media'; title: string; image: string; children: React.ReactNode };
// Good: extend HTML attributes
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'ghost';
size?: 'sm' | 'md' | 'lg';
}Step 3: Implement Component
Create the component following the modlet pattern:
ComponentName/
├── index.ts
├── ComponentName.tsx
├── ComponentName.test.tsx
├── ComponentName.stories.tsx
└── types.ts (optional)Guidelines:
- Accept
classNameprop and merge with internal classes usingcn() - Use semantic HTML elements
- Include ARIA attributes for accessibility
- Handle all variants from Step 2
Step 4: Create Storybook Story
Create stories covering:
- Default state
- Each variant
- Each size (if applicable)
- Interactive states (hover, focus, disabled)
- With and without optional props
Step 5: Test in Storybook
Visually verify each story renders correctly.
Step 6: Create Barrel Export
Add re-exports in index.ts:
export { ComponentName } from './ComponentName';
export type { ComponentNameProps } from './types';Step 7: Refactor Existing Code
Replace inline patterns one file at a time:
- Import the new component
- Replace the inline pattern with the component
- Verify the page still works
- Commit after each file
Do not refactor all files at once. One file at a time reduces risk.
Show full SKILL.md (169 more words)Show less
Step 8: Update Component Registry
Add the new component to the component registry (if one exists).
Accessibility Guidelines
- Use semantic HTML (
<button>,<nav>,<main>, not<div>with click handlers) - Include
aria-labelfor icon-only buttons - Ensure keyboard navigation works (tab, enter, escape)
- Use
roleattributes when semantic HTML isn't sufficient - Test with screen reader in Storybook
Common Pitfalls
- ❌ Don't create overly generic components (a component that does everything does nothing well)
- ❌ Don't forget to handle the
classNameprop for customization - ❌ Don't skip the pattern analysis step — extracting from one instance leads to a bad API
- ❌ Don't refactor all files at once
- ✅ Do analyze 3-5 instances before designing the API
- ✅ Do use discriminated unions for structural variants
- ✅ Do extend HTML attributes for native compatibility
- ✅ Do refactor one file at a time
Checklist
- 3-5 existing pattern instances analyzed
- Props interface designed with variants
- Component implemented with modlet structure
- Storybook stories cover all variants
- Stories visually verified
- Barrel export created
- Existing code refactored (one file at a time)
- Component registry updated
- Accessibility verified
© bitovi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in plugins/react/skills/extract-ui-component of bitovi/ai-enablement-prompts.
Open the folder on GitHubat commit df229b1
Compare with similar skills
Extract UI Component 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 |
|---|---|---|---|---|---|---|
| Extract UI Component this skillbitovi/ai-enablement-prompts | 121 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Senior Frontendborghei/Claude-Skills | 881 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Worklog Designregisx001/Worklog | 261 | — | ~3.3k | Automated safety check: Pass | MIT | |
| Dx Insight Usage Guardrailcultureamp/kaizen-design-system | 176 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Refactoring UI Designchaxus/ran | 271 | — | ~1.9k | Automated safety check: Pass | MIT | |
| React Code Reviewgiuseppe-trisciuoglio/developer-kit | 355 | — | ~2.6k | Automated safety check: Notes | MIT |
Similar skills
Worklog Design
regisx001/Worklog
Design and UI skill for the Worklog desktop project manager.
Dx Insight Usage Guardrail
cultureamp/kaizen-design-system
Checks deps update in widely consumed repos will cause problems or not, and ranks dependency updates by downstream impact for prioritisation.
Refactoring UI Design
chaxus/ran
A skill your agent uses when designing, reviewing, or improving web UI visual quality, especially when a developer-built interface feels cluttered, flat, generic, poorly spaced, weakly hierarchical…
React Code Review
giuseppe-trisciuoglio/developer-kit
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility…
Jarvis Setup
ethanplusai/jarvis
A skill your agent uses when helping someone install, configure, or debug a fresh clone of JARVIS (this repo) — especially "the mic doesn't work", "JARVIS says his language systems are down", any…
More from bitovi/ai-enablement-prompts
All 40 skills in this repoComponent Registry
bitovi/ai-enablement-prompts
Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.
Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
Create Plugin
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.
Create React Modlet
bitovi/ai-enablement-prompts
Create React components, hooks, or utilities following the modlet pattern.
Create Skill
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.
Create Skill
bitovi/ai-enablement-prompts
Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.
Related
Works with
Categories
Questions about Extract UI Component
What does Extract UI Component do?
Extract reusable UI components from inline patterns. An agent skill from bitovi/ai-enablement-prompts. Extract UI Component is an agent skill from bitovi/ai-enablement-prompts. Extract reusable UI components from inline patterns.
When should I use Extract UI Component?
Extract UI Component fits situations like: tasks that involve Refactoring; tasks that involve Accessibility.
How do I install Extract UI Component in Claude Code?
Run `npx skills add bitovi/ai-enablement-prompts --skill extract-ui-component -a claude-code`. Or copy the skill folder (plugins/react/skills/extract-ui-component in bitovi/ai-enablement-prompts) into .claude/skills/extract-ui-component in your project. Claude Code loads it when a task matches its description.
How do I install Extract UI Component in Codex?
Run `npx skills add bitovi/ai-enablement-prompts --skill extract-ui-component -a codex`. Or copy the skill folder (plugins/react/skills/extract-ui-component in bitovi/ai-enablement-prompts) into .agents/skills/extract-ui-component in your project. Codex loads it when a task matches its description.
Can I use Extract UI Component 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 bitovi/ai-enablement-prompts --skill extract-ui-component -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/extract-ui-component, .gemini/skills/extract-ui-component, .github/skills/extract-ui-component and .opencode/skills/extract-ui-component in your project.
What does Extract UI Component need to run?
SKILL.md names no scripts, command-line tools or credentials: Extract UI Component is instructions for the agent only.
Does Extract UI Component 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 Extract UI Component 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 Extract UI Component use?
Extract UI Component 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 Extract UI Component use?
About 1.1k tokens (SKILL.md is roughly 4.5k 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 Extract UI Component?
Skills that share tags, products or a category with Extract UI Component: Senior Frontend (borghei/Claude-Skills, 881 stars), Worklog Design (regisx001/Worklog, 261 stars), Dx Insight Usage Guardrail (cultureamp/kaizen-design-system, 176 stars) and Refactoring UI Design (chaxus/ran, 271 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Extract UI Component?
bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.
Source: bitovi/ai-enablement-prompts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.