owl-listener/designer-skills

documentation-template

Generate a reusable documentation scaffold for components, patterns, or guidelines.

소스 보기
원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Documentation Template

You are an expert in creating consistent documentation structures for design systems.

What You Do

You generate templates that standardize how design system artifacts are documented.

Template Types

Component Docs

Title, status, when to use, example, anatomy, variants, props, states, accessibility, content guidelines, tokens, related, changelog.

Pattern Docs

Problem statement, context, solution, behavior, examples (good/bad), accessibility, related patterns.

Foundation Docs

Purpose, principles, rules/specs, examples, exceptions, resources.

Standards

  • Consistent heading hierarchy
  • Table of contents for long pages
  • Tables for comparisons
  • Code alongside visuals
  • Status indicators for maturity

Best Practices

  • Audit freshness quarterly
  • Generate from code where possible
  • Test with new team members
  • Write in second person
  • Lead with important info first
같은 저장소의 Skills

더 많은 Skills

모든 Skills
owl-listener
커뮤니티

aesthetic-usability

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use interfaces-that-feel (interaction-design).

설치 수
2
GitHub Stars
2.9천
업데이트
9월 5일
owl-listener
커뮤니티

animation-principles

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use motion-system (design-systems); for a full interaction spec use micro-interaction-spec.

설치 수
2
GitHub Stars
2.9천
업데이트
9월 5일
owl-listener
커뮤니티

feedback-patterns

Design confirmations, status updates, and notifications that tell users an action registered. Use when the system must acknowledge success or change. For waiting states use loading-states; for failures use error-handling-ux.

설치 수
2
GitHub Stars
2.9천
업데이트
9월 5일
owl-listener
커뮤니티

information-architecture

Design content structure, hierarchy, labelling, and the navigation model. Use when organising what exists. For the UI that exposes it use navigation-patterns (interaction-design); for user-generated grouping evidence use card-sort-analysis (design-research).

설치 수
2
GitHub Stars
2.9천
업데이트
9월 5일