メニュー
Vira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira).
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use this when writing or reviewing Haskell code. Covers error handling, type safety, idiomatic patterns, HLint compliance, Aeson usage, and testing.
Do a task end-to-end — implement, PR, CI loop, ship. ONLY invoke when the user explicitly types `/do` or `$do`; never auto-select from a natural-language request, even one that sounds like an end-to-end task.
Evaluate code (especially LLM-generated) for structural simplicity using Rich Hickey's "Simple Made Easy" framework. Use this skill whenever reviewing a PR, diff, or code snippet for accidental complexity — particularly when the code was generated by an AI coding assistant and line-by-line review isn't feasible. Also use when the user asks about complecting, simplicity vs. easiness, structural coupling, or concept deduplication. Trigger on phrases like "is this simple", "does this complect", "review for complexity", "structural analysis", or any reference to Hickey, Simple Made Easy, or grey-box review.
Evaluate architecture and module boundaries for volatility-based decomposition using Juval Lowy's framework (from "Righting Software", building on Parnas 1972). Use when reviewing module splits, service boundaries, new abstractions, or any decomposition decision. Trigger on phrases like "where should this boundary be", "how to split this", "module boundaries", "encapsulate change", "volatility", or references to Lowy, Parnas, or "Righting Software". Complements /hickey (interleaved concerns) with a different lens (change encapsulation).
Enter talk mode — conversation and research, no repo changes. ONLY invoke when the user explicitly types `/talk` or `$talk`; never auto-select from a natural-language question or design discussion.
Review code for quality, simplicity, and common mistakes before declaring work complete.
| name | vira-design |
| description | Vira's design system — TailwindCSS conventions, color palette, typography, spacing, components, and accessibility rules. Use when working on UI components, styling, or layout in this project (Lucid HTML in Haskell sources under packages/vira). |
Clean, minimal CI/CD application design system emphasizing clarity and functionality.
brand-600 (primary actions), brand-700 (hover states). The brand-* scale is declared in packages/vira/src/style.css as a @theme alias to Tailwind's cyan today — change those var(--color-cyan-*) aliases to shift the brand without touching widget code.gray-50 (page), white (cards), gray-200 (dividers)
gray-900 (page), gray-800 (cards), gray-700 (dividers)green-600 (success actions)red-600 (delete/dangerous actions)yellow-500 (cautionary states)gray-100 (secondary actions)
gray-700 (secondary actions)gray-900 (primary), gray-600 (secondary), gray-500 (muted)
gray-100 (primary), gray-300 (secondary), gray-400 (muted)gray-200 (default), gray-300 (interactive)
gray-700 (default), gray-600 (interactive)gray-50 (sections), gray-100 (subtle contrast)
gray-800 (sections), gray-700 (subtle contrast)Tokens are declared as --font-sans / --font-mono in packages/vira/src/style.css (the Tailwind v4 input file). Generated static/tailwind.css exposes them via font-sans / font-mono utility classes — prefer those over hard-coded font-family declarations.
| Class | Size | Usage |
|---|---|---|
text-xs | 12px | Badges, table headers (uppercase), tertiary metadata |
text-sm | 14px | Body text, form labels, buttons, timestamps |
text-base | 16px | Breadcrumbs, emphasized body content |
text-lg | 18px | Card subheadings, section descriptions |
text-xl | 20px | Section headers (h2, h3) |
text-2xl | 24px | Page headers (h1) |
| Weight | Class | Usage |
|---|---|---|
| 500 | font-medium | Badges, subtle emphasis, secondary labels |
| 600 | font-semibold | Buttons, tab labels, highlighted text |
| 700 | font-bold | All headings (h1-h3), important values |
-- Page headers (h1)
h1_ [class_ "text-2xl font-bold text-gray-900 dark:text-gray-100"]
-- Section headers (h2)
h2_ [class_ "text-xl font-bold text-gray-900 dark:text-gray-100 mb-4"]
-- Buttons
button_ [class_ "text-sm font-semibold"]
-- Badges
span_ [class_ "text-xs font-medium"]
-- Table headers
th_ [class_ "text-xs font-medium uppercase tracking-wider"]
| Class | Size | Common Usage |
|---|---|---|
1 | 4px | Icon margins, tight gaps |
2 | 8px | Badge padding, inline spacing |
3 | 12px | Button padding (vertical) |
4 | 16px | Card content margins, section gaps |
6 | 24px | Section spacing, card padding |
8 | 32px | Page section dividers |
| Component | Pattern |
|---|---|
| Cards | p-6 (content), mb-6 (between cards) |
| Buttons | px-6 py-3 (primary), px-4 py-2 (secondary) |
| Badges | px-2 py-1 or px-3 py-1 |
| Form groups | space-y-6 (between groups), mb-2 (label to input) |
| Page sections | space-y-6 or mb-8 |
| Inline items | space-x-2 (tight), space-x-4 (normal), gap-4 (flex) |
| Class | Usage |
|---|---|
rounded | Small elements, code blocks |
rounded-lg | Default - buttons, cards, inputs |
rounded-full | Badges, pills, avatars |
rounded-xl | Large feature cards, modals |
All components are defined in src/Vira/Widgets/*.hs with full documentation and usage examples.
viraButton_, viraButtonIcon_ (see Button.hs)viraCard_ (flat), viraCardElevated_ (with shadow) (see Card.hs)viraSection_, viraPageHeader_, viraDivider_ (see Layout.hs)viraInput_, viraLabel_ (see Form.hs)viraStatusBadge_ (see Status.hs)viraAlert_ (see Alert.hs)import Vira.Widgets qualified as W
W.viraButton_ W.ButtonPrimary [] $ do
W.viraButtonIcon_ $ toHtmlRaw Icon.plus
"Add Repository"
Web.TablerIcons.Outline)w-4 h-4 (buttons), w-5 h-5 (UI), w-6 h-6 (headers), w-8 h-8 (sections), w-16 h-16 (hero)flex items-center justify-centershadow-sm only for important contentspace-y-*)text-3xl, text-lg, etc.md:, lg:, xl: breakpointsgrid gap-6 md:grid-cols-2 lg:grid-cols-3container mx-auto with responsive paddingtext-gray-900 (high contrast)text-gray-600 (medium contrast)text-gray-500 (minimum contrast)text-gray-400 (insufficient contrast)text-gray-500 minimum for functional iconstext-xs): Use text-gray-600 minimumtext-gray-500 for secondary informationtext-gray-600 or darkerVira implements automatic dark mode using Tailwind's @media (prefers-color-scheme: dark) strategy. Dark mode activates based on system preferences without any JavaScript or configuration.
dark: variantsdark:bg-red-900/20)-- Backgrounds
"bg-white dark:bg-gray-800"
"bg-gray-50 dark:bg-gray-900"
"bg-gray-100 dark:bg-gray-700"
-- Borders
"border-gray-200 dark:border-gray-700"
"border-gray-300 dark:border-gray-600"
-- Text
"text-gray-900 dark:text-gray-100"
"text-gray-600 dark:text-gray-300"
"text-gray-500 dark:text-gray-400"
-- Semantic colors with opacity
"bg-red-50 dark:bg-red-900/20"
"bg-blue-50 dark:bg-blue-900/20"
dark: variants for gray colorsWidgets/*.hs firstvira[ComponentName]_ pattern[Attributes] parameter for extensibilityRefer to src/Vira/Widgets/*.hs for complete component documentation and implementation details.