Openclaw용 tiny-css

네이티브 브라우저 기능과 현대적인 논리적 속성을 활용하여 효율적이고 탄력적인 스타일을 생성하도록 설계된 미니멀리스트 CSS 철학 및 기술 세트입니다.

mikemai2awesome

v1.0.0

Mar 20, 2026

설치

정보

Skill.md

설치 및 다운로드

1. ClawHub CLI

레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.


                  npx clawhub@latest install tiny-css

2. 수동 설치

스킬 폴더를 다음 위치 중 하나로 복사하세요

글로벌

~/.openclaw/skills/

워크스페이스

<project>/skills/

우선순위: 워크스페이스 > 로컬 > 번들

3. 프롬프트 설치

이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.


                  Clawhub를 사용해서 tiny-css 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).

다운로드를 원하시나요?

ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.

tiny-css란 무엇인가요?

tiny-css는 속도, 성능 및 단순성을 중시하는 개발자를 위해 설계된 Openclaw Skills 내의 전문화된 접근 방식입니다. 무거운 CSS 리셋과 복잡한 디자인 시스템에서 벗어나 '브라우저를 신뢰하라'는 정신을 옹호합니다. 이 기술은 린 코드베이스를 유지하는 것이 우선순위인 개인 사이트, 프로토타입 및 랜딩 페이지에 최적화되어 있습니다.

color-scheme, 논리적 속성 및 네이티브 텍스트 줄바꿈 동작과 같은 현대적인 기능을 활용함으로써 tiny-css는 절대적인 최소한의 코드로 프로젝트의 접근성, 반응성 및 국제화를 보장합니다. 이는 비대해진 프레임워크에 대한 완벽한 대안으로, 탄력성과 사용자 선호도에 집중합니다.

tiny-css 활용 사례

가벼운 개인 포트폴리오 및 블로그 구축.
전체 디자인 시스템의 오버헤드 없이 UI 구성 요소의 신속한 프로토타이핑.
마케팅 캠페인을 위한 고성능 랜딩 페이지 생성.
논리적 속성 및 시스템 글꼴을 사용하여 기존 소규모 프로젝트 현대화.
사용자가 정의한 시스템 설정을 존중하는 접근 가능한 웹 콘텐츠 개발.

tiny-css 작동 원리

프로젝트 범위를 분석하여 기술의 미니멀리즘 기준에 부합하는지 확인합니다.
브라우저 기본값을 활용하기 위해 color-scheme 및 시스템 타이포그래피에 대한 루트 수준 구성을 적용합니다.
가독성을 최적화하기 위해 balance 및 pretty 값을 사용하여 텍스트 줄바꿈 로직을 구현합니다.
다국어 지원을 보장하기 위해 물리적 속성(margin-left, top)을 논리적 속성(margin-inline, block)으로 대체합니다.
고대비 및 동작 감소 지원을 포함하여 접근성을 위한 미디어 쿼리를 통합합니다.
핵심 레이아웃 기능에 JavaScript가 전혀 필요하지 않은 고도로 최적화된 단일 CSS 파일을 생성합니다.

tiny-css 설정 가이드

Openclaw Skills를 사용하여 tiny-css를 구현하려면 다음 핵심 템플릿으로 스타일시트를 초기화할 수 있습니다.

# Navigate to your project directory
touch style.css

프로젝트에 미니멀한 기반을 추가합니다.

:root {
  color-scheme: light dark;
  accent-color: #0066cc;
  font-family: system-ui;
}

:where(img, svg, video, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}

tiny-css 데이터 스키마 및 분류 체계

tiny-css 기술은 높은 성능과 낮은 유지보수를 유지하기 위해 린 데이터 구조를 따릅니다. 스타일링 데이터를 다음과 같이 구성합니다.

Component	Implementation Strategy
전역 변수	강조 색상을 위해 네이티브 CSS 변수를 사용하여 `:root`에 정의됩니다.
레이아웃	탄력성을 위해 논리적 속성(`inline-size`, `padding-block`)에 의해 구동됩니다.
타이포그래피	로딩 오버헤드가 없는 시스템 글꼴 및 네이티브 `text-wrap` 속성.
에셋	추가 클래스 없이 컨텍스트를 상속하기 위해 `currentColor`를 사용하는 SVGs.
접근성	동작 및 강제 색상에 대한 미디어 쿼리 기반 기본 설정.