# Frontend Css

> CSS 框架 - Tailwind CSS/CSS Modules/Styled Components

- **Type:** Skill
- **Install:** `agentstack add skill-awesome-ai-dev-awesome-ai-dev-css`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [awesome-ai-dev](https://agentstack.voostack.com/s/awesome-ai-dev)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [awesome-ai-dev](https://github.com/awesome-ai-dev)
- **Source:** https://github.com/awesome-ai-dev/awesome-ai-dev/tree/main/.cursor/skills/frontend/css

## Install

```sh
agentstack add skill-awesome-ai-dev-awesome-ai-dev-css
```

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

## About

# CSS 框架

## Tailwind CSS

### 基础用法

```html

  文本

```

### 响应式

```html

  Item 1
  Item 2
  Item 3

```

### 深色模式

```html

  内容

```

## CSS Modules

```css
/* Button.module.css */
.button {
  background: blue;
  color: white;
}
```

```typescript
import styles from './Button.module.css';

按钮
```

## Styled Components

```typescript
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  
  &:hover {
    background: darkblue;
  }
`;
```

## 选择指南

- **Tailwind**: 快速开发、原子化
- **CSS Modules**: 原生、模块化
- **Styled Components**: CSS-in-JS、动态样式

## 参考

- `.cursor/rules/react.mdc`

## Source & license

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

- **Author:** [awesome-ai-dev](https://github.com/awesome-ai-dev)
- **Source:** [awesome-ai-dev/awesome-ai-dev](https://github.com/awesome-ai-dev/awesome-ai-dev)
- **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-awesome-ai-dev-awesome-ai-dev-css
- Seller: https://agentstack.voostack.com/s/awesome-ai-dev
- 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%.