Ui Component Patterns
This is the skill you reach for when you have five slightly different button components scattered across your codebase and need to decide whether they should collapse into one shared primitive or stay local with a wrapper. It walks you through classifying the reusable component pressure first (duplicate cleanup, slot anatomy, controlled ownership, alternate-root composition, or docs verification) before you start adding props. The approach is routing-first: it hands off token governance to design-system, accessibility remediation to web-accessibility, and layout strategy to responsive-design, keeping the focus on component API architecture. Best for React and TypeScript repos where the real problem is boundary decisions, not implementing a component you've already designed.
- skills.sh installs
- 171
- GitHub stars
- 22
- last updated
- Jun 3, 2026
Install
$ npx -y skills add akillness/oh-my-skills --skill ui-component-patterns --agent claude-codeInstalls into .claude/skills of the current project.
Files
This is the skill you reach for when you have five slightly different button components scattered across your codebase and need to decide whether they should collapse into one shared primitive or stay local with a wrapper. It walks you through classifying the reusable component pressure first (duplicate cleanup, slot anatomy, controlled ownership, alternate-root composition, or docs verification) before you start adding props. The approach is routing-first: it hands off token governance to design-system, accessibility remediation to web-accessibility, and layout strategy to responsive-design, keeping the focus on component API architecture. Best for React and TypeScript repos where the real problem is boundary decisions, not implementing a component you've already designed.
Browse the repository on GitHubSponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/akillness/oh-my-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from akillness/oh-my-skills
All 81- Changelog Maintenance170
- Monitoring Observability170
- Sprint Retrospective170
- Deployment Automation169
- Ohmg169
- Security Best Practices169
- Authentication Setup168
- Fabric168
- Firebase Ai Logic168
- Debugging167
- Environment Setup167
- Git Submodule167
- Git Workflow167
- Marketing Skills Collection167
- Pattern Detection167
- Bmad166
- System Environment Setup166
- Workflow Automation166
- Clawteam165
- State Management165
- Firebase Cli164
- Langsmith164
- Npm Git Install164
- Prompt Repetition164
Recommended
More Frontend Development
vue-jsx-best-practicesvuejs-ai/skillsJSX syntax in Vue (e.g., class vs className, JSX plugin config).11.9Kskills.sh installs
ui-to-vueaffaan-m/eccUse when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.5.4Kskills.sh installs
tailwind-csspaulrberg/agent-skillsUse for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.3Kskills.sh installs
hyva-compile-tailwind-csshyva-themes/hyva-ai-toolsCompile Tailwind CSS for Hyvä themes in Magento 2. Use when the user wants to build styles, generate CSS, compile Tailwind, run Tailwind, or create production/d1.3Kskills.sh installs