style-set-review

Review StyleSet implementations against v2.0.0+ conventions and generate improvement plans.

3|Updated Mar 12, 2025
One-click install
npx skills add https://github.com/vlossom-ui/vlossom --skill style-set-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: style-set-review
Source: https://github.com/vlossom-ui/vlossom/tree/main/.claude/skills/style-set-review
Command: npx skills add https://github.com/vlossom-ui/vlossom --skill style-set-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Style-Set code review ensures that StyleSet implementations adhere to the v2.0.0+ conventions (extends CSSProperties and $ prefix), identifies anti-patterns, and provides concrete improvement plans.

Core Features & Use Cases

  • Collects and validates StyleSet interfaces against STYLE_SET_GUIDELINES.
  • Generates actionable proposals with precise code changes for TypeScript interfaces and CSS.
  • Supports PR reviews, legacy component modernization, and new StyleSet projects to enforce consistency across the codebase.

Quick Start

Run the style-set-review tool against your component directories to generate a detailed improvement report.

Frequently Asked Questions about style-set-review

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

FAQPage Schema
How do I review StyleSet implementations for v2.0.0+ conventions?

To enforce v2.0.0+ conventions, this review process validates StyleSet interfaces to ensure they extend CSSProperties and use $ prefixes. It identifies anti-patterns and provides actionable improvement plans with precise TypeScript and CSS changes.

What is the proper way to define a StyleSet interface in TypeScript?

A proper StyleSet interface must extend CSSProperties and apply $ prefixes to its variables. This enforces strict typing and prevents naming collisions, ensuring your frontend components maintain consistent styling conventions.

Can I use automated linting to fix legacy component style sets?

Yes, you can apply this review tool against legacy component directories to generate detailed improvement reports. It provides explicit remediation plans for modernizing nested-state patterns, naming conventions, and variable exposure.

Does this code review process support CSS-in-TypeScript PR reviews?

Yes, the review process fully supports CSS-in-TypeScript PR reviews by validating StyleSet implementations against strict guidelines. It surfaces actionable improvement points for both interfaces and CSS usage during pull request checks.

What are the limitations of manual StyleSet convention enforcement?

Manual enforcement lacks the ability to automatically surface nested-state pattern violations and generate codified remediation guidance. Automated review ensures consistent application of $ prefixes and CSSProperties extensions across the entire codebase.

When do I need to run a StyleSet code review?

You need to run a StyleSet code review during PR reviews, when creating new StyleSet projects, or modernizing legacy components. This ensures your CSS-in-TypeScript implementations strictly adhere to v2.0.0+ conventions.