# Component Standardization

> Refactors UI components to use Ant Design + Tailwind CSS standards. Enforces specific styling patterns for Cards, Typography, and Layouts to ensure consistency. Invoke when standardizing UI or refactoring legacy styles. Use when this capability is needed.

- Skill: `tomevault-io/component-standardization` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/component-standardization`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/component-standardization/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/component-standardization

---


# Component Standardization Skill

This skill guides the process of replacing custom, "reinvented" UI components and legacy styles with standard library implementations (Ant Design + Tailwind CSS) to ensure consistency and maintainability.

## Goal
To eliminate redundant custom styles and components by leveraging a standardized design system based on Ant Design components styled with Tailwind CSS utility classes.

## Standardization Rules (The "Gold Standard")

### 1. Card Component
**Pattern**: Use Ant Design `Card` with specific Tailwind classes for borders and shadows.
- **DO**: `<Card className="rounded-lg shadow-sm border border-gray-200" bordered={false}>`
- **DON'T**: `<Card bordered={false} style={{...}}>` or custom `div` wrappers.
- **Rationale**: Ensures consistent `gray-200` borders and `shadow-sm` depth across the app.

### 2. Layout & Spacing
**Pattern**: Use Tailwind utility classes for layout and spacing.
- **DO**: `<div className="p-6 mb-6">`, `<div className="flex items-center gap-4">`
- **DON'T**: `style={{ padding: 24, marginBottom: 16 }}`, `<Space style={{...}}>`
- **Rationale**: Reduces runtime JS overhead and enforces the design system's spacing scale.

### 3. Typography
**Pattern**: Use native HTML tags with Tailwind classes.
- **DO**: `<h2 className="text-2xl font-bold text-gray-900">`, `<p className="text-gray-500">`
- **DON'T**: `<Typography.Title level={2}>`, `<Typography.Text type="secondary">` (unless strictly necessary for complex text features).
- **Rationale**: Native tags are semantically correct and Tailwind classes offer more flexible styling control without component overhead.

### 4. Icons
**Pattern**: Use `lucide-react` icons (preferred) or Ant Icons styled with Tailwind.
- **DO**: `<Bell className="w-4 h-4 text-gray-500" />`
- **DON'T**: `<BellOutlined style={{ fontSize: 16, color: '#666' }} />`
- **Rationale**: Consistent sizing and coloring via utility classes.

### 5. Theme & Colors
**Pattern**: Use Tailwind color palette.
- **DO**: `text-green-500`, `bg-blue-50`, `border-red-200`
- **DON'T**: `theme.useToken()` (e.g., `token.colorSuccess`) for static elements.
- **Rationale**: Decouples components from runtime theme engine for static styles, improving performance and readability.

### 6. Inputs & Controls
**Pattern**: Use Ant Design form controls with Tailwind width classes.
- **DO**: `<Input className="w-64" />`, `<Select className="w-32" />`
- **DON'T**: `<Input style={{ width: 200 }} />`

## Workflow

### 1. Audit & Identify
- specific file or component to refactor.
- Look for `style={{...}}` props, `token.*` usage, and legacy CSS classes.

### 2. Refactor
- **Replace Container**: Wrap content in the standard `Card` pattern.
- **Replace Layouts**: Convert `style` props to Tailwind classes (padding, margin, flex, grid).
- **Replace Text**: Convert `Typography` components to HTML tags + Tailwind.
- **Replace Colors**: Map hex codes or tokens to the nearest Tailwind color (e.g., `#1890ff` -> `blue-600`).

#### For Extended Wrappers (e.g., `AuthButton`)
- **Action**: Rewrite as a lightweight wrapper.
- **Implementation**:
  - Import the standard component.
  - Define an interface that extends the standard props (using `Omit` if necessary).
  - Map custom props (e.g., `variant="outline"`) to standard props (e.g., `type="default"`, `className="border-primary"`).
  - **Ant Design v5 Note**: Map `bodyStyle` / `headStyle` to `styles={{ body: ..., header: ... }}`.
  - Pass through all other props.
  - **Example**:
    ```typescript
    import { Button, type ButtonProps } from 'antd';
    // ... logic to map custom props to Antd props ...
    return <Button {...mappedProps} {...rest} />;
    ```

### 4. Cleanup
- **Delete**: Remove the source files of the original custom implementations.
- **Update Exports**: Clean up `index.ts` files to remove dead exports.
- **Grep Check**: Search the codebase for lingering references to deleted components (e.g., `grep -r "EnhancedCard" src/`).

### 5. Verification
- **Type Check**: Run `npx tsc --noEmit` to catch broken references immediately.
- **Build**: Run `npm run build` to ensure production build stability.
- **Visual Check**: Verify key pages (e.g., Login, Dashboard) to ensure styles remain consistent.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/heidsoft) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->