# Improve Tailwind CSS Consistency

Frontend teams need consistent CSS without ad hoc overrides. This skill guides Claude, Codex, and Claude Code toward Tailwind utilities and design tokens.

## Install

```bash
npx skillstore add devanb/frontend-css
```

## Metadata

- Status: approved
- Slug: devanb-frontend-css
- Skillstore revision: r1
- Version status: missing
- Tree hash: be26029134567495376e637b3fb4f2e154bf70f33f9fa65f252c87dacab1a007
- Author: DevanB
- GitHub username: DevanB
- License: MIT
- Repository: https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-css
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- 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, filesystem
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/devanb-frontend-css
- Manifest: https://skillstore.pages.dev/api/skills/devanb-frontend-css/manifest

## Capabilities

- Guides CSS and Tailwind utility work in React components.
- Encourages use of design system colors, spacing, and typography.
- Helps decide between Tailwind utilities and custom CSS.
- Supports Tailwind theme extension work with the \`@theme\` directive.
- Emphasizes CSS bundle optimization through purging and tree-shaking.

## Use Cases

- Standardize Component Styling: Apply Tailwind utility classes consistently while editing React components.
- Protect Design System Tokens: Keep colors, spacing, and typography aligned with an existing design system.
- Review CSS Changes: Check new styling work for unnecessary custom CSS and production CSS concerns.

## Prompt Templates

### Review a Component

```
Use the frontend-css skill to review this component's styling for Tailwind consistency, token usage, and unnecessary custom CSS.
```

### Refactor Custom CSS

```
Use the frontend-css skill to replace avoidable custom CSS with Tailwind utilities while preserving the current visual behavior.
```

### Extend Theme Tokens

```
Use the frontend-css skill to assess whether these theme extensions belong in the design system and how they should be named.
```

### Audit Styling Architecture

```
Use the frontend-css skill to audit this styling approach for utility-first consistency, responsive patterns, bundle size, and long-term maintainability.
```

## Limitations

- Does not include the full referenced frontend CSS standards inside the skill.
- Does not run CSS linters, formatters, or build tools by itself.
- Does not define project-specific token values or component APIs.
- Relies on project context to apply styling guidance correctly.

## Best Practices

- Prefer design tokens and existing Tailwind utilities before adding CSS.
- Keep custom CSS small, named clearly, and tied to reusable patterns.
- Use Tailwind breakpoints consistently for responsive behavior.

## Anti Patterns

- Adding one-off CSS for styles already covered by utilities.
- Overriding framework styles globally without a documented reason.
- Introducing new colors, spacing, or typography outside the design system.

## Security Audit

- Audited at: 2026-07-09T12:48:24.08\+00:00
- Summary: The inline \`@theme\` reference is a false positive because it is markdown documentation, not shell execution. The parent-directory link is confirmed because it directs the agent outside the skill package boundary. No prompt injection or data-exfiltration intent was found in SKILL.md.

## Stats

- Views: 180
- Downloads: 11
- Favorites: 1
- Popularity score: 0