Skill: mes28io/minimalist-ui (version 0.1.0)

--- name: minimalist-ui description: Design system and implementation playbook for minimalist Notion x OpenAI style UI/UX. Use when designing dashboards, chat interfaces, agent control panels, docs UIs, or product surfaces that need clean typography, high information density, subtle hierarchy, low-noise visuals, and execution-ready frontend specs. --- # Minimalist Notion × OpenAI UI Build crisp, low-noise product UI with strong hierarchy and operator-grade usability. ## Core Principles 1. Prioritize clarity over decoration. 2. Keep layout breathable but dense enough for serious work. 3. Use typography, spacing, and contrast as the primary hierarchy tools. 4. Avoid visual noise (heavy shadows, flashy gradients, random color accents). 5. Every element must justify its presence. ## Workflow 1. Define screen intent in one sentence. 2. Choose one primary user action. 3. Build skeleton with spacing + typography first (no color dependency). 4. Add semantic color only for state/meaning. 5. Run the checklist in `references/qa-checklist.md`. ## Mandatory Style Constraints - Max 1 accent color per screen. - Border radius: 8–12px (consistent scale). - Shadows: subtle only; no layered “dribbble” effects. - Animation: 120–180ms, ease-out, functional only. - Empty states must suggest a next action. - Error states must include fix guidance. ## Use These References - Token system: `references/design-tokens.md` - Layout and spacing logic: `references/layout-patterns.md` - Components and behavior: `references/component-specs.md` - Acceptance gate: `references/qa-checklist.md` ## Output Contract (when generating UI specs/code) Always produce: - **Intent**: what this screen optimizes for - **Structure**: zones/regions and hierarchy - **Tokens used**: type scale, spacing, colors - **Interaction states**: hover/focus/disabled/loading/error - **Accessibility**: keyboard + contrast notes - **Implementation notes**: concrete Tailwind/CSS/React guidance Keep output implementation-ready and concise.

path: references/component-specs.md
content: # Component Specs

## Buttons

- Primary: solid neutral/accent, medium emphasis
- Secondary: subtle border, no heavy fill
- Tertiary: text-only, for low emphasis actions
- Destructive: danger tone only when irreversible

## Inputs

- Height: 40 (compact) or 44 (comfortable)
- Border-first style, not glow-first
- Focus: visible 2px ring with high contrast
- Placeholder: secondary text only; never instructional overload

## Cards/Panels

- Border + slight surface tint > heavy shadow
- Keep one purpose per card
- Header optional; avoid redundant labels

## Tables/Lists

- Right-align numeric columns
- Sticky header for long lists
- Row hover subtle; selected state explicit

## Chat/Agent UI

- Thread max width for readability
- Tool/action metadata collapsible
- Streaming text should not shift layout aggressively
- Separate user/system/agent visually by spacing + label, not bright colors


path: references/design-tokens.md
content: # Design Tokens

## Typography

- Font stack: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial
- Display: 30/38, 600
- H1: 24/32, 600
- H2: 20/28, 600
- H3: 16/24, 600
- Body: 14/22, 400
- Small: 12/18, 400
- Mono (data): 12/18, 500

## Spacing (8pt base)

`4, 8, 12, 16, 20, 24, 32, 40, 48`

Use 16 for intra-card rhythm, 24–32 between major sections.

## Radius

- sm: 8
- md: 10
- lg: 12

## Color Roles

- Background: `#FFFFFF`
- Surface: `#FAFAFA`
- Border: `#EAEAEA`
- Text primary: `#111111`
- Text secondary: `#666666`
- Accent: `#111111` (default neutral-accent style)
- Success: `#0A7F3F`
- Warning: `#A15C00`
- Danger: `#B42318`

## Elevation

- level-0: none
- level-1: `0 1px 2px rgba(16,24,40,.06)`
- level-2: `0 4px 12px rgba(16,24,40,.08)`

Use level-1 by default. Level-2 only on floating elements.


path: references/layout-patterns.md
content: # Layout Patterns

## App Shell

- Left rail: navigation + workspace switcher
- Main column: primary content/action
- Optional right rail: context, logs, metadata

## Width Strategy

- Reading-heavy views: max-width 840–920px
- Data/operator views: fluid with 12-col grid

## Hierarchy Pattern

1. Global title + primary action
2. Secondary controls (filters/sort/tabs)
3. Content region
4. Context/help region

## Density Modes

- Comfortable: 16px paddings, 44px control height
- Compact: 12px paddings, 36–40px control height

Default to comfortable; switch to compact for operator dashboards.

## Empty / Loading / Error

- Empty: explain why empty + one CTA
- Loading: skeletons sized to final layout
- Error: plain message + retry + fallback action


path: references/qa-checklist.md
content: # QA Checklist (Pass/Fail)

## Visual

- [ ] One clear primary action per screen
- [ ] Consistent spacing rhythm (8pt scale)
- [ ] Max one accent color used intentionally
- [ ] No decorative-only UI elements

## Usability

- [ ] First-time user can identify next action in <5s
- [ ] Errors explain recovery path
- [ ] Empty states suggest meaningful action
- [ ] Keyboard focus is always visible

## Accessibility

- [ ] Text contrast meets WCAG AA minimum
- [ ] Interactive targets are comfortably clickable
- [ ] Form fields have labels (not placeholder-only)

## Engineering Readiness

- [ ] States defined: default/hover/focus/disabled/loading/error
- [ ] Responsive behavior defined
- [ ] Token usage explicit (type/space/color)
- [ ] No ambiguous “make it pretty” instructions


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)