[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DBHHME99ZNSGPSRN0ZRRDN":3,"skill-same:01M6DBHHME99ZNSGPSRN0ZRRDN":54},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":14,"repositoryHtmlUrl":37,"repositoryHomepageUrl":6,"ownerHtmlUrl":38,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":39,"install":40,"resources":53},"01M6DBHHME99ZNSGPSRN0ZRRDN","make-interfaces-feel-better",null,"Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.","Prekzursil\u002Fagent-skills-toolchain","Prekzursil","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54636077?v=4","01M6DACZ1PCQHD99SCR1YXG28B","Andrei Mihai Visalon","01M6DACZ670WZF535V3WYYSS4Z",0,"MIT","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fmake-interfaces-feel-better\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28],"make interfaces feel better","design","icons","ui","engineering","text","use","typography","motion","community","2026-11-10 10:12:30",false,"---\nname: make-interfaces-feel-better\ndescription: Apply concrete design-engineering details that make interfaces feel polished. Use when reviewing or improving UI spacing, typography, borders, shadows, motion, hit areas, icons, text wrapping, and interaction states.\norigin: community\n---\n\n# Make Interfaces Feel Better\n\nUse this skill for the small design-engineering details that compound into a\nmore polished interface.\n\nSource: salvaged from stale community PR #1659 by `linus707`.\n\n## When to Use\n\n- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.\n- You are building controls, cards, lists, dashboards, navigation, forms, or\n  toolbars.\n- A component needs hover, active, focus, enter, exit, loading, or empty states.\n- A frontend review needs specific before\u002Fafter recommendations.\n\n## Core Principles\n\n### Concentric Radius\n\nFor nearby nested rounded surfaces:\n\n```text\nouter radius = inner radius + padding\n```\n\nIf padding is large, treat layers as separate surfaces instead of forcing the\nmath. The point is optical coherence, not formula worship.\n\n### Optical Alignment\n\nGeometric centering is not always visual centering. Icon buttons, play\ntriangles, arrows, stars, and asymmetric icons often need a small offset. Fix the\nSVG when possible; otherwise adjust with a pixel-level margin or padding change.\n\n### Shadows And Borders\n\nUse borders for separation and focus rings. Use layered shadows when a card,\nbutton, dropdown, or popover needs depth. Shadows should be transparent and\nsubtle enough to work across backgrounds.\n\n### Text Wrapping\n\n- Use `text-wrap: balance` on headings and short titles.\n- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,\n  and list items.\n- Avoid both on long prose, code, and preformatted content.\n- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,\n  and other updating numbers.\n\n### Font Smoothing\n\nOn macOS, apply antialiased font smoothing at the root layout when the project\ndoes not already do so:\n\n```css\nhtml {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n```\n\n### Image Outlines\n\nImages often need a subtle inset outline so their edges do not blur into the\nsurface.\n\n```css\nimg {\n  outline: 1px solid rgba(0, 0, 0, 0.1);\n  outline-offset: -1px;\n}\n\n@media (prefers-color-scheme: dark) {\n  img {\n    outline-color: rgba(255, 255, 255, 0.1);\n  }\n}\n```\n\nUse neutral black or white alpha outlines. Do not tint image outlines with the\nbrand palette.\n\n### Motion\n\nUse CSS transitions for interactive state changes because they can retarget\nwhen the user changes intent mid-motion. Reserve keyframes for staged\none-shot entrances or loading sequences.\n\nGood motion defaults:\n\n- Enter: combine opacity, small `translateY`, and optionally blur.\n- Exit: shorter and quieter than enter, usually 150ms.\n- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the\n  movement distracts.\n- Icon swaps: cross-fade with opacity, scale, and blur instead of instant\n  visibility toggles.\n\n### Transition Scope\n\nNever use `transition: all`. Specify the changed properties:\n\n```css\n.button {\n  transition-property: transform, background-color, box-shadow;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n```\n\nUse `will-change` only for first-frame stutter on compositor-friendly\nproperties such as `transform`, `opacity`, and `filter`. Never use\n`will-change: all`.\n\n### Hit Areas\n\nInteractive controls should have at least a 40x40px hit area, ideally 44x44px\nwhere the layout allows it. Expand with a pseudo-element when the visible icon\nis smaller, but do not let expanded hit areas overlap.\n\n## Review Output\n\nWhen reviewing a UI polish pass, report concrete changes in before\u002Fafter rows:\n\n| Principle | Before | After |\n| --- | --- | --- |\n| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |\n| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |\n| Transition scope | `transition: all` | Explicit transition properties |\n\nInclude file paths and properties when they are not obvious from the snippets.\nOmit principles that you checked but did not change.\n\n## Checklist\n\n- Nested rounded elements are optically coherent.\n- Icons are visually centered.\n- Buttons, cards, and popovers use borders or shadows for the right reason.\n- Headings and short text avoid awkward wrapping.\n- Dynamic numbers use tabular numerals.\n- Images have neutral outlines where needed.\n- Enter and exit animations are split, subtle, and interruptible where\n  appropriate.\n- Buttons have tactile active states without exaggerated motion.\n- `transition: all` and `will-change: all` are absent.\n- Small controls still have usable hit areas.\n","# Make Interfaces Feel Better\n\nUse this skill for the small design-engineering details that compound into a\nmore polished interface.\n\nSource: salvaged from stale community PR #1659 by `linus707`.\n\n## When to Use\n\n- The user says the UI feels off, flat, generic, cramped, jumpy, or unfinished.\n- You are building controls, cards, lists, dashboards, navigation, forms, or\n  toolbars.\n- A component needs hover, active, focus, enter, exit, loading, or empty states.\n- A frontend review needs specific before\u002Fafter recommendations.\n\n## Core Principles\n\n### Concentric Radius\n\nFor nearby nested rounded surfaces:\n\n```text\nouter radius = inner radius + padding\n```\n\nIf padding is large, treat layers as separate surfaces instead of forcing the\nmath. The point is optical coherence, not formula worship.\n\n### Optical Alignment\n\nGeometric centering is not always visual centering. Icon buttons, play\ntriangles, arrows, stars, and asymmetric icons often need a small offset. Fix the\nSVG when possible; otherwise adjust with a pixel-level margin or padding change.\n\n### Shadows And Borders\n\nUse borders for separation and focus rings. Use layered shadows when a card,\nbutton, dropdown, or popover needs depth. Shadows should be transparent and\nsubtle enough to work across backgrounds.\n\n### Text Wrapping\n\n- Use `text-wrap: balance` on headings and short titles.\n- Use `text-wrap: pretty` on short-to-medium body text, captions, descriptions,\n  and list items.\n- Avoid both on long prose, code, and preformatted content.\n- Use `font-variant-numeric: tabular-nums` for counters, timers, prices, tables,\n  and other updating numbers.\n\n### Font Smoothing\n\nOn macOS, apply antialiased font smoothing at the root layout when the project\ndoes not already do so:\n\n```css\nhtml {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n```\n\n### Image Outlines\n\nImages often need a subtle inset outline so their edges do not blur into the\nsurface.\n\n```css\nimg {\n  outline: 1px solid rgba(0, 0, 0, 0.1);\n  outline-offset: -1px;\n}\n\n@media (prefers-color-scheme: dark) {\n  img {\n    outline-color: rgba(255, 255, 255, 0.1);\n  }\n}\n```\n\nUse neutral black or white alpha outlines. Do not tint image outlines with the\nbrand palette.\n\n### Motion\n\nUse CSS transitions for interactive state changes because they can retarget\nwhen the user changes intent mid-motion. Reserve keyframes for staged\none-shot entrances or loading sequences.\n\nGood motion defaults:\n\n- Enter: combine opacity, small `translateY`, and optionally blur.\n- Exit: shorter and quieter than enter, usually 150ms.\n- Press: `scale(0.96)` for tactile buttons, with a way to disable it when the\n  movement distracts.\n- Icon swaps: cross-fade with opacity, scale, and blur instead of instant\n  visibility toggles.\n\n### Transition Scope\n\nNever use `transition: all`. Specify the changed properties:\n\n```css\n.button {\n  transition-property: transform, background-color, box-shadow;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n```\n\nUse `will-change` only for first-frame stutter on compositor-friendly\nproperties such as `transform`, `opacity`, and `filter`. Never use\n`will-change: all`.\n\n### Hit Areas\n\nInteractive controls should have at least a 40x40px hit area, ideally 44x44px\nwhere the layout allows it. Expand with a pseudo-element when the visible icon\nis smaller, but do not let expanded hit areas overlap.\n\n## Review Output\n\nWhen reviewing a UI polish pass, report concrete changes in before\u002Fafter rows:\n\n| Principle | Before | After |\n| --- | --- | --- |\n| Concentric radius | Same radius on parent and child | Parent radius accounts for padding |\n| Tabular numbers | Counter shifts as digits change | Counter uses `tabular-nums` |\n| Transition scope | `transition: all` | Explicit transition properties |\n\nInclude file paths and properties when they are not obvious from the snippets.\nOmit principles that you checked but did not change.\n\n## Checklist\n\n- Nested rounded elements are optically coherent.\n- Icons are visually centered.\n- Buttons, cards, and popovers use borders or shadows for the right reason.\n- Headings and short text avoid awkward wrapping.\n- Dynamic numbers use tabular numerals.\n- Images have neutral outlines where needed.\n- Enter and exit animations are split, subtle, and interruptible where\n  appropriate.\n- Buttons have tactile active states without exaggerated motion.\n- `transition: all` and `will-change: all` are absent.\n- Small controls still have usable hit areas.\n",{"name":5,"origin":28,"description":7},"main","a298c929b6cbd662e1fce54302ce520d5ceea1a5",".agents\u002Fskills\u002Fmake-interfaces-feel-better","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain","https:\u002F\u002Fgithub.com\u002FPrekzursil","2026-11-02 14:30:57",{"source":8,"skillName":5,"commands":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add Prekzursil\u002Fagent-skills-toolchain --skill make-interfaces-feel-better",{"tool":46,"command":47},"bunx","bunx skills add Prekzursil\u002Fagent-skills-toolchain --skill make-interfaces-feel-better",{"tool":49,"command":50},"pnpm","pnpm dlx skills add Prekzursil\u002Fagent-skills-toolchain --skill make-interfaces-feel-better","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fmake-interfaces-feel-better\u002FSKILL.md",true,[],[55,76,107,133,147,163],{"skillNo":56,"name":57,"nameZh":6,"description":58,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":59,"categories":60,"keywords":61,"publishedAt":29},"01M6DF7D7478R55P46REYH4QAC","clarify-requirements","Resolve genuine pre-execution ambiguity by scanning repo context, generating 1-6 grounded options, and asking 1-3 focused questions via AskUserQuestion. NOT for mid-task use (injection risk); NOT when the goal is already unambiguous; use to disambiguate vague prompts before any file edits.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fworkspace-hooks\u002Fskills\u002Fclarify-requirements\u002FSKILL.md",[],[62,63,64,65,66,67,68,69,70,25,71,72,73,74,75],"clarify requirements","clarify","requirements","risk","options","task","prompts","goal","scanning","context","repo","injection","execution","file",{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":87,"publishedAt":29},"01M6DF79CA4BHJS66J8EZDBPWJ","openmm-md","Run FREE, open-source, Windows-native GPU molecular dynamics via the openmm-md MCP (OpenMM + CUDA on the local NVIDIA GPU). Use for protein \u002F protein-ligand MD when you want a free stack or are on Windows without a Schrodinger license. Covers the full workflow (prepare, solvate, minimize, equilibrate, production, analyze, mmgbsa) AND an honest decision guide vs Schrodinger Desmond, including how to run Desmond legitimately on Linux or a cloud GPU with a real license. This is a deliberately LESSER free alternative and does NOT replace the schrodinger MCP tools. Do NOT use it to pick a free tool when a validated FEP+, WaterMap, IFD-MD, or Prime MM-GBSA result is actually required.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fmcp\u002Fopenmm-md-mcp\u002Fskill\u002Fopenmm-md\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[88,89,90,91,92,93,94,95,96,97,98,99,100,101,25,102,103,104,105,106],"openmm md","how","decision","pick","linux","analyze","tool","stack","open","NVIDIA","gpu","license","workflow","windows","free","molecular dynamics","local","do","MCP",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":119,"publishedAt":29},"01M6DF76C1MG85VEWP8VZCBNMN","visual-review","Take screenshots of web pages and UI using Playwright for visual review and iteration","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fvisual-review\u002FSKILL.md",[113,116],{"categoryNo":114,"categoryName":115,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":117,"categoryName":118,"taxonomyType":85,"taxonomyTypeDesc":86},"01JBSEEDCAT000000000000008","测试与质量",[120,121,122,123,124,125,126,127,128,129,89,22,130,131,132],"review","visual","visual review","pages","web","false","iteration","take","check","slides","screenshot","playwright","screenshots",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":29},"01M6DF73AQVCBZKEN0YXEX9FXP","status","Diagnostic status report — shows metaswarm installation state, project setup, and potential issues","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstatus\u002FSKILL.md",[],[135,140,141,142,143,144,145,146],"setup","report","project","installation","project setup","issues","state",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":154,"publishedAt":29},"01M6DF6X6C2XB0P6GX76P7TTYV","start","Use when starting work on any task, when the user mentions metaswarm, or when the user wants to begin tracked development work","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstart\u002FSKILL.md",[153],{"categoryNo":83,"categoryName":84,"taxonomyType":85,"taxonomyTypeDesc":86},[149,155,67,156,157,158,25,159,160,161,162],"start issue","issue","ready","work on issue","user","work","work on","development",{"skillNo":164,"name":140,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":168,"publishedAt":29},"01M6DF6QMJ9AJKFKHHKRT005PQ","Interactive project setup — detects your project, configures metaswarm, writes project-local files","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fsetup\u002FSKILL.md",[],[140,142,104,169,144,170],"files","interactive"]