# Css

> WHEN authoring CSS/styles/layout for web UI; outputs production-ready, accessible, maintainable CSS.

- **Type:** Skill
- **Install:** `agentstack add skill-mintuz-skills-css`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mintuz](https://agentstack.voostack.com/s/mintuz)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mintuz](https://github.com/mintuz)
- **Source:** https://github.com/mintuz/skills/tree/main/plugins/web/skills/css

## Install

```sh
agentstack add skill-mintuz-skills-css
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# CSS Best Practices

Production-grade CSS development with architectural principles, proper specificity management, and maintainable patterns.

## Core Principles

1. **Single Responsibility** - Each class handles one concern only
2. **Open/Closed** - Open for extension, closed for modification
3. **Immutable CSS** - Utilities and objects never change after creation
4. **Behavior over implementation** - Focus on what the code does, not how
5. **Accessibility first** - Semantic HTML before ARIA, proper contrast and sizing

## Quick Reference

| Topic                                                    | Guide                                                                   |
| -------------------------------------------------------- | ----------------------------------------------------------------------- |
| Specificity hierarchy, safe techniques, !important rules | [specificity.md](references/specificity.md)                             |
| rem vs px, margins, layout algorithms                    | [units-margins.md](references/units-margins.md)                         |
| @extend vs mixins, refactoring workflow, code smells     | [preprocessors-refactoring.md](references/preprocessors-refactoring.md) |
| Architectural principles and common code patterns        | [patterns.md](references/patterns.md)                                   |

## When to Use Each Guide

### Specificity

Use [specificity.md](references/specificity.md) when you need:

- Specificity hierarchy and calculations
- Safe techniques (self-chaining, attribute selectors)
- Anti-patterns (IDs, deep nesting, qualified selectors)
- !important rules (proactive vs reactive)
- Shorthand property gotchas
- Alternatives to reactive !important

### Units and Margins

Use [units-margins.md](references/units-margins.md) when you need:

- rem vs px decision framework
- Line-height best practices
- Margin encapsulation rules
- Single-direction margin patterns
- Margin collapse behavior
- Layout algorithm awareness (Flow, Flexbox, Grid)
- Common gotchas (z-index, magic space under images)

### Preprocessors and Refactoring

Use [preprocessors-refactoring.md](references/preprocessors-refactoring.md) when you need:

- @extend vs mixins guidance
- Avoiding & concatenation
- CSS @import performance issues
- Finding dead CSS with beacons
- The Three I's refactoring workflow
- Code smell reference tables

### Patterns

Use [patterns.md](references/patterns.md) when you need:

- Single Responsibility Principle examples
- Open/Closed Principle patterns
- Immutable CSS patterns and prefixes
- Component without margin examples
- Utility class patterns
- Self-chaining for specificity
- CSS custom properties for design scales

## Quick Reference: Decision Trees

### Should I use !important?

```
Is this a utility class that must be immutable?
├── Yes → Use !important (proactive)
└── No → Is there a specificity conflict?
    ├── Yes → Try: self-chain, attribute selector, or restructure cascade
    └── No → Don't use !important
```

### Should I use px or rem?

```
Should this scale with user font preferences?
├── Yes → Use rem
│   Examples: font-size, vertical text margins, media queries
└── No → Use px
    Examples: borders, box-shadows, horizontal padding
```

### Should I use shorthand?

```
Am I intentionally setting ALL related properties?
├── Yes → Shorthand is fine
└── No → Use longhand to avoid unintentional resets
```

### Should component have margin?

```
Is this a layout component (grid, stack, container)?
├── Yes → Margin/gap is appropriate
└── No → Move spacing to parent or use utility classes
```

### @extend or mixin?

```
Are these selectors thematically related (same component)?
├── Yes → @extend might be acceptable
└── No → Use mixin (safer, doesn't disrupt source order)
```

### How should I refactor this CSS?

```
Step 1: Identify - Is this frequently used and problematic?
├── Yes → Continue
└── No → Skip refactoring, focus elsewhere

Step 2: Isolate - Build new version separately
├── Use CodePen/jsFiddle
└── Don't build on top of existing CSS

Step 3: Implement - Reintegrate carefully
├── Component fixes → component's partial
└── Legacy conflicts → shame.css
```

## Summary Checklist

Before committing CSS, verify:

- [ ] Classes follow single responsibility (structure separate from cosmetics)
- [ ] No ID selectors for styling
- [ ] No reactive !important (only proactive for utilities)
- [ ] Components have no margin (spacing controlled by parent)
- [ ] Using rem for font-size and scalable spacing
- [ ] Using px for borders, shadows, and fixed visual elements
- [ ] Longhand properties when only setting one value
- [ ] No deep nesting (4+ levels)
- [ ] No qualified selectors (e.g., `ul.nav`)
- [ ] Layout algorithm appropriate for context (Flow, Flex, Grid)
- [ ] Accessible color contrast ratios
- [ ] Semantic HTML before adding ARIA

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mintuz](https://github.com/mintuz)
- **Source:** [mintuz/skills](https://github.com/mintuz/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mintuz-skills-css
- Seller: https://agentstack.voostack.com/s/mintuz
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.