diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json new file mode 100644 index 0000000..5033099 --- /dev/null +++ b/.claude-plugin/marketplace.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://anthropic.com/claude-code/marketplace.schema.json", + "name": "lidge-jun", + "owner": { "name": "lidge-jun", "url": "https://github.com/lidge-jun" }, + "metadata": { "description": "Design reference data as queryable agent skills." }, + "plugins": [ + { "name": "design-isms", "source": { "source": "url", "url": "https://github.com/lidge-jun/design-isms.git" }, "description": "49 design isms + 94 UI effects as queryable skills." } + ] +} diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..ae8cf8a --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json", + "name": "design-isms", + "version": "0.1.0", + "description": "49 design isms + 94 UI effects as queryable skills. Palettes, font pairings, grids, motion recipes, and runnable HTML/CSS/JS snippets from the design-isms dataset.", + "author": { "name": "lidge-jun", "url": "https://github.com/lidge-jun" }, + "homepage": "https://github.com/lidge-jun/design-isms", + "repository": "https://github.com/lidge-jun/design-isms", + "keywords": ["design", "design-system", "ui-patterns", "palettes", "font-pairing", "effects", "reference"], + "skills": "./skills/", + "commands": "./commands/" +} diff --git a/.claude/skills/effect b/.claude/skills/effect new file mode 120000 index 0000000..ccc02ba --- /dev/null +++ b/.claude/skills/effect @@ -0,0 +1 @@ +../../skills/effect \ No newline at end of file diff --git a/.claude/skills/style b/.claude/skills/style new file mode 120000 index 0000000..6d10942 --- /dev/null +++ b/.claude/skills/style @@ -0,0 +1 @@ +../../skills/style \ No newline at end of file diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json new file mode 100644 index 0000000..46723b7 --- /dev/null +++ b/.codex-plugin/plugin.json @@ -0,0 +1,19 @@ +{ + "name": "design-isms", + "version": "0.1.0", + "description": "49 design isms + 94 UI effects as queryable skills.", + "author": { "name": "lidge-jun", "url": "https://github.com/lidge-jun" }, + "homepage": "https://github.com/lidge-jun/design-isms", + "repository": "https://github.com/lidge-jun/design-isms", + "keywords": ["design", "ui-patterns", "palettes", "effects"], + "skills": "./skills/", + "interface": { + "displayName": "design-isms", + "shortDescription": "Design isms + UI effects knowledge base", + "longDescription": "Query 49 design styles (palettes, font pairings, grids, motion) and 94 frontend UI effects (runnable HTML/CSS/JS, accessibility, P0/P1/P2/P3 priority).", + "developerName": "lidge-jun", + "category": "Design & Creativity", + "capabilities": ["Read"], + "websiteURL": "https://github.com/lidge-jun/design-isms" + } +} diff --git a/README.md b/README.md index cca5347..e4d421d 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,17 @@ Catalog 드롭다운으로 이어지는 네 개의 자매 카탈로그가 백과 [Live Site](https://lidge-jun.github.io/design-isms/) · [Repository](https://github.com/lidge-jun/design-isms) +## AI Agent Plugin + +이 저장소는 Claude Code · Codex · agy용 플러그인이기도 합니다. 사이트와 같은 데이터셋을 에이전트가 직접 질의해 팔레트·폰트·그리드 수치와 실행 가능한 UI 코드를 반환합니다. + +```bash +claude plugin marketplace add lidge-jun/design-isms +claude plugin install design-isms@lidge-jun +``` + +설치·스킬 사용법·문제 해결은 [docs/PLUGIN.md](docs/PLUGIN.md)를 참고하세요. + ## What It Shows - 49 design -isms from Minimalism to the AI Slop anti-pattern diagnosis diff --git a/commands/.gitkeep b/commands/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/docs/PLUGIN.md b/docs/PLUGIN.md new file mode 100644 index 0000000..411da52 --- /dev/null +++ b/docs/PLUGIN.md @@ -0,0 +1,255 @@ +# design-isms 플러그인 사용설명서 + +이 저장소는 정적 사이트인 동시에 **멀티호스트 AI 에이전트 플러그인**입니다. 사이트를 렌더링하는 것과 똑같은 `assets/data/*.json` 데이터셋을 에이전트가 직접 질의해, 팔레트 헥스값·폰트 페어링·그리드 수치·실행 가능한 HTML/CSS/JS 스니펫을 반환합니다. + +지원 호스트: **Claude Code · Codex · agy** + +--- + +## 1. 설치 + +### Claude Code + +```bash +claude plugin marketplace add lidge-jun/design-isms +claude plugin install design-isms@lidge-jun +``` + +설치 확인: + +```bash +claude plugin details design-isms +``` + +``` +Component inventory + Skills (2) effect, style +``` + +### Codex + +```bash +codex plugin marketplace add lidge-jun/design-isms +codex plugin add design-isms@lidge-jun +``` + +### agy + +```bash +agy plugin install https://github.com/lidge-jun/design-isms +agy plugin enable design-isms +``` + +### 설치 없이 한 세션만 (개발·테스트용) + +```bash +claude --plugin-dir=/절대/경로/design-isms +``` + +> **주의**: `~/`(틸드)는 전개되지 않습니다. 반드시 절대경로나 `"$HOME/..."`를 쓰세요. +> `--plugin-dir=~/fork/design-isms`는 조용히 실패합니다. + +### 제거 + +```bash +claude plugin uninstall design-isms +claude plugin marketplace remove lidge-jun +``` + +--- + +## 2. 스킬 두 개 + +| 스킬 | 호출명 | 다루는 것 | +|------|--------|-----------| +| style | `design-isms:style` | 디자인 사조(ism) 49종 — 팔레트, 폰트, 그리드, 모션 | +| effect | `design-isms:effect` | 프런트엔드 UI 패턴 94종 — 실행 가능한 코드, 접근성 | + +명시적으로 부를 필요는 없습니다. 아래 예시처럼 물으면 자동으로 트리거됩니다. 한국어·영어 모두 인식합니다. + +--- + +## 3. style — 디자인 사조 49종 + +### 무엇을 물으면 되나 + +``` +미니멀리즘 컬러 팔레트 추천해 +브루탈리즘 폰트 페어링 알려줘 +아르데코가 뭐야? +내 포트폴리오 사이트에 맞는 디자인 스타일 추천해줘 +바우하우스랑 스위스 스타일 비교해줘 +플랫 디자인 그리드 수치 알려줘 +``` + +### 실제 응답 예시 + +`미니멀리즘 컬러 팔레트 추천해` → + +``` +#FFFFFF 배경 +#1A1A1A 본문 텍스트 +#F5F5F5 보조 배경 +#E0E0E0 구분선 + +폰트: sans-serif (Inter + system-ui) +그리드: 단순 그리드 시스템 (1-2 컬럼 중심), gutter 24px +``` + +### 반환 항목 + +- **팔레트** — hex 값 + 역할 배정(배경/본문/강조) + 대비 가이드 +- **타이포그래피** — `fontPairing`, `sizeHierarchy`, `lineHeight`, `letterSpacing`, `weightStrategy` +- **레이아웃** — `grid`, `columns`, `gutter`, `margins`, `spacing`, `symmetry`, `geometry` +- **모션** — `easing`, `duration`, `hover`, `scroll`, `transition` +- **맥락** — tagline, 설명, 히스토리, 실제 사이트 예시 10개, `dos`/`donts` + +### 주요 ism id + +`minimalism`, `bauhaus`, `flat-design`, `material-design`, `art-deco`, `swiss-style`, `brutalism`, `skeuomorphism` … 총 49종 + +--- + +## 4. effect — UI 패턴 94종 + +### 무엇을 물으면 되나 + +``` +바텀시트 만들어줘 +스크롤 리빌 효과 코드 줘 +모바일에서 쓸 만한 P0 패턴 목록 +드로어 메뉴 접근성 지키면서 만들려면? +sticky CTA bar 언제 쓰는 게 좋아? +이 효과 reduced-motion 대응은? +``` + +### 반환 항목 + +- **실행 가능한 코드** — `html`, `css`, `js`(필요 시) +- **접근성** — `a11yNotes[]`, `prefers-reduced-motion` 대응 포함 +- **판단 근거** — `bestFor[]`(언제 쓰나), `avoidWhen[]`(언제 피하나), `misuse`(흔한 오용) +- **맥락** — 배경, 히스토리, 실제 사례, 구조 분석 + +### 범위 좁히기 + +| 축 | 값 | 분포 | +|----|-----|------| +| priority | P0 / P1 / P2 / P3 | 19 / 49 / 23 / 3 | +| category | Mobile / Desktop / Shared | 11 / 32 / 51 | +| family | 7종 | Interface Pattern 등 | + +`"P0 모바일 패턴만"`처럼 물으면 해당 조건으로 필터링해 답합니다. + +### 주요 effect id + +`bottom-sheet`, `full-screen-mobile-modal`, `drawer-navigation`, `sticky-cta-bar`, `scroll-reveal`, `staggered-cards`, `press-scale`, `swipe-action` … 총 94종 + +--- + +## 5. 데이터 출처 + +스킬은 데이터를 복제하지 않고 저장소의 JSON을 그대로 읽습니다. 사이트와 스킬이 **같은 진실 원천**을 공유하므로, 데이터를 고치면 양쪽에 동시에 반영됩니다. + +| 파일 | 내용 | +|------|------| +| `assets/data/isms.json` | ism 49종 — 팔레트, 키워드, 예시 사이트, 히스토리 | +| `assets/data/dev-guides.json` | ism별 개발 가이드 — 그리드/타이포/컬러/모션 수치 | +| `assets/data/effects.json` | effect 94종 — family, category, priority, 접근성, 성능 | +| `assets/data/effects-snippets.json` | 실행 가능한 HTML/CSS/JS 스니펫 | +| `assets/data/effects-docs.json` | effect별 배경·히스토리·사용시점·오용 사례 | +| `assets/data/{color,typography,layout,motion}.json` | 보조 카탈로그 (25/20/25/20종) | + +--- + +## 6. 저장소 구조 + +``` +design-isms/ +├── plugin.json # agy 매니페스트 +├── .claude-plugin/ +│ ├── plugin.json # Claude Code 매니페스트 +│ └── marketplace.json # 마켓플레이스 등록 +├── .codex-plugin/plugin.json # Codex 매니페스트 +├── skills/ # ← 진실 원천 +│ ├── style/SKILL.md +│ └── effect/SKILL.md +├── .claude/skills/ # 발견용 심링크 → ../../skills/ +│ ├── style -> ../../skills/style +│ └── effect -> ../../skills/effect +└── assets/data/*.json # 스킬이 읽는 데이터셋 +``` + +`skills/`의 SKILL.md 두 개만 실제 파일입니다. `.claude/skills/`는 심링크이므로 문서가 중복되지 않습니다. + +--- + +## 7. 개발 — 스킬 수정하기 + +`skills/style/SKILL.md` 또는 `skills/effect/SKILL.md`를 편집합니다. 심링크라서 복사본 동기화는 필요 없습니다. + +구조 점검: + +```bash +python3 ~/.claude/plugins/marketplaces/plugin-forge/scripts/forge.py doctor . +``` + +`FAIL 0`이면 정상입니다. 마켓플레이스 미등록 `WARN`은 배포 전 정상 상태입니다. + +설치 가능성 확인: + +```bash +python3 ~/.claude/plugins/marketplaces/plugin-forge/scripts/forge.py install . --host all +``` + +사이트 회귀 확인 (플러그인 변경이 빌드를 깨지 않는지): + +```bash +npm run verify +``` + +--- + +## 8. 문제 해결 + +### 플러그인 목록에 안 뜬다 + +**틸드 경로**를 썼는지 확인하세요. `--plugin-dir=~/...`는 전개되지 않습니다. + +```bash +# 안 됨 +claude --plugin-dir=~/fork/design-isms + +# 됨 +claude --plugin-dir=/Users/이름/fork/design-isms +claude --plugin-dir="$HOME/fork/design-isms" +``` + +### `Marketplace file not found` + +매니페스트가 기본 브랜치(`main`)에 있어야 합니다. `marketplace add`는 기본 브랜치만 클론하므로, 작업 브랜치에만 있으면 실패합니다. + +### `This plugin uses a source type your Claude Code version does not support` + +`.claude-plugin/marketplace.json`의 `source`가 맨 URL 문자열이면 거부됩니다. 객체 형태를 쓰세요. + +```json +"source": { "source": "url", "url": "https://github.com/lidge-jun/design-isms.git" } +``` + +같은 저장소 안에서 자기 자신을 가리킬 때는 `"./"`도 유효합니다. + +### 스킬이 로드됐는데 트리거가 안 된다 + +`SKILL.md` frontmatter의 `description`에 있는 트리거 표현으로 물어보세요. 한국어 키워드도 포함되어 있습니다. 또는 `/style`, `/effect`처럼 직접 호출할 수 있습니다. + +--- + +## 9. 토큰 비용 + +| 항목 | 비용 | +|------|------| +| always-on (매 세션) | ~653 tok | +| style 호출 시 | ~1.7k tok | +| effect 호출 시 | ~1.5k tok | + +always-on은 두 스킬의 `description`만 계산된 값이며, 본문은 실제 호출될 때만 로드됩니다. diff --git a/plugin.json b/plugin.json new file mode 100644 index 0000000..c3fdcd1 --- /dev/null +++ b/plugin.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://antigravity.google/schemas/v1/plugin.json", + "name": "design-isms", + "version": "0.1.0", + "description": "49 design isms + 94 UI effects as queryable skills — palettes, font pairings, grids, motion recipes, and runnable HTML/CSS/JS snippets." +} diff --git a/skills/effect/SKILL.md b/skills/effect/SKILL.md new file mode 100644 index 0000000..db76032 --- /dev/null +++ b/skills/effect/SKILL.md @@ -0,0 +1,62 @@ +--- +name: effect +description: >- + Find frontend UI effects and interaction patterns and return runnable code. + Use when the user asks for a UI pattern or effect — e.g. "build a bottom + sheet", "scroll reveal effect code", "mobile modal pattern", "sticky CTA bar", + "hover card animation", "accessible drawer menu", "UI effect", "interaction + pattern", "P0 mobile patterns", "reduced-motion support", or the Korean + equivalents (바텀시트, 스크롤 리빌, 모달 패턴, 호버 카드, 드로어 메뉴, 접근성). + Reads 94 effect entries (family/category/priority/summary/accessibility/ + performance), runnable HTML/CSS/JS snippets, and long-form background and + usage docs straight from assets/data/ JSON. Narrows scope by P0/P1/P2/P3. +--- + +# effect — frontend UI patterns + +Query 94 frontend UI effects and return runnable code. The same dataset that +renders the site is the source of truth — read the JSON directly, never copy it. + +## Data location + +All paths are relative to the plugin root (`${CLAUDE_PLUGIN_ROOT}/assets/data/`). + +- `effects.json` — array of 94 effects. Fields: `id`, `name`, `nameKr`, `family`, + `category` (`Mobile`/`Desktop`/`Shared`), `priority` (`P0`/`P1`/`P2`/`P3`), + `summary`, `alsoCalled[]`, `bestFor[]`, `avoidWhen[]`, `implementation`, + `accessibility`, `performance`, `demo`, `guide`. +- `effects-snippets.json` — object; reach snippets via `snippets[id]`. Fields: + `html`, `css`, `js` (optional), `supports[]`, `reducedMotion`, `a11yNotes[]`, + `sourceRefs`. All 94 ids map 1:1 to effects.json. +- `effects-docs.json` — object keyed by effect id: `background`, `history`, + `useWhen`, `examples[]`, `anatomy`, `misuse`, `implementationNotes`, `researchRefs`. + +## Intent → Action + +| User intent | Read | Return | +|-------------|------|--------| +| "build X" / "X pattern" (match id, name, nameKr, alsoCalled) | `effects.json[id]` + `effects-snippets.json.snippets[id]` | summary + html + css + js (if present) + `supports[]` + `a11yNotes[]` + `reducedMotion` | +| "patterns worth using on mobile" / "P0 only" | `effects.json` filtered by `category`/`priority` | list of id + nameKr + summary | +| "when do I use X" / "background of X" | `effects-docs.json[id]` | `background` + `history` + `useWhen` + `misuse` | +| "I have this problem, what should I use" (keywords) | whole `effects.json` → match `summary`/`bestFor`/`alsoCalled` | candidates: id + nameKr + family + priority | +| "accessibility / performance check" | `effects.json[id].accessibility` + `.performance` + snippet `a11yNotes`/`reducedMotion` | checklist | +| "all scroll-related" / "group by family" | `effects.json` filtered by `family` | grouped list | +| "when not to use X" | `effects.json[id].avoidWhen` + docs `misuse` | caveats | + +## Matching rules + +- Ids are kebab-case (`bottom-sheet`, `scroll-reveal`, `sticky-cta`). +- When the user gives a Korean name (`nameKr`/`alsoCalled`) or a description, + keyword-match `summary`/`bestFor`/`alsoCalled` to resolve the real `id`. +- For scoped asks ("P0 only", "mobile"), filter on `priority`/`category` first, + then keyword-match. Recommend in P0 > P1 > P2 > P3 order. +- Loading all 94 is fine; parsing only the needed id is also fine. + +## Output guidance + +- Always fence code with its language (```html / ```css / ```js). +- Never drop `a11yNotes[]` and `reducedMotion` — accessibility is the core value + of this dataset. Include the `prefers-reduced-motion` media query in the code. +- Ship `bestFor`/`avoidWhen` alongside the code so the user can judge fit. +- Always cite the source (`effects.json[id]` / `effects-snippets.json.snippets[id]`). +- Reply in the user's language; keep code, field names, and ids verbatim. diff --git a/skills/style/SKILL.md b/skills/style/SKILL.md new file mode 100644 index 0000000..433a0b7 --- /dev/null +++ b/skills/style/SKILL.md @@ -0,0 +1,63 @@ +--- +name: style +description: >- + Query and recommend design isms (styles). Use when the user asks about design + styles, movements, or their concrete build tokens — e.g. "minimalism site", + "brutalism color palette", "art deco font pairing", "which design style fits + my project", "ism", "design movement", "color palette for X", "font pairing + for X", "grid system", "layout guide", or the Korean equivalents (미니멀리즘, + 브루탈리즘, 디자인 사조, 컬러 팔레트 추천, 폰트 페어링, 레이아웃 가이드). + Reads 49 ism entries (palettes, keywords, example sites, history) and their + per-ism dev guides (grid/columns/gutter/typography/fontPairing/motion easing + and duration) straight from assets/data/ JSON, returning ready-to-use tokens. +--- + +# style — design isms + +Query the visual and technical knowledge of 49 design isms. The same dataset that +renders the site is the source of truth — read the JSON directly, never copy it. + +## Data location + +All paths are relative to the plugin root (`${CLAUDE_PLUGIN_ROOT}/assets/data/`). + +- `isms.json` — array of 49 isms. Fields: `id`, `name`, `nameKr`, `tagline`, + `description`, `descriptionEn`, `history`, `keywords[]`, `palette[]` (hex), + `examples[]` ({name,url}, usually 10), `images[]`, `prompts[]`. +- `dev-guides.json` — object keyed by ism id (49 entries, 1:1 with isms.json): + - `layout`: `grid`, `columns`, `gutter`, `margins`, `spacing`, `symmetry`, `geometry` + - `typography`: `fontPairing`, `sizeHierarchy`, `lineHeight`, `letterSpacing`, `weightStrategy` + - `color`: `usage`, `bgFg`, `contrast` + - `motion`: `easing`, `duration`, `hover`, `scroll`, `transition` + - `dos[]`, `donts[]`, `implementation` (string) +- Companion catalogs: `color.json` (25 role-based palettes), `typography.json` + (20 font pairings), `layout.json` (25 layout patterns), `motion.json` (20 motion + recipes). Not keyed by ism id, but offer them when the user wants concrete patterns. + +## Intent → Action + +| User intent | Read | Return | +|-------------|------|--------| +| "what is X" / "tell me about X ism" (match id, name, nameKr) | `isms.json` entry | tagline + description + history + palette[] + keywords[] + examples[] | +| "X color palette" | `isms.json[id].palette` + `dev-guides.json[id].color` | hex values + `usage`/`bgFg`/`contrast` role assignment | +| "X font pairing" | `dev-guides.json[id].typography` (+ `typography.json`) | `fontPairing` + `sizeHierarchy` + `lineHeight`/`letterSpacing`/`weightStrategy` | +| "X grid / layout numbers" | `dev-guides.json[id].layout` | `grid`/`columns`/`gutter`/`margins`/`spacing`/`symmetry`/`geometry` | +| "X motion" | `dev-guides.json[id].motion` | `easing`/`duration`/`hover`/`scroll`/`transition` | +| "recommend a style for my project" (keywords, mood) | whole `isms.json` → match `keywords[]` + `tagline` | 3–5 candidates: id + nameKr + tagline + why it matches | +| "compare A vs B" | both entries side by side | palette / typography / layout / motion diff | +| "full build guide for X" | whole `dev-guides.json[id]` | layout + typography + color + motion + `dos`/`donts` + `implementation` | + +## Matching rules + +- Ids are lowercase kebab-case (`minimalism`, `brutalism`, `art-deco`). Match + `nameKr` for Korean queries and `name` for English ones, then use the real `id`. +- Loading all 49 at once is fine. For recommendations weight `keywords[]` and + `tagline` first; `description` and `history` are secondary signals. + +## Output guidance + +- Give hex values inline with their role (background / body / accent), no code fence. +- Present font pairings as real CSS `font-family` values. +- Give grid and spacing as drop-in CSS values (`24px`, `5vw`, `repeat(12, 1fr)`). +- Always cite the source (`isms.json[id]` / `dev-guides.json[id]`) in the response. +- Reply in the user's language; keep field names, hex values, and CSS verbatim.