メニュー
Use when creating or styling UI components in the web-react application
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/crathgeb/potato-cannon --skill potatobranding-componentsコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| name | potato:branding-components |
| description | Use when creating or styling UI components in the web-react application |
This skill documents the UI components, theme variables, and styling conventions for the web-react application. Use this as a reference when creating or modifying UI elements.
All colors are defined in web-react/src/index.css under the @theme block:
| Variable | Value | Usage |
|---|---|---|
bg-primary | #0d1117 | Main app background |
bg-secondary | #161b22 | Cards, panels, modals |
bg-tertiary | #21262d | Input backgrounds, elevated surfaces |
bg-hover | #30363d | Hover states |
| Variable | Value | Usage |
|---|---|---|
text-primary | #e6edf3 | Primary text, headings |
text-secondary | #8b949e | Secondary text, labels |
text-muted | #6e7681 | Muted text, placeholders |
| Variable | Value | Usage |
|---|---|---|
accent | #58a6ff | Links, primary actions |
accent-green | #3fb950 | Success states |
accent-yellow | #d29922 | Warning states, brand color |
accent-red | #f85149 | Error states, destructive actions |
accent-purple | #a371f7 | Decorative accents |
| Variable | Value | Usage |
|---|---|---|
border | #30363d | All borders |
destructive | #f85149 | Destructive button backgrounds |
Location: web-react/src/components/ui/input.tsx
Standard input styling:
import { Input } from "@/components/ui/input"
<Input
placeholder="Enter value"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
Base classes (reference only - use the component):
border-border/50 bg-bg-tertiary/50 rounded-md h-9
focus-visible:border-border focus-visible:ring-border/30 focus-visible:ring-[2px]
placeholder:text-text-muted
Location: web-react/src/components/ui/select.tsx
Standard select dropdown:
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
<Select value={value} onValueChange={setValue}>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
</SelectContent>
</Select>
Size variants:
h-9 (36px)size="sm" → h-8 (32px) - use for table rowsImportant: Do NOT add custom background or border classes to Select components. The base component styles match the Input component automatically.
Location: web-react/src/components/ui/textarea.tsx
import { Textarea } from "@/components/ui/textarea"
<Textarea
placeholder="Enter description"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
Location: web-react/src/components/ui/button.tsx
import { Button } from "@/components/ui/button"
<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button size="sm">Small</Button>
<Button size="icon">Icon only</Button>
Variants:
default - Primary action, filled backgroundoutline - Secondary action, borderedghost - Tertiary action, no borderdestructive - Dangerous action, red backgroundLocation: web-react/src/components/ui/dialog.tsx
See the potato:creating-modals skill for detailed modal patterns.
Basic structure:
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description</DialogDescription>
</DialogHeader>
{/* Content */}
<DialogFooter>
<Button variant="outline" onClick={() => setIsOpen(false)}>Cancel</Button>
<Button onClick={handleSubmit}>Confirm</Button>
</DialogFooter>
</DialogContent>
</Dialog>
Location: web-react/src/components/ui/badge.tsx
import { Badge } from "@/components/ui/badge"
<Badge>Default</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
All interactive elements should use consistent focus styling:
focus-visible:border-border focus-visible:ring-border/30 focus-visible:ring-[2px]
This provides:
border (from border/50)Use bg-bg-hover for hover backgrounds:
className="hover:bg-bg-hover"
For text hover:
className="hover:text-text-primary"
<div className="bg-bg-secondary border border-border rounded-lg p-4 hover:bg-bg-hover transition-colors cursor-pointer">
{/* content */}
</div>
<div className="space-y-1">
<span className="text-sm text-text-muted">Label</span>
<p className="text-text-primary">Value</p>
</div>
<div className="flex items-center gap-2 text-text-secondary">
<Icon className="h-4 w-4" />
<span>Text</span>
</div>
When creating UI components:
@/components/ui/focus-visible:ring-[2px]bg-bg-hover for hover backgroundstext-text-muted for placeholder textborder-border for all bordersDO NOT:
bg-popover, text-popover-foreground, bg-accent, text-accent-foreground - use our theme variablesbg-bg-secondary border-border to Select components - base styles handle thisring-ring or border-ring - use ring-border and border-borderUse this skill to add comments or notes to an existing task. Comments help track progress, document decisions, or explain issues.
You MUST use this anytime you want to ask the user a question or feel like something is unclear. If you think you want to use the AskUserQuestion tool, first invoke this skill, we may have a different way of asking the user a question.
You MUST use this skill in order to create, update, edit, or build artifacts or files. Artifacts can be of any type but are typically markdown files.