# Build Consistent Frontend CSS

Frontend styling often drifts across files, components, and frameworks. This skill guides Claude, Codex, and Claude Code toward consistent CSS methods and design tokens.

## Install

```bash
npx skillstore add eis-its/frontend-css
```

## Metadata

- Status: approved
- Slug: eis-its-frontend-css
- Skillstore revision: r1
- Version status: missing
- Tree hash: 98ed89e6ba45351ca87e4727341d464959496b03d2a22134a5667405db417ce3
- Author: EIS-ITS
- GitHub username: EIS-ITS
- License: MIT
- Repository: https://github.com/EIS-ITS/vss-cli/tree/main/.claude/skills/frontend-css
- Ref: 26421118b848d9f1efc0aa169d8a7a9e7e0a877e
- 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: filesystem
- Quality score: 79
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/eis-its-frontend-css
- Manifest: https://skillstore.pages.dev/api/skills/eis-its-frontend-css/manifest

## Capabilities

- Guides CSS, SCSS, SASS, and Less file edits.
- Applies Tailwind utility classes to components and markup.
- Supports CSS Modules, styled-components, and CSS-in-JS patterns.
- Frames design token work for colors, spacing, typography, and shadows.
- Helps refactor styles toward BEM or utility-first methodology.
- Covers CSS production optimization, including unused style cleanup.

## Use Cases

- Standardize Component Styling: Apply one CSS methodology across React, Vue, or similar component files.
- Define Design Tokens: Create consistent color, spacing, typography, and shadow decisions for a UI system.
- Review CSS Framework Usage: Check Tailwind, CSS Modules, or CSS-in-JS changes for consistency and maintainability.

## Prompt Templates

### Style a New Component

```
Use the frontend-css skill to style this component with the project CSS method. Keep spacing, typography, and colors consistent.
```

### Refactor Existing Styles

```
Use the frontend-css skill to refactor these styles toward the local methodology. Preserve the visual result and explain key changes.
```

### Create Token Guidance

```
Use the frontend-css skill to propose design tokens for colors, spacing, typography, and shadows in this interface.
```

### Audit Production CSS

```
Use the frontend-css skill to review this styling layer for framework conflicts, unused styles, responsive issues, and production readiness.
```

## Limitations

- It references an external parent-directory standards file that is not bundled.
- It does not include executable tooling or automated CSS validation.
- It cannot inspect rendered UI without project files and runtime context.
- It gives methodology guidance, not a complete design system.

## Best Practices

- Provide the existing CSS methodology before asking for changes.
- Include relevant component markup with the styles being reviewed.
- Ask for responsive, accessible, and production-ready styling checks.

## Anti Patterns

- Do not mix BEM, utility-first, and CSS Modules without clear boundaries.
- Do not hardcode colors or spacing when project tokens exist.
- Do not request visual polish without giving UI context or constraints.

## Security Audit

- Audited at: 2026-07-09T14:13:42.138\+00:00
- Summary: The static path traversal finding is confirmed because the skill directs the agent to read a parent-directory file outside the packaged skill. No prompt injection, credential access, network access, or command execution intent was found in SKILL.md.

## Stats

- Views: 194
- Downloads: 12
- Favorites: 0
- Popularity score: 0