skills.rest
RickOBrian
RickOBrianCOMMUNITY
Explore all skills by this author →
GitHub

ds-ui-review

Reviews UI components against B2C design standards and applies token-based improvement variants.

Updated Jun 17, 2026
Search Tags:#design system#design tokens#cross-platform#ui review#design quality#component scoring#b2c ui
One-click install
npx skills add https://github.com/RickOBrian/aid --skill ds-ui-review-rickobrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-ui-review
Source: https://github.com/RickOBrian/aid/tree/main/skills/ds-ui-review
Command: npx skills add https://github.com/RickOBrian/aid --skill ds-ui-review-rickobrian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design and engineering teams lack a consistent, evidence-based way to evaluate whether a component or screen meets current B2C UI quality standards, and improvements often drift into hardcoded values or uncontrolled scope. This Skill scores UI code on five defined axes and applies only pre-approved, token-compliant variants. ## Core Features & Use Cases - Read-only scoring (/review): Scores a component on visual hierarchy, motion intent, density balance, brand coherence, and trend relevance, citing specific lines, values, or tokens as evidence, then proposes 2-3 named improvement variants. - Controlled implementation (/apply): Applies exactly one named variant from a prior review using existing semantic tokens only, across Web, iOS, and Android files, and commits with a standardized message. - Preview generation: Creates a side-by-side HTML mockup file (docs/preview-variants.html) so reviewers can visually compare variants before applying. - Use Case: A designer suspects a product card feels off-brand. They run /review CardProduct, receive a 5-axis score with evidence and three variants, open the generated preview page, then run /apply tonal-surface to implement the chosen variant with existing tokens. ## Quick Start Ask the assistant to run /review on a component file such as src/components/CardProduct.tsx to get a scored evaluation with improvement variants.

Frequently Asked Questions about ds-ui-review

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

FAQPage Schema
How do I review a UI component against design system standards?▼

Run /review followed by the component name or file path, such as /review src/components/CardProduct.tsx. The skill reads the component, scores it on five axes with cited evidence, and proposes 2-3 named improvement variants without modifying any files.

How do I apply a UI improvement variant after a review?▼

Run /apply with the exact variant name from the preceding /review output, for example /apply weight-shift. The skill implements only that variant using existing semantic tokens across relevant platform files and commits with a standardized message.

Does the UI review skill modify files during scoring?▼

No. The /review mode is strictly read-only for existing files and never proposes new tokens. Its only permitted file creation is docs/preview-variants.html, a side-by-side visual mockup of the proposed variants.

What happens if a UI variant requires a design token that does not exist?▼

The variant is flagged as blocked with the message that the named token does not exist. Running /apply on a blocked variant stops with the same blocked message instead of inventing a token or hardcoding values.

Can the UI review skill work on iOS and Android components?▼

Yes. In /apply mode it reads platform rules and applies changes across Web, iOS, and Android files when platform-specific implementations exist. If a platform file is missing, it skips that platform and states why explicitly.

What happens when the shared reference files are missing?▼

The skill prints an explicit warning naming the missing file and continues using built-in rules. In /apply mode, if the platforms reference is missing, it applies Web-only changes and explains the limitation.

Related Skills

Explore More Design & Creative Skills→
dominionismdominionism
1

design-system

Implements frontend design systems with tokens, typography, color, motion, and component architecture.

Community
Intermediate
Prathmesh2000Prathmesh2000
1

storybook-writer

Generate CSF3 Storybook stories with interaction tests, a11y checks, and Chromatic setup.

Community
Advanced
froide-kkfroide-kk
1

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

Official
Intermediate
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced