[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M72AAQRECGD3PBYSS14R4376":3,"skill-same:01M72AAQRECGD3PBYSS14R4376":64},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":13,"repositoryHtmlUrl":41,"repositoryHomepageUrl":6,"ownerHtmlUrl":42,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":43,"install":44,"resources":57},"01M72AAQRECGD3PBYSS14R4376","stitch-design-taste",null,"Use when generating Google Stitch DESIGN.md systems for premium typography, color, layout, motion intent, and anti-generic UI rules.","Sansar35\u002Fclaude-agent","Sansar35","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F145020281?v=4","01M724CQ2SCC86MGNSD87D0D4K","01M724CQ3965G9WJ3QXE3AJ5YY",1,"MIT","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fantigravity\u002Fstitch-design-taste\u002FSKILL.md",[],[],"2026-11-10 18:39:20",false,"---\nname: stitch-design-taste\ndescription: \"Use when generating Google Stitch DESIGN.md systems for premium typography, color, layout, motion intent, and anti-generic UI rules.\"\ncategory: frontend\nrisk: safe\nsource: community\nsource_repo: Leonxlnx\u002Ftaste-skill\nsource_type: community\ndate_added: \"2026-04-17\"\nauthor: Leonxlnx\ntags: [stitch, design-system, frontend, ui]\ntools: [claude, cursor, codex, antigravity]\n---\n# Stitch Design Taste — Semantic Design System Skill\n\n## When to Use\n\n- Use when the user wants a Google Stitch-compatible DESIGN.md or semantic design system for AI screen generation.\n- Use when translating premium frontend taste rules into Stitch-friendly visual descriptions, color roles, typography specs, and component behavior.\n- Use when the design system must prevent generic AI UI patterns before screens are generated.\n\n## Limitations\n\n- This skill produces semantic design-system guidance for Stitch; it does not guarantee Stitch will render every constraint exactly.\n- Generated `DESIGN.md` files still require review against the actual product brief, brand constraints, accessibility needs, and screen content.\n- Motion sections document implementation intent for later coding agents because Stitch itself may generate static screens.\n\n\n## Overview\nThis skill generates `DESIGN.md` files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.\n\nThe generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through **\"Visual Descriptions\"** supported by specific color values, typography specs, and component behaviors.\n\n## Prerequisites\n- Access to Google Stitch via [labs.google.com\u002Fstitch](https:\u002F\u002Flabs.google.com\u002Fstitch)\n- Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI\n\n## The Goal\nGenerate a `DESIGN.md` file that encodes:\n1. **Visual atmosphere** — the mood, density, and design philosophy\n2. **Color calibration** — neutrals, accents, and banned patterns with hex codes\n3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns\n4. **Component behaviors** — buttons, cards, inputs with interaction states\n5. **Layout principles** — grid systems, spacing philosophy, responsive strategy\n6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions\n7. **Anti-patterns** — explicit list of banned AI design clichés\n\n## Analysis & Synthesis Instructions\n\n### 1. Define the Atmosphere\nEvaluate the target project's intent. Use evocative adjectives from the taste spectrum:\n- **Density:** \"Art Gallery Airy\" (1–3) → \"Daily App Balanced\" (4–7) → \"Cockpit Dense\" (8–10)\n- **Variance:** \"Predictable Symmetric\" (1–3) → \"Offset Asymmetric\" (4–7) → \"Artsy Chaotic\" (8–10)\n- **Motion:** \"Static Restrained\" (1–3) → \"Fluid CSS\" (4–7) → \"Cinematic Choreography\" (8–10)\n\nDefault baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.\n\n### 2. Map the Color Palette\nFor each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**.\n\n**Mandatory constraints:**\n- Maximum 1 accent color. Saturation below 80%\n- The \"AI Purple\u002FBlue Neon\" aesthetic is strictly BANNED — no purple button glows, no neon gradients\n- Use absolute neutral bases (Zinc\u002FSlate) with high-contrast singular accents\n- Stick to one palette for the entire output — no warm\u002Fcool gray fluctuation\n- Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal\n\n### 3. Establish Typography Rules\n- **Display\u002FHeadlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size\n- **Body:** Relaxed leading, max 65 characters per line\n- **Font Selection:** `Inter` is BANNED for premium\u002Fcreative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`\n- **Serif Ban:** Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) are BANNED. If serif is needed for editorial\u002Fcreative contexts, use only distinctive modern serifs: `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Serif is always BANNED in dashboards or software UIs\n- **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`)\n- **High-Density Override:** When density exceeds 7, all numbers must use Monospace\n\n### 4. Define the Hero Section\nThe Hero is the first impression and must be creative, striking, and never generic:\n- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique\n- **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone\n- **No Filler Text:** \"Scroll to explore\", \"Swipe down\", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally\n- **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4\n- **CTA Restraint:** Maximum one primary CTA. No secondary \"Learn more\" links\n\n### 5. Describe Component Stylings\nFor each component type, describe shape, color, shadow depth, and interaction behavior:\n- **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors\n- **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space\n- **Inputs\u002FForms:** Label above input, helper text optional, error text below. Standard gap spacing\n- **Loading States:** Skeletal loaders matching layout dimensions — no generic circular spinners\n- **Empty States:** Composed compositions indicating how to populate data\n- **Error States:** Clear, inline error reporting\n\n### 6. Define Layout Principles\n- No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking\n- Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace\n- The generic \"3 equal cards horizontally\" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll\n- CSS Grid over Flexbox math — never use `calc()` percentage hacks\n- Contain layouts using max-width constraints (e.g., 1400px centered)\n- Full-height sections must use `min-h-[100dvh]` — never `h-screen` (iOS Safari catastrophic jump)\n\n### 7. Define Responsive Rules\nEvery design must work across all viewports:\n- **Mobile-First Collapse (\u003C 768px):** All multi-column layouts collapse to single column. No exceptions\n- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure\n- **Typography Scaling:** Headlines scale via `clamp()`. Body text minimum `1rem`\u002F`14px`\n- **Touch Targets:** All interactive elements minimum `44px` tap target\n- **Image Behavior:** Inline typography images (photos between words) stack below headline on mobile\n- **Navigation:** Desktop horizontal nav collapses to clean mobile menu\n- **Spacing:** Vertical section gaps reduce proportionally (`clamp(3rem, 8vw, 6rem)`)\n\n### 8. Encode Motion Philosophy\n- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing\n- **Perpetual Micro-Interactions:** Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)\n- **Staggered Orchestration:** Never mount lists instantly — use cascade delays for waterfall reveals\n- **Performance:** Animate exclusively via `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`. Grain\u002Fnoise filters on fixed pseudo-elements only\n\n### 9. List Anti-Patterns (AI Tells)\nEncode these as explicit \"NEVER DO\" rules in the DESIGN.md:\n- No emojis anywhere\n- No `Inter` font\n- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — distinctive modern serifs only if needed\n- No pure black (`#000000`)\n- No neon\u002Fouter glow shadows\n- No oversaturated accents\n- No excessive gradient text on large headers\n- No custom mouse cursors\n- No overlapping elements — clean spatial separation always\n- No 3-column equal card layouts\n- No generic names (\"John Doe\", \"Acme\", \"Nexus\")\n- No fake round numbers (`99.99%`, `50%`)\n- No AI copywriting clichés (\"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\")\n- No filler UI text: \"Scroll to explore\", \"Swipe down\", scroll arrows, bouncing chevrons\n- No broken Unsplash links — use `picsum.photos` or SVG avatars\n- No centered Hero sections (for high-variance projects)\n\n## Output Format (DESIGN.md Structure)\n\n```markdown\n# Design System: [Project Title]\n\n## 1. Visual Theme & Atmosphere\n(Evocative description of the mood, density, variance, and motion intensity.\nExample: \"A restrained, gallery-airy interface with confident asymmetric layouts\nand fluid spring-physics motion. The atmosphere is clinical yet warm — like a\nwell-lit architecture studio.\")\n\n## 2. Color Palette & Roles\n- **Canvas White** (#F9FAFB) — Primary background surface\n- **Pure Surface** (#FFFFFF) — Card and container fill\n- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth\n- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata\n- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines\n- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings\n(Max 1 accent. Saturation \u003C 80%. No purple\u002Fneon.)\n\n## 3. Typography Rules\n- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy\n- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color\n- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers\n- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.\n\n## 4. Component Stylings\n* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost\u002Foutline for secondary.\n* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.\n* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.\n* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.\n* **Empty States:** Composed, illustrated compositions — not just \"No data\" text.\n\n## 5. Layout Principles\n(Grid-first responsive architecture. Asymmetric splits for Hero sections.\nStrict single-column collapse below 768px. Max-width containment.\nNo flexbox percentage math. Generous internal padding.)\n\n## 6. Motion & Interaction\n(Spring physics for all interactive elements. Staggered cascade reveals.\nPerpetual micro-loops on active dashboard components. Hardware-accelerated\ntransforms only. Isolated Client Components for CPU-heavy animations.)\n\n## 7. Anti-Patterns (Banned)\n(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,\nno neon glows, no 3-column equal grids, no AI copywriting clichés,\nno generic placeholder names, no broken image links.)\n```\n\n## Best Practices\n- **Be Descriptive:** \"Deep Charcoal Ink (#18181B)\" — not just \"dark text\"\n- **Be Functional:** Explain what each element is used for\n- **Be Consistent:** Same terminology throughout the document\n- **Be Precise:** Include exact hex codes, rem values, pixel values in parentheses\n- **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic\n\n## Tips for Success\n1. Start with the atmosphere — understand the vibe before detailing tokens\n2. Look for patterns — identify consistent spacing, sizing, and styling\n3. Think semantically — name colors by purpose, not just appearance\n4. Consider hierarchy — document how visual weight communicates importance\n5. Encode the bans — anti-patterns are as important as the rules themselves\n\n## Common Pitfalls to Avoid\n- Using technical jargon without translation (\"rounded-xl\" instead of \"generously rounded corners\")\n- Omitting hex codes or using only descriptive names\n- Forgetting functional roles of design elements\n- Being too vague in atmosphere descriptions\n- Ignoring the anti-pattern list — these are what make the output premium\n- Defaulting to generic \"safe\" designs instead of enforcing the curated aesthetic\n","# Stitch Design Taste — Semantic Design System Skill\n\n## When to Use\n\n- Use when the user wants a Google Stitch-compatible DESIGN.md or semantic design system for AI screen generation.\n- Use when translating premium frontend taste rules into Stitch-friendly visual descriptions, color roles, typography specs, and component behavior.\n- Use when the design system must prevent generic AI UI patterns before screens are generated.\n\n## Limitations\n\n- This skill produces semantic design-system guidance for Stitch; it does not guarantee Stitch will render every constraint exactly.\n- Generated `DESIGN.md` files still require review against the actual product brief, brand constraints, accessibility needs, and screen content.\n- Motion sections document implementation intent for later coding agents because Stitch itself may generate static screens.\n\n\n## Overview\nThis skill generates `DESIGN.md` files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.\n\nThe generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through **\"Visual Descriptions\"** supported by specific color values, typography specs, and component behaviors.\n\n## Prerequisites\n- Access to Google Stitch via [labs.google.com\u002Fstitch](https:\u002F\u002Flabs.google.com\u002Fstitch)\n- Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI\n\n## The Goal\nGenerate a `DESIGN.md` file that encodes:\n1. **Visual atmosphere** — the mood, density, and design philosophy\n2. **Color calibration** — neutrals, accents, and banned patterns with hex codes\n3. **Typographic architecture** — font stacks, scale hierarchy, and anti-patterns\n4. **Component behaviors** — buttons, cards, inputs with interaction states\n5. **Layout principles** — grid systems, spacing philosophy, responsive strategy\n6. **Motion philosophy** — animation engine specs, spring physics, perpetual micro-interactions\n7. **Anti-patterns** — explicit list of banned AI design clichés\n\n## Analysis & Synthesis Instructions\n\n### 1. Define the Atmosphere\nEvaluate the target project's intent. Use evocative adjectives from the taste spectrum:\n- **Density:** \"Art Gallery Airy\" (1–3) → \"Daily App Balanced\" (4–7) → \"Cockpit Dense\" (8–10)\n- **Variance:** \"Predictable Symmetric\" (1–3) → \"Offset Asymmetric\" (4–7) → \"Artsy Chaotic\" (8–10)\n- **Motion:** \"Static Restrained\" (1–3) → \"Fluid CSS\" (4–7) → \"Cinematic Choreography\" (8–10)\n\nDefault baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.\n\n### 2. Map the Color Palette\nFor each color provide: **Descriptive Name** + **Hex Code** + **Functional Role**.\n\n**Mandatory constraints:**\n- Maximum 1 accent color. Saturation below 80%\n- The \"AI Purple\u002FBlue Neon\" aesthetic is strictly BANNED — no purple button glows, no neon gradients\n- Use absolute neutral bases (Zinc\u002FSlate) with high-contrast singular accents\n- Stick to one palette for the entire output — no warm\u002Fcool gray fluctuation\n- Never use pure black (`#000000`) — use Off-Black, Zinc-950, or Charcoal\n\n### 3. Establish Typography Rules\n- **Display\u002FHeadlines:** Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size\n- **Body:** Relaxed leading, max 65 characters per line\n- **Font Selection:** `Inter` is BANNED for premium\u002Fcreative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`\n- **Serif Ban:** Generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`, `Palatino`) are BANNED. If serif is needed for editorial\u002Fcreative contexts, use only distinctive modern serifs: `Fraunces`, `Gambarino`, `Editorial New`, or `Instrument Serif`. Serif is always BANNED in dashboards or software UIs\n- **Dashboard Constraint:** Use Sans-Serif pairings exclusively (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`)\n- **High-Density Override:** When density exceeds 7, all numbers must use Monospace\n\n### 4. Define the Hero Section\nThe Hero is the first impression and must be creative, striking, and never generic:\n- **Inline Image Typography:** Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique\n- **No Overlapping:** Text must never overlap images or other text. Every element occupies its own clean spatial zone\n- **No Filler Text:** \"Scroll to explore\", \"Swipe down\", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally\n- **Asymmetric Structure:** Centered Hero layouts BANNED when variance exceeds 4\n- **CTA Restraint:** Maximum one primary CTA. No secondary \"Learn more\" links\n\n### 5. Describe Component Stylings\nFor each component type, describe shape, color, shadow depth, and interaction behavior:\n- **Buttons:** Tactile push feedback on active state. No neon outer glows. No custom mouse cursors\n- **Cards:** Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space\n- **Inputs\u002FForms:** Label above input, helper text optional, error text below. Standard gap spacing\n- **Loading States:** Skeletal loaders matching layout dimensions — no generic circular spinners\n- **Empty States:** Composed compositions indicating how to populate data\n- **Error States:** Clear, inline error reporting\n\n### 6. Define Layout Principles\n- No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking\n- Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace\n- The generic \"3 equal cards horizontally\" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll\n- CSS Grid over Flexbox math — never use `calc()` percentage hacks\n- Contain layouts using max-width constraints (e.g., 1400px centered)\n- Full-height sections must use `min-h-[100dvh]` — never `h-screen` (iOS Safari catastrophic jump)\n\n### 7. Define Responsive Rules\nEvery design must work across all viewports:\n- **Mobile-First Collapse (\u003C 768px):** All multi-column layouts collapse to single column. No exceptions\n- **No Horizontal Scroll:** Horizontal overflow on mobile is a critical failure\n- **Typography Scaling:** Headlines scale via `clamp()`. Body text minimum `1rem`\u002F`14px`\n- **Touch Targets:** All interactive elements minimum `44px` tap target\n- **Image Behavior:** Inline typography images (photos between words) stack below headline on mobile\n- **Navigation:** Desktop horizontal nav collapses to clean mobile menu\n- **Spacing:** Vertical section gaps reduce proportionally (`clamp(3rem, 8vw, 6rem)`)\n\n### 8. Encode Motion Philosophy\n- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing\n- **Perpetual Micro-Interactions:** Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)\n- **Staggered Orchestration:** Never mount lists instantly — use cascade delays for waterfall reveals\n- **Performance:** Animate exclusively via `transform` and `opacity`. Never animate `top`, `left`, `width`, `height`. Grain\u002Fnoise filters on fixed pseudo-elements only\n\n### 9. List Anti-Patterns (AI Tells)\nEncode these as explicit \"NEVER DO\" rules in the DESIGN.md:\n- No emojis anywhere\n- No `Inter` font\n- No generic serif fonts (`Times New Roman`, `Georgia`, `Garamond`) — distinctive modern serifs only if needed\n- No pure black (`#000000`)\n- No neon\u002Fouter glow shadows\n- No oversaturated accents\n- No excessive gradient text on large headers\n- No custom mouse cursors\n- No overlapping elements — clean spatial separation always\n- No 3-column equal card layouts\n- No generic names (\"John Doe\", \"Acme\", \"Nexus\")\n- No fake round numbers (`99.99%`, `50%`)\n- No AI copywriting clichés (\"Elevate\", \"Seamless\", \"Unleash\", \"Next-Gen\")\n- No filler UI text: \"Scroll to explore\", \"Swipe down\", scroll arrows, bouncing chevrons\n- No broken Unsplash links — use `picsum.photos` or SVG avatars\n- No centered Hero sections (for high-variance projects)\n\n## Output Format (DESIGN.md Structure)\n\n```markdown\n# Design System: [Project Title]\n\n## 1. Visual Theme & Atmosphere\n(Evocative description of the mood, density, variance, and motion intensity.\nExample: \"A restrained, gallery-airy interface with confident asymmetric layouts\nand fluid spring-physics motion. The atmosphere is clinical yet warm — like a\nwell-lit architecture studio.\")\n\n## 2. Color Palette & Roles\n- **Canvas White** (#F9FAFB) — Primary background surface\n- **Pure Surface** (#FFFFFF) — Card and container fill\n- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth\n- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata\n- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines\n- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings\n(Max 1 accent. Saturation \u003C 80%. No purple\u002Fneon.)\n\n## 3. Typography Rules\n- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy\n- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color\n- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers\n- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.\n\n## 4. Component Stylings\n* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost\u002Foutline for secondary.\n* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.\n* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.\n* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.\n* **Empty States:** Composed, illustrated compositions — not just \"No data\" text.\n\n## 5. Layout Principles\n(Grid-first responsive architecture. Asymmetric splits for Hero sections.\nStrict single-column collapse below 768px. Max-width containment.\nNo flexbox percentage math. Generous internal padding.)\n\n## 6. Motion & Interaction\n(Spring physics for all interactive elements. Staggered cascade reveals.\nPerpetual micro-loops on active dashboard components. Hardware-accelerated\ntransforms only. Isolated Client Components for CPU-heavy animations.)\n\n## 7. Anti-Patterns (Banned)\n(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,\nno neon glows, no 3-column equal grids, no AI copywriting clichés,\nno generic placeholder names, no broken image links.)\n```\n\n## Best Practices\n- **Be Descriptive:** \"Deep Charcoal Ink (#18181B)\" — not just \"dark text\"\n- **Be Functional:** Explain what each element is used for\n- **Be Consistent:** Same terminology throughout the document\n- **Be Precise:** Include exact hex codes, rem values, pixel values in parentheses\n- **Be Opinionated:** This is not a neutral template — it enforces a specific, premium aesthetic\n\n## Tips for Success\n1. Start with the atmosphere — understand the vibe before detailing tokens\n2. Look for patterns — identify consistent spacing, sizing, and styling\n3. Think semantically — name colors by purpose, not just appearance\n4. Consider hierarchy — document how visual weight communicates importance\n5. Encode the bans — anti-patterns are as important as the rules themselves\n\n## Common Pitfalls to Avoid\n- Using technical jargon without translation (\"rounded-xl\" instead of \"generously rounded corners\")\n- Omitting hex codes or using only descriptive names\n- Forgetting functional roles of design elements\n- Being too vague in atmosphere descriptions\n- Ignoring the anti-pattern list — these are what make the output premium\n- Defaulting to generic \"safe\" designs instead of enforcing the curated aesthetic\n",{"name":5,"risk":23,"tags":24,"tools":29,"author":34,"source":35,"category":27,"date_added":36,"description":7,"source_repo":37,"source_type":35},"safe",[25,26,27,28],"stitch","design-system","frontend","ui",[30,31,32,33],"claude","cursor","codex","antigravity","Leonxlnx","community","2026-04-17","Leonxlnx\u002Ftaste-skill","main","d046d088ce5a79a083f0abc0fe1b7ded73bc5b1f","claude-config\u002Fskills\u002Fantigravity\u002Fstitch-design-taste","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent","https:\u002F\u002Fgithub.com\u002FSansar35","2026-05-10 16:04:53",{"source":8,"skillName":5,"commands":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add Sansar35\u002Fclaude-agent --skill stitch-design-taste",{"tool":50,"command":51},"bunx","bunx skills add Sansar35\u002Fclaude-agent --skill stitch-design-taste",{"tool":53,"command":54},"pnpm","pnpm dlx skills add Sansar35\u002Fclaude-agent --skill stitch-design-taste","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fantigravity\u002Fstitch-design-taste\u002FSKILL.md",true,[58],{"path":59,"resourceType":60,"resourceTypeDesc":61,"sizeBytes":62,"sourceHtmlUrl":63},"DESIGN.md","REFERENCE","参考文档",12053,"https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fantigravity\u002Fstitch-design-taste\u002FDESIGN.md",[65,72,79,86,93,101],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":71,"publishedAt":18},"01M72DVAN1JYEA302MT0C5MGD6","zustand-store-ts","Create Zustand stores following established patterns with proper TypeScript types and middleware.","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzustand-store-ts\u002FSKILL.md",[],[],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":78,"publishedAt":18},"01M72DV8J5NBRRM4RPDFRV95N7","zod-validation-expert","Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzod-validation-expert\u002FSKILL.md",[],[],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":18},"01M72DV5EMHW0BHP9BZ167MDCB","zinc-database","Access ZINC (230M+ purchasable compounds). Search by ZINC ID\u002FSMILES, similarity searches, 3D-ready structures for docking, analog discovery, for virtual screening and drug discovery.","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzinc-database\u002FSKILL.md",[],[],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":92,"publishedAt":18},"01M72DV216QY0E693ZPEVQ0DBS","zarr-python","Chunked N-D arrays for cloud storage. Compressed arrays, parallel I\u002FO, S3\u002FGCS integration, NumPy\u002FDask\u002FXarray compatible, for large-scale scientific computing pipelines.","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzarr-python\u002FSKILL.md",[],[],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":97,"sourceHtmlUrl":98,"categories":99,"keywords":100,"publishedAt":18},"01M72DTXQREMCRKA8NHCVKHN4W","zapier-workflows","Manage and trigger pre-built Zapier workflows and MCP tool orchestration. Use when user mentions workflows, Zaps, automations, daily digest, research, search, lead tracking, expenses, or asks to \"run\" any process. Also handles Perplexity-based research and Google Sheets data tracking.","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzapier-workflows\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzapier-workflows\u002FSKILL.md",[],[],{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":18},"01M72DTT17TBSJ0Y8J2XZ4C9TZ","zapier-make-patterns","No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity - these platforms have their own patterns, pitfalls, and breaking points.  This skill covers when to use which platform, how to build reliable automations, and when to graduate to code-based solutions. Key insight: Zapier optimizes for simplicity and integrations (7000+ apps), Make optimizes for power","https:\u002F\u002Fgithub.com\u002FSansar35\u002Fclaude-agent\u002Fblob\u002Fmain\u002Fclaude-config\u002Fskills\u002Fzapier-make-patterns\u002FSKILL.md",[],[]]