cursorrules

Palette 프로젝트 - 절대 규칙 (MANDATORY RULES)

🚨 위반 시 즉시 작업 중단 규칙

이 규칙을 위반하는 경우 즉시 작업을 중단하고 사용자에게 알려야 합니다.

규칙 1: Figma 접근은 오직 MCP를 통해서만 (ABSOLUTE)

강제 사항:

• Figma 정보를 가져와야 하는 모든 상황에서 반드시 list_mcp_resources 또는 fetch_mcp_resource 도구를 사용
• 그 외의 어떤 방법도 절대 허용하지 않음

절대 금지 (NEVER):

// ❌ 절대 금지 - Figma API 직접 호출
fetch('https://api.figma.com/...')
axios.get('https://api.figma.com/...')

// ❌ 절대 금지 - Figma 플러그인 직접 실행
figma.currentPage.selection

// ❌ 절대 금지 - 사용자에게 수동 추출 요청
"Figma에서 코드를 복사해서 붙여넣어 주세요"

반드시 사용 (MUST USE):

// ✅ 올바른 방법 - MCP 리소스 목록 확인
list_mcp_resources({ server: "figma" })

// ✅ 올바른 방법 - MCP로 Figma 데이터 가져오기
fetch_mcp_resource({ 
  server: "figma", 
  uri: "figma://file/{fileKey}/node/{nodeId}" 
})

규칙 2: 산출물은 오직 디자인 시스템으로만 (ABSOLUTE)

강제 사항:

• React/Vue 컴포넌트 생성 시 반드시 @dealicious/design-system-react 또는 @dealicious/design-system 사용
• Tailwind CSS, 일반 HTML/CSS는 절대 사용 금지

절대 금지 (NEVER):

// ❌ 절대 금지 - Tailwind CSS 사용
<div className="bg-white p-4 rounded-lg shadow-md">
  <button className="bg-blue-500 text-white px-4 py-2">클릭</button>
</div>

// ❌ 절대 금지 - 일반 HTML 태그만 사용
<div style={{ backgroundColor: '#fff', padding: '16px' }}>
  <button style={{ backgroundColor: '#3b82f6', color: '#fff' }}>클릭</button>
</div>

// ❌ 절대 금지 - MUI, Ant Design 등 다른 UI 라이브러리
import { Button } from '@mui/material';
import { Button } from 'antd';

반드시 사용 (MUST USE):

// ✅ 올바른 방법 - 디자인 시스템 컴포넌트
import { Button } from '@dealicious/design-system-react/src/components/ssm-button';
import { Text } from '@dealicious/design-system-react/src/components/ssm-text';

<div style={{ padding: '16px' }}>
  <Button variant="primary">클릭</Button>
</div>

📋 필수 작업 플로우 (MANDATORY WORKFLOW)

Figma를 React/Vue로 변환하는 요청을 받으면 반드시 이 순서대로 진행:

Step 1: Figma MCP로 리소스 확인 (REQUIRED)

// 1단계: 사용 가능한 Figma 리소스 확인
list_mcp_resources({ server: "figma" })

이 단계를 건너뛰면 안 됩니다!