스킬 css-development

📦

css-development

Name: css-development
Author: 2389-research

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어📁 파일 시스템 접근

일관된 CSS 컴포넌트 구축

CSS 스타일은 컴포넌트와 유틸리티 클래스 전반에서 쉽게 달라집니다. 이 스킬은 시맨틱 클래스 생성, Tailwind 구성, 다크 모드 적용 범위, 테스트, 리팩터링을 안내합니다.

지원: Claude Codex Code(CC)

🥉 78 브론즈

Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

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

에이전트 요청

Review the Skillstore skill "css-development" from https://skillstore.io/skills/2389-research-css-development.md and its manifest at https://skillstore.io/api/skills/2389-research-css-development/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

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

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

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

Markdown 상세 GET /skills/2389-research-css-development.md 서명된 manifest GET /api/skills/2389-research-css-development/manifest 서명된 lockfile GET /api/skills/2389-research-css-development/lockfile

테스트해 보기

"css-development" 사용 중입니다. 다크 모드 지원이 포함된 기본 버튼 스타일을 생성하세요.

예상 결과:

제안하는 시맨틱 이름: button-primary.
색상, 간격, 타이포그래피, 포커스, 전환을 위한 권장 그룹화 Tailwind 구성.
클래스 존재 여부, 다크 모드 유틸리티, 컴포넌트 클래스 적용을 다루는 테스트 계획.

"css-development" 사용 중입니다. 병합 전에 CSS 파일을 검토하세요.

예상 결과:

좋은 패턴, 이름 지정 문제, 누락된 다크 모드 변형, 테스트 공백에 대한 보고서.
프로젝트 파일을 사용할 수 있을 때 파일 및 줄 참조가 포함된 우선순위 수정 사항.
필요한 경우에만 구조적 문제를 리팩터링하기 위한 제안된 다음 단계.

"css-development" 사용 중입니다. 여러 컴포넌트에서 반복되는 유틸리티 클래스를 리팩터링하세요.

예상 결과:

반복되는 시각적 패턴과 그 빈도 목록.
제안된 시맨틱 클래스 이름과 영향을 받는 파일.
테스트, 시각적 동일성, 다크 모드 동작을 위한 검증 체크리스트.

보안 감사

안전

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

Static analysis produced many hits because Markdown backticks, CSS examples, and fixed local test snippets were interpreted as executable Ruby, shell, or filesystem behavior. I found no evidence of prompt injection, data exfiltration, network reconnaissance, or dynamic command construction in the reviewed files.

스캔된 파일

1,311

분석된 줄 수

검토 항목

오탐 무시됨

위험 요인

⚙️ 외부 명령어 (188)

📁 파일 시스템 접근 (5)

create-component/SKILL.md:230 create-component/SKILL.md:234 refactor/SKILL.md:268 refactor/SKILL.md:273 SKILL.md:100

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex 감사 이력 보기 →

이 보고서 공유 및 인용

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

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/2389-research-css-development/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/2389-research-css-development/security.svg)](https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/2389-research-css-development?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/2389-research-css-development/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/2389-research-css-development.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 인용

2389-research. (2026). css-development security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/2389-research-css-development/audits/6

BibTeX 인용

@techreport{2389-research-2389-research-css-development-2026,
  author = {2389-research},
  title = {css-development security audit report (audit version 6)},
  institution = {Skillstore},
  year = {2026},
  number = {6},
  url = {https://skillstore.io/skills/2389-research-css-development/audits/6},
  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: "css-development security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
  - name: "2389-research"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/2389-research-css-development/audits/6"
identifiers:
  - type: other
    value: "skillstore:2389-research-css-development:audit:6"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 높음

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

재사용 가능한 UI 스타일 생성

시맨틱 이름, 다크 모드 변형, 일치하는 테스트를 갖춘 버튼, 카드, 배지 또는 폼 스타일을 추가합니다.

CSS 일관성 감사

디자인 시스템 변경 사항이 병합되기 전에 클래스 이름, Tailwind 구성, 문서화, 테스트 적용 범위를 검토합니다.

유틸리티 중심 마크업 리팩터링

동작과 시각적 출력을 유지하면서 반복되는 유틸리티 조합을 유지관리 가능한 컴포넌트 클래스로 변환합니다.

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

CSS 컴포넌트 생성

기본 버튼을 위한 시맨틱 CSS 컴포넌트를 생성하세요. Tailwind 구성, 다크 모드 변형, 사용 참고 사항, 테스트 제안을 포함하세요.

기존 스타일 검증

components.css 파일을 시맨틱 이름 지정, Tailwind @apply 사용, 다크 모드 적용 범위, 문서화, 누락된 테스트 측면에서 검토하세요.

반복 마크업 리팩터링

이 컴포넌트들에서 반복되는 Tailwind 유틸리티 패턴을 찾고 현재 시각적 동작을 유지하는 시맨틱 클래스를 제안하세요.

CSS 마이그레이션 계획

흩어진 유틸리티 클래스에서 시맨틱 CSS 컴포넌트로 전환하는 단계별 마이그레이션 계획을 작성하세요. 테스트, 검토 체크포인트, 롤백 지침을 포함하세요.

모범 사례

새 컴포넌트 클래스를 추가하기 전에 기존 CSS를 읽으세요.
색상이나 크기만이 아니라 목적을 설명하는 시맨틱 이름을 사용하세요.
모든 재사용 가능한 시각적 컴포넌트에 다크 모드 변형과 테스트를 추가하세요.

피하기

기존 클래스 조합으로 같은 결과를 만들 수 있는데 새 클래스를 생성하는 것.
반복되는 유틸리티 조합을 여러 컴포넌트에 흩어진 채로 남겨두는 것.
다크 모드 적용 범위 없이 색상이 있는 스타일이나 인터랙티브 스타일을 추가하는 것.

자주 묻는 질문

이 스킬이 CSS를 자동으로 작성하나요?

워크플로와 예시를 제공합니다. 파일 편집은 여전히 연결된 코딩 어시스턴트와 프로젝트 컨텍스트에 따라 달라집니다.

Tailwind가 필수인가요?

이 지침은 Tailwind @apply 패턴에 최적화되어 있습니다. Tailwind가 없는 프로젝트는 CSS 예시를 조정해야 할 수 있습니다.

기존 CSS를 검토할 수 있나요?

예. 검증 워크플로는 이름 지정, 구성, 다크 모드 적용 범위, 테스트, 문서화를 확인합니다.

React와 Vue에도 도움이 되나요?

예. 예시에는 React, Vue, vanilla HTML 통합 패턴이 포함되어 있습니다.

시각적 QA를 대체하나요?

아니요. 검사를 권장하지만, 시각적 동일성은 브라우저 검토, 스크린샷 또는 프로젝트 테스트가 필요합니다.

Claude Code와 Codex에 왜 유용한가요?

Claude, Claude Code, Codex에 명확한 체크포인트와 예상 출력이 포함된 구조화된 CSS 워크플로를 제공합니다.

개발자 세부 정보

작성자

2389-research

라이선스

MIT

Skillstore 리비전

버전 안내

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

리포지토리

https://github.com/2389-research/claude-plugins/tree/main/css-development/skills

참조

c1fdca50ff516318f65fed0d7f9e82797c5171dc

유지보수 최신성

2026. 7. 18.

사용량

16 다운로드 · 406 조회

파일 구조

📁 create-component/

📄 SKILL.md

📁 refactor/

📄 SKILL.md

📁 validate/

Vue 3 TypeScript 관행 개선

작성자 hyf0

Vue TypeScript 프로젝트는 템플릿, 라우터, Volar 오류로 혼란을 겪는 경우가 많습니다. 이 스킬은 Codex, Claude, Claude Code를 위한 Vue 3 맞춤 수정 지침을 제공합니다.

코딩 및 개발 보기

css-development

내 에이전트로 설치

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

테스트해 보기

보안 감사

위험 요인

보고서 링크 복사

Markdown 배지

HTML 배지

임베드 카드

APA 인용

BibTeX 인용

CITATION.cff

Skillstore 점수

만들 수 있는 것

재사용 가능한 UI 스타일 생성

CSS 일관성 감사

유틸리티 중심 마크업 리팩터링

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

모범 사례

피하기

자주 묻는 질문

개발자 세부 정보

2389-research의 다른 스킬

landing-page-design

fresh-eyes-review

css-development-create-component

using-xtool

firebase-development-project-setup

css-development-refactor

관련 스킬

analyzing-patterns

structural-search

code-context-finder

vercel-react-view-transitions

react-email

vue-best-practices