variant
Build and Compare UI Variants
Teams often compare superficial UI alternatives without learning which design decision matters. This skill builds distinct, accessible variants and a shareable picker for informed selection.
๋ด ์์ด์ ํธ๋ก ์ค์น
์ด ์์ฒญ์ ์์ด์ ํธ์ ๋ณต์ฌํ์ธ์. ๊ณต์ Skill ํ์ด์ง์ ๋งค๋ํ์คํธ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค.
Review the Skillstore skill "variant" from https://skillstore.io/skills/jakubkrehel-variant.md and its manifest at https://skillstore.io/api/skills/jakubkrehel-variant/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.์์ด์ ํธ๋ ๊ณ์ํด์ ๊ณํ์ ํ์ํ๊ณ ๋ณด์ ์ ์ฑ ์์ ์๊ตฌํ๋ ํ์ธ์ ์์ฒญํด์ผ ํฉ๋๋ค.
์์ด์ ํธ๊ฐ ์ฝ๊ธฐ ์ฌ์ด ๋ฆฌ์์ค
AI ์์ด์ ํธ, ํฌ๋กค๋ฌ, ์คํฌ๋ฆฝํธ๊ฐ ์ ์ฒด ํ์ด์ง ๋์ ์ ๋ฆฌ๋ ์ปจํ ์คํธ๋ง ํ์ํ ๋ ์ด ๋งํฌ๋ฅผ ์ฌ์ฉํ์ธ์.
ํ ์คํธํด ๋ณด๊ธฐ
"variant" ์ฌ์ฉ ์ค์ ๋๋ค. Create three account summary card variants focused on information density.
์์ ๊ฒฐ๊ณผ:
- Quiet: generous spacing and reduced metadata for occasional review.
- Balanced: moderate density with clear account status and next action.
- Dense: compact rows and complete metadata for frequent operational use.
"variant" ์ฌ์ฉ ์ค์ ๋๋ค. Compare navigation header variants and explain their tradeoffs.
์์ ๊ฒฐ๊ณผ:
The compact direction preserves workspace height but reduces label visibility. The expanded direction improves scanning but consumes more vertical space.
"variant" ์ฌ์ฉ ์ค์ ๋๋ค. Prepare shareable review details for the selected variants.
์์ ๊ฒฐ๊ณผ:
- Picker location: fixed at the bottom center.
- Comparison widths: 375 pixels and 1440 pixels.
- Each variant has a dedicated URL query parameter.
๋ณด์ ๊ฐ์ฌ
์์ All ten static findings are false positives caused by CSS text or Markdown inline-code formatting. No command execution, system reconnaissance, prompt injection, or other malicious intent is present.
์ํ ์์ธ
โ๏ธ ์ธ๋ถ ๋ช ๋ น์ด (9)
์ด ๋ณด๊ณ ์ ๊ณต์ ๋ฐ ์ธ์ฉ
๋ฒ์ ์ด ์ง์ ๋ ํ๊ฐ ๋ณด๊ณ ์, ์ค๋ฆฝ ๋ฐฐ์ง, ์๋ฒ ๋ ์นด๋ ๋ฐ ์ธ์ฉ์ ๊ณต์ ํ์ธ์. Skillstore๋ ๊ทผ๊ฑฐ๋ฅผ ๋ณด๊ณ ํ์ง๋ง ์ด Skill์ ์์ ์ฌ๋ถ๋ฅผ ํ๋จํ์ง ์์ต๋๋ค.
๋ณด๊ณ ์ ๋งํฌ ๋ณต์ฌ
https://skillstore.io/skills/jakubkrehel-variant/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown ๋ฐฐ์ง
[](https://skillstore.io/skills/jakubkrehel-variant?utm_source=security_passport_badge)HTML ๋ฐฐ์ง
<a href="https://skillstore.io/skills/jakubkrehel-variant?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/jakubkrehel-variant/security.svg" alt="Skillstore security assessment" loading="lazy"></a>์๋ฒ ๋ ์นด๋
<iframe src="https://skillstore.io/embed/skills/jakubkrehel-variant.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>ํ์ ์ธ์ฉ (APA ยท BibTeX ยท CFF)
APA ์ธ์ฉ
jakubkrehel. (2026). variant security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/jakubkrehel-variant/audits/1BibTeX ์ธ์ฉ
@techreport{jakubkrehel-jakubkrehel-variant-2026,
author = {jakubkrehel},
title = {variant security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/jakubkrehel-variant/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "variant security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "jakubkrehel"
date-released: "2026-09-04"
url: "https://skillstore.io/skills/jakubkrehel-variant/audits/1"
identifiers:
- type: other
value: "skillstore:jakubkrehel-variant:audit:1"
description: "Skillstore immutable audit report identifier"
Skillstore ์ ์
์ด ์ ์์ ์ด์ ์ฆ๊ฑฐ ์ ๋ขฐ๋: ์ค๊ฐ๋ง๋ค ์ ์๋ ๊ฒ
Compare Component Directions
Build three meaningful versions of a component and evaluate them inside the production page.
Review Design Tradeoffs
Compare structure, density, emphasis, typography, or voice without changing every variable.
Test System Flexibility
Explore component directions while preserving tokens, accessibility requirements, and established interface conventions.
์ด ํ๋กฌํํธ๋ฅผ ์ฌ์ฉํด ๋ณด์ธ์
Create three variants of [component] on [page]. Use existing project styles, realistic content, and a picker. Summarize each tradeoff.
Build three [component] variants along the [structure, density, emphasis, type, or voice] axis. Keep accessibility and all secondary choices coherent.
Keep the existing variant harness. Create three new positions around [selected direction], preserve realistic data, and explain the refined tradeoffs.
Build five variants of [component] within [constraints]. Test at [widths], verify interactions and accessibility, then provide shareable links and neutral tradeoffs.
๋ชจ๋ฒ ์ฌ๋ก
- Choose one primary design axis before implementation.
- Use realistic content and evaluate variants inside the actual page.
- Verify keyboard access, focus visibility, responsive layout, interactions, and console output.
ํผํ๊ธฐ
- Do not create variants that differ only by color or copy.
- Do not vary every design axis at the same time.
- Do not keep the picker harness after promoting a production variant.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
How many variants does the skill create?
Does the skill choose the winning variant?
Which design dimensions can vary?
How are variants selected?
What accessibility requirements apply?
What happens after a variant is selected?
๊ฐ๋ฐ์ ์ธ๋ถ ์ ๋ณด
์์ฑ์
jakubkrehel๋ผ์ด์ ์ค
MIT
Skillstore ๋ฆฌ๋น์
r1
๋ฒ์ ์๋ด
์์ฑ์๊ฐ ๋ฒ์ ์ ์ ์ธํ์ง ์์์ต๋๋ค.
๋ฆฌํฌ์งํ ๋ฆฌ
https://github.com/jakubkrehel/skills/tree/267330e1adfc66a718fb65fa6918c1f06d0a689e/skills/variant์ฐธ์กฐ
096c7daa4d0d974771dad12d81c3d0d4688617b9
์ ์ง๋ณด์ ์ต์ ์ฑ
2026. 9. 8.
์ฌ์ฉ๋
0 ๋ค์ด๋ก๋ ยท 0 ์กฐํ
ํ์ผ ๊ตฌ์กฐ