shadcn-ui/lint

해결하는 문제

@shadcn/lint는 UI 코드를 작성할 때 AI 코딩 에이전트가 디자인 시스템 규칙을 어기지 않도록 설계되었습니다. 타입스크립트는 특정 속성을 제한할 수 있지만, 에이전트가 위반 사항을 수정하기 위한 지침을 제공할 수는 없습니다. 이 린터는 구체적이고 실행 가능한 피드백을 제공하여, 에이전트가 무엇이 잘못되었는지, 그리고 어떤 컴포넌트, 변형, 또는 테마 값을 사용해야 하는지 정확히 알려줍니다.

작동 방식

Tailwind CSS 프로젝트용 프로그래머블 린터(ESLint 및 Oxlint과 호환)로, 개발자가 컴포넌트에 대한 "계약"을 정의할 수 있게 합니다. 특정 컴포넌트에 대해 허용되거나 금지되는 Tailwind 클래스를 지정할 수 있습니다(예: mt-4와 같은 레이아웃 클래스는 허용하지만 Button에는 패딩을 금지). 린터는 코드를 분석하고, 동적 자리표시자(예: {{sizes}})를 포함한 오류 메시지를 생성하여 에이전트가 올바른 디자인 시스템 구현으로 나아가도록 안내합니다.

대상 사용자

Tailwind CSS로 디자인 시스템을 구축하고, AI 코딩 에이전트를 사용해 UI 코드를 생성하거나 수정하며, 수동으로 컴포넌트를 다시 작성하지 않고도 엄격한 디자인 가이드라인을 준수하는 출력을 보장하고자 하는 개발자 및 팀에게 적합합니다.

주요 특징

• 에이전트 중심 피드백: 디자인 시스템 기반으로 코드를 수정하는 방법을 에이전트에게 명확히 알려주는 설명성 있는 오류 메시지 제공.
• 프로그래머블 규칙: 컴포넌트 API를 변경하거나 복잡한 타입스크립트 타입을 사용하지 않고도 규칙을 정의 가능.
• Tailwind v4 지원: shadcn/ui 라이브러리를 사용하든 사용하지 않든, 어떤 Tailwind v4 프로젝트에서도 작동.
• 사용자 정의 계약: 컴포넌트의 다양한 부분에 대해 다른 규칙을 설정 가능(예: CardTitle와 CardContent에 별도의 규칙).
• 유연한 통합: 빠르고 유연한 린팅을 위해 ESLint와 Oxlint 모두 지원.