Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →

Ui Components Expert

oimiragieo/agent-studio

65 installs
36 repo stars
Updated July 14, 2026
oimiragieo/agent-studio

Helps with ai & agent building tasks.

About

ui-components-expert is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.

ui-components-expert
AI & Agent Building
AI-coding skill

Ui Components Expert by the numbers

65 all-time installs (skills.sh)
Ranked #6,042 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Aug 4, 2026 (Skillselion catalog sync)

npx skills add https://github.com/oimiragieo/agent-studio --skill ui-components-expert

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/oimiragieo/agent-studio/ui-components-expert.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/ui-components-expert)

Installs	65
repo stars	★ 36
Last updated	July 14, 2026
Repository	oimiragieo/agent-studio ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

Ui Components Expert

<identity> You are a ui components expert with deep knowledge of ui component library expert including chakra, material ui, and mantine. You help developers write better code by applying established guidelines and best practices. </identity>

<capabilities>

Review code for best practice compliance
Suggest improvements based on domain patterns
Explain why certain approaches are preferred
Help refactor code to meet standards
Provide architecture guidance

</capabilities>

<instructions>

chakra ui accessibility features

When reviewing or writing code, apply these guidelines:

Utilize Chakra UI's built-in accessibility features

chakra ui best practices

When reviewing or writing code, apply these guidelines:

Use ChakraProvider at the root of your app
Utilize Chakra UI components for consistent design
Implement custom theme for brand-specific styling
Use responsive styles with the Chakra UI breakpoint system
Leverage Chakra UI hooks for enhanced functionality

chakra ui component composition

When reviewing or writing code, apply these guidelines:

Implement proper component composition using Chakra UI

chakra ui dark mode implementation

When reviewing or writing code, apply these guidelines:

Implement dark mode using Chakra UI's color mode

chakra ui performance optimization

When reviewing or writing code, apply these guidelines:

Follow Chakra UI best practices for performance optimization

chakra ui responsive design

When reviewing or writing code, apply these guidelines:

Use Chakra UI's layout components for responsive design

chakra ui semantic html rendering

When reviewing or writing code, apply these guidelines:

Use the 'as' prop for semantic HTML rendering

chakra ui theme directory rules

When reviewing or writing code, apply these guidelines:

Create theme/index.js to export theme
Place theme foundations in theme/foundations/
Place component-specific theme overrides in theme/components/

material ui configuration

When reviewing or writing code, apply these guidelines:

The project uses Material UI.

</instructions>

<examples> Example usage:

User: "Review this code for ui-components best practices"
Agent: [Analyzes code against consolidated guidelines and provides specific feedback]

</examples>

Consolidated Skills

This expert skill consolidates 9 individual skills:

chakra-ui-accessibility-features
chakra-ui-best-practices
chakra-ui-component-composition
chakra-ui-dark-mode-implementation
chakra-ui-performance-optimization
chakra-ui-responsive-design
chakra-ui-semantic-html-rendering
chakra-ui-theme-directory-rules
material-ui-configuration

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it's not in memory, it didn't happen.

'use strict';
/**
 * Post-execute hook for ui-components-expert
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

function postExecute(_context) {
  // Record execution metrics
  return { ok: true, skill: 'ui-components-expert' };
}

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for ui-components-expert
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Validates inputs before skill execution.
 */

function preExecute(context) {
  // Validate skill invocation context
  if (!context || typeof context !== 'object') {
    return { allow: true, message: 'ui-components-expert: no context to validate' };
  }
  return { allow: true };
}

module.exports = { preExecute };

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "ui-components-expertInput",
  "description": "Input schema for UI component library expert including Chakra, Material UI, and Mantine",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "target": {
      "type": "string",
      "description": "Target file or path for the skill to operate on"
    },
    "options": {
      "type": "object",
      "description": "Additional options for skill execution",
      "additionalProperties": true
    }
  }
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "ui-components-expertOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
/**
 * ui-components-expert - Consolidated Expert Skill
 * Consolidates 9 individual skills
 */

const fs = require('fs');
const path = require('path');

const args = process.argv.slice(2);
if (args.includes('--help')) {
  console.log(`
ui-components-expert - Expert Skill

Usage:
  node main.cjs --list     List consolidated skills
  node main.cjs --help     Show this help

Description:
  UI component library expert including Chakra, Material UI, and Mantine

Consolidated from: 9 skills
`);
  process.exit(0);
}

if (args.includes('--list')) {
  console.log('Consolidated skills:');
  [
    'chakra-ui-accessibility-features',
    'chakra-ui-best-practices',
    'chakra-ui-component-composition',
    'chakra-ui-dark-mode-implementation',
    'chakra-ui-performance-optimization',
    'chakra-ui-responsive-design',
    'chakra-ui-semantic-html-rendering',
    'chakra-ui-theme-directory-rules',
    'material-ui-configuration',
  ].forEach(s => console.log('  - ' + s));
  process.exit(0);
}

console.log('ui-components-expert skill loaded. Use with Claude for expert guidance.');

Related skills

Setup Matt Pocock SkillsScaffold the per-repo configuration that Matt Pocock’s engineering agent skills rely on so they understand the issue tracker, triage labels, and domain documentation la495k196k

Lark AppsConnect Claude, Cursor or custom agents directly to Lark (Feishu) for messaging, document automation, approval workflows and enterprise data access.402k

CavemanSlash token usage by roughly 75% while keeping every technical detail intact when working with Claude Code, Cursor or similar agents.391k94.7k

Lark Skill MakerQuickly turn any Lark/Feishu OpenAPI call or multi-step workflow into a reusable agent skill with its own SKILL.md.386k16k

Running Claude Code Via Litellm CopilotRun Claude Code at a fraction of the cost by routing requests through LiteLLM to the GitHub Copilot Chat API.270k72

Codex PetGenerate a complete Codex Pet spritesheet and metadata from one reference image without needing an OpenAI key or Codex Pro.246k10

AI & Agent Buildingagents

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.