design-system

Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.

설치로 이동 파일 검토

저장소: anthropics/knowledge-work-plugins
최근 소스 활동: 2026년 3월 13일 15:57
감지된 SKILL.md 언어: 영어
스타: 29,826
포크: 3,372

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/design-system.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-system

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

SKILL.md

소스 지침 · 읽기 전용 미리보기

name: design-system
description: Audit, document, or extend your design system. Use when checking for naming inconsistencies or hardcoded values across components, writing documentation for a component's variants, states, and accessibility notes, or designing a new pattern that fits the existing system.
argument-hint: [audit | document | extend] <component or system>

# /design-system > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Manage your design system — audit for consistency, document components, or design new patterns. ## Usage ``` /design-system audit # Full system audit /design-system document [component] # Document a component /design-system extend [pattern] # Design a new component or pattern ``` ## Components of a Design System ### Design Tokens Atomic values that define the visual language: - Colors (brand, semantic, neutral) - Typography (scale, weights, line heights) - Spacing (scale, component padding) - Borders (radius, width) - Shadows (elevation levels) - Motion (durations, easings) ### Components Reusable UI elements with defined: - Variants (primary, secondary, ghost) - States (default, hover, active, disabled, loading, error) - Sizes (sm, md, lg) - Behavior (interactions, animations) - Accessibility (ARIA, keyboard) ### Patterns Common UI solutions combining components: - Forms (input groups, validation, submission) - Navigation (sidebar, tabs, breadcrumbs) - Data display (tables, cards, lists) - Feedback (toasts, modals, inline messages) ## Principles 1. **Consistency over creativity** — The system exists so teams don't reinvent the wheel 2. **Flexibility within constraints** — Components should be composable, not rigid 3. **Document everything** — If it's not documented, it doesn't exist 4. **Version and migrate** — Breaking changes need migration paths ## Output — Audit ```markdown ## Design System Audit ### Summary **Components reviewed:** [X] | **Issues found:** [X] | **Score:** [X/100] ### Naming Consistency | Issue | Components | Recommendation | |-------|------------|----------------| | [Inconsistent naming] | [List] | [Standard to adopt] | ### Token Coverage | Category | Defined | Hardcoded Values Found | |----------|---------|----------------------| | Colors | [X] | [X] instances of hardcoded hex | | Spacing | [X] | [X] instances of arbitrary values | | Typography | [X] | [X] instances of custom fonts/sizes | ### Component Completeness | Component | States | Variants | Docs | Score | |-----------|--------|----------|------|-------| | Button | ✅ | ✅ | ⚠️ | 8/10 | | Input | ✅ | ⚠️ | ❌ | 5/10 | ### Priority Actions 1. [Most impactful improvement] 2. [Second priority] 3. [Third priority] ``` ## Output — Document ```markdown ## Component: [Name] ### Description [What this component is and when to use it] ### Variants | Variant | Use When | |---------|----------| | [Primary] | [Main actions] | | [Secondary] | [Supporting actions] | ### Props / Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | [prop] | [type] | [default] | [description] | ### States | State | Visual | Behavior | |-------|--------|----------| | Default | [description] | — | | Hover | [description] | [interaction] | | Active | [description] | [interaction] | | Disabled | [description] | Non-interactive | | Loading | [description] | [animation] | ### Accessibility - **Role**: [ARIA role] - **Keyboard**: [Tab, Enter, Escape behavior] - **Screen reader**: [Announced as...] ### Do's and Don'ts | ✅ Do | ❌ Don't | |------|---------| | [Best practice] | [Anti-pattern] | ### Code Example [Framework-appropriate code snippet] ``` ## Output — Extend ```markdown ## New Component: [Name] ### Problem [What user need or gap this component addresses] ### Existing Patterns | Related Component | Similarity | Why It's Not Enough | |-------------------|-----------|---------------------| | [Component] | [What's shared] | [What's missing] | ### Proposed Design #### API / Props | Property | Type | Default | Description | |----------|------|---------|-------------| | [prop] | [type] | [default] | [description] | #### Variants | Variant | Use When | Visual | |---------|----------|--------| | [Variant] | [Scenario] | [Description] | #### States | State | Behavior | Notes | |-------|----------|-------| | Default | [Description] | — | | Hover | [Description] | [Interaction] | | Disabled | [Description] | Non-interactive | | Loading | [Description] | [Animation] | #### Tokens Used - Colors: [Which tokens] - Spacing: [Which tokens] - Typography: [Which tokens] ### Accessibility - **Role**: [ARIA role] - **Keyboard**: [Expected interactions] - **Screen reader**: [Announced as...] ### Open Questions - [Decision that needs design review] - [Edge case to resolve] ``` ## If Connectors Available If **~~design tool** is connected: - Audit components directly in Figma — check naming, variants, and token usage - Pull component properties and layer structure for documentation If **~~knowledge base** is connected: - Search for existing component documentation and usage guidelines - Publish updated documentation to your wiki ## Tips 1. **Start with an audit** — Know where you are before deciding where to go. 2. **Document as you build** — It's easier to document a component while designing it. 3. **Prioritize coverage over perfection** — 80% of components documented beats 100% of 10 components.

GitHub에서 보기

검색으로 돌아가기 설치로 돌아가기

ad-manager

The ads consultant that becomes an ads agent. Reads paid-ad performance natively through the TikTok Ads connector, or via a build-connector Zapier connection for other ad platforms, explains in plain English what is working and what is burning money, recommends budget, targeting, and creative changes with the dollar impact of each, drafts new ad copy in the owner's voice plus Canva creative briefs, and — only after an explicit yes — executes the approved changes in the ad account. Works from exported CSV reports when nothing is connected, the normal starting point. Use this whenever the owner talks about ads or ad spend at all, including "are my ads working," "what's my ROI on ads," "I'm spending money on Facebook and I don't know what I'm getting," "should I turn this campaign off," "my cost per lead is going up," "write me a new ad," "who should I be targeting," or "the ad guy quit."

2026-09-15

ap-processor

Works the bill pile end to end: reads bills and vendor statements out of the AP inbox or from uploaded PDFs and phone photos, pulls out vendor, amount, due date, and line detail, codes each one to the right account and job, matches it against the purchase order and the receiving ticket, then stages the entries and a proposed payment run in QuickBooks, Xero, or NetSuite for the owner to approve in one pass. Nothing is entered and nothing is paid without an explicit yes. Reach for this whenever bills, vendor invoices, or paying people comes up — including "what do I owe," "the bills are piling up," "pull the invoices out of my email and into QuickBooks," "code these for me," "who needs to get paid this week," "did we get billed twice," or when the owner forwards a supplier invoice with no message at all. Use it before cash-flow-snapshot or month-end-prep so those run on real payables instead of a guess.

2026-09-15

brand-style

Sets and updates the owner's brand look and output preferences, which every page and document the plugin produces then follows automatically. Captures the brand from a pasted website link or a plain-words description — never a hex code, color picker, or upload — previews it on a sample page, asks how they want their outputs delivered (visual artifacts, Word docs, markdown, Notion pages, Canva Docs, or best-for-the-skill), and saves both to the business profile. Runs inside smb-onboard on first setup and stands alone forever after. Use when the owner says "update my brand," "we rebranded," "change my colors," "make the reports match our new look," "change how you give me reports," "I want Word docs instead," or anything about the look or format of what the plugin hands them.

2026-09-15

이 저장소의 모든 Skills 보기

design-system

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills