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

component-spec

Write a component spec for engineering handoff. Use when the user says "component spec", "design handoff", "spec this component", "document this component for engineering", "Figma handoff", "component documentation", "how do I hand this off", or needs to communicate a UI component design to developers - even if they don't explicitly say "component spec".

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

qa-aman/claude-skills
연동 도구Figma
설치 방법 보기

포함된 파일(1)

  • SKILL.md4.3 KB

SKILL.md(원문)

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

Overview

Based on "Atomic Design" by Brad Frost. Frost's atomic design methodology organizes UI into: atoms (basic elements), molecules (groups of atoms), organisms (groups of molecules), templates (page structures), and pages (specific instances). A component spec documents where a component sits in this hierarchy, what it's made of, how it behaves, and how it should be used.

The goal of a component spec is to make the engineering handoff self-contained. A developer should be able to build the component correctly without asking questions.

Workflow

Step 1: Classify the component (Atomic Design)

LevelWhat it isExamples
AtomSmallest UI unit, not decomposableButton, input, icon, label
Molecule2-3 atoms working togetherSearch field (input + button), form field (label + input + error)
OrganismComplex UI sectionNavigation bar, product card, comment thread
TemplatePage-level layoutDashboard layout, article layout

Knowing the level sets expectations for complexity and reusability.

Step 2: Write the component header

Component: [Name]
Atomic level: [Atom / Molecule / Organism]
Status: [Draft / In Review / Production]
Designer: [your name]
Figma link: [URL]

Step 3: Document variants and states

List every variant (different configurations of the same component) and every state:

Variants:

  • Size variants: small, medium, large
  • Style variants: primary, secondary, ghost, destructive
  • Content variants: with icon, without icon, with badge

States:

  • Default
  • Hover
  • Active/pressed
  • Focus (keyboard navigation)
  • Disabled
  • Loading
  • Error
  • Success

Provide a Figma frame for every variant x state combination.

Step 4: Document properties (props)

List every configurable property:

PropTypeRequiredDefaultDescription
labelstringYes-Button text
variantenumNoprimaryVisual style
sizeenumNomediumSize variant
disabledbooleanNofalseDisabled state
onClickfunctionYes-Click handler

Step 5: Document behavior

  • What happens on click / tap?
  • Are there animations or transitions? (duration, easing)
  • What are the keyboard interactions? (Enter, Space, Escape, Tab)
  • What happens at min/max content lengths?
  • What happens when text is truncated?

Step 6: Document accessibility requirements

  • ARIA role and attributes
  • Keyboard navigation behavior
  • Screen reader announcement
  • Focus management
  • Color contrast requirements (WCAG AA minimum)

Step 7: Document usage rules

When should this component be used? When should it not be used?

Use when: [specific contexts]
Don't use when: [anti-use-cases - what to use instead]

Anti-Patterns

1. Spec without states Bad: One static mockup handed off. Good: Every state documented - default, hover, focus, disabled, error, loading.

2. No accessibility section Bad: "Engineering will figure it out." Good: ARIA role, keyboard behavior, and contrast requirements specified by design, not guessed by engineering.

3. Props undocumented Bad: Figma file with no prop documentation. Good: Every configurable property listed with type, required status, and description.

4. Usage rules missing Bad: Component documented without guidance on when to use vs. not use it. Good: Explicit usage rules prevent misuse and inconsistency across [your product].

Quality Checklist

  • Atomic level classified (atom/molecule/organism)
  • Figma link to all variants and states
  • All variants documented
  • All states documented (default, hover, focus, disabled, error, loading)
  • Props table complete with types, required flag, defaults
  • Behavior documented (interactions, animations, edge cases)
  • Accessibility: ARIA, keyboard, contrast documented
  • Usage rules: when to use AND when not to use

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

11-star-framework

무료

Rate any product, feature, or experience on the 11-star scale (Brian Chesky's Airbnb thought experiment). Use when user says "rate this experience", "11-star", "star rating", "experience audit", "how good is this", "experience rating", "product audit", "quality assessment", or wants to evaluate product quality and identify improvement paths. Also trigger when user wants to benchmark a feature, assess where a product stands, or map out what "great" looks like - even if they don't explicitly say "11-star".

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

qa-aman/claude-skills212026년 10월 13일 업데이트

ab-copy-writer

무료

Generate A/B copy variants grounded in Eugene Schwartz's awareness and market-sophistication stages and John Caples' tested-headline discipline. Every variant declares its angle, the awareness stage it targets, and a falsifiable hypothesis, and the skill recommends which pair to test first and what delta counts as signal. Use when the user says "A/B test this", "write variants", "give me options", "test different angles", "copy variants", "ab copy", "test this headline", "multiple versions", "which version is better", or wants to test copy before publishing. For reviewing copy that already exists, see copy-review. For sample size and stopping rules, see growth-experiment. For diagnosing a page rather than its words, see page-cro. For full paid ad sets by platform, see ad-campaign-writer.

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

qa-aman/claude-skills212026년 10월 13일 업데이트

acceptance-criteria-writer

무료

Write measurable acceptance criteria for requirements or user stories. Use when the user says "write acceptance criteria", "definition of done", "how do we test this", "fit criteria", "given when then", "Gherkin scenarios", "what does done look like", "testable conditions", "how will we know this works" - even if they don't explicitly say "acceptance criteria".

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

qa-aman/claude-skills212026년 10월 13일 업데이트

account-plan

무료

Build a strategic account plan for winning, retaining, or expanding a named account. Use when the user says "build an account plan", "strategic account planning", "how do I grow this account", "account expansion strategy", "whitespace analysis", "QBR prep", "key account review", "map the stakeholders in this account", "land and expand plan", "how do I break into [company]", or wants a structured strategy for a specific account.

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

qa-aman/claude-skills212026년 10월 13일 업데이트

ad-campaign-writer

무료

Write paid ad copy for LinkedIn, Google, Meta, and YouTube. Produces multiple variants per platform, each targeting a different Eugene Schwartz awareness level and Cialdini persuasion principle. Use when the user asks for ad copy, ad variants, "write LinkedIn ads", Google ads, Meta ads, paid social copy, ad headlines, or wants creative for a paid campaign. Reads brand voice, ICP, and positioning from knowledge/. For organic social posts, see linkedin-post or social-calendar. For the landing page the ad points at, see landing-page-writer. For testing variants, see ab-copy-writer.

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

qa-aman/claude-skills212026년 10월 13일 업데이트

api-design

무료

Design clean and consistent APIs. Use when the user says "design an API", "API design review", "design these endpoints", "REST API for X", "GraphQL schema", "API contract", "how should this endpoint work", "review my API design", or wants to create or improve an API interface - even if they don't explicitly say "API design".

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

qa-aman/claude-skills212026년 10월 13일 업데이트

qa-aman의 스킬 모두 보기

이 스킬의 문제 신고