원클릭으로 Manus에서 모든 스킬 실행

design-system

스타85

포크9

업데이트2026년 7월 7일 18:35

Apply the docs.plus design system (tokens, themes, elevation species, component state recipes) to any UI work. Use when the user mentions theme, colors, dark/light mode, borders, shadows, radius, styling, polish, cohesion, a new component/surface, or any visual change in apps/webapp.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

docs-plus

docs-plus/docs.plus

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Design System

Working protocol for visual changes in apps/webapp. The source of truth is .cursor/docs/design-system.md — tokens, themes, elevation species, state language, and the per-component catalog. AGENTS.md owns behavioral invariants (§UI And Theme, §Pad Workspace Surfaces, §Floating Surfaces And Modal Scrims, §Motion System).

Protocol

Read the relevant doc sections first: tokens/themes for color work; elevation species for any new or moved surface; the component's catalog row before editing its frame or states.
Classify before styling. Every surface is one species: docked (L0), anchored (L1), modal (L2), tooltip, card, control, sheet — reuse its canonical export or recipe verbatim. If no species fits, extend the doc's elevation table first, then implement.
Change color at the token layer. New colors/effects become :root vars (+ both dark overrides) in globals.scss, exposed via @theme aliases when Tailwind utilities are needed. Components never carry hex or raw palette classes (brand allowlist and media-anchored black/white overlays excepted — see the doc's Color policy).
States are recipes, not improvisation: hover base-200, active is-active (primary-10% + primary ink), context-menu-active primary-15%/8%, focus focus-visible:ring-2 ring-primary, unread error badge, disabled /40 ink. Cover both layers — desktop and mobile variants of the same component share tokens, not necessarily geometry.
Keep lockstep surfaces in sync in the same change: skeleton mirrors (SlugPageLoader / ChatroomComposerSkeleton copy the real frame classes verbatim), _document.tsx theme-color meta, third-party CSS-var themings (em-emoji-picker, .documentKeywordInput), and the JS motion mirror (utils/motion.ts).
Verify in the browser — light + dark (+ dark-HC for pad/TOC), desktop ≥1280px and mobile — never typecheck alone. Confirm the webapp dev port before driving it (not always 3000).
Close the loop: update the doc's affected rows (and AGENTS.md when doctrine moved) in the same change; after substantive design-system work, run the memory updater.

Hard guardrails

No new shadow/radius values; no shadows on docked light surfaces; scrims are black tokens only.
No *Classes.ts/*Styles.ts string modules; no second floating-surface language.
No live regions inside .ProseMirror; overlay species and motion tiers come from AGENTS.md.
Never next build against a live dev server (shared .next) — tsc --noEmit + the running app.

이 저장소의 다른 Skills

같은 저장소

ask-matt

docs-plus/docs.plus

Ask which skill or flow fits your situation. A router over the skills in this repo.

2026-07-1485

codebase-design

docs-plus/docs.plus

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

2026-07-1485

improve-codebase-architecture

docs-plus/docs.plus

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

2026-07-1485

resolving-merge-conflicts

docs-plus/docs.plus

Use when you need to resolve an in-progress git merge/rebase conflict.

2026-07-1485

tdd

docs-plus/docs.plus

Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.

2026-07-1485

teach

docs-plus/docs.plus

Teach the user a new skill or concept, within this workspace.

2026-07-1485

name	design-system
description	Apply the docs.plus design system (tokens, themes, elevation species, component state recipes) to any UI work. Use when the user mentions theme, colors, dark/light mode, borders, shadows, radius, styling, polish, cohesion, a new component/surface, or any visual change in apps/webapp.

Design System

Protocol

Read the relevant doc sections first: tokens/themes for color work; elevation species for any new or moved surface; the component's catalog row before editing its frame or states.
Classify before styling. Every surface is one species: docked (L0), anchored (L1), modal (L2), tooltip, card, control, sheet — reuse its canonical export or recipe verbatim. If no species fits, extend the doc's elevation table first, then implement.
Change color at the token layer. New colors/effects become :root vars (+ both dark overrides) in globals.scss, exposed via @theme aliases when Tailwind utilities are needed. Components never carry hex or raw palette classes (brand allowlist and media-anchored black/white overlays excepted — see the doc's Color policy).
States are recipes, not improvisation: hover base-200, active is-active (primary-10% + primary ink), context-menu-active primary-15%/8%, focus focus-visible:ring-2 ring-primary, unread error badge, disabled /40 ink. Cover both layers — desktop and mobile variants of the same component share tokens, not necessarily geometry.
Keep lockstep surfaces in sync in the same change: skeleton mirrors (SlugPageLoader / ChatroomComposerSkeleton copy the real frame classes verbatim), _document.tsx theme-color meta, third-party CSS-var themings (em-emoji-picker, .documentKeywordInput), and the JS motion mirror (utils/motion.ts).
Verify in the browser — light + dark (+ dark-HC for pad/TOC), desktop ≥1280px and mobile — never typecheck alone. Confirm the webapp dev port before driving it (not always 3000).
Close the loop: update the doc's affected rows (and AGENTS.md when doctrine moved) in the same change; after substantive design-system work, run the memory updater.

Hard guardrails

No new shadow/radius values; no shadows on docked light surfaces; scrims are black tokens only.
No *Classes.ts/*Styles.ts string modules; no second floating-surface language.
No live regions inside .ProseMirror; overlay species and motion tiers come from AGENTS.md.
Never next build against a live dev server (shared .next) — tsc --noEmit + the running app.