# Emotion

> Emotion 스타일링 규칙. @emotion/styled, css prop 사용, 스타일 파일 분리 기준.

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

## Install

```sh
agentstack add skill-ggombee-code-forge-emotion
```

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

## About

# Emotion 스타일링 규칙

---

## 기본 규칙

- `@emotion/styled` 또는 `css` prop을 사용한다
- 전역 스타일은 `packages/shared/styles/globalStyles`에만 정의한다

---

## 스타일 컴포넌트 위치 기준

### 간단한 스타일: 컴포넌트 파일 하단

```typescript
// components/OrderCard/index.tsx
const OrderCard = () => {
  return ...;
};

export default OrderCard;

// 파일 하단에 스타일 정의
const Container = styled.div`
  padding: 16px;
`;
```

### 복잡한 스타일: `*.styled.ts` 파일로 분리

```typescript
// components/OrderCard/styled.ts
export const Container = styled.div`...`;
export const Header = styled.div`...`;
export const Footer = styled.div`...`;

// components/OrderCard/index.tsx - named import 사용
import { Container, Header, Footer } from './styled';
```

---

## 색상 토큰 사용

직접 색상값을 쓰지 않고 semanticColor 토큰을 사용한다:

```typescript
// ✅ 좋은 예
import { semanticColor } from '@repo/shared/styles/foundation/semanticColor';

const StyledDiv = styled.div`
  color: ${semanticColor.text.primary};
  background: ${semanticColor.bg.surface};
`;

// ❌ 나쁜 예
const StyledDiv = styled.div`
  color: #333333;
  background: #ffffff;
`;
```

---

## 파일 명명 규칙

| 유형           | 규칙                    | 예시                       |
| -------------- | ----------------------- | -------------------------- |
| 스타일 파일    | 컴포넌트명.styles       | `OrderCard.styles.ts`      |
| 분리된 스타일  | styled.ts 또는 styled.tsx | `styled.ts`              |

---

## 체크리스트

스타일 작성 전:

- [ ] 스타일 양이 간단한가? → 컴포넌트 파일 하단
- [ ] 스타일이 복잡한가? → `styled.ts`로 분리
- [ ] 직접 색상값(hex, rgb) 없이 semanticColor 토큰 사용?
- [ ] 전역 스타일을 임의로 추가하지 않는가?

## Source & license

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

- **Author:** [ggombee](https://github.com/ggombee)
- **Source:** [ggombee/code-forge](https://github.com/ggombee/code-forge)
- **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-ggombee-code-forge-emotion
- Seller: https://agentstack.voostack.com/s/ggombee
- 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%.