validation_skill

This skill helps reviewers enforce gluestack-ui v4 validation standards by identifying anti-patterns, ensuring semantic tokens, proper sub-components, and

0

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill gluestack/agent-skills --skill validation

SKILL.md16.3 KB

Overview

This skill provides a validation checklist and anti-patterns for reviewing gluestack-ui v4 implementations. It helps enforce component consistency, semantic theming, cross-platform compatibility, and correct use of compound components. Use it to catch critical errors and improve maintainability during code review.

How this skill works

The skill inspects component imports, props usage, className patterns, color tokens, spacing, and compound sub-components against gluestack-ui v4 rules. It flags critical violations—like raw React Native primitives, non-semantic color tokens, missing ButtonText or InputSlot wrappers—and recommends exact replacements. It also verifies performance and cross-platform best practices such as FlatList, Reanimated, and use of Gluestack wrappers.

When to use it

Code reviews for gluestack-ui v4 components
Pre-merge checks to enforce design system rules
Refactoring PRs that replace React Native primitives
Onboarding audits to align new contributors with style guide
Automated linting checkpoints for UI changes

Best practices

Always import and use Gluestack components from '@/components/ui/' rather than react-native primitives
Use component props (space, size, variant, bold) instead of className when available
Use ONLY semantic color tokens (text-foreground, bg-primary, border-border, text-muted-foreground) and alpha values for opacity
Wrap compound elements correctly (InputIcon inside InputSlot, ButtonText for button content, FormControl sub-components)
Follow spacing scale; avoid arbitrary spacing and inline styles; merge className in custom components
Optimize performance: type props, memoize expensive components, use FlatList for long lists, and prefer Reanimated worklets for animations

Example use cases

Review a pull request that mixes react-native and Gluestack components and convert to Gluestack wrappers
Scan codebase for prohibited color tokens like 'red-500' or 'neutral-100' and replace with semantic tokens
Validate form components to ensure InputIcon is wrapped in InputSlot and FormControl sub-components are present
Audit a screen using ScrollView for long lists and replace with FlatList for virtualization
Enforce that Button children use <ButtonText> so buttons render and style correctly

FAQ

Critical failures include using react-native primitives instead of Gluestack wrappers, non-semantic color tokens, missing ButtonText, and InputIcon not wrapped in InputSlot. These must be fixed immediately.

Are numeric or arbitrary color values allowed?

No. Numeric scales (red-500) and arbitrary values (#[hex]) are prohibited. Only semantic tokens and alpha suffixes (e.g., text-foreground/70) are allowed.

When should I replace a ScrollView with FlatList?

Replace when rendering many items or any list that needs virtualization to avoid performance issues. Use FlatList with keyExtractor and renderItem for long lists.