メニュー
Use when designing redeemable items, coupons, or event-style components. Ticket-stub UI evokes physical tickets — perforated edges, dotted line, branded.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/x3allamerican/design-skills --skill ticket-stub-uiコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | ticket-stub-ui |
| description | Use when designing redeemable items, coupons, or event-style components. Ticket-stub UI evokes physical tickets — perforated edges, dotted line, branded. |
Ticket-stub UI = digital tickets with perforated edges (CSS pattern), dotted tear line, two sections (stub + tearaway). For: coupons, gift cards, event passes.
.ticket-stub {
background: var(--accent);
position: relative;
padding: 20px 24px;
border-radius: 8px;
}
.ticket-stub::before,
.ticket-stub::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
background: var(--cream);
border-radius: 50%;
left: 30%;
}
.ticket-stub::before { top: -8px; }
.ticket-stub::after { bottom: -8px; }
For true perforated effect: SVG with scallop pattern.
Used for CardPrepAI founder-tier badges and redeemable items.