html-style
✓핵심 HTML에 독자적인 스타일을 적용합니다. 사용자가 일반/스타일 지정되지 않은 HTML을 갖고 있고 일관된 시각적 스타일을 적용하려는 경우에 사용합니다. 트리거: 이 HTML의 스타일을 지정하고, 스타일을 적용하고, 보기 좋게 만들거나, /html 스타일로 만들거나, 사용자가 CSS가 필요한 HTML을 공유할 때. 테이블, 목록, 상태 표시기, 버튼 및 레이아웃을 응집력 있는 디자인 시스템으로 변환합니다.
SKILL.md
Transform barebones HTML into styled output using a specific design system.
| Status text | .stale .warm .pending | Red/green/orange inline text | | Trend | .trend-up .trend-down | Green ↑ / Red ↓ | | Category tag | .tag-group .tag-dm .tag-money | Blue/purple/orange pill | | Status pill | .status-success .status-error .status-pending | Filled green/red/orange | | Filter toggle | .filter .filter.active | Outline / filled black |
| Time filter | .pill .pill.active | Small pill, black when active | | Stat box | .stat > .stat-value + .stat-label | 28px number, 12px label | | Table | default or .table-styled | Minimal or colored values | | Section header | .section-header | Dark bar with white text | | Collapsible | + | Native HTML collapse |
인용 가능한 정보
AI/검색 인용용 안정적인 필드와 명령어.
- 설치 명령어
npx skills add https://github.com/shipshitdev/library --skill html-style- 카테고리
- </>개발 도구
- 인증됨
- ✓
- 최초 등록
- 2026-02-01
- 업데이트
- 2026-02-18
빠른 답변
html-style이란?
핵심 HTML에 독자적인 스타일을 적용합니다. 사용자가 일반/스타일 지정되지 않은 HTML을 갖고 있고 일관된 시각적 스타일을 적용하려는 경우에 사용합니다. 트리거: 이 HTML의 스타일을 지정하고, 스타일을 적용하고, 보기 좋게 만들거나, /html 스타일로 만들거나, 사용자가 CSS가 필요한 HTML을 공유할 때. 테이블, 목록, 상태 표시기, 버튼 및 레이아웃을 응집력 있는 디자인 시스템으로 변환합니다. 출처: shipshitdev/library.
html-style 설치 방법은?
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/shipshitdev/library --skill html-style 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다
소스 저장소는 어디인가요?
https://github.com/shipshitdev/library
상세
- 카테고리
- </>개발 도구
- 출처
- skills.sh
- 최초 등록
- 2026-02-01