Automate 21risk tasks via Rube MCP (Composio). Always search tools first for current schemas.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트
무료GitHub에 공개
apply-typography-scale
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills스타 3(GitHub 3 + cccskills 0)
실행 점수 미검증
설치 방법 보기포함된 파일(1)
- SKILL.md2.9 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
Skill: Apply Typography Scale
Purpose
Create clear typographic hierarchy using a hand-crafted set of font sizes, weights, and colors.
Core Rules
- Hand-crafted, not mathematical — Avoid modular scales with fractional pixels
- Use px or rem, never em — Prevents compounding issues
- Minimum 25% jumps — 16px → 20px (25%), not 16px → 18px (12.5%)
- Two weights only — 400/500 normal, 600/700 bold
- Never < 400 for UI — Too hard to read at small sizes
Recommended Scales
Marketing Page
Hero: 48-60px, weight 700, line-height 1.1
H1: 36-40px, weight 700, line-height 1.2
H2: 28-32px, weight 600, line-height 1.3
Body: 16-18px, weight 400, line-height 1.6
Small: 14px, weight 400, line-height 1.6
Caption: 12px, weight 400, line-height 1.5
Application/Dense UI
H1: 30-36px, weight 700
H2: 24px, weight 600
H3: 20px, weight 600
H4: 16px, weight 600
Body: 14-16px, weight 400
Small: 12-13px, weight 400
Line-Height Rules
Inverse proportion to size:
- Small text (12-14px): 1.6-1.7 (needs help finding next line)
- Body text (16px): 1.5-1.6
- Large headlines (30px+): 1-1.2 (needs less help)
Line Length
- Optimal: 45-75 characters per line
- Max-width: 20-35em for paragraphs
- Wide paragraphs: Increase line-height to 1.8-2.0
Decision Criteria
PASS
- Scale uses a small set of intentional sizes with clear jumps between roles
- Type hierarchy combines size, weight, line-height, and color
- Body text remains readable across marketing, app, and content contexts
- Line length and line-height fit the reading context
FAIL
- Scale relies on tiny increments that do not create hierarchy
- Font weights are too light for UI text
- Long-form text lines are too wide or cramped
emsizing compounds unpredictably in nested elements
Common Failure Modes
| Failure | Example | Fix |
|---|---|---|
| Em units | 1.25em parent, 0.875em child = 17.5px | Use px or rem |
| Micro-steps | 16px, 18px, 20px | 16px, 20px, 28px |
| Weight 300 | Light body text | Minimum 400 |
| Long lines | 100+ characters | Constrain to 35em |
| Uniform line-height | 1.5 for all | Vary by size |
Examples
See examples/typography-scale/ for scale implementations.
References
references/hand-crafted-scales.mdreferences/avoid-em-units.mdreferences/line-height-proportion.md
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
Automate 2chat tasks via Rube MCP (Composio). Always search tools first for current schemas.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트
Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트
Build integrated IS/BS/CF financial workbooks in Excel.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트
9router
무료Entry point for 9Router — local/remote AI gateway with OpenAI-compatible REST for chat, image, TTS, embeddings, web search, web fetch. Use when the user mentions 9Router, NINEROUTER_URL, or wants AI without writing provider boilerplate. This skill covers setup + indexes capability skills; fetch the relevant capability SKILL.md from the URLs below when needed.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트
Chat / code generation via 9Router using OpenAI /v1/chat/completions or Anthropic /v1/messages format with streaming + auto-fallback combos. Use when the user wants to ask an LLM, generate code, summarize text, or run prompts through 9Router.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
karanmrn/karanagentskills32026년 8월 28일 업데이트