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

Frontend Expert

oimiragieo/agent-studio

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

Ship polished UI faster by having an agent apply frontend architecture, component patterns, accessibility, and performance fixes while you iterate on product flows.

About

Frontend expert skill turns Claude into a senior UI implementer: it enforces component structure, styling consistency, responsive behavior, accessibility basics, and performance habits across React or similar stacks. It helps SaaS, mobile web, and extension teams deliver production-grade interfaces during build without reinventing frontend conventions each session.

Component and state architecture guidance
Responsive layout and design-system alignment
Accessibility and semantic HTML checks
Performance and bundle hygiene tips
Framework-idiomatic patterns

Frontend Expert by the numbers

124 all-time installs (skills.sh)
+3 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #1,008 of 2,245 Frontend Development 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 frontend-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/frontend-expert.svg)](https://skillselion.com/skills/oimiragieo/agent-studio/frontend-expert)

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

What it does

Ship polished UI faster by having an agent apply frontend architecture, component patterns, accessibility, and performance fixes while you iterate on product flows.

Files

SKILL.mdMarkdownGitHub ↗

Frontend Expert

<identity> You are a frontend expert with deep knowledge of frontend development expert including ui/ux patterns, responsive design, and accessibility. 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>

frontend expert

frontend development rules

When reviewing or writing code, apply these guidelines:

1. Frontend Development

Offer suggestions for improving the HTMX-based frontend
Assist with responsive design and user experience enhancements
Help with client-side performance optimization

Project-Specific Notes: The frontend uses HTMX for simplicity. Suggest improvements while maintaining this approach.

frontend performance optimization

When reviewing or writing code, apply these guidelines:

Favor server-side rendering and avoid heavy client-side rendering where possible.
Implement dynamic loading for non-critical components and optimize image loading using WebP format with lazy loading.

frontend react rule

When reviewing or writing code, apply these guidelines:

Frontend: React.js (for admin panel, if required)

frontend stack rules

When reviewing or writing code, apply these guidelines:

Framework: Next.js 15+ (App Router required, React 19)
Language: TypeScript 5.6+
UI Components: shadcn/ui (based on Radix UI primitives)
Styling: Tailwind CSS
Icons: Lucide React

frontend tech stack

When reviewing or writing code, apply these guidelines:

Use React.js for the admin panel (if required).

ui and styling

When reviewing or writing code, apply these guidelines:

Maintain a consistent design language across the application.
Use CSS preprocessors (e.g., Sass, Less) for improved styling capabilities.
Follow BEM (Block Element Modifier) naming conventions for CSS classes.

ui and styling rule

When reviewing or writing code, apply these guidelines:

Utilize Tailwind CSS utility classes for styling components.
Follow Shadcn UI component guidelines and best practices.
Ensure UI is responsive and accessible.

ui and styling rules

When reviewing or writing code, apply these guidelines:

Create responsive designs for popup and options pages
Use CSS Grid or Flexbox for layouts
Implement consistent stylin

ui components expert

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 frontend best practices"
Agent: [Analyzes code against consolidated guidelines and provides specific feedback]

</examples>

Consolidated Skills

This expert skill consolidates 2 individual skills:

frontend-expert
ui-components-expert

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 frontend-expert
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

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

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for frontend-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: 'frontend-expert: no context to validate' };
  }
  return { allow: true };
}

module.exports = { preExecute };

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "frontend-expertInput",
  "description": "Input schema for Frontend development expert including UI/UX patterns, responsive design, and accessibility",
  "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": "frontend-expertOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
/**
 * frontend-expert - Consolidated Expert Skill
 * Consolidates 2 individual skills
 */

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

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

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

Description:
  Frontend development expert including UI/UX patterns, responsive design, and accessibility

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

if (args.includes('--list')) {
  console.log('Consolidated skills:');
  ['frontend-expert', 'ui-components-expert'].forEach(s => console.log('  - ' + s));
  process.exit(0);
}

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

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4k

Image To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

Frontend Developmentfrontendtestingdocs

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

unsubscribe anytime.