[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-d9e364a8-a788-4850-a285-0ad3bb1299da":3,"$fyaeLXGbfH6nPCADtlUJ05vnZhrzTb-4YHnwqyLyZEEk":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"d9e364a8-a788-4850-a285-0ad3bb1299da","minimalist-ui","用于创建带有温暖单色调、清晰边框、适度动感和扁平便当布局的整洁编辑界面。","cat_life_career","mod_other","sickn33,other","---\nname: minimalist-ui\ndescription: \"Use when creating clean editorial interfaces with warm monochrome palettes, crisp borders, restrained motion, and flat bento layouts.\"\ncategory: frontend\nrisk: safe\nsource: community\nsource_repo: Leonxlnx\u002Ftaste-skill\nsource_type: community\ndate_added: \"2026-04-17\"\nauthor: Leonxlnx\ntags: [frontend, design, minimalism, ui]\ntools: [claude, cursor, codex, antigravity]\n---\n# Protocol: Premium Utilitarian Minimalism UI Architect\n\n## When to Use\n\n- Use when the user wants a refined minimalist UI inspired by tools like Notion, Linear, or editorial workspace products.\n- Use when designing warm monochrome interfaces with crisp borders, generous whitespace, muted pastel accents, and quiet motion.\n- Use when the task should avoid gradients, heavy shadows, saturated colors, pill-heavy components, and generic SaaS visuals.\n\n## Limitations\n\n- Minimalism can hide hierarchy when content is dense; validate scannability, contrast, and navigation clarity with real content.\n- This skill assumes the product can support restrained palettes and typography-led layouts; do not override an established brand system without cause.\n- Subtle motion and flat surfaces still need responsive, keyboard, and screen-reader verification in the target project.\n\n\n## 1. Protocol Overview\nName: Premium Utilitarian Minimalism & Editorial UI\nDescription: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, \"document-style\" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.\n\n## 2. Absolute Negative Constraints (Banned Elements)\nThe AI must strictly avoid the following generic web development defaults:\n- DO NOT use the \"Inter\", \"Roboto\", or \"Open Sans\" typefaces.\n- DO NOT use generic, thin-line icon libraries like \"Lucide\", \"Feather\", or standard \"Heroicons\".\n- DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (\u003C 0.05).\n- DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).\n- DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).\n- DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.\n- DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.\n- DO NOT use generic placeholder names like \"John Doe\", \"Acme Corp\", or \"Lorem Ipsum\". Use realistic, contextual content.\n- DO NOT use AI copywriting clichés: \"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\", \"Game-changer\", \"Delve\". Write plain, specific language.\n\n## 3. Typographic Architecture\nThe interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.\n- Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`.\n- Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`).\n- Monospace (Code, Keystrokes, Meta-data): Target: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`.\n- Text Colors: Body text must never be absolute black (`#000000`). Use off-black\u002Fcharcoal (`#111111` or `#2F3437`) with a generous `line-height` of `1.6` for legibility. Secondary text should be muted gray (`#787774`).\n\n## 4. Color Palette (Warm Monochrome + Spot Pastels)\nColor is a scarce resource, utilized only for semantic meaning or subtle accents.\n- Canvas \u002F Background: Pure White `#FFFFFF` or Warm Bone\u002FOff-White `#F7F6F3` \u002F `#FBFBFA`.\n- Primary Surface (Cards): `#FFFFFF` or `#F9F9F8`.\n- Structural Borders \u002F Dividers: Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.\n- Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.\n  - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)\n  - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)\n  - Pale Green: `#EDF3EC` (Text: `#346538`)\n  - Pale Yellow: `#FBF3DB` (Text: `#956400`)\n\n## 5. Component Specifications\n- Bento Box Feature Grids:\n  - Utilize asymmetrical CSS Grid layouts.\n  - Cards must have exactly `border: 1px solid #EAEAEA`.\n  - Border-radius must be crisp: `8px` or `12px` maximum.\n  - Internal padding must be generous (e.g., `24px` to `40px`).\n- Primary Call-To-Action (Buttons):\n  - Solid background `#111111`, text `#FFFFFF`.\n  - Slight border-radius (`4px` to `6px`). No box-shadow.\n  - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`.\n- Tags & Status Badges:\n  - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`).\n  - Background must use the defined Muted Pastels.\n- Accordions (FAQ):\n  - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`.\n  - Use a clean, sharp `+` and `-` icon for the toggle state.\n- Keystroke Micro-UIs:\n  - Render shortcuts as physical keys using `\u003Ckbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font.\n- Faux-OS Window Chrome:\n  - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).\n\n## 6. Iconography & Imagery Directives\n- System Icons: Use \"Phosphor Icons (Bold or Fill weights)\" or \"Radix UI Icons\" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.\n- Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.\n- Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (`opacity: 0.04` warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like `https:\u002F\u002Fpicsum.photos\u002Fseed\u002F{context}\u002F1200\u002F800` when real assets are unavailable.\n- Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (`radial-gradient` with warm tones at `opacity: 0.03`), or minimal geometric line patterns to add depth without breaking the clean aesthetic.\n\n## 7. Subtle Motion & Micro-Animations\nMotion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.\n- Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.\n- Hover States: Cards lift with an ultra-subtle shadow shift (`box-shadow` transitioning from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`). Buttons respond with `scale(0.98)` on `:active`.\n- Staggered Reveals: Lists and grid items enter with a cascade delay (`animation-delay: calc(var(--index) * 80ms)`). Never mount everything at once.\n- Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (`animation-duration: 20s+`, `opacity: 0.02-0.04`) drifting behind hero sections. Must be applied to a `position: fixed; pointer-events: none` layer. Never on scrolling containers.\n- Performance: Animate exclusively via `transform` and `opacity`. No layout-triggering properties (`top`, `left`, `width`, `height`). Use `will-change: transform` sparingly and only on actively animating elements.\n\n## 8. Execution Protocol\nWhen tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:\n1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., `py-24` or `py-32` in Tailwind).\n2. Constrain the main typography content width to `max-w-4xl` or `max-w-5xl`.\n3. Apply the custom typographic hierarchy and monochromatic color variables immediately.\n4. Ensure every card, divider, and border adheres strictly to the `1px solid #EAEAEA` rule.\n5. Add scroll-entry animations to all major content blocks.\n6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.\n7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,125,1648,"2026-05-16 13:28:49",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"d2bc3164-2cb0-4293-b997-edeb15331813","1.0.0","minimalist-ui.zip",4368,"uploads\u002Fskills\u002Fd9e364a8-a788-4850-a285-0ad3bb1299da\u002Fminimalist-ui.zip","0e286f4cbeae3e6a2ce9b1cebfe420bbd527a5f98fa1d20aaafb9f42719dd9b9","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":8935}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]