frontend-css
일관된 프론트엔드 CSS 구축
프론트엔드 스타일링은 파일, 컴포넌트, 프레임워크 전반에서 자주 불일치가 발생합니다. 이 스킬은 Claude, Codex, Claude Code가 일관된 CSS 방법론과 디자인 토큰을 따르도록 안내합니다.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "frontend-css" from https://skillstore.io/skills/eis-its-frontend-css.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-css/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"frontend-css" 사용 중입니다. Tailwind를 사용하는 설정 패널을 스타일링하세요.
예상 결과:
레이아웃, 간격, 폼 컨트롤, 포커스 상태, 반응형 동작에 대한 유틸리티 선택을 포함한 간결한 스타일링 계획.
"frontend-css" 사용 중입니다. 혼재된 CSS 클래스를 일관된 방법으로 리팩터링하세요.
예상 결과:
셀렉터, 토큰 사용, 네이밍 변경, 시각적 보존 메모를 그룹화한 구조화된 리팩터링 요약.
"frontend-css" 사용 중입니다. 유지관리성을 위해 CSS Modules 파일을 검토하세요.
예상 결과:
네이밍 문제, 중복 값, 토큰 공백, 프레임워크 오버라이드 위험을 식별하는 검토.
보안 감사
안전The static path traversal finding is confirmed because the skill directs the agent to read a parent-directory file outside the packaged skill. No prompt injection, credential access, network access, or command execution intent was found in SKILL.md.
기능 검토 항목 (1)
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
위험 요인
📁 파일 시스템 접근 (1)
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/eis-its-frontend-css/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/eis-its-frontend-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/eis-its-frontend-css.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 인용
EIS-ITS. (2026). frontend-css security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-css/audits/10BibTeX 인용
@techreport{eis-its-eis-its-frontend-css-2026,
author = {EIS-ITS},
title = {frontend-css security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/eis-its-frontend-css/audits/10},
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: "frontend-css security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/eis-its-frontend-css/audits/10"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-css:audit:10"
description: "Skillstore immutable audit report identifier"
변형 비교
설치 가능한 변형 2개각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
Skillstore 점수
이 점수의 이유 증거 신뢰도: 높음만들 수 있는 것
컴포넌트 스타일링 표준화
React, Vue 또는 유사한 컴포넌트 파일 전반에 하나의 CSS 방법론을 적용합니다.
디자인 토큰 정의
UI 시스템을 위한 일관된 색상, 간격, 타이포그래피, 그림자 결정을 만듭니다.
CSS 프레임워크 사용 검토
Tailwind, CSS Modules 또는 CSS-in-JS 변경 사항의 일관성과 유지관리성을 확인합니다.
이 프롬프트를 사용해 보세요
frontend-css skill을 사용하여 프로젝트 CSS 방법에 맞게 이 컴포넌트를 스타일링하세요. 간격, 타이포그래피, 색상을 일관되게 유지하세요.
frontend-css skill을 사용하여 이 스타일을 로컬 방법론에 맞게 리팩터링하세요. 시각적 결과를 보존하고 주요 변경 사항을 설명하세요.
frontend-css skill을 사용하여 이 인터페이스의 색상, 간격, 타이포그래피, 그림자에 대한 디자인 토큰을 제안하세요.
frontend-css skill을 사용하여 이 스타일링 계층의 프레임워크 충돌, 사용하지 않는 스타일, 반응형 문제, 프로덕션 준비 상태를 검토하세요.
모범 사례
- 변경을 요청하기 전에 기존 CSS 방법론을 제공하세요.
- 검토할 스타일과 함께 관련 컴포넌트 마크업을 포함하세요.
- 반응형, 접근성, 프로덕션 준비 스타일링 검사를 요청하세요.
피하기
- 명확한 경계 없이 BEM, utility-first, CSS Modules를 혼합하지 마세요.
- 프로젝트 토큰이 존재할 때 색상이나 간격을 하드코딩하지 마세요.
- UI 컨텍스트나 제약 조건 없이 시각적 다듬기를 요청하지 마세요.