# Style React Interfaces Faster

React teams often repeat styling decisions across components and layouts. This skill provides reusable Tailwind, CSS Modules, CSS-in-JS, theming, animation, and layout patterns.

## Install

```bash
npx skillstore add cjharmath/web-styling
```

## Metadata

- Status: approved
- Slug: cjharmath-web-styling
- Skillstore revision: r1
- Version status: missing
- Tree hash: e43921babf4fd2002e93257b05b1a647fb5f87c301f6295b42841dc6a75bbd17
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/web-styling
- Ref: dd4a3ef9f20ddf38830950b4bb713df96b431fd6
- 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: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-web-styling
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-web-styling/manifest

## Capabilities

- Shows Tailwind CSS patterns for buttons, cards, responsive grids, dark mode, and utility classes.
- Demonstrates class composition with clsx, tailwind-merge, and component variant helpers.
- Provides CSS Modules and styled-components examples for scoped React component styling.
- Defines theming approaches with design tokens, CSS variables, and dark mode values.
- Covers animation patterns using Tailwind utilities and Framer Motion components.
- Lists common styling issues and a practical React styling file structure.

## Use Cases

- Build reusable React components: Create buttons, cards, modals, and layout primitives with consistent variants and responsive classes.
- Document a design system: Standardize spacing, color tokens, dark mode values, and component styling conventions.
- Ship polished product screens: Apply proven styling patterns quickly without creating a custom styling architecture from scratch.

## Prompt Templates

### Create a Tailwind component

```
Create styling guidance for a React component named [component]. Use Tailwind CSS, responsive spacing, hover states, and dark mode support.
```

### Refactor duplicated classes

```
Review these React styling requirements and propose a reusable variant pattern using clsx, tailwind-merge, or cva. Explain when each option fits.
```

### Plan theme tokens

```
Design a React theming approach for [product]. Include color tokens, spacing tokens, CSS variables, dark mode behavior, and file organization.
```

### Audit styling architecture

```
Audit this React styling approach for maintainability. Identify duplicated patterns, token gaps, responsive issues, animation concerns, and migration steps.
```

## Limitations

- Focused on React web applications, not native mobile apps or backend services.
- Examples assume common styling libraries are already installed in the project.
- Does not generate visual assets, brand systems, or final design files.
- Does not replace accessibility, performance, or browser compatibility testing.

## Best Practices

- Use mobile-first responsive rules and keep layout constraints explicit.
- Centralize design tokens, variant definitions, and dark mode values.
- Use class merge helpers when components accept external class overrides.

## Anti Patterns

- Duplicating long variant class strings across multiple components.
- Mixing arbitrary colors and spacing without shared design tokens.
- Adding animations without state rules, motion limits, or fallback behavior.

## Security Audit

- Audited at: 2026-07-06T06:00:27.267\+00:00
- Summary: All static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.

## Stats

- Views: 270
- Downloads: 9
- Favorites: 0
- Popularity score: 0