skills.rest
robinade
robinadeCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Components

Review frontend components against standardized naming, structure, and accessibility guidelines.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/robinade/persona-theater --skill frontend-components-robinade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Components
Source: https://github.com/robinade/persona-theater/tree/main/.claude/skills/frontend-components
Command: npx skills add https://github.com/robinade/persona-theater --skill frontend-components-robinade

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often produce inconsistent components across projects, leading to maintenance challenges and UX drift. This skill provides a clear approach to align on structure, naming, accessibility, and reuse for frontend components.

Core Features & Use Cases

  • Enforces standardized component structure and naming conventions across React, Vue, and vanilla JS projects.
  • Promotes accessibility considerations and documentation for reusable UI blocks.
  • Use Case: You are adding a new Button component; this skill guides you to follow design-system-aligned patterns, tests, and documentation.

Quick Start

Tell Claude Code to review a new React Button component for naming, structure, and accessibility against the project frontend guidelines.

Frequently Asked Questions about Frontend Components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I standardize frontend component structure and naming conventions across React and Vue projects?▼

You can standardize frontend component structure by applying centralized design-system guidelines during code reviews and feature implementations. This approach enforces consistent naming conventions and structural alignment across React, Vue, and vanilla JS frameworks to prevent UI drift.

What is the best way to ensure new UI components align with accessibility standards?▼

Ensuring accessibility standards for new UI components requires integrating standardized design patterns into your development workflow. By referencing centralized frontend guidelines during component creation, you consistently address accessibility considerations and documentation for reusable blocks.

How do I review a React Button component for design system compliance?▼

To review a React Button component for compliance, evaluate its naming, structure, and accessibility against your project's centralized frontend guidelines. This process ensures the new component follows established design-system-aligned patterns and required documentation.

Can I use standardized frontend component guidelines for vanilla JS projects?▼

Yes, you can apply standardized frontend component guidelines to vanilla JS projects. The approach supports framework variants including React, Vue, and vanilla JS, enforcing consistent structure, naming, and reuse across different technology stacks.

Why does UI drift happen and how do centralized frontend guidelines prevent it?▼

UI drift happens when frontend teams produce inconsistent components across separate projects without a shared standard. Centralized frontend guidelines prevent this by providing a standardized approach to component design, structure, and naming during code reviews.

Related Skills

afonsolelisafonsolelis

acessibilidade

Ensure HTML pages conform to WCAG 2.1 AA accessibility guidelines.

Community
Intermediate
peopledearpeopledear
1

Frontend Components

Enforce frontend component coding standards in Claude Code workflows.

Official
Basic
fisto-techfisto-tech

design-system

Manage design tokens and generate presentations from configuration files.

Official
Advanced
raybargasraybargas

Global Commenting

Enforces uniform, standard-based commenting across entire codebases and integrates with linters and static analysis tools for automated checks.

Community
Basic