skills.rest
diane-defores
diane-deforesOFFICIAL
Explore all skills by this author →
GitHub

sf-audit-components

Evaluate component design for duplication, poor abstractions, and headless primitives.

Updated Aug 23, 2026
Search Tags:#architecture#react#vue#component#svelte#flutter#headless
One-click install
npx skills add https://github.com/diane-defores/shipflow --skill sf-audit-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-audit-components
Source: https://github.com/diane-defores/shipflow/tree/main/skills/sf-audit-components
Command: npx skills add https://github.com/diane-defores/shipflow --skill sf-audit-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps developers evaluate the internal architecture of component systems, identifying duplication, poorly designed abstractions, and opportunities for modernization.

Core Features & Use Cases

  • Component Inventory: Categorizes components into atomic design levels such as atoms, molecules, and organisms.
  • Duplication Detection: Finds similar or duplicate components to promote reuse.
  • God Component Flagging: Identifies components with excessive props or responsibilities.
  • Unused Component Identification: Detects components imported nowhere in the codebase.
  • Abstraction Quality Review: Flags premature or incorrect abstractions, following AHA rules.
  • Variant System Assessment: Recommends adopting class-variance-authority or similar for styling variants.
  • Headless Primitive Evaluation: Flags custom components that should switch to headless libraries.
  • Composition vs Configuration: Detects components that should leverage composition over extensive props.
  • API Hygiene: Reviews naming conventions, prop types, defaults, controlled/uncontrolled patterns, and ref forwarding.

Quick Start

Analyze your project’s component architecture to improve reusability, consistency, and accessibility without modifying code directly.

Frequently Asked Questions about sf-audit-components

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

FAQPage Schema
How do I audit component architecture for duplication and poor abstractions?▼

To audit component architecture, this skill evaluates component design to identify duplication, poorly designed abstractions, and God components, ensuring best practices for API hygiene and scalable UI maintainability across multiple frontend frameworks and Flutter.

What is the best way to detect unused components in a React or Vue project?▼

The best way to detect unused components is using this skill's unused component identification feature, which scans your codebase to find components imported nowhere, helping you eliminate dead code and promote reuse across React, Vue, Svelte, and Flutter.

Can I evaluate headless primitives and variant systems for my Svelte or Flutter components?▼

Yes, you can evaluate headless primitives and variant systems for Svelte and Flutter components. The skill flags custom components that should switch to headless libraries and recommends adopting class-variance-authority or similar systems for styling variants.

How do I review component API hygiene and composition over configuration?▼

To review component API hygiene, the skill checks naming conventions, prop types, defaults, controlled/uncontrolled patterns, and ref forwarding. It also detects components that should leverage composition over extensive props to improve maintainability.

Does this component analysis tool modify my codebase directly during the assessment?▼

No, this component analysis tool does not modify your codebase directly during the assessment. It evaluates your component architecture and outputs recommendations for inventory, abstraction quality, and headless primitive adoption without altering code.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
drgaciwdrgaciw

tailwind-design-system

Build Tailwind CSS design systems with design tokens and component variants.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
NoobyGainsNoobyGains
78

quality-enforcement

Enforce code quality standards across pre-commit, pre-merge, and CI pipeline stages.

Community
Advanced