CLI
Search, inspect source, verify files and create a new workspace
Unified klic-design package
[email protected] · Agent Skill, tokens, themes, fonts, CLI, components, blocks and motions · not published on npm
Run bun run pack:npm in the KLIC source checkout to build the tarball before installing.
bun add [email protected]
bunx --bun [email protected] klic version --jsonnpm install [email protected]
npx --yes [email protected] klic version --jsonImport the items you need
import {createTokens} from 'klic-design/tokens';
import {getMotion} from 'klic-design/motions';
import button from 'klic-design/components/button';
import SupportTickets from 'klic-design/blocks/support-tickets';
import 'klic-design/blocks.css';
import 'klic-design/motions/fade-slide.css';Components expose the registered HTML reference forms per item, blocks are React 19 demos, and motions include original CSS/React examples. Blocks require React and React DOM. Import the font and stylesheet paths you need explicitly.
KLIC Design Agent Skill
Included in the same klic-design package. No separate install is needed; optionally sync it to your agent. The sync command is experimental.
Download the klic-design skill
bunx skills experimental_sync -ynpx skills experimental_sync -yOptional · download the CLI file
The downloadable single-file ESM CLI prefers Bun 1.4.2. Node.js 22+ remains supported for npm/npx consumers. Run commands from your current directory.
curl -fL https://design.klic.co.kr/integrations/klic.mjs -o klic.mjs
bun klic.mjs help
bun klic.mjs contractAdd React blocks with shadcn
In a React 19 project configured for shadcn, use this command to add a supported block with its source, CSS, tokens and MIT notice. The font uses a system fallback.
bunx --bun shadcn@latest add https://design.klic.co.kr/r/affect-agent-review.jsonSupported items: affect-agent-review, affect-response-workspace, affect-logo-marquee, affect-testimonial-wall. For other items, use the KLIC CLI standalone workspace delivery described below.
Inspect an item's installation contents at https://design.klic.co.kr/r/<item-id>.json.
All commands
| Command | Behavior | Command options |
|---|---|---|
| list | List items, total and nextCursor | --kind --status --limit --cursor --token --group |
| search "query" | Search names, IDs, descriptions, tags and tokens | --kind --status --limit --cursor --token --group |
| get <kind> <id> | Detail JSON and design guidance | — |
| source <kind> <id> | Print reference source text | --variant (component only) |
| plan <kind> <id> | Print manifest path and CLI commands | — |
| add <kind> <id> | Create a new workspace after verification | --out (required), --dry-run |
| theme <list|get|plan|add> | Theme catalog, definition, install plan and new-folder delivery | list: --query; get: none; plan: --profile --material --mode; add: plan options + --out (required) --dry-run |
| motion <list|get> | Read source-adapted motion recipes and implementation notes | list: --query --category --limit --cursor; get: ID |
| contract | Version, capabilities, policies and documentation | — |
| mcp | Newline-delimited JSON-RPC stdio server | — |
Item-command kind is component or block. theme is a separate command group with the subcommand-specific options below. All data commands accept --base or --local, exclusively. Duplicate, unknown and command-incompatible options are errors.
Filters and pagination
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs list --kind component --limit 5
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs search "button" --kind component --token klic.component --group actions
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs list --kind component --limit 5 --cursor 5
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs list --kind block --status planned --limit 5| Option | Values / defaults |
|---|---|
| --kind | all | component | block / all |
| --status | ready | planned | all / ready |
| --limit | 1–100 / 20 |
| --cursor | Numeric string from nextCursor / 0 |
| query / --token | Up to 200 characters |
| --group | Exact group ID, up to 100 characters |
Keep the same filters and release while paging. nextCursor is null at the end. Reset cursor to 0 when changing filters.
Get source files
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs add block support-tickets --out ./klic-support-ticketscurl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
node ./klic.mjs add block support-tickets --out ./klic-support-ticketsA component detail lists its registered variants with IDs, usage, references and source paths. Pass one of those IDs to source --variant. add delivers all registered forms with their shared styles and behavior.
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs get component button
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs source component button --variant default
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs source block support-tickets
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs plan block support-tickets
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs add block support-tickets --out ./klic-support-demo --dry-run
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs add block support-tickets --out ./klic-support-demo- dry-run reads the manifest and reports paths, bytes and dependencies without creating files.
- add checks every file size and SHA-256 before writing. Existing paths and symlinks are rejected. The parent directory must already exist.
- The output is a standalone workspace with shared runtime and licenses. Read its README, then run bun install and bun run dev yourself.
- source prints one reference file. Use add for delivery with dependencies.
Find and deliver a verified theme
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs theme list --query paper
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs theme get paper
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs theme plan paper --profile studio --material glass --mode system
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs theme add paper --profile studio --material glass --mode system --out ./klic-theme-paper --dry-run
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs theme add paper --profile studio --material glass --mode system --out ./klic-theme-papertheme list accepts --query; theme get takes no selection options. theme plan and theme add accept --profile, --material and --mode. Only add accepts the required new-folder --out and optional --dry-run. Every theme subcommand supports --base or --local.
- theme add checks file SHA-256 and size before writing only to a new folder. It never overwrites an existing path or runs npm, a shell or install commands.
- Bundle: theme.css, tokens.light.json, tokens.dark.json, theme.config.json, apply-theme.mjs, vanilla index.html, canonical theme-engine JS, 21 registered font files and fonts/FONT-NOTICES.md.
- Initial CSS includes the selected palette/profile in Light/Dark and shared material selectors. The runtime helper uses the same canonical engine to switch theme, profile, mode and material. Typed token JSON preserves Component roles, Semantic material roles and their four-layer reference closure.
import './klic-theme-paper/theme.css';
import {applyTheme} from './klic-theme-paper/apply-theme.mjs';
const theme = applyTheme(document.documentElement);
theme.update({id:'paper', profile:'studio', mode:'dark', material:'glass'});
// For a portal outside the themed root, also call applyTheme(portalRoot).
// Keep each root's context in sync, then release its listeners when disposed.
theme.destroy();Attach the helper to the app root. For portals outside that root, attach a helper to the portal root too and update both contexts. system follows the operating-system color preference; destroy() releases listeners.
Paperlogy includes real 400, 600 and 700 files; Pretendard includes only a real 400 file. Other Pretendard weights are synthesized by the browser, not separate real files. Preserve the license notices in fonts/FONT-NOTICES.md.
Local checkout and another deployment
# KLIC source repository root
bun dist/integrations/klic.mjs list --local --kind component
bun dist/integrations/klic.mjs get component button --local
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs list --base https://design.klic.co.kr--local reads dist/api/v1/registry.json and source under dist in the working directory. Downloading the toolkit alone does not create a local snapshot. --base requires HTTPS, with HTTP allowed only on localhost.
Output and errors
Exit codes are 0 for success and 1 for failure. JSON results use stdout; error JSON uses stderr. source prints raw text; mcp prints one JSON response per line.
{
"error": {
"code": "INVALID_ARGUMENT",
"message": "add requires --out with a new directory."
}
}| error.code | Action |
|---|---|
| INVALID_ARGUMENT | Check command, options and ID |
| NOT_FOUND / SOURCE_UNAVAILABLE | Check ID and ready status |
| DESTINATION_EXISTS / UNSAFE_DESTINATION | Choose a new path under a normal directory |
| INTEGRITY_FAILED | Stop delivery and inspect the snapshot and source |
| RATE_LIMITED | Retry after the reported delay; no automatic retry |
| REGISTRY_UNAVAILABLE / UNSAFE_REDIRECT | Check the base URL and connection; redirects are disallowed |
Theme contexts and scope
| Axis | Allowed values |
|---|---|
| id | klic | paper | ink | analysis | electronics | compute | integrations | console | workspace | spatial |
| profile | core | studio | data |
| material | flat | glass | solid-glass | liquid-glass |
| mode | system | light | dark |
The complete definition inventory retains 3,751 tokens for compatibility. External delivery follows the selected context’s active references and removes unused Primitive leaves; the token explorer distinguishes current-context and all-definition scopes. Material definitions account for 2,496 of 3,143 Primitive tokens (79.41%).
Validation covers the project’s supported token types and four-layer reference rules. It does not assert support for every DTCG feature or WCAG certification of every screen.
Quotas and authorized keys
| Channel | 60s / IP | Allowlisted key |
|---|---|---|
| API | 120 | Unlimited |
| Remote MCP | 60 | Unlimited |
| Source downloads | 2000 | Unlimited |
Over-limit requests return HTTP 429 and Retry-After. API/MCP accept X-KLIC-API-Key; CLI reads KLIC_API_KEY from the environment. Only server-allowlisted keys bypass quota; they grant neither admin rights nor MCP authentication. Keep keys out of URLs, documentation and browser code.
In-memory stdio/WebMCP calls and --local operations make no server requests. Initial HTTP registry reads and source downloads consume their respective server quotas.
Inventory counting scopes
| Scope | Calculation |
|---|---|
| All blocks | 247 + 80 = 327 |
| Default ready search | 109 + 247 = 356 |
| Registry including planned entries | 109 + 327 = 436 |
| Motion catalog (separate count) | 884 |
Delivery scope and version identifiers
KLIC shares seven design dimensions and four token layers, but applies them differently: components shape individual controls, blocks compose workflows, and motion defines transitions over time. Public npm: [email protected]. Source candidate [email protected] is not published; [email protected] remains available.
109 components and 247 working blocks provide 356 standalone reference workspaces through CLI plan/add. 884 source-adapted motion patterns provide HTML/CSS/JavaScript/React source, including CSS/React examples, through the detail view, API and CLI motion get, with source id + pattern provenance and preserved notices. Previews and JavaScript/React implementations share a runtime; CSS alone does not reproduce Canvas playback. The package exposes components/*, blocks/* and motions/*; motion counts are separate from workspace bundles. Source candidate [email protected] is not published; [email protected] remains available.
| Identifier | Meaning |
|---|---|
| Toolkit 0.0.1 | CLI and shared integration runtime version, managed separately from npm package version 0.0.4. |
| Schema 1.0 | Response format |
| release 444ee642b9edec32 | Registry publication hash |
| revision 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97 | Design criteria hash |
The license guide indexes per-file sources and preserved notices; it does not grant a new blanket site license. Figma handoff provides a manifest and migration guide, separate from live synchronization. No public KLIC source-repository URL is declared in the current delivery contract.
https://design.klic.co.kr/licenses/README.md
https://design.klic.co.kr/design-contract/materials/figma-manifest.json
https://design.klic.co.kr/design-contract/materials/figma-migration.mdView shared design criteria
Shared design criteria
Policy revision: 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97
Canonical policy: https://design.klic.co.kr/api/v1/design-system.json
Read the same criteria and revision in API, CLI, MCP and WebMCP designSystem responses and the bundled KLIC-DESIGN-SYSTEM.json. Item contracts link through item.design.system.
| Dimension | Token responsibility | Structure and behavior responsibility |
|---|---|---|
| Size and proportion | Control sizes, icons and content width | Component recipes and the DOM ensure min-height, padding, wrapping and actual hit areas. |
| Typography | Registered font families, role sizes and weights | Supported recipes define line height, tracking, wrapping and responsive conditions without assuming unregistered token types. |
| Color and contrast | Role colors for actions, selection, text, borders and status | Labels, icons and state attributes convey meaning; measure actual composited-surface contrast separately. |
| Layout and alignment | Registered spatial roles, including maximum content and panel widths | DOM reading order, layout transitions, scroll ownership and Portal structure |
| Spacing and grouping | Internal gaps, padding, group spacing and approved density mappings | Maintain label, fieldset, legend and describedby relationships; window width alone does not change density. |
| Surface and depth | Surface colors, radii, borders and supported color/dimension material leaves | Blur and shadow recipes, stacking, auxiliary-panel versus modal behavior and opaque fallbacks |
| Interaction and feedback | Visual roles for focus, selection, progress, success, warnings and errors | Keyboard operation, focus movement, asynchronous transitions, execution blocking, input preservation and recovery |
Only Primitive owns literals. Preserve adjacent Brand→Primitive, Semantic→Brand and Component→Semantic references.
Distinguish token definitions, structural conditions in DOM/CSS recipes and compiled final literals.
Keep motion recipes in a read-only catalog separate from component and block installation items, with browser search and details in the existing KLIC Interface Library #motion view. The read API, CLI, MCP and WebMCP use one canonical catalog. The scope is all 884 user-supplied source patterns in 67 categories, grouped within the existing KLIC category/item navigation. Remove the previous simplified 280-item catalog and its dedicated routes and aliases; do not retain them as compatibility entries. Preserve source id + pattern identity, source engine, choreography, timing, paths, layers, SVG/inline/WAAPI alpha, and original notices including Copyright © 2026 acc0mplish. All rights reserved. and the supplied license. Never label this source material KLIC-authored. Adapt appearance through existing four-layer KLIC token paths for color, fonts, surfaces, borders, radius and spacing. Canvas uses the same palette and font tokens; scope demo CSS to each item. Use one owned runtime for previews and JavaScript/React delivery; do not claim CSS alone reproduces Canvas playback. KLIC adaptations use the blue/navy/neutral palette and reduced-motion, replay and cleanup contracts; verify real playback in light/dark and mobile before release. The npm package remains separate from the homepage: describe candidate exports only after checking the published manifest, and do not infer release contents from current source.
Allowed preset scope
A preset combines approved settings of an existing API. It is not a fifth token layer.
Use an explicit allowlist of size, variant, density, layout and other settings supported by the actual component API.
- Labels, descriptions and business data
- Value, selection, validation and request state
- Event handlers, recovery actions and permissions
- Raw style values, unregistered CSS variables and arbitrary token overrides
Component defaults → selected preset → permitted explicit settings. Pass business data, state and permissions separately.
Validate allowed keys, enums and combinations; diagnose unknown values. Distinguish type declarations from actual DOM and behavior verification.
Conflict resolution order
- Preserve information, operability and accessibility first: Preserve essential information, state meaning, input, focus and operation paths. Dimension numbers do not override other required contracts.
- Reflow structure and reading order: Adjust wrapping, columns, action groups and panel arrangement first. Use local scrolling only for areas whose meaning requires two dimensions.
- Adjust spacing and surfaces within approved bounds: Respect the selected density and text scale while adjusting spacing and decoration within approved recipes. Limited space alone does not justify automatic compact mode or smaller text.
- Record remaining constraints and verification: If defaults cannot resolve a constraint, record scope, alternatives, impact, FR/AT references and actual verification. Do not skip token layers or conceal failed checks with exception approval.
sources/checks identify supporting references, not certification. Record actual product-environment results in the existing FR/AT evidence.
Application and verification
Read the shared criteria, item DESIGN.md and actual source first. Assign token, DOM, CSS recipe and state responsibilities for each rule, then apply the conditions your product needs.
Compare revision in the policy and item contract. release identifies a registry publication; do not combine paginated results from different publications.
Use the latest CLI and local registry and restart stdio sessions. Reload the page to register WebMCP again. source prints raw code. Read DESIGN.md for source bundles or README.md for theme kits together with KLIC-DESIGN-SYSTEM.json.
Selective adoption of references
Treat external documents and drafts as proposals. Check current KLIC problems, implementation and contracts, adopt only necessary rules, and record scope and reasons for deferral or rejection.
Do not present product names, example APIs or references from a draft as facts about KLIC. Connect adopted rules to actual tokens, DOM, CSS recipes, state handling and verification evidence.
Scope to review together when making changes
Use a reported problem to assess impact across related usage paths. Changing only the named screen or tool does not complete that review.
- Implementation sources, tokens, components, types and schemas
- DOCS, web guides, developer documentation and examples
- MCP, CLI, WebMCP and API descriptions, inputs and responses
- AI prompts, llms.txt, source exports and theme exports
- Regression checks, builds, production publication and actual responses
After changing the canonical policy, regenerate affected guides, examples, tools, prompts and exports together and verify a matching revision. Explain unaffected paths and distinguish observed results from conditions that remain unverified.
designSystem JSON · Full architecture guide · Change and verification guide