component-check

Detect raw HTML in React components and suggest shadcn/ui replacements.

Updated May 25, 2025

Search Tags:#ui #frontend #react #validation #code-review #shadcn #component-library

Ready to run

npx skills add https://github.com/marcusta/golf-serie --skill component-check

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-check
Source: https://github.com/marcusta/golf-serie/tree/main/.claude/skills/component-check
Command: npx skills add https://github.com/marcusta/golf-serie --skill component-check

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Validates frontend code to ensure it uses shadcn/ui components instead of raw HTML, promoting consistent UI patterns and accessibility.

Core Features & Use Cases

Detects raw HTML elements like <button>, <input>, and <div> that should be replaced with shadcn/ui counterparts.
Verifies correct shadcn/ui imports and resolves missing or incorrect component usages.
Generates a violation report with recommended fixes and safety-preserving changes.

Quick Start

Identify files to check and replace raw HTML with shadcn/ui components.

Frequently Asked Questions about component-check

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

FAQPage Schema

How do I enforce shadcn/ui usage in React components during code review?▼

To enforce shadcn/ui usage in React components, you validate frontend code by identifying and replacing raw HTML elements like <button> and <input> with shadcn/ui counterparts. This workflow reports violations and suggests precise fixes while preserving behavior.

What is the best way to replace raw HTML elements with shadcn/ui counterparts in a pull request?▼

The best way to replace raw HTML with shadcn/ui counterparts in a pull request is by running an automated lint check that verifies element imports, detects non-compliant HTML tags, and generates a violation report with recommended safety-preserving changes.

Why does my React component validation report missing shadcn/ui imports?▼

Your React component validation reports missing shadcn/ui imports because the validation process actively verifies correct component imports and resolves missing or incorrect usages. It flags raw HTML elements that lack the required shadcn/ui library imports.

Can I use this component validation workflow for automated lint checks across my frontend codebase?▼

Yes, you can use this component validation workflow for automated lint checks across your frontend codebase. It applies to code review processes and pull requests by detecting raw HTML elements and generating violation reports with recommended fixes.

How do I identify raw HTML usage in React components that should be replaced?▼

To identify raw HTML usage in React components, you run a validation check that detects elements like <button>, <input>, and <div> that should be replaced with shadcn/ui components. It verifies element imports and reports these violations.