본문으로 건너뛰기
cccskills
무료GitHub에 공개

ui-design-system

Use when creating or maintaining UI design systems, design tokens, component documentation, responsive calculations, quality checks, or design-dev handoff materials.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook
설치 방법 보기

포함된 파일(2)

  • SKILL.md1.3 KB
  • scripts/design_token_generator.py5.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

UI Design System Toolkit

Professional toolkit for creating and maintaining scalable design systems.

Core Capabilities

  • Design token generation (colors, typography, spacing)
  • Component system architecture
  • Responsive design calculations
  • Accessibility compliance
  • Developer handoff documentation

Key Scripts

design_token_generator.py

Generates complete design system tokens from brand colors.

Usage: python scripts/design_token_generator.py [brand_color] [style] [format]

  • Styles: modern, classic, playful
  • Formats: json, css, scss

Features:

  • Complete color palette generation
  • Modular typography scale
  • 8pt spacing grid system
  • Shadow and animation tokens
  • Responsive breakpoints
  • Multiple export formats

Verification

Before reporting completion, validate generated tokens or handoff artifacts against the requested brand color, output format, accessibility constraints, and the target implementation surface. For script usage, run the command with representative input and inspect the emitted JSON/CSS/SCSS for valid syntax and preserved brand values.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

agentsmd-optimize

무료

Audit and organize AI coding-agent instructions, including AGENTS.md, CLAUDE.md, skills, and agent definitions. Use when the user asks to diagnose conflicting instructions, excessive approval pauses, broad skill triggers, duplicate guidance, or broken instruction references, or to clean up that instruction set. Ordinary code review, Markdown editing, or application debugging alone does not trigger this workflow. Inspection stays read-only; apply changes when authorized.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

agentsmd-scaffold

무료

Generate or update repository-specific AGENTS.md instruction files from real repo evidence. Use when asked to create, design, scaffold, split, or improve root or scoped AGENTS.md files for Codex/Claude/agent workflows, especially when a repo needs directory-specific rules, validation commands, generated-file boundaries, or a short agent onboarding router.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

api-design

무료

REST/GraphQL/gRPC API design best practices. Use when designing APIs, defining contracts, handling versioning. Covers OpenAPI 3.2, GraphQL Federation, gRPC streaming.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

app-ui-design

무료

Mobile app UI design expert for iOS and Android. Use when designing app interfaces, creating design systems, ensuring accessibility, or following platform guidelines. Covers Material Design 3, Human Interface Guidelines, color theory, typography, and 2025 trends.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

app-user-story-qa

무료

End-to-end app feature inventory and user-story testing workflow with a canonical tracker. Use when the user asks to audit every feature, derive expected behavior from code, test user journeys, or explicitly fix and retest documented UX or logistical defects.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

architecture-foundation

무료

Design architecture foundations before implementation. Use when asked to design or refactor architecture, choose Rust/Go crate, package, module, runtime, workflow, or service boundaries, compare mature project architecture, prevent stacked one-off PRs, audit migration debt in existing repos, or produce a spec before coding.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

majiayu000/spellbook2882026년 10월 20일 업데이트

majiayu000의 스킬 모두 보기

이 스킬의 문제 신고