[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71C3HZCP1V0QKSC3KERS5PR":3,"skill-same:01M71C3HZCP1V0QKSC3KERS5PR":75},{"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":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":14,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M71C3HZCP1V0QKSC3KERS5PR","design-taste-swiss-system",null,"Senior UI\u002FUX Engineer for exact, grid-driven, typographic Swiss interfaces. Uses the full Taste Skill baseline but tunes the output for International Typographic Style discipline, structural clarity, and controlled asymmetry.","yqecea\u002Fgem-swarm","yqecea","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F196189405?v=4","01M71C12KWH5QPTE12J69335KF","Yusuf","01M71C12MFS3BRGNE5SSHB4DY9",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fdesign-taste\u002Fswiss-system\u002Fskill.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"system","design taste","swiss","design taste swiss system","taste","design","output","grid","international","for","but","full","ui","clarity","taste skill","ux","senior","discipline","engineer","structural","2026-11-10 10:12:30",false,"---\r\nname: design-taste-swiss-system\r\ndescription: Senior UI\u002FUX Engineer for exact, grid-driven, typographic Swiss interfaces. Uses the full Taste Skill baseline but tunes the output for International Typographic Style discipline, structural clarity, and controlled asymmetry.\r\n---\r\n\r\n# High-Agency Swiss System Frontend Skill\r\n\r\n> Routing note: enter this style through `..\u002FSKILL.md` first so the pack can choose the right style and component recipes before building.\r\n\r\n## 1. ACTIVE BASELINE CONFIGURATION\r\n* DESIGN_VARIANCE: 4 (1=Perfect Symmetry, 10=Artsy Chaos)\r\n* MOTION_INTENSITY: 1 (1=Static\u002FNo movement, 10=Cinematic\u002FMagic Physics)\r\n* VISUAL_DENSITY: 5 (1=Art Gallery\u002FAiry, 10=Pilot Cockpit\u002FPacked Data)\r\n\r\n**AI Instruction:** The standard baseline for this style is set to these values. Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request. Use these baseline (or user-overridden) values as your global variables to drive Sections 3 through 8.\r\n\r\n## 2. DEFAULT ARCHITECTURE & CONVENTIONS\r\n- DEPENDENCY VERIFICATION [MANDATORY]: Before importing any third-party library, check package.json. If it is missing, output the install command before using it.\r\n- Framework & Interactivity: Default to React or Next.js. Prefer Server Components by default and isolate heavy interactivity in leaf client components.\r\n- RSC SAFETY: Global state only belongs in client components. Wrap providers in a dedicated use client boundary.\r\n- INTERACTIVITY ISOLATION: If strong motion, liquid glass, magnetic interactions, or heavy canvases are used, isolate them in their own client components.\r\n- State Management: Use local useState or useReducer for local UI. Use global state only when it prevents real prop-drilling.\r\n- Styling Policy: Use Tailwind CSS for most styling. Check package.json first and do not assume Tailwind version or plugin setup.\r\n- ANTI-EMOJI POLICY: Do not use emojis in code, markup, text, alt text, labels, or decorative UI unless the user explicitly asks for them.\r\n- IMAGE EXECUTION [CRITICAL]: If imagery would improve the page, include at least one real image in the hero or first two sections by default.\n- VISUAL MEDIA DEFINITION: \"Visual media\" means actual photography, renders, illustrations, product shots, campaign imagery, or user-supplied images. Abstract gradients, particles, waveforms, or generic decorative assets do not count as the main image treatment.\n- IMAGE SOURCING ORDER: First use user-supplied images when available. If image generation is available, generate fitting images when needed. If generation is not available, source fitting public web images instead of leaving the page image-less.\n- COMPONENT EXECUTION [CRITICAL]: When the pack router or `components\u002Fstyle-recipes.md` points to shared component library files, actually open and consult those files before building. Do not skip them just to move faster.\r\n- Responsiveness: Standardize breakpoints, contain layouts with real max widths, and aggressively simplify high-variance desktop layouts on mobile.\r\n- Viewport Stability [CRITICAL]: Never use h-screen for the main hero. Use min-h-[100dvh] so mobile browser chrome does not break the first scene.\r\n- Grid over Flex-Math: Do not use brittle width calc tricks for main layout. Use CSS Grid for reliable, exact structure.\r\n- Icons: Use @phosphor-icons\u002Freact or @radix-ui\u002Freact-icons when icons are needed and keep stroke weight consistent.\r\n- Interaction States: Always provide hover, active, focus, loading, empty, success, and error states when relevant.\r\n\r\n## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)\r\n\r\n### Typography\r\n- Define roles, not just tags: display, headline, title, body, caption or label, and data or mono if needed.\r\n- Display headlines should feel intentional, not generic. Use stronger hierarchy than default Tailwind scales.\r\n- Do not use Inter or a default system sans as the whole identity unless the prompt explicitly demands it.\r\n- Use a real font pairing when the style benefits from it. If the page needs contrast, create it through family, weight, size, spacing, or width.\r\n- H1 should usually land in one to three lines on desktop. Four lines is the hard ceiling. If it breaks further, rewrite, resize, or change the width.\r\n- Long paragraphs should usually sit around 60 to 70ch. Full-width body copy is usually a mistake.\r\n- Use clamp() for fluid sizes when appropriate and never let typography become absurdly huge or timidly small.\r\n- Use tabular numerals for structured data, prices, tables, and metrics.\r\n\r\n### Color and Brand\r\n- Use one clear accent color and one clear neutral family. If everything is colorful, nothing is important.\r\n- The AI purple-blue aesthetic is banned by default: no purple hero gradients, no neon violet glows, no cyan-indigo SaaS fog.\r\n- Build a real color system with background, surface, text, muted text, border, accent, on-accent, success, warning, error, and focus roles.\r\n- Warm and cool neutrals should not be mixed randomly. Pick a temperature and stay coherent.\r\n- Use semantic colors functionally, not as decorative brand identity.\r\n- Pure black #000000 should almost never be the final page background. Use a tuned off-black when the style wants darkness.\r\n- Flat white pages with no tonal hierarchy fail just as hard as dark pages with neon accents.\r\n\r\n### Layout and Hierarchy\r\n- The hero must read as one complete first scene with a clear silhouette at first glance.\r\n- The first screen should feel finished even when content is short. Use media, object scale, structure, or secondary counterweight to preserve the hero shape.\r\n- Do not default to centered hero, three feature cards, testimonials, pricing, FAQ, and footer CTA.\r\n- When DESIGN_VARIANCE is above 4, centered hero compositions are banned unless the prompt explicitly demands them.\r\n- Navigation must fit cleanly at every breakpoint. No awkward wrapping, clipping, or generic chrome.\r\n- Do not solve the whole page with cards. Use rails, image plates, split fields, bands, lists, tables, timelines, framed media, and structural whitespace.\r\n- Each section must answer a user question and earn its place. If a section has no job, remove it.\r\n- Spacing is structural meaning. Tight means same group, medium means related, large means a new chapter.\r\n- Use content-driven breakpoints and let mobile become a cleaner layout, not a compressed desktop.\r\n\r\n### Materiality, Cards, and Components\r\n- Cards are allowed only when elevation or enclosure actually communicates hierarchy.\r\n- Nested cards, boxes inside boxes, and decorative shells are banned by default.\r\n- If a shadow is used, tint it to the page mood instead of using one generic black blur everywhere.\r\n- Use lines, dividers, tonal changes, and composition before inventing another wrapper.\r\n- Buttons, inputs, pills, and badges must follow one real system of radius, depth, and spacing.\r\n- Do not let every section use the exact same panel treatment or the page will collapse into kit output.\r\n- Avoid nested scroll containers inside showcase cards and panels. Expand the module, paginate it, or design the scrollbar intentionally if an internal scroll area is truly required.\r\n- Default showcase surfaces should not expose ugly browser-default internal scrollbars.\r\n\r\n### States, Forms, and Copy Behavior\r\n- Loading states should preserve layout structure. Prefer skeletons or inline progress over empty spinners.\r\n- Empty states must explain what is missing and what the user can do next.\r\n- Error states must say what failed, how to fix it, and preserve user effort.\r\n- Forms require labels above inputs, helper text when useful, and clear inline validation.\r\n- Primary CTAs must say what happens next, not hide behind vague text like Learn more or Submit when specificity is possible.\r\n\r\n## 4. CREATIVE PROACTIVITY, MOTION, AND PERFORMANCE\r\n\r\n### Creative Proactivity\r\n- Do not default to safe template sections. Use a few strong scene ideas instead of many weak sections.\r\n- Pick one bold aesthetic direction and commit to it. Do not mix three style worlds because the UI feels empty.\r\n- Use real visual anchors: photography, renders, diagrams, charts, objects, process frames, or typographic masses.\r\n- Rare UI components are allowed only when they strengthen the chosen style and the actual page goal.\r\n- The site should still feel specific if the logo is removed. If another startup logo could be swapped in with no tension, it failed.\r\n- By default, include meaningful visual media in the hero or first two sections unless the user explicitly asks for text-only composition.\r\n- Prefer larger, style-appropriate imagery over tiny decorative thumbnails or empty placeholder panels.\r\n- If the concept is product-led, system-led, or analytical, use screenshots, diagrams, maps, timelines, or charts as visual proof instead of relying on text alone.\r\n- Keep the page in one dominant lightness mode unless the user explicitly asks for deliberate light-dark switching.\r\n\r\n### Motion and Interaction\r\n- Motion must clarify, confirm, guide, or create affordance. If it only decorates, reduce it or remove it.\r\n- Prefer transform and opacity. Never animate top, left, width, or height for ordinary UI motion.\r\n- One focal motion language is stronger than ten unrelated animations.\r\n- Avoid transition-all duration-300 everywhere, repeated fade-up stagger on every section, endless floating loops, and generic hover:scale-105.\r\n- Respect prefers-reduced-motion and provide a reduced path that still preserves clarity.\r\n- When MOTION_INTENSITY is high, use purposeful choreography: layout transitions, stateful loops, magnetic interactions, chapter reveals, or structured scroll scenes.\r\n- Never mix heavy GSAP or Three.js choreography with generic UI motion in the same tree without a real concept.\r\n- Motion should always match the chosen style.\r\n- Unless the user explicitly asks for a static result, add at least one intentional hero reveal, one light scroll-entry system for major sections, and clear hover or press feedback on interactive elements.\r\n- Hero entries can use fades, wipes, staggered text, image reveals, or restrained parallax depending on the style.\r\n- Scroll motion should be sectional and tasteful, not the same generic fade-up on every element.\r\n- Navigation, buttons, links, cards, and media should all have style-appropriate hover, focus, and active states.\r\n- Use one or two micro-interactions so the page feels alive even when the motion dial stays low.\r\n\r\n### Performance Guardrails\r\n- Do not apply grain, blur, or noise to large scrolling containers. Use fixed pseudo-elements or isolated layers instead.\r\n- Use will-change sparingly, not globally.\r\n- Avoid dozens of independent animated objects at once.\r\n- Reserve WebGL, canvas, and heavy shader work for moments where they are central to the experience.\r\n- Keep z-index disciplined and systemic. Do not spam z-50 or modal-like layering without reason.\r\n- Code must be production-ready, accessible, and semantically clean.\r\n\r\n## 5. TECHNICAL REFERENCE (Dial Definitions)\r\n\r\n### DESIGN_VARIANCE (Level 1-10)\r\n- 1-3: predictable, disciplined, symmetrical, restrained\r\n- 4-7: offset, asymmetrical, mixed scale, more varied composition\r\n- 8-10: highly authored, poster-like, scene-led, large tension between empty and dense zones\r\n- Mobile override: any asymmetry above md must collapse into a stable single-column layout when readability improves.\r\n\r\n### MOTION_INTENSITY (Level 1-10)\r\n- 1-3: mostly static, rely on hover, active, focus, and quick state feedback only\r\n- 4-7: fluid UI transitions, stagger used selectively, richer overlays, restrained layout motion\r\n- 8-10: chaptered reveals, scroll storytelling, magnetic interactions, product choreography, premium physics\r\n- No matter the level, motion cannot delay access to content or violate reduced-motion expectations.\r\n\r\n### VISUAL_DENSITY (Level 1-10)\r\n- 1-3: gallery mode, high whitespace, fewer objects, slower rhythm\r\n- 4-7: daily app mode, balanced spacing and information load\r\n- 8-10: cockpit mode, high information density, tighter spacing, less card chrome, numbers aligned precisely\r\n- High density does not mean chaos. The denser the page, the calmer the grouping must become.\r\n\r\n## 6. AI TELLS (Forbidden Patterns)\r\n\r\n### Visual and Surface Tells\r\n- purple or indigo default accent as the main brand color\r\n- gradient text on H1 as the premium shortcut\r\n- clinical bg-white or bg-gray-50 with no surface hierarchy\r\n- flat black dark mode with neon cyan or violet accents\r\n- rounded-2xl on everything\r\n- glowing orb or blob backgrounds with no content role\r\n\r\n### Layout Tells\r\n- hero left text right image as the only idea\r\n- three equal feature boxes below the hero\r\n- template ordering: hero, features, testimonials, pricing, FAQ, CTA\r\n- logo strip used as filler proof\r\n- dashboard screenshot in the hero that nobody can actually read\r\n- identical grid gaps, paddings, heights, and card shells everywhere\r\n\r\n### Content and Copy Tells\r\n- Transform your business, streamline workflows, unlock insights, all-in-one platform\r\n- generic CTAs like Get Started when a specific action is possible\r\n- fake testimonials, fake names, fake impossible metrics\r\n- startup slop names, generic about pages, and repeated value props saying the same thing three times\r\n- corporate filler openers like In today's fast-paced world\r\n- emoji decoration unless the user explicitly asks for it\r\n\r\n### Component and Code Tells\r\n- shadcn defaults with no customization\r\n- Lucide icons as the entire visual language\r\n- pill badge spam\r\n- cards inside cards inside cards\r\n- no empty, loading, or error states\r\n- use client everywhere and obvious scaffold fingerprints left visible\r\n\r\n## 7. STYLE DIRECTION: Swiss System\r\n\r\n**When to use this skill:** Use this skill when the user wants Swiss, International Style, objective typography, poster logic, grid discipline, or structural clarity.\r\n\r\n### Core Identity\r\n- Swiss style is not retro cosplay; it is a living methodology of order, contrast, and reduction.\r\n- Beauty should come from the grid, the type system, and the relationships between elements.\r\n- The page should feel exact, structural, and objective.\r\n\r\n### Palette and Material\r\n- Use white, off-white, black, and one signal color such as red, blue, or green only when it has a real job.\r\n- Keep surfaces flat and exact; no blur, no plush depth, no decorative haze.\r\n- Dark mode must still feel Swiss, not gamer.\r\n\r\n### Typography Character\r\n- Use grotesk or neo-grotesk dominance with a mathematical scale and rational spacing.\r\n- Uppercase labels with tracking, tabular numerals, and strong display-to-body contrast are core signals.\r\n- Do not use decorative italics, random font mixing, or poster-severe serif drama unless clearly asked.\r\n\r\n### Hero Direction\r\n- Use a poster field, exact split, or modular grid composition.\r\n- The first scene should feel disciplined and bounded even when asymmetrical.\r\n- One headline block and one graphic or image field should control the first screen.\r\n\r\n### Navigation Direction\r\n- Use aligned top rails, numbered indices, or exact side navigation integrated into the grid.\r\n- Navigation should look like part of the system, not a layer pasted on top.\r\n- Avoid rounded nav chrome and playful badges.\r\n\r\n### Layout Tendencies\r\n- Use 12-column grids, rational splits, rule systems, modular poster blocks, and strong rectangular media.\r\n- Asymmetry must have grid rationale.\r\n- Order should create energy, not boredom.\r\n\r\n### Component Vocabulary\r\n- Good fits: poster block, index rail, timeline grid, spec table, rule-separated modules, captioned image band.\r\n- Weak fits: soft blobs, over-rounded cards, luxury haze, random collage.\r\n\r\n### Media and Imagery\r\n- Use cropped photography, diagrams, maps, symbols, and strong rectangular fields.\r\n- Media should feel placed, not casually dropped in.\r\n- Avoid muddy images and pastel UI atmospheres.\r\n\r\n### Motion Profile\r\n- Motion should be nearly invisible: exact fades, clip reveals, and grid-aware slides.\r\n- No gooey effects, hover wobble, magnetic motion, or theatrical springs.\r\n- If motion is visible, it should still feel typographic and disciplined.\r\n\r\n### Creative Arsenal For This Style\r\n- Paragraph highlight reveal in a text-heavy Swiss layout.\r\n- Scroll progress reading bar used as a rational indicator.\r\n- Clip-path reveal transition if it preserves geometric discipline.\r\n\r\n### Style-Specific Avoidances\r\n- soft blobs\r\n- random collage\r\n- gradient noise backgrounds\r\n- unstructured asymmetry\r\n- luxury haze\r\n- over-rounded cards\r\n\r\n### Copy Tone\r\n- direct, exact, and formal\r\n- short lines and clear labels\r\n- little rhetorical flourish\r\n- confidence through clarity\r\n\r\n### Current Production Priorities\r\n- Increase breathing room and avoid overpacking modules into the same viewport.\r\n- Make the output feel more Swiss than brutalist: strict grid, precise type, disciplined accents, and cleaner spacing logic.\r\n- Include diagrams, posters, charts, typographic image plates, or system graphics so the page has visual proof.\r\n- Add restrained motion: grid reveals, line draws, hover underline, and structured section fades.\r\n- Navigation should feel precise and systematic rather than heavy or harsh.\r\n\r\n### Components Library\r\n- Consult `..\u002Fcomponents\u002FREADME.md` before inventing custom modules, hero systems, or interaction patterns from scratch.\r\n- Use `..\u002Fcomponents\u002Fgsap-explore.md` for official GSAP motion scenes, scroll patterns, cursor systems, and CodePen-linked demos.\r\n- Use `..\u002Fcomponents\u002Faceternity-ui.md` for dramatic hero modules, Framer-heavy surfaces, cards, nav experiments, and backgrounds.\r\n- Use `..\u002Fcomponents\u002F21st-community.md` for pragmatic UI primitives, community layouts, shader ideas, and production interface pieces.\r\n- Use `..\u002Fcomponents\u002Freactbits.md` for text animation, micro-interactions, animated effects, and composed React component ideas.\r\n- Adapt every borrowed pattern to the current style; never paste a source pattern in unchanged.\r\n- For this style, start with the `Swiss System` section in `..\u002Fcomponents\u002Fstyle-recipes.md`.\r\n- Strong first picks: GSAP `draw-a-path` \u002F `animate-along-a-path`, Aceternity `background-lines` \u002F `layout-grid`, and 21st breadcrumb\u002Fprogress primitives.\r\n\r\n## 8. FULL TASTE CORE OVERLAY\r\n\r\n### 8.1 CORE PRIORITY\r\n- This section is the deep rule layer for the current style pack.\r\n- If an earlier shortcut rule conflicts with this section, this section wins.\r\n- Apply every rule through the lens of the current style direction instead of flattening everything into one generic aesthetic.\r\n- The current style must still feel unmistakably like its own world after all guardrails are applied.\r\n- Do not output a safe average landing page just because the system has many constraints.\r\n- Use the style direction to choose what to emphasize, not to excuse sloppy composition.\r\n- Every page should feel authored, not statistically assembled.\r\n- Every major section should have a reason to exist.\r\n- Every component should either clarify, persuade, orient, or convert.\r\n- Remove decorative filler that does not create hierarchy, identity, or trust.\r\n- Prefer fewer stronger ideas over many weak UI gestures.\r\n- The result must feel premium, deliberate, and production-minded.\r\n\r\n### 8.2 ACTIVE BASELINE INTERPRETATION\r\n- DESIGN_VARIANCE controls structural risk, asymmetry, and compositional surprise.\r\n- MOTION_INTENSITY controls how alive the interface feels, from almost static to cinematic choreography.\r\n- VISUAL_DENSITY controls how tightly information is packed and how much empty space is preserved.\r\n- Always adapt those values to the user's request if they clearly ask for a calmer, bolder, cleaner, denser, or more expressive result.\r\n- If the user does not specify values, follow the baseline defined at the top of the current style skill.\r\n- If the style identity and the user request conflict, blend them instead of ignoring one side.\r\n- For example, a restrained user request inside a brutalist skill should become controlled brutalism, not generic SaaS.\r\n- For example, a high-motion request inside a minimal skill should become quiet precision motion, not flashy noise.\r\n- For example, a dense dashboard request inside an editorial skill should become structured editorial data, not boxed admin panels.\r\n- Use the three dials continuously during generation instead of setting them once and forgetting them.\r\n\r\n### 8.3 DEFAULT ARCHITECTURE & CONVENTIONS\r\n- Before importing any third-party package, check `package.json` first.\r\n- If a package is missing, output the install command before using it.\r\n- Never assume a motion or icon package exists.\r\n- Prefer React or Next.js unless the user clearly wants another stack.\r\n- Default to Server Components when using the Next.js App Router.\r\n- Put global providers into explicit client wrappers.\r\n- Isolate heavy interaction into leaf client components.\r\n- Keep server components responsible for layout, data wiring, and stable structure.\r\n- Keep client components responsible for touch, drag, hover, local state, and animation.\r\n- Use local state for isolated interactions.\r\n- Use global state only when it prevents deep prop drilling across real complexity.\r\n- Prefer Tailwind CSS for most styling unless the project clearly depends on another system.\r\n- Check the Tailwind major version before using version-specific syntax.\r\n- Do not mix Tailwind v4 patterns into a v3 project.\r\n- Do not overbuild custom utility abstractions when direct classes are clearer.\r\n- Standardize breakpoints around `sm`, `md`, `lg`, and `xl`.\r\n- Contain layouts with `max-w-[1400px] mx-auto`, `max-w-7xl`, or a style-appropriate equivalent.\r\n- Never use brittle flex percentage math where CSS Grid is the better structural tool.\r\n- Default full-height heroes to `min-h-[100dvh]`, not `h-screen`.\r\n- Treat mobile viewport behavior as a first-class layout concern.\r\n- Use either `@phosphor-icons\u002Freact` or `@radix-ui\u002Freact-icons` when icons are needed.\r\n- Keep icon stroke weight consistent across the page.\r\n- Avoid icon soup; use icons only when they clarify meaning or rhythm.\r\n- Avoid emojis by default; only use them if the user explicitly asks for them.\r\n- Keep code output clean, modular, and ready to be integrated without a cleanup pass.\r\n\r\n### 8.4 DESIGN ENGINEERING DIRECTIVES\r\n- The model must actively fight its own tendency toward bland hero sections.\r\n- The model must actively fight its own tendency toward equal cards in a row.\r\n- The model must actively fight its own tendency toward purple-blue AI branding.\r\n- The model must actively fight its own tendency toward oversized generic H1 blocks with weak support copy.\r\n- The model must actively fight its own tendency toward symmetric everything.\r\n- Headlines should default to strong contrast, tight tracking, and deliberate line breaks.\r\n- Body copy should stay readable, calm, and measured.\r\n- Default to one dominant accent color and one neutral palette family.\r\n- Avoid mixing warm and cool neutrals without a clear reason.\r\n- Use typography to build identity before reaching for visual gimmicks.\r\n- Use spacing to create status and calm before reaching for more containers.\r\n- Use containers only when they signal grouping, depth, or interaction.\r\n- A card is not a design system.\r\n- A bento block is not automatically premium.\r\n- A gradient is not automatically art direction.\r\n- Default to one strong primary action and one lower-contrast secondary action.\r\n- Avoid dead pages that only show best-case success states.\r\n- Always think through loading, empty, hover, active, disabled, and error states.\r\n- Treat forms as precision systems, not as anonymous input stacks.\r\n- Labels go above inputs.\r\n- Helper text belongs in markup when it makes the action easier.\r\n- Error text belongs directly under the field it refers to.\r\n- Active states should feel physical, not decorative.\r\n- Press feedback should slightly compress or shift, not explode.\r\n\r\n### 8.5 CREATIVE PROACTIVITY\r\n- Go beyond default glassmorphism if transparent material is used.\r\n- Add inner borders and subtle inner highlights so translucent layers feel physical.\r\n- If motion intensity is above medium, add purposeful perpetual motion to selected elements.\r\n- Do not animate everything at once.\r\n- Give motion a job: guidance, emphasis, status, rhythm, or delight.\r\n- Use Framer Motion layout transitions when cards or panels change size or order.\r\n- Use staggered orchestration for entrances rather than dumping everything onto the screen simultaneously.\r\n- When using cursor-follow interactions, avoid React state for per-frame updates.\r\n- Use motion values and transforms outside the React render loop for continuous interaction.\r\n- Make premium motion feel weighty, not floaty.\r\n- Favor spring curves over default ease-in-out.\r\n- Keep high-motion behavior isolated and easy to remove if the user asks for restraint.\r\n- Use motion to express the current style family, not to overwrite it.\r\n- Minimal styles want quiet motion.\r\n- Editorial styles want paced and elegant motion.\r\n- Dashboard styles want utility motion and live-state motion.\r\n- Brutalist styles want blunt, confident, visible motion.\r\n- Luxe styles want controlled depth and soft reveal motion.\r\n- Product styles can tolerate more spectacle if the hierarchy stays sharp.\r\n\r\n### 8.6 PERFORMANCE GUARDRAILS\r\n- Never animate `top`, `left`, `width`, or `height` when transform or opacity can do the job.\r\n- Keep grain, noise, and blur effects off scrolling surfaces.\r\n- Push decorative overlays to fixed or isolated layers when possible.\r\n- Avoid spraying `z-50` through the whole page.\r\n- Build a real layering system for nav, content, overlays, and dialogs.\r\n- Avoid giant client components for otherwise static pages.\r\n- Memoize perpetual or looping widgets when they would otherwise trigger parent re-renders.\r\n- Keep animation cleanup explicit inside effects.\r\n- Never mix GSAP and Framer Motion inside the same component tree without a hard reason.\r\n- Use GSAP or WebGL only when the concept truly needs them.\r\n- Treat CPU-heavy spectacle as exceptional, not default.\r\n- Premium output must still feel stable on mobile hardware.\r\n\r\n### 8.7 TECHNICAL REFERENCE: DESIGN_VARIANCE\r\n- Levels 1 to 3 should feel predictable, aligned, and calm.\r\n- Levels 1 to 3 favor centered or symmetrical structures only when the style itself supports that restraint.\r\n- Levels 4 to 5 should introduce offsets, layered overlaps, and more dynamic whitespace.\r\n- Levels 4 to 5 should begin to break repetitive section formulas.\r\n- Levels 6 to 7 should feel authored and directional.\r\n- Levels 6 to 7 can use split layouts, offset media, and strong grid imbalance.\r\n- Levels 8 to 10 should feel intentional and unmistakably designed.\r\n- Levels 8 to 10 can use asymmetry, long whitespace fields, unconventional cropping, and gallery-like pacing.\r\n- High variance on desktop must still collapse aggressively and cleanly on mobile.\r\n- Never let high variance produce horizontal scroll or broken reading order.\r\n\r\n### 8.8 TECHNICAL REFERENCE: MOTION_INTENSITY\r\n- Levels 1 to 2 should rely on hover, focus, and press states only.\r\n- Levels 1 to 2 should feel still, precise, and intentional.\r\n- Levels 3 to 4 can add small fade, slide, and reveal choreography.\r\n- Levels 3 to 4 should remain almost invisible to the user.\r\n- Levels 5 to 6 can add stagger, shared layout transitions, and low-key perpetual motion.\r\n- Levels 5 to 6 are the default sweet spot for premium web interfaces.\r\n- Levels 7 to 8 can add scroll choreography, richer motion mapping, and stronger component behavior.\r\n- Levels 7 to 8 require tight discipline so the page still reads clearly.\r\n- Levels 9 to 10 should be reserved for strong creative concepts.\r\n- Levels 9 to 10 should feel cinematic, not chaotic.\r\n- Never use scroll listeners for advanced motion when a motion framework can handle the effect more safely.\r\n- Never let motion break input focus, readability, or layout stability.\r\n\r\n### 8.9 TECHNICAL REFERENCE: VISUAL_DENSITY\r\n- Levels 1 to 2 should feel like a gallery or luxury brochure.\r\n- Levels 1 to 2 should preserve very large vertical gaps and strong breathing room.\r\n- Levels 3 to 4 should feel refined and spacious.\r\n- Levels 3 to 4 are strong defaults for premium marketing sites.\r\n- Levels 5 to 6 should feel balanced and practical.\r\n- Levels 5 to 6 are a strong default for product pages and mixed-content sites.\r\n- Levels 7 to 8 should feel compact but still readable.\r\n- Levels 7 to 8 fit dashboards, tools, and operational interfaces.\r\n- Levels 9 to 10 should feel cockpit-like and intense.\r\n- Levels 9 to 10 should use very strong information hierarchy so compression does not become noise.\r\n- At high density, use dividers, rhythm, and typography before reaching for more nested cards.\r\n- At high density, numbers and status elements should become more systematic and more aligned.\r\n\r\n### 8.10 AI TELLS (FORBIDDEN PATTERNS)\r\n- Avoid neon glows as the default signal for modernity.\r\n- Avoid pure black when an off-black or charcoal would feel richer.\r\n- Avoid oversaturated accents sitting on muted neutrals without relationship.\r\n- Avoid huge gradient headlines as a default trick.\r\n- Avoid default generic mouse cursor experiments.\r\n- Avoid Inter as the automatic answer for every interface.\r\n- Avoid serif fonts on dashboards or product UIs that need technical clarity.\r\n- Avoid giant screaming H1 blocks that dominate five or six lines without structure.\r\n- Avoid mathematically perfect but emotionally dead spacing.\r\n- Avoid equal three-card feature rows as the default content block.\r\n- Avoid generic placeholder people.\r\n- Avoid generic SVG profile eggs.\r\n- Avoid round fake numbers like `99.99%` and `50%`.\r\n- Avoid startup slop brand names.\r\n- Avoid filler verbs like `Elevate`, `Unleash`, and `Revolutionize` unless the user explicitly wants ad-copy energy.\r\n- Avoid broken or random external images.\r\n- Avoid using shadcn defaults without customization.\r\n- Avoid making every section a bordered rounded rectangle.\r\n- Avoid dumping every idea into one hero.\r\n- Avoid converting every style into the same SaaS bento page.\r\n- Avoid making the page feel like a prompt artifact.\r\n- Avoid weak section transitions where one block just stops and the next begins without relationship.\r\n- Avoid a top-heavy page where all effort goes into the first screen and the rest collapses into cards.\r\n- Avoid overly long headline wrapping that looks accidental.\r\n- Avoid microcopy that sounds like a template engine wrote it.\r\n\r\n### 8.11 CREATIVE ARSENAL\r\n- Consider asymmetric hero structures before centered hero structures.\r\n- Consider split-screen layouts with a disciplined text side and a strong visual side.\r\n- Consider masonry or modular gallery composition when the style supports it.\r\n- Consider dock-like navigation behavior when the concept wants playful precision.\r\n- Consider magnetic buttons when the motion level supports tactility.\r\n- Consider gooey or fluid navigation only for expressive styles that can carry it.\r\n- Consider dynamic island style status components for live or adaptive interfaces.\r\n- Consider radial menus or floating action systems only when the interaction model supports them.\r\n- Consider mega-menu reveals for brand-heavy or editorial projects.\r\n- Consider bento grids only when the content mix truly benefits from modular presentation.\r\n- Consider scroll-stacked cards for narratives that need sequence.\r\n- Consider horizontal scroll galleries when the content is inherently comparative or panoramic.\r\n- Consider curtain reveals or split-screen scrolls when the concept benefits from theatrical pacing.\r\n- Consider parallax tilt or spotlight borders for selected cards, not every surface.\r\n- Consider holographic or foil-like reflection only in styles that justify that materiality.\r\n- Consider morphing modal transitions when the user flow benefits from continuity.\r\n- Consider kinetic marquees only when the typography and message are strong enough to carry repetition.\r\n- Consider text scramble or mask reveal effects only when the content theme supports them.\r\n- Consider circular text paths only when they add identity instead of novelty noise.\r\n- Consider animated SVG line drawing when the brand language is geometric or diagrammatic.\r\n- Consider mesh-gradient or blurred-color atmospheres only when they support the palette and not the other way around.\r\n- Consider lens-blur depth only when depth is a real compositional tool.\r\n- Consider GSAP scrolltelling or WebGL backgrounds only when the idea clearly exceeds standard UI motion.\r\n- Consider stronger editorial pacing between sections rather than using yet another component.\r\n- Consider one memorable interaction per page instead of twenty forgettable ones.\r\n\r\n### 8.12 MOTION-ENGINE BENTO PARADIGM\r\n- When a page includes dashboards, feature systems, or modular product stories, use a more advanced bento philosophy.\r\n- Major containers can use larger radii when the current style supports softness or gallery polish.\r\n- Cards should only exist when they create hierarchy, focus, or interaction.\r\n- Labels and supporting descriptions can sit outside cards when that improves clarity.\r\n- Use perpetual micro-interactions selectively so the layout feels alive.\r\n- Use springs that feel weighted, not jittery.\r\n- Use layout animations for reorder, resize, and state changes.\r\n- Keep looping widgets isolated from the parent layout.\r\n- Strong card archetypes include intelligent lists, command inputs, live status surfaces, wide data streams, and contextual focus tools.\r\n- Every animated card should feel like a product behavior, not a loading gimmick.\r\n- The motion language of the bento area must still fit the active style family.\r\n\r\n### 8.13 HERO AND PAGE CHECKSUM RULES\r\n- The hero must have a fixed visual envelope.\r\n- The hero must read as a complete first scene on common laptop screens.\r\n- The hero must not feel like it spills by accident into the next section.\r\n- Transitions can exist, but the hero still needs a clear boundary and checksum.\r\n- If content is short, preserve the hero frame with space, media, or supporting detail instead of letting it collapse.\r\n- If content is long, edit the content before letting the hero break.\r\n- The hero should usually communicate one dominant promise, one support idea, and one next step.\r\n- Use one major visual anchor in the hero.\r\n- If the hero uses no image, replace it with a real spatial or typographic concept.\r\n- If the hero uses an image, crop it with intent.\r\n- The header and hero should feel related, not like different pages stacked together.\r\n- Every later section should feel designed to follow the hero, not copied from a generic library.\r\n\r\n## 9. PAGE AND COMPONENT CONSTRUCTION MATRIX\r\n\r\n### 9.1 HERO SYSTEMS\r\n- Use a split hero when the style benefits from clear text-versus-image tension.\r\n- Use an offset hero when the style benefits from asymmetry and pacing.\r\n- Use a framed hero when the style benefits from object-like composition.\r\n- Use a gallery hero when the style benefits from multiple curated images.\r\n- Use a tall editorial hero when the style benefits from reading rhythm.\r\n- Use a command hero when the page is product-led and interaction-led.\r\n- Use a metrics hero when proof and numbers drive credibility.\r\n- Use a proof-first hero when testimonials or trusted logos matter more than spectacle.\r\n- Use a narrative hero when the story is the product.\r\n- Use a cinematic hero when product surfaces, light, and motion carry the promise.\r\n- Give the hero one primary headline, one supporting paragraph, and one to two actions.\r\n- Keep the paragraph within a readable measure.\r\n- Keep button groups disciplined and aligned.\r\n- Use supporting micro-labels sparingly.\r\n- Support the hero with one meaningful secondary detail such as proof, process, or preview.\r\n- On mobile, stack the hero into a clean reading order without collapsing its visual identity.\r\n\r\n### 9.2 NAVIGATION SYSTEMS\r\n- The navigation should feel like part of the style, not an afterthought.\r\n- Navigation can be inline, floating, docked, framed, editorial, or utility-led depending on the style.\r\n- Keep the nav height stable.\r\n- Ensure labels fit without awkward wrapping.\r\n- If the nav is sparse, use spacing with intent so it feels premium rather than empty.\r\n- If the nav is dense, use grouping and alignment so it feels organized.\r\n- Use one clear active-state treatment.\r\n- Use hover states that match the motion intensity.\r\n- If the nav includes buttons, those buttons must visually belong to the same system as the rest of the page.\r\n- Do not let the nav dominate the hero.\r\n- Do not let the nav disappear as an unstyled line of text.\r\n- Use sticky behavior only when it improves orientation.\r\n\r\n### 9.3 SECTION PACING\r\n- Each section needs a unique job.\r\n- Alternate density, alignment, or media treatment across adjacent sections.\r\n- Avoid repeating the same section shell three times in a row.\r\n- Use shifts in scale, whitespace, or material to create progression.\r\n- Introduce proof before the user starts doubting.\r\n- Introduce detail before the user gets bored.\r\n- Introduce interaction before the page starts feeling static.\r\n- Use quieter sections after visually intense sections.\r\n- Use tighter sections after broad atmospheric sections.\r\n- Keep section intros short and useful.\r\n- Avoid isolated orphan labels with no follow-through.\r\n- Give every section a strong leading edge.\r\n\r\n### 9.4 CARD AND SURFACE SYSTEMS\r\n- Prefer open composition before adding another container.\r\n- Use border, background, shadow, blur, or depth only when they serve a real role.\r\n- Cards can frame proof, product, quotes, controls, or grouped content.\r\n- Cards should not become the default answer for every paragraph.\r\n- Mix carded and uncarded sections to preserve page rhythm.\r\n- Use large radii only when the style direction justifies softness.\r\n- Use hard edges when the style direction wants tension or rigor.\r\n- Use internal spacing that matches the information density.\r\n- Avoid giant empty cards with tiny amounts of content.\r\n- Avoid excessive nested cards.\r\n- If multiple cards appear together, vary emphasis so they do not all feel equal.\r\n- Use dividers and negative space as alternatives to surface chrome.\r\n\r\n### 9.5 IMAGERY AND MEDIA\r\n- Images should feel chosen, not inserted.\r\n- Use fewer better images rather than many weak placeholders.\r\n- Cropping is a design decision, not a fallback.\r\n- Pair image treatment with the style family.\r\n- Editorial styles want quieter, more curated media.\r\n- Product styles want clearer product storytelling and lighting.\r\n- Dashboard styles want meaningful interface previews instead of decorative blobs.\r\n- Luxe styles want tone, shadow, and restraint.\r\n- Soft styles want warm depth and approachable texture.\r\n- Swiss and minimal styles want precise framing and disciplined ratios.\r\n- Use captions only when they improve comprehension or mood.\r\n- Give media enough size to matter.\r\n\r\n### 9.6 TYPOGRAPHY AND COPY BLOCKS\r\n- Headlines need deliberate line breaks.\r\n- Do not leave wrapping to chance.\r\n- Balance long and short lines so the headline shape feels intentional.\r\n- Use support copy to clarify, not to repeat the headline.\r\n- Avoid overlong paragraphs under major headings.\r\n- Break longer arguments into compact blocks.\r\n- Use eyebrow labels only when they add orientation.\r\n- Use quote blocks only when the quote is strong enough.\r\n- Use lists when scan speed matters.\r\n- Use prose when tone and trust matter.\r\n- Use mono sparingly and with purpose.\r\n- Let typography do some of the design work instead of pushing everything into containers.\r\n\r\n### 9.7 COMPONENT LIBRARY\r\n- Consider a proof rail with selective logos and one sharp supporting statement.\r\n- Consider a staggered testimonial stack instead of a generic review carousel.\r\n- Consider a split comparison module with asymmetrical weight.\r\n- Consider a feature timeline with visible momentum.\r\n- Consider a sticky chapter index for long-form editorial pages.\r\n- Consider a command bar preview for product-forward concepts.\r\n- Consider a layered screenshot deck with depth and ordering.\r\n- Consider a swipe stack for case studies or portfolio highlights.\r\n- Consider a pinned metric strip that evolves through the page.\r\n- Consider a quiet FAQ with strong typography instead of loud accordions.\r\n- Consider a dock-like utility bar for tool or app concepts.\r\n- Consider a floating inquiry or booking panel for service sites.\r\n- Consider a process rail that shows actual transitions and not just numbered circles.\r\n- Consider a note-card system for editorial or research-heavy pages.\r\n- Consider a case-study triptych with unequal panel sizes.\r\n- Consider a wide image ledger with adjacent technical notes.\r\n- Consider a gallery strip that expands on hover.\r\n- Consider a comparison shelf with one dominant option and one supporting option.\r\n- Consider a stats slab with strong numeric typography and no unnecessary card chrome.\r\n- Consider a contextual toolbar that appears near selected content.\r\n- Consider a layered callout that overlaps a strict grid.\r\n- Consider a dynamic island style status module for active systems.\r\n- Consider a notification stack that demonstrates system behavior.\r\n- Consider a command-input demo with visible progression.\r\n- Consider a focus-mode document module for intelligence or workflow tools.\r\n- Consider a pricing area that uses contrast and pacing instead of three equal cards.\r\n- Consider a founder note or editorial letter for premium brands.\r\n- Consider a structured footer that continues the visual language instead of ending abruptly.\r\n\r\n### 9.8 RARE UI MOVES\r\n- Use spotlight borders on only one or two hero surfaces.\r\n- Use directional hover fills on premium buttons.\r\n- Use subtle image trails only for expressive high-motion concepts.\r\n- Use kinetic marquee bands when the typography is strong enough.\r\n- Use curtain reveals when the section needs theatrical entry.\r\n- Use sticky scroll stacks for sequential proof.\r\n- Use split-screen opposing motion for contrast-heavy layouts.\r\n- Use circular text only when it reinforces a visual motif.\r\n- Use animated line drawing for diagrammatic stories.\r\n- Use hover-based accordion galleries for editorial or brand work.\r\n- Use float-in action bars for contextual workflows.\r\n- Use parallax tilt sparingly and only on surfaces that can carry depth.\r\n- Use shimmer skeletons that match real layout dimensions.\r\n- Use ripple click effects only when the style tolerates visible feedback.\r\n- Use breathing status dots for live systems.\r\n- Use overshoot badges for event arrival or notification moments.\r\n- Use auto-sorting stacks for AI or prioritization concepts.\r\n- Use seamless horizontal data streams when the content is cyclical.\r\n- Use morphing modal expansions for continuity between trigger and dialog.\r\n- Use radial menus only when they match the product behavior.\r\n\r\n### 9.9 OUTPUT ALGORITHM\r\n- First decide the page's central promise.\r\n- Then decide the hero system.\r\n- Then decide the navigation posture.\r\n- Then decide the section sequence.\r\n- Then decide where proof enters.\r\n- Then decide where imagery enters.\r\n- Then decide whether cards are necessary.\r\n- Then decide the motion posture based on the current style and motion dial.\r\n- Then decide the conversion moment.\r\n- Then decide the closing section and footer tone.\r\n- Then refine line breaks, spacing, and surface hierarchy.\r\n- Then add states, polish, and implementation details.\r\n\r\n## 10. FAILURE MODES AND RECOVERY LOOP\r\n- If the result looks like a template, increase structural specificity.\r\n- If the result looks empty, improve composition before adding more filler content.\r\n- If the result looks crowded, remove containers before shrinking typography.\r\n- If the result looks generic, strengthen typography and layout before adding effects.\r\n- If the result looks like generic AI SaaS, remove the equal cards and the purple-blue palette first.\r\n- If the hero wraps awkwardly, rewrite the headline instead of accepting the break.\r\n- If the sections all look the same, vary the section grammar.\r\n- If the page feels too safe, add one memorable component or layout move.\r\n- If the page feels chaotic, reduce simultaneous variation and protect the reading path.\r\n- If motion feels cheap, slow it down and give it weight.\r\n- If motion feels absent, add focused entry choreography and tactile states.\r\n- If images feel random, reduce their count and improve their role.\r\n- If proof feels tacked on, move it earlier and integrate it into the page narrative.\r\n- If the design feels over-carded, unwrap half the content and rebuild spacing.\r\n- If the design feels under-designed, strengthen the page skeleton before adding novelty.\r\n- If the style identity is disappearing, reassert the current style's typography, surfaces, and composition rules.\r\n- If implementation complexity starts dominating the idea, simplify the interaction and keep the visual ambition.\r\n- If the user asks for a calmer or bolder version, change the dials and regenerate the structure accordingly.\r\n\r\n### 10.1 QUICK DECISION SHORTCUTS\r\n- If the user asks for premium, increase restraint before increasing decoration.\r\n- If the user asks for bold, increase structure contrast before increasing chaos.\r\n- If the user asks for minimal, remove weak components before shrinking everything.\r\n- If the user asks for luxury, improve material, spacing, and type before adding gold accents.\r\n- If the user asks for editorial, improve pacing and copy hierarchy before adding serif everywhere.\r\n- If the user asks for product, sharpen proof and interaction before adding more feature boxes.\r\n- If the user asks for dashboard, improve system clarity before adding more charts.\r\n- If the user asks for playful, keep the composition disciplined so the play has a frame.\r\n- If the user asks for futuristic, avoid default blue glow tropes.\r\n- If the user asks for calm, reduce simultaneous motion and reduce accent spread.\r\n- If the user asks for energetic, intensify rhythm and transitions without breaking readability.\r\n- If the user gives little detail, choose one strong visual thesis and build around it.\r\n- If the result feels mid, strengthen typography, hero framing, and section rhythm first.\r\n- If you are unsure, choose the more intentional option, not the more common option.\r\n- Always preserve the current style identity while applying these shortcuts.\r\n## 11. FINAL PRE-FLIGHT CHECK\r\n- Is the hero a complete first scene?\r\n- Do the headlines avoid weak line breaks?\r\n- Does the navigation fit cleanly and feel style-specific?\r\n- Are cards used only when they earn their place?\r\n- Are loading, empty, and error states designed?\r\n- Does the page have real image, media, diagram, or object weight?\r\n- Would the result still feel specific if the logo was removed?\r\n- Does motion match the style and stay professional?\r\n- Did the code stay semantically clean, responsive, and production-ready?\r\n- Can you feel the grid without drawing it?\r\n- Does order create energy rather than blandness?\r\n- Did motion stay subordinate to structure?\r\n- Would this still hold up as a poster?\r\n\r\n\r\n","# High-Agency Swiss System Frontend Skill\r\n\r\n> Routing note: enter this style through `..\u002FSKILL.md` first so the pack can choose the right style and component recipes before building.\r\n\r\n## 1. ACTIVE BASELINE CONFIGURATION\r\n* DESIGN_VARIANCE: 4 (1=Perfect Symmetry, 10=Artsy Chaos)\r\n* MOTION_INTENSITY: 1 (1=Static\u002FNo movement, 10=Cinematic\u002FMagic Physics)\r\n* VISUAL_DENSITY: 5 (1=Art Gallery\u002FAiry, 10=Pilot Cockpit\u002FPacked Data)\r\n\r\n**AI Instruction:** The standard baseline for this style is set to these values. Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request. Use these baseline (or user-overridden) values as your global variables to drive Sections 3 through 8.\r\n\r\n## 2. DEFAULT ARCHITECTURE & CONVENTIONS\r\n- DEPENDENCY VERIFICATION [MANDATORY]: Before importing any third-party library, check package.json. If it is missing, output the install command before using it.\r\n- Framework & Interactivity: Default to React or Next.js. Prefer Server Components by default and isolate heavy interactivity in leaf client components.\r\n- RSC SAFETY: Global state only belongs in client components. Wrap providers in a dedicated use client boundary.\r\n- INTERACTIVITY ISOLATION: If strong motion, liquid glass, magnetic interactions, or heavy canvases are used, isolate them in their own client components.\r\n- State Management: Use local useState or useReducer for local UI. Use global state only when it prevents real prop-drilling.\r\n- Styling Policy: Use Tailwind CSS for most styling. Check package.json first and do not assume Tailwind version or plugin setup.\r\n- ANTI-EMOJI POLICY: Do not use emojis in code, markup, text, alt text, labels, or decorative UI unless the user explicitly asks for them.\r\n- IMAGE EXECUTION [CRITICAL]: If imagery would improve the page, include at least one real image in the hero or first two sections by default.\n- VISUAL MEDIA DEFINITION: \"Visual media\" means actual photography, renders, illustrations, product shots, campaign imagery, or user-supplied images. Abstract gradients, particles, waveforms, or generic decorative assets do not count as the main image treatment.\n- IMAGE SOURCING ORDER: First use user-supplied images when available. If image generation is available, generate fitting images when needed. If generation is not available, source fitting public web images instead of leaving the page image-less.\n- COMPONENT EXECUTION [CRITICAL]: When the pack router or `components\u002Fstyle-recipes.md` points to shared component library files, actually open and consult those files before building. Do not skip them just to move faster.\r\n- Responsiveness: Standardize breakpoints, contain layouts with real max widths, and aggressively simplify high-variance desktop layouts on mobile.\r\n- Viewport Stability [CRITICAL]: Never use h-screen for the main hero. Use min-h-[100dvh] so mobile browser chrome does not break the first scene.\r\n- Grid over Flex-Math: Do not use brittle width calc tricks for main layout. Use CSS Grid for reliable, exact structure.\r\n- Icons: Use @phosphor-icons\u002Freact or @radix-ui\u002Freact-icons when icons are needed and keep stroke weight consistent.\r\n- Interaction States: Always provide hover, active, focus, loading, empty, success, and error states when relevant.\r\n\r\n## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)\r\n\r\n### Typography\r\n- Define roles, not just tags: display, headline, title, body, caption or label, and data or mono if needed.\r\n- Display headlines should feel intentional, not generic. Use stronger hierarchy than default Tailwind scales.\r\n- Do not use Inter or a default system sans as the whole identity unless the prompt explicitly demands it.\r\n- Use a real font pairing when the style benefits from it. If the page needs contrast, create it through family, weight, size, spacing, or width.\r\n- H1 should usually land in one to three lines on desktop. Four lines is the hard ceiling. If it breaks further, rewrite, resize, or change the width.\r\n- Long paragraphs should usually sit around 60 to 70ch. Full-width body copy is usually a mistake.\r\n- Use clamp() for fluid sizes when appropriate and never let typography become absurdly huge or timidly small.\r\n- Use tabular numerals for structured data, prices, tables, and metrics.\r\n\r\n### Color and Brand\r\n- Use one clear accent color and one clear neutral family. If everything is colorful, nothing is important.\r\n- The AI purple-blue aesthetic is banned by default: no purple hero gradients, no neon violet glows, no cyan-indigo SaaS fog.\r\n- Build a real color system with background, surface, text, muted text, border, accent, on-accent, success, warning, error, and focus roles.\r\n- Warm and cool neutrals should not be mixed randomly. Pick a temperature and stay coherent.\r\n- Use semantic colors functionally, not as decorative brand identity.\r\n- Pure black #000000 should almost never be the final page background. Use a tuned off-black when the style wants darkness.\r\n- Flat white pages with no tonal hierarchy fail just as hard as dark pages with neon accents.\r\n\r\n### Layout and Hierarchy\r\n- The hero must read as one complete first scene with a clear silhouette at first glance.\r\n- The first screen should feel finished even when content is short. Use media, object scale, structure, or secondary counterweight to preserve the hero shape.\r\n- Do not default to centered hero, three feature cards, testimonials, pricing, FAQ, and footer CTA.\r\n- When DESIGN_VARIANCE is above 4, centered hero compositions are banned unless the prompt explicitly demands them.\r\n- Navigation must fit cleanly at every breakpoint. No awkward wrapping, clipping, or generic chrome.\r\n- Do not solve the whole page with cards. Use rails, image plates, split fields, bands, lists, tables, timelines, framed media, and structural whitespace.\r\n- Each section must answer a user question and earn its place. If a section has no job, remove it.\r\n- Spacing is structural meaning. Tight means same group, medium means related, large means a new chapter.\r\n- Use content-driven breakpoints and let mobile become a cleaner layout, not a compressed desktop.\r\n\r\n### Materiality, Cards, and Components\r\n- Cards are allowed only when elevation or enclosure actually communicates hierarchy.\r\n- Nested cards, boxes inside boxes, and decorative shells are banned by default.\r\n- If a shadow is used, tint it to the page mood instead of using one generic black blur everywhere.\r\n- Use lines, dividers, tonal changes, and composition before inventing another wrapper.\r\n- Buttons, inputs, pills, and badges must follow one real system of radius, depth, and spacing.\r\n- Do not let every section use the exact same panel treatment or the page will collapse into kit output.\r\n- Avoid nested scroll containers inside showcase cards and panels. Expand the module, paginate it, or design the scrollbar intentionally if an internal scroll area is truly required.\r\n- Default showcase surfaces should not expose ugly browser-default internal scrollbars.\r\n\r\n### States, Forms, and Copy Behavior\r\n- Loading states should preserve layout structure. Prefer skeletons or inline progress over empty spinners.\r\n- Empty states must explain what is missing and what the user can do next.\r\n- Error states must say what failed, how to fix it, and preserve user effort.\r\n- Forms require labels above inputs, helper text when useful, and clear inline validation.\r\n- Primary CTAs must say what happens next, not hide behind vague text like Learn more or Submit when specificity is possible.\r\n\r\n## 4. CREATIVE PROACTIVITY, MOTION, AND PERFORMANCE\r\n\r\n### Creative Proactivity\r\n- Do not default to safe template sections. Use a few strong scene ideas instead of many weak sections.\r\n- Pick one bold aesthetic direction and commit to it. Do not mix three style worlds because the UI feels empty.\r\n- Use real visual anchors: photography, renders, diagrams, charts, objects, process frames, or typographic masses.\r\n- Rare UI components are allowed only when they strengthen the chosen style and the actual page goal.\r\n- The site should still feel specific if the logo is removed. If another startup logo could be swapped in with no tension, it failed.\r\n- By default, include meaningful visual media in the hero or first two sections unless the user explicitly asks for text-only composition.\r\n- Prefer larger, style-appropriate imagery over tiny decorative thumbnails or empty placeholder panels.\r\n- If the concept is product-led, system-led, or analytical, use screenshots, diagrams, maps, timelines, or charts as visual proof instead of relying on text alone.\r\n- Keep the page in one dominant lightness mode unless the user explicitly asks for deliberate light-dark switching.\r\n\r\n### Motion and Interaction\r\n- Motion must clarify, confirm, guide, or create affordance. If it only decorates, reduce it or remove it.\r\n- Prefer transform and opacity. Never animate top, left, width, or height for ordinary UI motion.\r\n- One focal motion language is stronger than ten unrelated animations.\r\n- Avoid transition-all duration-300 everywhere, repeated fade-up stagger on every section, endless floating loops, and generic hover:scale-105.\r\n- Respect prefers-reduced-motion and provide a reduced path that still preserves clarity.\r\n- When MOTION_INTENSITY is high, use purposeful choreography: layout transitions, stateful loops, magnetic interactions, chapter reveals, or structured scroll scenes.\r\n- Never mix heavy GSAP or Three.js choreography with generic UI motion in the same tree without a real concept.\r\n- Motion should always match the chosen style.\r\n- Unless the user explicitly asks for a static result, add at least one intentional hero reveal, one light scroll-entry system for major sections, and clear hover or press feedback on interactive elements.\r\n- Hero entries can use fades, wipes, staggered text, image reveals, or restrained parallax depending on the style.\r\n- Scroll motion should be sectional and tasteful, not the same generic fade-up on every element.\r\n- Navigation, buttons, links, cards, and media should all have style-appropriate hover, focus, and active states.\r\n- Use one or two micro-interactions so the page feels alive even when the motion dial stays low.\r\n\r\n### Performance Guardrails\r\n- Do not apply grain, blur, or noise to large scrolling containers. Use fixed pseudo-elements or isolated layers instead.\r\n- Use will-change sparingly, not globally.\r\n- Avoid dozens of independent animated objects at once.\r\n- Reserve WebGL, canvas, and heavy shader work for moments where they are central to the experience.\r\n- Keep z-index disciplined and systemic. Do not spam z-50 or modal-like layering without reason.\r\n- Code must be production-ready, accessible, and semantically clean.\r\n\r\n## 5. TECHNICAL REFERENCE (Dial Definitions)\r\n\r\n### DESIGN_VARIANCE (Level 1-10)\r\n- 1-3: predictable, disciplined, symmetrical, restrained\r\n- 4-7: offset, asymmetrical, mixed scale, more varied composition\r\n- 8-10: highly authored, poster-like, scene-led, large tension between empty and dense zones\r\n- Mobile override: any asymmetry above md must collapse into a stable single-column layout when readability improves.\r\n\r\n### MOTION_INTENSITY (Level 1-10)\r\n- 1-3: mostly static, rely on hover, active, focus, and quick state feedback only\r\n- 4-7: fluid UI transitions, stagger used selectively, richer overlays, restrained layout motion\r\n- 8-10: chaptered reveals, scroll storytelling, magnetic interactions, product choreography, premium physics\r\n- No matter the level, motion cannot delay access to content or violate reduced-motion expectations.\r\n\r\n### VISUAL_DENSITY (Level 1-10)\r\n- 1-3: gallery mode, high whitespace, fewer objects, slower rhythm\r\n- 4-7: daily app mode, balanced spacing and information load\r\n- 8-10: cockpit mode, high information density, tighter spacing, less card chrome, numbers aligned precisely\r\n- High density does not mean chaos. The denser the page, the calmer the grouping must become.\r\n\r\n## 6. AI TELLS (Forbidden Patterns)\r\n\r\n### Visual and Surface Tells\r\n- purple or indigo default accent as the main brand color\r\n- gradient text on H1 as the premium shortcut\r\n- clinical bg-white or bg-gray-50 with no surface hierarchy\r\n- flat black dark mode with neon cyan or violet accents\r\n- rounded-2xl on everything\r\n- glowing orb or blob backgrounds with no content role\r\n\r\n### Layout Tells\r\n- hero left text right image as the only idea\r\n- three equal feature boxes below the hero\r\n- template ordering: hero, features, testimonials, pricing, FAQ, CTA\r\n- logo strip used as filler proof\r\n- dashboard screenshot in the hero that nobody can actually read\r\n- identical grid gaps, paddings, heights, and card shells everywhere\r\n\r\n### Content and Copy Tells\r\n- Transform your business, streamline workflows, unlock insights, all-in-one platform\r\n- generic CTAs like Get Started when a specific action is possible\r\n- fake testimonials, fake names, fake impossible metrics\r\n- startup slop names, generic about pages, and repeated value props saying the same thing three times\r\n- corporate filler openers like In today's fast-paced world\r\n- emoji decoration unless the user explicitly asks for it\r\n\r\n### Component and Code Tells\r\n- shadcn defaults with no customization\r\n- Lucide icons as the entire visual language\r\n- pill badge spam\r\n- cards inside cards inside cards\r\n- no empty, loading, or error states\r\n- use client everywhere and obvious scaffold fingerprints left visible\r\n\r\n## 7. STYLE DIRECTION: Swiss System\r\n\r\n**When to use this skill:** Use this skill when the user wants Swiss, International Style, objective typography, poster logic, grid discipline, or structural clarity.\r\n\r\n### Core Identity\r\n- Swiss style is not retro cosplay; it is a living methodology of order, contrast, and reduction.\r\n- Beauty should come from the grid, the type system, and the relationships between elements.\r\n- The page should feel exact, structural, and objective.\r\n\r\n### Palette and Material\r\n- Use white, off-white, black, and one signal color such as red, blue, or green only when it has a real job.\r\n- Keep surfaces flat and exact; no blur, no plush depth, no decorative haze.\r\n- Dark mode must still feel Swiss, not gamer.\r\n\r\n### Typography Character\r\n- Use grotesk or neo-grotesk dominance with a mathematical scale and rational spacing.\r\n- Uppercase labels with tracking, tabular numerals, and strong display-to-body contrast are core signals.\r\n- Do not use decorative italics, random font mixing, or poster-severe serif drama unless clearly asked.\r\n\r\n### Hero Direction\r\n- Use a poster field, exact split, or modular grid composition.\r\n- The first scene should feel disciplined and bounded even when asymmetrical.\r\n- One headline block and one graphic or image field should control the first screen.\r\n\r\n### Navigation Direction\r\n- Use aligned top rails, numbered indices, or exact side navigation integrated into the grid.\r\n- Navigation should look like part of the system, not a layer pasted on top.\r\n- Avoid rounded nav chrome and playful badges.\r\n\r\n### Layout Tendencies\r\n- Use 12-column grids, rational splits, rule systems, modular poster blocks, and strong rectangular media.\r\n- Asymmetry must have grid rationale.\r\n- Order should create energy, not boredom.\r\n\r\n### Component Vocabulary\r\n- Good fits: poster block, index rail, timeline grid, spec table, rule-separated modules, captioned image band.\r\n- Weak fits: soft blobs, over-rounded cards, luxury haze, random collage.\r\n\r\n### Media and Imagery\r\n- Use cropped photography, diagrams, maps, symbols, and strong rectangular fields.\r\n- Media should feel placed, not casually dropped in.\r\n- Avoid muddy images and pastel UI atmospheres.\r\n\r\n### Motion Profile\r\n- Motion should be nearly invisible: exact fades, clip reveals, and grid-aware slides.\r\n- No gooey effects, hover wobble, magnetic motion, or theatrical springs.\r\n- If motion is visible, it should still feel typographic and disciplined.\r\n\r\n### Creative Arsenal For This Style\r\n- Paragraph highlight reveal in a text-heavy Swiss layout.\r\n- Scroll progress reading bar used as a rational indicator.\r\n- Clip-path reveal transition if it preserves geometric discipline.\r\n\r\n### Style-Specific Avoidances\r\n- soft blobs\r\n- random collage\r\n- gradient noise backgrounds\r\n- unstructured asymmetry\r\n- luxury haze\r\n- over-rounded cards\r\n\r\n### Copy Tone\r\n- direct, exact, and formal\r\n- short lines and clear labels\r\n- little rhetorical flourish\r\n- confidence through clarity\r\n\r\n### Current Production Priorities\r\n- Increase breathing room and avoid overpacking modules into the same viewport.\r\n- Make the output feel more Swiss than brutalist: strict grid, precise type, disciplined accents, and cleaner spacing logic.\r\n- Include diagrams, posters, charts, typographic image plates, or system graphics so the page has visual proof.\r\n- Add restrained motion: grid reveals, line draws, hover underline, and structured section fades.\r\n- Navigation should feel precise and systematic rather than heavy or harsh.\r\n\r\n### Components Library\r\n- Consult `..\u002Fcomponents\u002FREADME.md` before inventing custom modules, hero systems, or interaction patterns from scratch.\r\n- Use `..\u002Fcomponents\u002Fgsap-explore.md` for official GSAP motion scenes, scroll patterns, cursor systems, and CodePen-linked demos.\r\n- Use `..\u002Fcomponents\u002Faceternity-ui.md` for dramatic hero modules, Framer-heavy surfaces, cards, nav experiments, and backgrounds.\r\n- Use `..\u002Fcomponents\u002F21st-community.md` for pragmatic UI primitives, community layouts, shader ideas, and production interface pieces.\r\n- Use `..\u002Fcomponents\u002Freactbits.md` for text animation, micro-interactions, animated effects, and composed React component ideas.\r\n- Adapt every borrowed pattern to the current style; never paste a source pattern in unchanged.\r\n- For this style, start with the `Swiss System` section in `..\u002Fcomponents\u002Fstyle-recipes.md`.\r\n- Strong first picks: GSAP `draw-a-path` \u002F `animate-along-a-path`, Aceternity `background-lines` \u002F `layout-grid`, and 21st breadcrumb\u002Fprogress primitives.\r\n\r\n## 8. FULL TASTE CORE OVERLAY\r\n\r\n### 8.1 CORE PRIORITY\r\n- This section is the deep rule layer for the current style pack.\r\n- If an earlier shortcut rule conflicts with this section, this section wins.\r\n- Apply every rule through the lens of the current style direction instead of flattening everything into one generic aesthetic.\r\n- The current style must still feel unmistakably like its own world after all guardrails are applied.\r\n- Do not output a safe average landing page just because the system has many constraints.\r\n- Use the style direction to choose what to emphasize, not to excuse sloppy composition.\r\n- Every page should feel authored, not statistically assembled.\r\n- Every major section should have a reason to exist.\r\n- Every component should either clarify, persuade, orient, or convert.\r\n- Remove decorative filler that does not create hierarchy, identity, or trust.\r\n- Prefer fewer stronger ideas over many weak UI gestures.\r\n- The result must feel premium, deliberate, and production-minded.\r\n\r\n### 8.2 ACTIVE BASELINE INTERPRETATION\r\n- DESIGN_VARIANCE controls structural risk, asymmetry, and compositional surprise.\r\n- MOTION_INTENSITY controls how alive the interface feels, from almost static to cinematic choreography.\r\n- VISUAL_DENSITY controls how tightly information is packed and how much empty space is preserved.\r\n- Always adapt those values to the user's request if they clearly ask for a calmer, bolder, cleaner, denser, or more expressive result.\r\n- If the user does not specify values, follow the baseline defined at the top of the current style skill.\r\n- If the style identity and the user request conflict, blend them instead of ignoring one side.\r\n- For example, a restrained user request inside a brutalist skill should become controlled brutalism, not generic SaaS.\r\n- For example, a high-motion request inside a minimal skill should become quiet precision motion, not flashy noise.\r\n- For example, a dense dashboard request inside an editorial skill should become structured editorial data, not boxed admin panels.\r\n- Use the three dials continuously during generation instead of setting them once and forgetting them.\r\n\r\n### 8.3 DEFAULT ARCHITECTURE & CONVENTIONS\r\n- Before importing any third-party package, check `package.json` first.\r\n- If a package is missing, output the install command before using it.\r\n- Never assume a motion or icon package exists.\r\n- Prefer React or Next.js unless the user clearly wants another stack.\r\n- Default to Server Components when using the Next.js App Router.\r\n- Put global providers into explicit client wrappers.\r\n- Isolate heavy interaction into leaf client components.\r\n- Keep server components responsible for layout, data wiring, and stable structure.\r\n- Keep client components responsible for touch, drag, hover, local state, and animation.\r\n- Use local state for isolated interactions.\r\n- Use global state only when it prevents deep prop drilling across real complexity.\r\n- Prefer Tailwind CSS for most styling unless the project clearly depends on another system.\r\n- Check the Tailwind major version before using version-specific syntax.\r\n- Do not mix Tailwind v4 patterns into a v3 project.\r\n- Do not overbuild custom utility abstractions when direct classes are clearer.\r\n- Standardize breakpoints around `sm`, `md`, `lg`, and `xl`.\r\n- Contain layouts with `max-w-[1400px] mx-auto`, `max-w-7xl`, or a style-appropriate equivalent.\r\n- Never use brittle flex percentage math where CSS Grid is the better structural tool.\r\n- Default full-height heroes to `min-h-[100dvh]`, not `h-screen`.\r\n- Treat mobile viewport behavior as a first-class layout concern.\r\n- Use either `@phosphor-icons\u002Freact` or `@radix-ui\u002Freact-icons` when icons are needed.\r\n- Keep icon stroke weight consistent across the page.\r\n- Avoid icon soup; use icons only when they clarify meaning or rhythm.\r\n- Avoid emojis by default; only use them if the user explicitly asks for them.\r\n- Keep code output clean, modular, and ready to be integrated without a cleanup pass.\r\n\r\n### 8.4 DESIGN ENGINEERING DIRECTIVES\r\n- The model must actively fight its own tendency toward bland hero sections.\r\n- The model must actively fight its own tendency toward equal cards in a row.\r\n- The model must actively fight its own tendency toward purple-blue AI branding.\r\n- The model must actively fight its own tendency toward oversized generic H1 blocks with weak support copy.\r\n- The model must actively fight its own tendency toward symmetric everything.\r\n- Headlines should default to strong contrast, tight tracking, and deliberate line breaks.\r\n- Body copy should stay readable, calm, and measured.\r\n- Default to one dominant accent color and one neutral palette family.\r\n- Avoid mixing warm and cool neutrals without a clear reason.\r\n- Use typography to build identity before reaching for visual gimmicks.\r\n- Use spacing to create status and calm before reaching for more containers.\r\n- Use containers only when they signal grouping, depth, or interaction.\r\n- A card is not a design system.\r\n- A bento block is not automatically premium.\r\n- A gradient is not automatically art direction.\r\n- Default to one strong primary action and one lower-contrast secondary action.\r\n- Avoid dead pages that only show best-case success states.\r\n- Always think through loading, empty, hover, active, disabled, and error states.\r\n- Treat forms as precision systems, not as anonymous input stacks.\r\n- Labels go above inputs.\r\n- Helper text belongs in markup when it makes the action easier.\r\n- Error text belongs directly under the field it refers to.\r\n- Active states should feel physical, not decorative.\r\n- Press feedback should slightly compress or shift, not explode.\r\n\r\n### 8.5 CREATIVE PROACTIVITY\r\n- Go beyond default glassmorphism if transparent material is used.\r\n- Add inner borders and subtle inner highlights so translucent layers feel physical.\r\n- If motion intensity is above medium, add purposeful perpetual motion to selected elements.\r\n- Do not animate everything at once.\r\n- Give motion a job: guidance, emphasis, status, rhythm, or delight.\r\n- Use Framer Motion layout transitions when cards or panels change size or order.\r\n- Use staggered orchestration for entrances rather than dumping everything onto the screen simultaneously.\r\n- When using cursor-follow interactions, avoid React state for per-frame updates.\r\n- Use motion values and transforms outside the React render loop for continuous interaction.\r\n- Make premium motion feel weighty, not floaty.\r\n- Favor spring curves over default ease-in-out.\r\n- Keep high-motion behavior isolated and easy to remove if the user asks for restraint.\r\n- Use motion to express the current style family, not to overwrite it.\r\n- Minimal styles want quiet motion.\r\n- Editorial styles want paced and elegant motion.\r\n- Dashboard styles want utility motion and live-state motion.\r\n- Brutalist styles want blunt, confident, visible motion.\r\n- Luxe styles want controlled depth and soft reveal motion.\r\n- Product styles can tolerate more spectacle if the hierarchy stays sharp.\r\n\r\n### 8.6 PERFORMANCE GUARDRAILS\r\n- Never animate `top`, `left`, `width`, or `height` when transform or opacity can do the job.\r\n- Keep grain, noise, and blur effects off scrolling surfaces.\r\n- Push decorative overlays to fixed or isolated layers when possible.\r\n- Avoid spraying `z-50` through the whole page.\r\n- Build a real layering system for nav, content, overlays, and dialogs.\r\n- Avoid giant client components for otherwise static pages.\r\n- Memoize perpetual or looping widgets when they would otherwise trigger parent re-renders.\r\n- Keep animation cleanup explicit inside effects.\r\n- Never mix GSAP and Framer Motion inside the same component tree without a hard reason.\r\n- Use GSAP or WebGL only when the concept truly needs them.\r\n- Treat CPU-heavy spectacle as exceptional, not default.\r\n- Premium output must still feel stable on mobile hardware.\r\n\r\n### 8.7 TECHNICAL REFERENCE: DESIGN_VARIANCE\r\n- Levels 1 to 3 should feel predictable, aligned, and calm.\r\n- Levels 1 to 3 favor centered or symmetrical structures only when the style itself supports that restraint.\r\n- Levels 4 to 5 should introduce offsets, layered overlaps, and more dynamic whitespace.\r\n- Levels 4 to 5 should begin to break repetitive section formulas.\r\n- Levels 6 to 7 should feel authored and directional.\r\n- Levels 6 to 7 can use split layouts, offset media, and strong grid imbalance.\r\n- Levels 8 to 10 should feel intentional and unmistakably designed.\r\n- Levels 8 to 10 can use asymmetry, long whitespace fields, unconventional cropping, and gallery-like pacing.\r\n- High variance on desktop must still collapse aggressively and cleanly on mobile.\r\n- Never let high variance produce horizontal scroll or broken reading order.\r\n\r\n### 8.8 TECHNICAL REFERENCE: MOTION_INTENSITY\r\n- Levels 1 to 2 should rely on hover, focus, and press states only.\r\n- Levels 1 to 2 should feel still, precise, and intentional.\r\n- Levels 3 to 4 can add small fade, slide, and reveal choreography.\r\n- Levels 3 to 4 should remain almost invisible to the user.\r\n- Levels 5 to 6 can add stagger, shared layout transitions, and low-key perpetual motion.\r\n- Levels 5 to 6 are the default sweet spot for premium web interfaces.\r\n- Levels 7 to 8 can add scroll choreography, richer motion mapping, and stronger component behavior.\r\n- Levels 7 to 8 require tight discipline so the page still reads clearly.\r\n- Levels 9 to 10 should be reserved for strong creative concepts.\r\n- Levels 9 to 10 should feel cinematic, not chaotic.\r\n- Never use scroll listeners for advanced motion when a motion framework can handle the effect more safely.\r\n- Never let motion break input focus, readability, or layout stability.\r\n\r\n### 8.9 TECHNICAL REFERENCE: VISUAL_DENSITY\r\n- Levels 1 to 2 should feel like a gallery or luxury brochure.\r\n- Levels 1 to 2 should preserve very large vertical gaps and strong breathing room.\r\n- Levels 3 to 4 should feel refined and spacious.\r\n- Levels 3 to 4 are strong defaults for premium marketing sites.\r\n- Levels 5 to 6 should feel balanced and practical.\r\n- Levels 5 to 6 are a strong default for product pages and mixed-content sites.\r\n- Levels 7 to 8 should feel compact but still readable.\r\n- Levels 7 to 8 fit dashboards, tools, and operational interfaces.\r\n- Levels 9 to 10 should feel cockpit-like and intense.\r\n- Levels 9 to 10 should use very strong information hierarchy so compression does not become noise.\r\n- At high density, use dividers, rhythm, and typography before reaching for more nested cards.\r\n- At high density, numbers and status elements should become more systematic and more aligned.\r\n\r\n### 8.10 AI TELLS (FORBIDDEN PATTERNS)\r\n- Avoid neon glows as the default signal for modernity.\r\n- Avoid pure black when an off-black or charcoal would feel richer.\r\n- Avoid oversaturated accents sitting on muted neutrals without relationship.\r\n- Avoid huge gradient headlines as a default trick.\r\n- Avoid default generic mouse cursor experiments.\r\n- Avoid Inter as the automatic answer for every interface.\r\n- Avoid serif fonts on dashboards or product UIs that need technical clarity.\r\n- Avoid giant screaming H1 blocks that dominate five or six lines without structure.\r\n- Avoid mathematically perfect but emotionally dead spacing.\r\n- Avoid equal three-card feature rows as the default content block.\r\n- Avoid generic placeholder people.\r\n- Avoid generic SVG profile eggs.\r\n- Avoid round fake numbers like `99.99%` and `50%`.\r\n- Avoid startup slop brand names.\r\n- Avoid filler verbs like `Elevate`, `Unleash`, and `Revolutionize` unless the user explicitly wants ad-copy energy.\r\n- Avoid broken or random external images.\r\n- Avoid using shadcn defaults without customization.\r\n- Avoid making every section a bordered rounded rectangle.\r\n- Avoid dumping every idea into one hero.\r\n- Avoid converting every style into the same SaaS bento page.\r\n- Avoid making the page feel like a prompt artifact.\r\n- Avoid weak section transitions where one block just stops and the next begins without relationship.\r\n- Avoid a top-heavy page where all effort goes into the first screen and the rest collapses into cards.\r\n- Avoid overly long headline wrapping that looks accidental.\r\n- Avoid microcopy that sounds like a template engine wrote it.\r\n\r\n### 8.11 CREATIVE ARSENAL\r\n- Consider asymmetric hero structures before centered hero structures.\r\n- Consider split-screen layouts with a disciplined text side and a strong visual side.\r\n- Consider masonry or modular gallery composition when the style supports it.\r\n- Consider dock-like navigation behavior when the concept wants playful precision.\r\n- Consider magnetic buttons when the motion level supports tactility.\r\n- Consider gooey or fluid navigation only for expressive styles that can carry it.\r\n- Consider dynamic island style status components for live or adaptive interfaces.\r\n- Consider radial menus or floating action systems only when the interaction model supports them.\r\n- Consider mega-menu reveals for brand-heavy or editorial projects.\r\n- Consider bento grids only when the content mix truly benefits from modular presentation.\r\n- Consider scroll-stacked cards for narratives that need sequence.\r\n- Consider horizontal scroll galleries when the content is inherently comparative or panoramic.\r\n- Consider curtain reveals or split-screen scrolls when the concept benefits from theatrical pacing.\r\n- Consider parallax tilt or spotlight borders for selected cards, not every surface.\r\n- Consider holographic or foil-like reflection only in styles that justify that materiality.\r\n- Consider morphing modal transitions when the user flow benefits from continuity.\r\n- Consider kinetic marquees only when the typography and message are strong enough to carry repetition.\r\n- Consider text scramble or mask reveal effects only when the content theme supports them.\r\n- Consider circular text paths only when they add identity instead of novelty noise.\r\n- Consider animated SVG line drawing when the brand language is geometric or diagrammatic.\r\n- Consider mesh-gradient or blurred-color atmospheres only when they support the palette and not the other way around.\r\n- Consider lens-blur depth only when depth is a real compositional tool.\r\n- Consider GSAP scrolltelling or WebGL backgrounds only when the idea clearly exceeds standard UI motion.\r\n- Consider stronger editorial pacing between sections rather than using yet another component.\r\n- Consider one memorable interaction per page instead of twenty forgettable ones.\r\n\r\n### 8.12 MOTION-ENGINE BENTO PARADIGM\r\n- When a page includes dashboards, feature systems, or modular product stories, use a more advanced bento philosophy.\r\n- Major containers can use larger radii when the current style supports softness or gallery polish.\r\n- Cards should only exist when they create hierarchy, focus, or interaction.\r\n- Labels and supporting descriptions can sit outside cards when that improves clarity.\r\n- Use perpetual micro-interactions selectively so the layout feels alive.\r\n- Use springs that feel weighted, not jittery.\r\n- Use layout animations for reorder, resize, and state changes.\r\n- Keep looping widgets isolated from the parent layout.\r\n- Strong card archetypes include intelligent lists, command inputs, live status surfaces, wide data streams, and contextual focus tools.\r\n- Every animated card should feel like a product behavior, not a loading gimmick.\r\n- The motion language of the bento area must still fit the active style family.\r\n\r\n### 8.13 HERO AND PAGE CHECKSUM RULES\r\n- The hero must have a fixed visual envelope.\r\n- The hero must read as a complete first scene on common laptop screens.\r\n- The hero must not feel like it spills by accident into the next section.\r\n- Transitions can exist, but the hero still needs a clear boundary and checksum.\r\n- If content is short, preserve the hero frame with space, media, or supporting detail instead of letting it collapse.\r\n- If content is long, edit the content before letting the hero break.\r\n- The hero should usually communicate one dominant promise, one support idea, and one next step.\r\n- Use one major visual anchor in the hero.\r\n- If the hero uses no image, replace it with a real spatial or typographic concept.\r\n- If the hero uses an image, crop it with intent.\r\n- The header and hero should feel related, not like different pages stacked together.\r\n- Every later section should feel designed to follow the hero, not copied from a generic library.\r\n\r\n## 9. PAGE AND COMPONENT CONSTRUCTION MATRIX\r\n\r\n### 9.1 HERO SYSTEMS\r\n- Use a split hero when the style benefits from clear text-versus-image tension.\r\n- Use an offset hero when the style benefits from asymmetry and pacing.\r\n- Use a framed hero when the style benefits from object-like composition.\r\n- Use a gallery hero when the style benefits from multiple curated images.\r\n- Use a tall editorial hero when the style benefits from reading rhythm.\r\n- Use a command hero when the page is product-led and interaction-led.\r\n- Use a metrics hero when proof and numbers drive credibility.\r\n- Use a proof-first hero when testimonials or trusted logos matter more than spectacle.\r\n- Use a narrative hero when the story is the product.\r\n- Use a cinematic hero when product surfaces, light, and motion carry the promise.\r\n- Give the hero one primary headline, one supporting paragraph, and one to two actions.\r\n- Keep the paragraph within a readable measure.\r\n- Keep button groups disciplined and aligned.\r\n- Use supporting micro-labels sparingly.\r\n- Support the hero with one meaningful secondary detail such as proof, process, or preview.\r\n- On mobile, stack the hero into a clean reading order without collapsing its visual identity.\r\n\r\n### 9.2 NAVIGATION SYSTEMS\r\n- The navigation should feel like part of the style, not an afterthought.\r\n- Navigation can be inline, floating, docked, framed, editorial, or utility-led depending on the style.\r\n- Keep the nav height stable.\r\n- Ensure labels fit without awkward wrapping.\r\n- If the nav is sparse, use spacing with intent so it feels premium rather than empty.\r\n- If the nav is dense, use grouping and alignment so it feels organized.\r\n- Use one clear active-state treatment.\r\n- Use hover states that match the motion intensity.\r\n- If the nav includes buttons, those buttons must visually belong to the same system as the rest of the page.\r\n- Do not let the nav dominate the hero.\r\n- Do not let the nav disappear as an unstyled line of text.\r\n- Use sticky behavior only when it improves orientation.\r\n\r\n### 9.3 SECTION PACING\r\n- Each section needs a unique job.\r\n- Alternate density, alignment, or media treatment across adjacent sections.\r\n- Avoid repeating the same section shell three times in a row.\r\n- Use shifts in scale, whitespace, or material to create progression.\r\n- Introduce proof before the user starts doubting.\r\n- Introduce detail before the user gets bored.\r\n- Introduce interaction before the page starts feeling static.\r\n- Use quieter sections after visually intense sections.\r\n- Use tighter sections after broad atmospheric sections.\r\n- Keep section intros short and useful.\r\n- Avoid isolated orphan labels with no follow-through.\r\n- Give every section a strong leading edge.\r\n\r\n### 9.4 CARD AND SURFACE SYSTEMS\r\n- Prefer open composition before adding another container.\r\n- Use border, background, shadow, blur, or depth only when they serve a real role.\r\n- Cards can frame proof, product, quotes, controls, or grouped content.\r\n- Cards should not become the default answer for every paragraph.\r\n- Mix carded and uncarded sections to preserve page rhythm.\r\n- Use large radii only when the style direction justifies softness.\r\n- Use hard edges when the style direction wants tension or rigor.\r\n- Use internal spacing that matches the information density.\r\n- Avoid giant empty cards with tiny amounts of content.\r\n- Avoid excessive nested cards.\r\n- If multiple cards appear together, vary emphasis so they do not all feel equal.\r\n- Use dividers and negative space as alternatives to surface chrome.\r\n\r\n### 9.5 IMAGERY AND MEDIA\r\n- Images should feel chosen, not inserted.\r\n- Use fewer better images rather than many weak placeholders.\r\n- Cropping is a design decision, not a fallback.\r\n- Pair image treatment with the style family.\r\n- Editorial styles want quieter, more curated media.\r\n- Product styles want clearer product storytelling and lighting.\r\n- Dashboard styles want meaningful interface previews instead of decorative blobs.\r\n- Luxe styles want tone, shadow, and restraint.\r\n- Soft styles want warm depth and approachable texture.\r\n- Swiss and minimal styles want precise framing and disciplined ratios.\r\n- Use captions only when they improve comprehension or mood.\r\n- Give media enough size to matter.\r\n\r\n### 9.6 TYPOGRAPHY AND COPY BLOCKS\r\n- Headlines need deliberate line breaks.\r\n- Do not leave wrapping to chance.\r\n- Balance long and short lines so the headline shape feels intentional.\r\n- Use support copy to clarify, not to repeat the headline.\r\n- Avoid overlong paragraphs under major headings.\r\n- Break longer arguments into compact blocks.\r\n- Use eyebrow labels only when they add orientation.\r\n- Use quote blocks only when the quote is strong enough.\r\n- Use lists when scan speed matters.\r\n- Use prose when tone and trust matter.\r\n- Use mono sparingly and with purpose.\r\n- Let typography do some of the design work instead of pushing everything into containers.\r\n\r\n### 9.7 COMPONENT LIBRARY\r\n- Consider a proof rail with selective logos and one sharp supporting statement.\r\n- Consider a staggered testimonial stack instead of a generic review carousel.\r\n- Consider a split comparison module with asymmetrical weight.\r\n- Consider a feature timeline with visible momentum.\r\n- Consider a sticky chapter index for long-form editorial pages.\r\n- Consider a command bar preview for product-forward concepts.\r\n- Consider a layered screenshot deck with depth and ordering.\r\n- Consider a swipe stack for case studies or portfolio highlights.\r\n- Consider a pinned metric strip that evolves through the page.\r\n- Consider a quiet FAQ with strong typography instead of loud accordions.\r\n- Consider a dock-like utility bar for tool or app concepts.\r\n- Consider a floating inquiry or booking panel for service sites.\r\n- Consider a process rail that shows actual transitions and not just numbered circles.\r\n- Consider a note-card system for editorial or research-heavy pages.\r\n- Consider a case-study triptych with unequal panel sizes.\r\n- Consider a wide image ledger with adjacent technical notes.\r\n- Consider a gallery strip that expands on hover.\r\n- Consider a comparison shelf with one dominant option and one supporting option.\r\n- Consider a stats slab with strong numeric typography and no unnecessary card chrome.\r\n- Consider a contextual toolbar that appears near selected content.\r\n- Consider a layered callout that overlaps a strict grid.\r\n- Consider a dynamic island style status module for active systems.\r\n- Consider a notification stack that demonstrates system behavior.\r\n- Consider a command-input demo with visible progression.\r\n- Consider a focus-mode document module for intelligence or workflow tools.\r\n- Consider a pricing area that uses contrast and pacing instead of three equal cards.\r\n- Consider a founder note or editorial letter for premium brands.\r\n- Consider a structured footer that continues the visual language instead of ending abruptly.\r\n\r\n### 9.8 RARE UI MOVES\r\n- Use spotlight borders on only one or two hero surfaces.\r\n- Use directional hover fills on premium buttons.\r\n- Use subtle image trails only for expressive high-motion concepts.\r\n- Use kinetic marquee bands when the typography is strong enough.\r\n- Use curtain reveals when the section needs theatrical entry.\r\n- Use sticky scroll stacks for sequential proof.\r\n- Use split-screen opposing motion for contrast-heavy layouts.\r\n- Use circular text only when it reinforces a visual motif.\r\n- Use animated line drawing for diagrammatic stories.\r\n- Use hover-based accordion galleries for editorial or brand work.\r\n- Use float-in action bars for contextual workflows.\r\n- Use parallax tilt sparingly and only on surfaces that can carry depth.\r\n- Use shimmer skeletons that match real layout dimensions.\r\n- Use ripple click effects only when the style tolerates visible feedback.\r\n- Use breathing status dots for live systems.\r\n- Use overshoot badges for event arrival or notification moments.\r\n- Use auto-sorting stacks for AI or prioritization concepts.\r\n- Use seamless horizontal data streams when the content is cyclical.\r\n- Use morphing modal expansions for continuity between trigger and dialog.\r\n- Use radial menus only when they match the product behavior.\r\n\r\n### 9.9 OUTPUT ALGORITHM\r\n- First decide the page's central promise.\r\n- Then decide the hero system.\r\n- Then decide the navigation posture.\r\n- Then decide the section sequence.\r\n- Then decide where proof enters.\r\n- Then decide where imagery enters.\r\n- Then decide whether cards are necessary.\r\n- Then decide the motion posture based on the current style and motion dial.\r\n- Then decide the conversion moment.\r\n- Then decide the closing section and footer tone.\r\n- Then refine line breaks, spacing, and surface hierarchy.\r\n- Then add states, polish, and implementation details.\r\n\r\n## 10. FAILURE MODES AND RECOVERY LOOP\r\n- If the result looks like a template, increase structural specificity.\r\n- If the result looks empty, improve composition before adding more filler content.\r\n- If the result looks crowded, remove containers before shrinking typography.\r\n- If the result looks generic, strengthen typography and layout before adding effects.\r\n- If the result looks like generic AI SaaS, remove the equal cards and the purple-blue palette first.\r\n- If the hero wraps awkwardly, rewrite the headline instead of accepting the break.\r\n- If the sections all look the same, vary the section grammar.\r\n- If the page feels too safe, add one memorable component or layout move.\r\n- If the page feels chaotic, reduce simultaneous variation and protect the reading path.\r\n- If motion feels cheap, slow it down and give it weight.\r\n- If motion feels absent, add focused entry choreography and tactile states.\r\n- If images feel random, reduce their count and improve their role.\r\n- If proof feels tacked on, move it earlier and integrate it into the page narrative.\r\n- If the design feels over-carded, unwrap half the content and rebuild spacing.\r\n- If the design feels under-designed, strengthen the page skeleton before adding novelty.\r\n- If the style identity is disappearing, reassert the current style's typography, surfaces, and composition rules.\r\n- If implementation complexity starts dominating the idea, simplify the interaction and keep the visual ambition.\r\n- If the user asks for a calmer or bolder version, change the dials and regenerate the structure accordingly.\r\n\r\n### 10.1 QUICK DECISION SHORTCUTS\r\n- If the user asks for premium, increase restraint before increasing decoration.\r\n- If the user asks for bold, increase structure contrast before increasing chaos.\r\n- If the user asks for minimal, remove weak components before shrinking everything.\r\n- If the user asks for luxury, improve material, spacing, and type before adding gold accents.\r\n- If the user asks for editorial, improve pacing and copy hierarchy before adding serif everywhere.\r\n- If the user asks for product, sharpen proof and interaction before adding more feature boxes.\r\n- If the user asks for dashboard, improve system clarity before adding more charts.\r\n- If the user asks for playful, keep the composition disciplined so the play has a frame.\r\n- If the user asks for futuristic, avoid default blue glow tropes.\r\n- If the user asks for calm, reduce simultaneous motion and reduce accent spread.\r\n- If the user asks for energetic, intensify rhythm and transitions without breaking readability.\r\n- If the user gives little detail, choose one strong visual thesis and build around it.\r\n- If the result feels mid, strengthen typography, hero framing, and section rhythm first.\r\n- If you are unsure, choose the more intentional option, not the more common option.\r\n- Always preserve the current style identity while applying these shortcuts.\r\n## 11. FINAL PRE-FLIGHT CHECK\r\n- Is the hero a complete first scene?\r\n- Do the headlines avoid weak line breaks?\r\n- Does the navigation fit cleanly and feel style-specific?\r\n- Are cards used only when they earn their place?\r\n- Are loading, empty, and error states designed?\r\n- Does the page have real image, media, diagram, or object weight?\r\n- Would the result still feel specific if the logo was removed?\r\n- Does motion match the style and stay professional?\r\n- Did the code stay semantically clean, responsive, and production-ready?\r\n- Can you feel the grid without drawing it?\r\n- Does order create energy rather than blandness?\r\n- Did motion stay subordinate to structure?\r\n- Would this still hold up as a poster?\r\n\r\n\r\n",{"name":5,"description":7},"main","923c514d4d5e15bbfd65ec7eaf949a997679aa3e","src\u002Fskills\u002Fdomain\u002Fdesign-taste\u002Fswiss-system","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm","https:\u002F\u002Fgithub.com\u002Fyqecea","15 y.o Data Science,Student","2026-04-26 20:00:27",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add yqecea\u002Fgem-swarm --skill design-taste-swiss-system",{"tool":67,"command":68},"bunx","bunx skills add yqecea\u002Fgem-swarm --skill design-taste-swiss-system",{"tool":70,"command":71},"pnpm","pnpm dlx skills add yqecea\u002Fgem-swarm --skill design-taste-swiss-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fdesign-taste\u002Fswiss-system\u002Fskill.md",true,[],[76,89,103,114,126,142],{"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":82,"publishedAt":49},"01M71C74XVPP23ST10E8MYJZA0","validation","Cross-cutting validation methodology for verifying phase outputs and project integrity","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fvalidation\u002FSKILL.md",[],[78,83,38,84,85,86,87,88],"validation methodology","project","outputs","phase","methodology","integrity",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":49},"01M71C72PTKRV481M975R3QDDE","session-management","Manages orchestration session state, tracking, and resumption","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fsession-management\u002FSKILL.md",[],[96,97,98,99,100,101,102],"session management","session","management","session state","orchestration","state","tracking",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":49},"01M71C6ZY1EGM4SGVYT4B2HHD7","implementation-planning","Generates detailed implementation plans from finalized designs","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fimplementation-planning\u002FSKILL.md",[],[110,111,112,113],"planning","implementation","implementation planning","plans",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":49},"01M71C6XQVGMDFJ50BP5SBDS76","execution","Phase execution methodology for orchestration workflows with error handling and completion protocols","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fexecution\u002FSKILL.md",[],[116,38,87,121,122,100,86,123,124,125],"error","workflows","protocols","error handling","with",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":134,"publishedAt":49},"01M71C6VY8APWMNK1XEJ3WP7A2","design-dialogue","Guides structured design conversations for complex engineering tasks","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdesign-dialogue\u002FSKILL.md",[132,133],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[135,34,136,137,138,38,139,140,141],"dialogue","design dialogue","guides","conversations","tasks","engineering","structured",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":154,"publishedAt":49},"01M71C6R4RJWG3S2R26778TPD8","delegation","Agent delegation best practices for constructing effective subagent prompts with proper scoping","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdelegation\u002FSKILL.md",[148,151],{"categoryNo":149,"categoryName":150,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":152,"categoryName":153,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[144,155,156,38,157,125,158],"subagent","scoping","best practices","prompts"]