# Build Consistent Token-Based UI Components

Hard-coded styles and raw platform elements create inconsistent interfaces. This skill applies reusable design tokens, core components, and established layout patterns.

## Install

```bash
npx skillstore add sickn33/core-components
```

## Metadata

- Status: approved
- Slug: sickn33-core-components
- Skillstore revision: r2
- Version status: missing
- Tree hash: 74574661924be0c274a56a2b5edd845ca562d9e3fcbab2917477e9f5befc09f2
- Author: sickn33
- GitHub username: sickn33
- License: MIT
- Repository: https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/core-components
- Ref: f9e2c34b4f19c7f3e6b0a1e93227b5f77cc12526
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/sickn33-core-components
- Manifest: https://skillstore.pages.dev/api/skills/sickn33-core-components/manifest

## Capabilities

- Replaces hard-coded spacing, colors, and typography with semantic design tokens.
- Applies Box, stack, Text, Button, Input, Card, Avatar, and Icon components.
- Structures screens, forms, and list items with reusable layout patterns.
- Uses documented variants, loading states, disabled states, and validation props.
- Defines token-constrained TypeScript props for custom components.

## Use Cases

- Standardize Product Screens: Convert inconsistent screen layouts into shared components with approved spacing, color, and typography tokens.
- Review Design System Adoption: Identify raw platform elements, inline styles, and hard-coded values that bypass the component library.
- Define Reusable Component APIs: Create typed component props that accept approved tokens and controlled visual variants.

## Prompt Templates

### Replace Hard-Coded Styles

```
Refactor this UI to use core components and design tokens: {{ui_snippet}}. Preserve its current layout and behavior.
```

### Build a Form Layout

```
Create a form for {{fields}} using stack layouts, token spacing, validated inputs, and a loading submit button.
```

### Audit a Screen

```
Review {{screen_code}} for raw components, inline styles, hard-coded values, and inconsistent variants. Recommend specific core-component replacements.
```

### Design a Component Contract

```
Define a typed {{component_name}} API using approved tokens, controlled variants, accessibility states, and composable children. Explain each design decision.
```

## Limitations

- The skill provides patterns, not an installable component package.
- Token names and component APIs must be verified against the target project.
- Examples do not cover accessibility, performance, testing, or responsive behavior in depth.
- The guidance assumes a React or React Native style component model.

## Best Practices

- Confirm available tokens and component props before applying the examples.
- Preserve loading, disabled, validation, and interaction behavior during refactoring.
- Test accessibility, responsiveness, and visual consistency in the target application.

## Anti Patterns

- Do not replace project-specific APIs with assumed component names.
- Do not hard-code spacing, color, or typography values when approved tokens exist.
- Do not use raw platform components when the core library provides an equivalent.

## Security Audit

- Audited at: 2026-07-23T21:44:05.507\+00:00
- Summary: All 49 static findings are false positives caused by Markdown code fences and inline code formatting in SKILL.md. The file contains documentation and TSX examples, with no shell commands, Ruby execution, prompt injection, or other malicious intent.

## Stats

- Views: 97
- Downloads: 16
- Favorites: 0
- Popularity score: 0