web-styling
React 인터페이스를 더 빠르게 스타일링하기
React 팀은 컴포넌트와 레이아웃 전반에서 스타일링 결정을 반복하는 경우가 많습니다. 이 스킬은 재사용 가능한 Tailwind, CSS Modules, CSS-in-JS, 테마, 애니메이션, 레이아웃 패턴을 제공합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "web-styling" from https://skillstore.io/skills/cjharmath-web-styling.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-styling/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"web-styling" 사용 중입니다. Tailwind CSS로 반응형 제품 카드를 스타일링하세요.
예상 결과:
간격, 타이포그래피, hover 상태, 다크 모드 색상, 재사용 가능한 클래스 그룹을 포함한 모바일 우선 스타일링 계획.
"web-styling" 사용 중입니다. primary, secondary, outline, danger 버튼 변형을 만드세요.
예상 결과:
크기, 상태, 비활성화 동작, 클래스 병합, 일관된 상호작용 스타일링을 다루는 변형 매트릭스.
"web-styling" 사용 중입니다. React 대시보드를 위한 테마 시스템을 계획하세요.
예상 결과:
색상, 간격, CSS 변수, 다크 모드 매핑, 컴포넌트 파일 구성을 위한 간결한 토큰 전략.
보안 감사
안전All static findings are false positives caused by Markdown code fences, JavaScript template literals, styled-components CSS templates, inline code formatting, and CSS Grid terminology. No evidence found of prompt injection, data exfiltration, command execution, filesystem access, network access, or system reconnaissance intent in SKILL.md.
위험 요인
⚙️ 외부 명령어 (42)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/cjharmath-web-styling/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/cjharmath-web-styling?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-styling/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/cjharmath-web-styling.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 인용
CJHarmath. (2026). web-styling security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-styling/audits/7BibTeX 인용
@techreport{cjharmath-cjharmath-web-styling-2026,
author = {CJHarmath},
title = {web-styling security audit report (audit version 7)},
institution = {Skillstore},
year = {2026},
number = {7},
url = {https://skillstore.io/skills/cjharmath-web-styling/audits/7},
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: "web-styling security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-web-styling/audits/7"
identifiers:
- type: other
value: "skillstore:cjharmath-web-styling:audit:7"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
재사용 가능한 React 컴포넌트 만들기
일관된 변형과 반응형 클래스를 갖춘 버튼, 카드, 모달, 레이아웃 프리미티브를 만듭니다.
디자인 시스템 문서화하기
간격, 색상 토큰, 다크 모드 값, 컴포넌트 스타일링 규칙을 표준화합니다.
완성도 높은 제품 화면 출시하기
사용자 지정 스타일링 아키텍처를 처음부터 만들지 않고 검증된 스타일링 패턴을 빠르게 적용합니다.
이 프롬프트를 사용해 보세요
[component]라는 React 컴포넌트에 대한 스타일링 가이드를 만드세요. Tailwind CSS, 반응형 간격, hover 상태, 다크 모드 지원을 사용하세요.
이 React 스타일링 요구사항을 검토하고 clsx, tailwind-merge 또는 cva를 사용하는 재사용 가능한 변형 패턴을 제안하세요. 각 옵션이 언제 적합한지 설명하세요.
[product]를 위한 React 테마 접근 방식을 설계하세요. 색상 토큰, 간격 토큰, CSS 변수, 다크 모드 동작, 파일 구성을 포함하세요.
이 React 스타일링 접근 방식을 유지보수성 관점에서 감사하세요. 중복 패턴, 토큰 공백, 반응형 문제, 애니메이션 우려 사항, 마이그레이션 단계를 식별하세요.
모범 사례
- 모바일 우선 반응형 규칙을 사용하고 레이아웃 제약 조건을 명시적으로 유지하세요.
- 디자인 토큰, 변형 정의, 다크 모드 값을 중앙화하세요.
- 컴포넌트가 외부 클래스 재정의를 허용할 때는 클래스 병합 헬퍼를 사용하세요.
피하기
- 긴 변형 클래스 문자열을 여러 컴포넌트에 중복하는 것.
- 공유 디자인 토큰 없이 임의의 색상과 간격을 섞어 쓰는 것.
- 상태 규칙, 동작 제한, 폴백 동작 없이 애니메이션을 추가하는 것.