Habilidades css-colors
🎨

css-colors

Seguro 🌐 Acceso a red📁 Acceso al sistema de archivos

Material UI 가이드라인을 사용하여 CSS 색상 추가

개발자가 컴포넌트에 산재된 직접적인 색상 코드를 사용할 때 CSS 색상 처리 방식이 일관성 없게 될 수 있습니다. 이 스킬은 Material UI 색상 팔레트 사용과 일관된 스타일을 위한 중앙 집중식 테마 파일 유지에 대한 명확한 가이드라인을 제공합니다.

Soporta: Claude Codex Code(CC)
⚠️ 68 Deficiente
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "css-colors". 성공 버튼에 어떤 색상을 사용해야 하나요?

Resultado esperado:

  • 메인 버튼 색상에 theme.palette.success.main 사용
  • 가독성 있는 텍스트에 theme.palette.success.contrastText 사용
  • 호버 상태에 theme.palette.success.dark 사용
  • 새로운 색조는 frontend/src/theme/theme.ts의 customColors 섹션에만 추가

Usando "css-colors". 새로운 기본 브랜드 색상은 어떻게 추가하나요?

Resultado esperado:

  • frontend/src/theme/theme.ts에서 테마 파일 열기
  • customColors 섹션 찾기
  • 기존 패턴을 따라 새 색상 추가
  • 컴포넌트에서 theme.palette.primary.customColorName으로 참조

Auditoría de seguridad

Seguro
v5 • 1/16/2026

This is a prompt-only skill consisting of markdown instructions. No code execution, file system access, network calls, or external commands are possible. The static analysis flagged SHA-256 hashes and common English words as security risks. All 25 findings are false positives. The skill provides safe guidelines for CSS color usage.

2
Archivos escaneados
186
Líneas analizadas
2
hallazgos
5
Auditorías totales

Factores de riesgo

🌐 Acceso a red (1)
skill-report.json:6
📁 Acceso al sistema de archivos (1)
skill-report.json:6
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
85
Contenido
19
Comunidad
100
Seguridad
83
Cumplimiento de la especificación

Lo que puedes crear

일관된 UI 색상 유지

애플리케이션 전체에서 일관된 스타일을 위해 모든 컴포넌트가 테마 정의 색상을 사용하도록 보장합니다.

색상 표준 적용

팀원이 적절한 테마 파일 채널을 통해 새 색상을 추가하도록 안내합니다.

색상 사용 검토

직접적인 색상 코드 사용에 대한 풀 리퀘스트를 확인하고 테마 기반 접근 방식으로 리디렉션합니다.

Prueba estos prompts

기본 색상 조회 
내 컴포넌트에 사용 가능한 Material UI 색상이 테마에 무엇이 있나요?
새 색상 추가 
오류 상태를 위한 새 색상을 추가해야 합니다. 테마 파일에 어떻게 추가해야 하나요?
색상 리팩토링 
이 컴포넌트에서 #ff0000을 직접 사용하고 있습니다. 적절한 테마 색상으로 교체하는 것을 도와주세요.
색상 감사 
컴포넌트에서 모든 직접적인 색상 코드를 찾아서 대신 사용해야 하는 테마 색상을 나열하세요.

Mejores prácticas

  • 하드코딩된 HEX 값 대신 항상 theme.palette 참조 사용
  • 중앙 집중식 관리를 위해 새 색상을 테마 파일의 customColors 섹션에 추가
  • 커스텀 색상 생성 시 Material UI 색상 팔레트 패턴 따르기

Evitar

  • 컴포넌트 파일에서 HEX 색상 코드를 직접 사용
  • 테마 파일 대신 로컬에 색상 추가
  • 동일한 컴포넌트에서 서로 다른 색상 형식(HEX, RGB, 명명된 색상) 혼합

Preguntas frecuentes

이 스킬은 커스텀 CSS 프레임워크와 작동하나요?
이 스킬은 Material UI 프로젝트용으로 설계되었습니다. 다른 프레임워크는 다른 가이드라인이 필요할 수 있습니다.
커스텀 색상의 제한은 무엇인가요?
엄격한 제한은 없지만 색상은 테마 파일의 customColors 섹션에 추가해야 합니다.
기존 디자인 시스템과 어떻게 통합하나요?
일관성을 위해 기존 customColors 패턴을 따라 테마 파일에 색상을 추가하세요.
이 스킬을 사용할 때 내 데이터가 안전한가요?
네, 이 스킬은 가이드라인만 제공하고 파일을 직접 읽거나 쓰지 않습니다.
왜 직접적인 색상 코드가 거부되나요?
직접 코드를 사용하면 일관성이 깨지고 업데이트가 어려워지며 테마 수준의 변경이 전파되지 않습니다.
다른 색상 도구와 비교하면 어떻게 되나요?
이 스킬은 일반적인 색상 생성이나 변환 기능 대신 프로젝트별 가이드라인을 제공합니다.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/Crossbill-Highlights/crossbill-web/tree/main/.claude/skills/css-colors

Ref.

main

Estructura de archivos

📄 SKILL.md