스킬 designing-components
📦

designing-components

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어

Tailwind 컴포넌트 디자인

팀은 공유 UI 프리미티브를 변경하지 않고도 일관된 컴포넌트 스타일링이 필요합니다. 이 스킬은 Claude, Codex, Claude Code가 Tailwind 규칙과 명확한 파일 경계를 사용해 컴포넌트 CSS를 만들도록 안내합니다.

지원: Claude Codex Code(CC)
Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청
Review the Skillstore skill "designing-components" from https://skillstore.io/skills/emz1998-designing-components.md and its manifest at https://skillstore.io/api/skills/emz1998-designing-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/emz1998-designing-components.md 서명된 manifest GET /api/skills/emz1998-designing-components/manifest 서명된 lockfile GET /api/skills/emz1998-designing-components/lockfile

테스트해 보기

"designing-components" 사용 중입니다. 대시보드용 프로필 카드 컴포넌트를 디자인하세요.

예상 결과:

에이전트가 새 컴포넌트를 만들고, 가까운 위치에 CSS 파일을 추가하며, Tailwind 컴포넌트 레이어 지침을 통해 카드를 스타일링합니다.

"designing-components" 사용 중입니다. 공유 UI 프리미티브를 변경하지 않고 설정 패널을 업데이트하세요.

예상 결과:

에이전트가 보호된 UI 파일은 변경하지 않고 컴포넌트 영역에 기능 수준 스타일링을 추가합니다.

"designing-components" 사용 중입니다. 컴포넌트에 사용자 지정 시각 상태를 추가하세요.

예상 결과:

에이전트가 프로젝트 Tailwind 컨텍스트를 확인하고 로컬 규칙과 일치하는 경우에만 사용자 지정 유틸리티 또는 변형 지침을 사용합니다.

보안 감사

안전
v4 • 2026. 7. 6. 버전별 보고서 열기

All ten static findings are false positives caused by Markdown inline code backticks in SKILL.md. The file contains component design guidance and local documentation path references, with no evidence of shell execution, prompt injection, network access, secret access, or data exfiltration. No semantic security findings were found.

1
스캔된 파일
26
분석된 줄 수
0
검토 항목
0
오탐 무시됨

위험 요인

⚙️ 외부 명령어 (10)
SKILL.md:13 SKILL.md:14 SKILL.md:16 SKILL.md:17 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:24 SKILL.md:25
가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기
보안 평가

보고서 링크 복사

https://skillstore.io/skills/emz1998-designing-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/emz1998-designing-components/security.svg)](https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/emz1998-designing-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/emz1998-designing-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/emz1998-designing-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
학술 인용 (APA · BibTeX · CFF)

APA 인용

Emz1998. (2026). designing-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/emz1998-designing-components/audits/4

BibTeX 인용

@techreport{emz1998-emz1998-designing-components-2026, author = {Emz1998}, title = {designing-components security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/emz1998-designing-components/audits/4}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "designing-components security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "Emz1998" date-released: "2026-07-06" url: "https://skillstore.io/skills/emz1998-designing-components/audits/4" identifiers: - type: other value: "skillstore:emz1998-designing-components:audit:4" description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음
55
아키텍처
85
유지보수성
87
콘텐츠
69
커뮤니티
83
사양 준수

만들 수 있는 것

기능 컴포넌트 만들기

별도의 CSS 파일과 Tailwind 컴포넌트 레이어 스타일링을 사용해 새 기능 컴포넌트를 빌드합니다.

공유 UI 파일 보호

공유 UI 프리미티브를 변경하지 않은 채 프로젝트별 컴포넌트를 추가합니다.

Tailwind v4 지침 적용

새 인터페이스 요소를 스타일링하기 전에 프로젝트 Tailwind 컨텍스트를 사용합니다.

이 프롬프트를 사용해 보세요

기본 컴포넌트 만들기 
designing-components 스킬을 사용해 [feature]용 새 Tailwind 컴포넌트를 만드세요. 프로젝트 컴포넌트 디렉터리 규칙을 따르세요.
기존 컴포넌트 스타일링 
designing-components 스킬을 사용해 [component]용 별도 CSS 파일을 추가하세요. Tailwind 컴포넌트 레이어 규칙을 사용하세요.
Tailwind 컨텍스트 사용 
designing-components 스킬을 사용해 [component]를 스타일링하기 전에 Tailwind v4 컨텍스트 문서를 검토하세요. 편집하기 전에 모든 가정을 설명하세요.
스타일링 안전하게 리팩터링 
designing-components 스킬을 사용해 공유 UI 파일을 유지하면서 [component]를 다시 디자인하세요. 기존 규칙에 맞는 경우에만 유틸리티나 변형을 추가하세요.

모범 사례

  • Tailwind별 컨텍스트를 따르기 전에 프로젝트가 Tailwind 4.1을 사용하는지 확인하세요.
  • 컴포넌트 스타일은 컴포넌트 가까이에 두고 공유 UI 프리미티브 변경은 피하세요.
  • 생성된 컴포넌트의 반응형 동작과 접근성 상태를 검토하세요.

피하기

  • 스타일링 지침을 조정하지 않고 Tailwind가 아닌 프로젝트에 이 스킬을 적용하는 것.
  • 기능 수준 컴포넌트로 충분한데 보호된 공유 UI 파일을 편집하는 것.
  • 기존 프로젝트 규칙을 확인하지 않고 사용자 지정 유틸리티나 변형을 추가하는 것.

자주 묻는 질문

이 스킬은 무엇을 빌드하는 데 도움이 되나요?
AI 에이전트가 Tailwind 중심의 CSS 구성과 명확한 파일 경계로 프론트엔드 컴포넌트를 디자인하도록 돕습니다.
이 스킬이 자체적으로 컴포넌트를 생성하나요?
아니요. Claude, Codex 또는 Claude Code가 구현 중에 따를 수 있는 지침을 제공합니다.
어떤 도구에서 사용할 수 있나요?
보고서에는 Claude, Codex, Claude Code 지원이 나열되어 있습니다.
Tailwind CSS가 필요한가요?
예. 이 지침은 Tailwind 디렉티브, 컴포넌트 레이어, 유틸리티 및 변형을 중심으로 구성되어 있습니다.
참조된 Tailwind 문서가 포함되어 있나요?
스캔된 스킬 패키지에는 SKILL.md만 포함되어 있으므로 대상 프로젝트가 해당 컨텍스트 파일을 제공해야 합니다.
공유 UI 컴포넌트를 수정할 수 있나요?
이 스킬은 에이전트가 SKILL.md에 명명된 공유 UI 디렉터리를 건드리지 않도록 지시합니다.

개발자 세부 정보

작성자

Emz1998

라이선스

MIT

Skillstore 리비전

r1

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/Emz1998/nexly-notes/tree/main/archive/skills/code-style/components

참조

a06681402992ceae98ba04d54cfd4ab004862696

유지보수 최신성

2026. 7. 22.

사용량

5 다운로드 · 117 조회

파일 구조

📄 SKILL.md

Emz1998의 다른 스킬

전체 보기

관련 스킬

전체 보기