[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71ACSZ8P5HASHTVJ14BBCJ0":3,"skill-same:01M71ACSZ8P5HASHTVJ14BBCJ0":83},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":66,"ownerDescription":67,"updatedAt":68,"install":69,"resources":82},"01M71ACSZ8P5HASHTVJ14BBCJ0","design-taste-frontend",null,"Senior UI\u002FUX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns.","ariadoss\u002Fsuperskills","ariadoss","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F414341?v=4","01M71AC7383PT6JCRZSQJ4AVTM","Danilo Stern-Sapad","01M71AC73Y7NTBTJ9KQYNENRRE",12,"MIT","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fdesign-skills\u002Fdesign-taste-frontend\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"design taste","design","design taste frontend","taste","frontend","ux","senior","component","architecture","saas","balanced","when","Rules","use","component architecture","hardware acceleration","system","generic","css","design patterns","2026-11-10 10:12:30",false,"---\nname: design-taste-frontend\ndescription: Senior UI\u002FUX engineering system that enforces metric-based design rules, strict component architecture, CSS hardware acceleration, and balanced design engineering. Use when building premium frontend interfaces, dashboards, or SaaS UIs. Combats generic AI design patterns.\nmetadata:\n  author: Leonxlnx\n---\n\n# Design Taste Frontend — High-Agency UI\u002FUX Engineering System\n\nA comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.\n\n## Core Configuration Dials\n\nThree primary dials (adjustable per request):\n\n| Dial | Default | Range | Effect |\n|------|---------|-------|--------|\n| **Design Variance** | 8 | 1–10 | How distinctive vs. conventional the design is |\n| **Motion Intensity** | 6 | 1–10 | Amount and complexity of animations |\n| **Visual Density** | 4 | 1–10 | Information density (4 = comfortable) |\n\nUsers can override via explicit requests (\"make it more minimal\", \"less animation\").\n\n## Architectural Requirements\n\n- **Framework**: React\u002FNext.js with Server Components as default\n- **Styling**: Tailwind CSS for 90% of styling coverage\n- **Viewport**: `min-h-[100dvh]` not `h-screen` (prevents iOS Safari layout issues)\n- **Dependencies**: Always verify in `package.json` before importing\n\n## Design Engineering Directives\n\n### Typography\n- Avoid Inter for premium contexts — choose distinctive alternatives\n- Never generic system font stacks for display text\n- Establish typographic hierarchy before layout\n\n### Color\n- Maximum one accent color below 80% saturation\n- No pure black (`#000000`) — use off-black (`#0a0a0a`, `#111111`)\n- No purple\u002Fblue AI aesthetic gradients (most identifiable AI design fingerprint)\n\n### Layout\n- Reject centered Hero sections when Design Variance > 4\n- Use asymmetric grids, not three equal columns for feature rows\n- Bento grid layouts for dashboard-style content\n\n### Motion\n- Spring physics: `stiffness: 100, damping: 20` (Framer Motion)\n- Staggered animations with `staggerChildren`\n- Perpetual micro-interactions on dashboard cards (not on every click)\n\n## Bias Correction — Anti-AI-Default Patterns\n\nCombat common AI design defaults:\n- Liquid Glass refraction effects for depth\n- Magnetic micro-physics for interactive elements\n- Motion that responds to cursor proximity without React state\n\n## Performance Standards\n\n- Animate exclusively via `transform` and `opacity` (GPU-accelerated)\n- Grain\u002Fnoise filters only on fixed, non-interactive `::before`\u002F`::after` pseudo-elements\n- Z-index strictly constrained (document z-index layers at component level)\n\n## Strictly Forbidden\n\n- Emojis anywhere in code, markup, or text content (replace with icon library)\n- Pure neon glows or oversaturated accent colors\n- Text-fill gradients\n- Inter font for premium\u002Fdisplay contexts\n- Three-column equal card layouts as feature rows\n- Generic placeholder names (\"John Doe\", \"Acme Corp\")\n- AI startup terminology (\"Nexus\", \"Streamline\", \"Elevate\")\n- Broken Unsplash image links\n\n## The Bento 2.0 Dashboard Paradigm\n\nModern SaaS dashboards use five card archetypes:\n\n1. **Intelligent Lists** — sortable, filterable, with status indicators\n2. **Command Inputs** — search\u002Ffilter bars with keyboard shortcuts\n3. **Live Status** — real-time indicators with subtle pulse animations\n4. **Wide Data Streams** — sparklines, mini-charts, trend indicators\n5. **Contextual UI Focus** — detail panels that expand in-place\n\nEach card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.\n\n## Pre-Flight Checklist\n\nBefore delivering any UI:\n- [ ] No pure black colors used\n- [ ] No Inter font in display\u002Fhero contexts\n- [ ] Animations use only transform\u002Fopacity\n- [ ] Design Variance setting respected\n- [ ] No emojis present\n- [ ] No three-column equal-width feature grid\n- [ ] Viewport uses dvh not vh\n- [ ] Dependencies verified in package.json\n","# Design Taste Frontend — High-Agency UI\u002FUX Engineering System\n\nA comprehensive frontend architecture guide establishing baseline configurations and engineering directives for premium interface design.\n\n## Core Configuration Dials\n\nThree primary dials (adjustable per request):\n\n| Dial | Default | Range | Effect |\n|------|---------|-------|--------|\n| **Design Variance** | 8 | 1–10 | How distinctive vs. conventional the design is |\n| **Motion Intensity** | 6 | 1–10 | Amount and complexity of animations |\n| **Visual Density** | 4 | 1–10 | Information density (4 = comfortable) |\n\nUsers can override via explicit requests (\"make it more minimal\", \"less animation\").\n\n## Architectural Requirements\n\n- **Framework**: React\u002FNext.js with Server Components as default\n- **Styling**: Tailwind CSS for 90% of styling coverage\n- **Viewport**: `min-h-[100dvh]` not `h-screen` (prevents iOS Safari layout issues)\n- **Dependencies**: Always verify in `package.json` before importing\n\n## Design Engineering Directives\n\n### Typography\n- Avoid Inter for premium contexts — choose distinctive alternatives\n- Never generic system font stacks for display text\n- Establish typographic hierarchy before layout\n\n### Color\n- Maximum one accent color below 80% saturation\n- No pure black (`#000000`) — use off-black (`#0a0a0a`, `#111111`)\n- No purple\u002Fblue AI aesthetic gradients (most identifiable AI design fingerprint)\n\n### Layout\n- Reject centered Hero sections when Design Variance > 4\n- Use asymmetric grids, not three equal columns for feature rows\n- Bento grid layouts for dashboard-style content\n\n### Motion\n- Spring physics: `stiffness: 100, damping: 20` (Framer Motion)\n- Staggered animations with `staggerChildren`\n- Perpetual micro-interactions on dashboard cards (not on every click)\n\n## Bias Correction — Anti-AI-Default Patterns\n\nCombat common AI design defaults:\n- Liquid Glass refraction effects for depth\n- Magnetic micro-physics for interactive elements\n- Motion that responds to cursor proximity without React state\n\n## Performance Standards\n\n- Animate exclusively via `transform` and `opacity` (GPU-accelerated)\n- Grain\u002Fnoise filters only on fixed, non-interactive `::before`\u002F`::after` pseudo-elements\n- Z-index strictly constrained (document z-index layers at component level)\n\n## Strictly Forbidden\n\n- Emojis anywhere in code, markup, or text content (replace with icon library)\n- Pure neon glows or oversaturated accent colors\n- Text-fill gradients\n- Inter font for premium\u002Fdisplay contexts\n- Three-column equal card layouts as feature rows\n- Generic placeholder names (\"John Doe\", \"Acme Corp\")\n- AI startup terminology (\"Nexus\", \"Streamline\", \"Elevate\")\n- Broken Unsplash image links\n\n## The Bento 2.0 Dashboard Paradigm\n\nModern SaaS dashboards use five card archetypes:\n\n1. **Intelligent Lists** — sortable, filterable, with status indicators\n2. **Command Inputs** — search\u002Ffilter bars with keyboard shortcuts\n3. **Live Status** — real-time indicators with subtle pulse animations\n4. **Wide Data Streams** — sparklines, mini-charts, trend indicators\n5. **Contextual UI Focus** — detail panels that expand in-place\n\nEach card type has perpetual micro-interactions using spring physics. Cards breathe — they're never static.\n\n## Pre-Flight Checklist\n\nBefore delivering any UI:\n- [ ] No pure black colors used\n- [ ] No Inter font in display\u002Fhero contexts\n- [ ] Animations use only transform\u002Fopacity\n- [ ] Design Variance setting respected\n- [ ] No emojis present\n- [ ] No three-column equal-width feature grid\n- [ ] Viewport uses dvh not vh\n- [ ] Dependencies verified in package.json\n",{"name":5,"metadata":57,"description":7},{"author":58},"Leonxlnx","main","c7ec8d78e5dc37484c2cfe90ab04de163d97dd41","design-skills\u002Fdesign-taste-frontend",0,"https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills","https:\u002F\u002Fhyperion360.com\u002Fblog\u002Fparallel-ai-agents-engineering-workflow\u002F","https:\u002F\u002Fgithub.com\u002Fariadoss","https:\u002F\u002Fdanilosapad.com\u002F","CEO & Founder of @Hyperion360","2026-11-01 12:36:50",{"source":8,"skillName":5,"commands":70,"prompt":80,"zipAvailable":81},[71,74,77],{"tool":72,"command":73},"npx","npx skills add ariadoss\u002Fsuperskills --skill design-taste-frontend",{"tool":75,"command":76},"bunx","bunx skills add ariadoss\u002Fsuperskills --skill design-taste-frontend",{"tool":78,"command":79},"pnpm","pnpm dlx skills add ariadoss\u002Fsuperskills --skill design-taste-frontend","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fdesign-skills\u002Fdesign-taste-frontend\u002FSKILL.md",true,[],[84,109,134,153,182,198],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":93,"publishedAt":52},"01M71AZE3MPF891RM354EMRYA1","youtube","Download YouTube video transcripts when user provides a YouTube URL or asks to download\u002Fget\u002Ffetch a transcript from YouTube. Also use when user wants to transcribe or get captions\u002Fsubtitles from a YouTube video.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[90],{"categoryNo":91,"categoryName":92,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[86,94,95,96,97,98,99,100,101,43,102,103,104,105,106,45,107,108],"user","download","transcribe","write","transcript","video transcripts","Bash","URL","Captions","get","fetch","Video","read","subtitles","transcripts",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":52},"01M71AZAYR85PW6BJGSQXS4BN2","write-plan","Use when you have a spec or requirements for a multi-step task, before touching code. Produces an engineering plan complete with TDD tasks, DRY\u002FSOLID\u002FYAGNI principles, a required Test Plan & Verification section, and a coverage target — then auto-runs \u002Fplan-eng-review as an independent double-check before execution.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fwrite-plan\u002FSKILL.md",[],[116,117,97,118,119,120,121,122,123,43,124,125,126,127,128,129,130,131,132,133],"write plan","plan","dry","verification","review","tasks","code","you","auto","eng","coverage","complete","section","for","test plan","target","as","yagni",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":52},"01M71AZ8NDDP5ZMGEE6FSC4FKR","worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fworktrees\u002FSKILL.md",[],[136,141,142,143,45,144,145,146,147,148,149,119,150,43,151,152],"implementation","workspace","with","plans","feature","isolation","git","directory","work","git worktrees","selection","Safety",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":157,"categories":158,"keywords":162,"publishedAt":52},"01M71AZ4ZQHTNWFRZVYHKQFP08","web-perf","Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fweb-perf\u002FSKILL.md",[159],{"categoryNo":160,"categoryName":161,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[163,164,165,166,167,168,169,170,171,43,172,173,174,175,176,177,178,179,180,181],"web","perf","web perf","resources","MCP","layout","optimize","documentation","caching","qa","knowledge","devtools","issues","render","re","performance","chrome devtools","vitals","never",{"skillNo":183,"name":184,"nameZh":6,"description":185,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":186,"categories":187,"keywords":188,"publishedAt":52},"01M71AZ2KZNWYEGKKRMJH8PYG2","verify","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fverify\u002FSKILL.md",[],[184,127,189,190,149,119,191,192,43,193,45,194,195,196,197],"commands","about","claims","output","assertions","claim","prs","evidence","running",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":204,"publishedAt":52},"01M71AZ0ACCK7N1QMWQK1FV2HJ","validate-idea","Validate a business idea using the minimalist entrepreneur framework. Use when someone has a business idea and wants to test if it's worth pursuing before building anything.","https:\u002F\u002Fgithub.com\u002Fariadoss\u002Fsuperskills\u002Fblob\u002Fmain\u002Fskills\u002Fvalidate-idea\u002FSKILL.md",[],[205,206,207,208,209,210,211,43,212,45,213],"validate","idea","validate idea","framework","it","minimalist","test","business","before building"]