LogoSkills

dsys-create-component

Scaffold a full component specification from a name or description.

ํ•ญ๋ชฉ๋‚ด์šฉ
Invoke/dsys-create-component
argument-hint[component name, e.g., 'date picker' or 'notification banner']

/dsys-create-component โ€” ์ปดํฌ๋„ŒํŠธ ์ŠคํŽ™ ์ž๋™ ์ƒ์„ฑ#

ํ•œ๋งˆ๋””๋กœ#

"๋‚ ์งœ ์„ ํƒ๊ธฐ" ๊ฐ™์€ ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„๋งŒ ์ฃผ๋ฉด, ์ƒ๊น€์ƒˆ๋ถ€ํ„ฐ ์ƒํƒœยท์ ‘๊ทผ์„ฑยท์ด๋ฆ„ ๊ทœ์น™ยท๋ฌธ์„œ๊นŒ์ง€ ๊ฐ–์ถ˜ ์™„์ „ํ•œ ์ปดํฌ๋„ŒํŠธ ์ŠคํŽ™์„ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ๋ช…๋ น์–ด์ž…๋‹ˆ๋‹ค.

๋ˆ„๊ฐ€ยท์–ธ์ œ ์“ฐ๋‚˜์š”#

  • ์ƒˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋””์ž์ธ ์‹œ์Šคํ…œ์— ์ถ”๊ฐ€ํ•˜๊ธฐ ์ „์— ์™„์ „ํ•œ ์ŠคํŽ™ ๋ฌธ์„œ๊ฐ€ ํ•„์š”ํ•  ๋•Œ
  • ์ปดํฌ๋„ŒํŠธ์˜ ๋ณ€ํ˜•ยท์ƒํƒœยท์ ‘๊ทผ์„ฑ ์š”๊ตฌ์‚ฌํ•ญ์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋น ์ง์—†์ด ์ •๋ฆฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ

๋ฌด์—‡์„ ํ•ด์ฃผ๋‚˜์š”#

  • ์ปดํฌ๋„ŒํŠธ์˜ ๋ชฉ์ ๊ณผ ์ผ๋ฐ˜์ ์ธ ๊ตฌํ˜„ ์‚ฌ๋ก€๋ฅผ ์กฐ์‚ฌํ•˜๊ณ , ๊ตฌ์„ฑ ์š”์†Œยทํฌ๊ธฐ/์Šคํƒ€์ผ ๋ณ€ํ˜•ยท์ƒํ˜ธ์ž‘์šฉ ์ƒํƒœ๋ฅผ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉํ•˜๋Š” ํ† ํฐ, ์ ‘๊ทผ์„ฑ(ARIAยทํ‚ค๋ณด๋“œยท์Šคํฌ๋ฆฐ ๋ฆฌ๋”), ์ด๋ฆ„ ๊ทœ์น™, ๋ฌธ์„œ ๊ตฌ์กฐ๊นŒ์ง€ ํฌํ•จํ•œ ์™„์ „ํ•œ ์ŠคํŽ™์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.
โš™๏ธ ์ƒ์„ธ ์˜ต์…˜ยท์‹คํ–‰ ๋ช…์„ธ (๊ฐœ๋ฐœ์ž / AI ์—์ด์ „ํŠธ์šฉ)

Generate a comprehensive component specification.

Steps#

  1. Research โ€” Understand purpose and common implementations.
  2. Anatomy โ€” Break down parts using dsys-component-spec skill.
  3. Variants โ€” Define size, style, layout variants.
  4. States โ€” Map interactive states using dsys-component-spec skill.
  5. Tokens โ€” Identify consumed tokens using dsys-design-token skill.
  6. Accessibility โ€” Specify ARIA, keyboard, screen reader using dsys-accessibility-audit skill.
  7. Naming โ€” Follow conventions using dsys-naming-convention skill.
  8. Documentation โ€” Structure using dsys-documentation-template skill.

Output#

Complete spec: overview, anatomy, props/API, variants, states, accessibility, usage guidelines, tokens. Consider following up with /dsys-audit-system.