Senior UI/UX 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.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Senior UI/UX 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.
High-Agency Swiss System Frontend Skill
Routing note: enter this style through ../SKILL.md first so the pack can choose the right style and component recipes before building.
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.
2. DEFAULT ARCHITECTURE & CONVENTIONS
DEPENDENCY VERIFICATION [MANDATORY]: Before importing any third-party library, check package.json. If it is missing, output the install command before using it.
Framework & Interactivity: Default to React or Next.js. Prefer Server Components by default and isolate heavy interactivity in leaf client components.
RSC SAFETY: Global state only belongs in client components. Wrap providers in a dedicated use client boundary.
INTERACTIVITY ISOLATION: If strong motion, liquid glass, magnetic interactions, or heavy canvases are used, isolate them in their own client components.
State Management: Use local useState or useReducer for local UI. Use global state only when it prevents real prop-drilling.
Styling Policy: Use Tailwind CSS for most styling. Check package.json first and do not assume Tailwind version or plugin setup.
ANTI-EMOJI POLICY: Do not use emojis in code, markup, text, alt text, labels, or decorative UI unless the user explicitly asks for them.
IMAGE EXECUTION [CRITICAL]: If imagery would improve the page, include at least one real image in the hero or first two sections by default.
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.
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.
COMPONENT EXECUTION [CRITICAL]: When the pack router or components/style-recipes.md points to shared component library files, actually open and consult those files before building. Do not skip them just to move faster.
Responsiveness: Standardize breakpoints, contain layouts with real max widths, and aggressively simplify high-variance desktop layouts on mobile.
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.
Grid over Flex-Math: Do not use brittle width calc tricks for main layout. Use CSS Grid for reliable, exact structure.
Icons: Use @phosphor-icons/react or @radix-ui/react-icons when icons are needed and keep stroke weight consistent.
Interaction States: Always provide hover, active, focus, loading, empty, success, and error states when relevant.
Define roles, not just tags: display, headline, title, body, caption or label, and data or mono if needed.
Display headlines should feel intentional, not generic. Use stronger hierarchy than default Tailwind scales.
Do not use Inter or a default system sans as the whole identity unless the prompt explicitly demands it.
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.
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.
Long paragraphs should usually sit around 60 to 70ch. Full-width body copy is usually a mistake.
Use clamp() for fluid sizes when appropriate and never let typography become absurdly huge or timidly small.
Use tabular numerals for structured data, prices, tables, and metrics.
Color and Brand
Use one clear accent color and one clear neutral family. If everything is colorful, nothing is important.
The AI purple-blue aesthetic is banned by default: no purple hero gradients, no neon violet glows, no cyan-indigo SaaS fog.
Build a real color system with background, surface, text, muted text, border, accent, on-accent, success, warning, error, and focus roles.
Warm and cool neutrals should not be mixed randomly. Pick a temperature and stay coherent.
Use semantic colors functionally, not as decorative brand identity.
Pure black #000000 should almost never be the final page background. Use a tuned off-black when the style wants darkness.
Flat white pages with no tonal hierarchy fail just as hard as dark pages with neon accents.
Layout and Hierarchy
The hero must read as one complete first scene with a clear silhouette at first glance.
The first screen should feel finished even when content is short. Use media, object scale, structure, or secondary counterweight to preserve the hero shape.
Do not default to centered hero, three feature cards, testimonials, pricing, FAQ, and footer CTA.
When DESIGN_VARIANCE is above 4, centered hero compositions are banned unless the prompt explicitly demands them.
Navigation must fit cleanly at every breakpoint. No awkward wrapping, clipping, or generic chrome.
Do not solve the whole page with cards. Use rails, image plates, split fields, bands, lists, tables, timelines, framed media, and structural whitespace.
Each section must answer a user question and earn its place. If a section has no job, remove it.
Spacing is structural meaning. Tight means same group, medium means related, large means a new chapter.
Use content-driven breakpoints and let mobile become a cleaner layout, not a compressed desktop.
Materiality, Cards, and Components
Cards are allowed only when elevation or enclosure actually communicates hierarchy.
Nested cards, boxes inside boxes, and decorative shells are banned by default.
If a shadow is used, tint it to the page mood instead of using one generic black blur everywhere.
Use lines, dividers, tonal changes, and composition before inventing another wrapper.
Buttons, inputs, pills, and badges must follow one real system of radius, depth, and spacing.
Do not let every section use the exact same panel treatment or the page will collapse into kit output.
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.
Default showcase surfaces should not expose ugly browser-default internal scrollbars.
States, Forms, and Copy Behavior
Loading states should preserve layout structure. Prefer skeletons or inline progress over empty spinners.
Empty states must explain what is missing and what the user can do next.
Error states must say what failed, how to fix it, and preserve user effort.
Forms require labels above inputs, helper text when useful, and clear inline validation.
Primary CTAs must say what happens next, not hide behind vague text like Learn more or Submit when specificity is possible.
4. CREATIVE PROACTIVITY, MOTION, AND PERFORMANCE
Creative Proactivity
Do not default to safe template sections. Use a few strong scene ideas instead of many weak sections.
Pick one bold aesthetic direction and commit to it. Do not mix three style worlds because the UI feels empty.
Use real visual anchors: photography, renders, diagrams, charts, objects, process frames, or typographic masses.
Rare UI components are allowed only when they strengthen the chosen style and the actual page goal.
The site should still feel specific if the logo is removed. If another startup logo could be swapped in with no tension, it failed.
By default, include meaningful visual media in the hero or first two sections unless the user explicitly asks for text-only composition.
Prefer larger, style-appropriate imagery over tiny decorative thumbnails or empty placeholder panels.
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.
Keep the page in one dominant lightness mode unless the user explicitly asks for deliberate light-dark switching.
Motion and Interaction
Motion must clarify, confirm, guide, or create affordance. If it only decorates, reduce it or remove it.
Prefer transform and opacity. Never animate top, left, width, or height for ordinary UI motion.
One focal motion language is stronger than ten unrelated animations.
Avoid transition-all duration-300 everywhere, repeated fade-up stagger on every section, endless floating loops, and generic hover:scale-105.
Respect prefers-reduced-motion and provide a reduced path that still preserves clarity.
When MOTION_INTENSITY is high, use purposeful choreography: layout transitions, stateful loops, magnetic interactions, chapter reveals, or structured scroll scenes.
Never mix heavy GSAP or Three.js choreography with generic UI motion in the same tree without a real concept.
Motion should always match the chosen style.
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.
Hero entries can use fades, wipes, staggered text, image reveals, or restrained parallax depending on the style.
Scroll motion should be sectional and tasteful, not the same generic fade-up on every element.
Navigation, buttons, links, cards, and media should all have style-appropriate hover, focus, and active states.
Use one or two micro-interactions so the page feels alive even when the motion dial stays low.
Performance Guardrails
Do not apply grain, blur, or noise to large scrolling containers. Use fixed pseudo-elements or isolated layers instead.
Use will-change sparingly, not globally.
Avoid dozens of independent animated objects at once.
Reserve WebGL, canvas, and heavy shader work for moments where they are central to the experience.
Keep z-index disciplined and systemic. Do not spam z-50 or modal-like layering without reason.
Code must be production-ready, accessible, and semantically clean.
startup slop names, generic about pages, and repeated value props saying the same thing three times
corporate filler openers like In today's fast-paced world
emoji decoration unless the user explicitly asks for it
Component and Code Tells
shadcn defaults with no customization
Lucide icons as the entire visual language
pill badge spam
cards inside cards inside cards
no empty, loading, or error states
use client everywhere and obvious scaffold fingerprints left visible
7. STYLE DIRECTION: Swiss System
When to use this skill: Use this skill when the user wants Swiss, International Style, objective typography, poster logic, grid discipline, or structural clarity.
Core Identity
Swiss style is not retro cosplay; it is a living methodology of order, contrast, and reduction.
Beauty should come from the grid, the type system, and the relationships between elements.
The page should feel exact, structural, and objective.
Palette and Material
Use white, off-white, black, and one signal color such as red, blue, or green only when it has a real job.
Keep surfaces flat and exact; no blur, no plush depth, no decorative haze.
Dark mode must still feel Swiss, not gamer.
Typography Character
Use grotesk or neo-grotesk dominance with a mathematical scale and rational spacing.
Uppercase labels with tracking, tabular numerals, and strong display-to-body contrast are core signals.
Do not use decorative italics, random font mixing, or poster-severe serif drama unless clearly asked.
Hero Direction
Use a poster field, exact split, or modular grid composition.
The first scene should feel disciplined and bounded even when asymmetrical.
One headline block and one graphic or image field should control the first screen.
Navigation Direction
Use aligned top rails, numbered indices, or exact side navigation integrated into the grid.
Navigation should look like part of the system, not a layer pasted on top.
Avoid rounded nav chrome and playful badges.
Layout Tendencies
Use 12-column grids, rational splits, rule systems, modular poster blocks, and strong rectangular media.
Asymmetry must have grid rationale.
Order should create energy, not boredom.
Component Vocabulary
Good fits: poster block, index rail, timeline grid, spec table, rule-separated modules, captioned image band.
Weak fits: soft blobs, over-rounded cards, luxury haze, random collage.
Media and Imagery
Use cropped photography, diagrams, maps, symbols, and strong rectangular fields.
Media should feel placed, not casually dropped in.
Avoid muddy images and pastel UI atmospheres.
Motion Profile
Motion should be nearly invisible: exact fades, clip reveals, and grid-aware slides.
No gooey effects, hover wobble, magnetic motion, or theatrical springs.
If motion is visible, it should still feel typographic and disciplined.
Creative Arsenal For This Style
Paragraph highlight reveal in a text-heavy Swiss layout.
Scroll progress reading bar used as a rational indicator.
Clip-path reveal transition if it preserves geometric discipline.
Style-Specific Avoidances
soft blobs
random collage
gradient noise backgrounds
unstructured asymmetry
luxury haze
over-rounded cards
Copy Tone
direct, exact, and formal
short lines and clear labels
little rhetorical flourish
confidence through clarity
Current Production Priorities
Increase breathing room and avoid overpacking modules into the same viewport.
Make the output feel more Swiss than brutalist: strict grid, precise type, disciplined accents, and cleaner spacing logic.
Include diagrams, posters, charts, typographic image plates, or system graphics so the page has visual proof.
Add restrained motion: grid reveals, line draws, hover underline, and structured section fades.
Navigation should feel precise and systematic rather than heavy or harsh.
Components Library
Consult ../components/README.md before inventing custom modules, hero systems, or interaction patterns from scratch.
Use ../components/gsap-explore.md for official GSAP motion scenes, scroll patterns, cursor systems, and CodePen-linked demos.
Use ../components/aceternity-ui.md for dramatic hero modules, Framer-heavy surfaces, cards, nav experiments, and backgrounds.
Use ../components/21st-community.md for pragmatic UI primitives, community layouts, shader ideas, and production interface pieces.
Use ../components/reactbits.md for text animation, micro-interactions, animated effects, and composed React component ideas.
Adapt every borrowed pattern to the current style; never paste a source pattern in unchanged.
For this style, start with the Swiss System section in ../components/style-recipes.md.
Strong first picks: GSAP draw-a-path / animate-along-a-path, Aceternity background-lines / layout-grid, and 21st breadcrumb/progress primitives.
8. FULL TASTE CORE OVERLAY
8.1 CORE PRIORITY
This section is the deep rule layer for the current style pack.
If an earlier shortcut rule conflicts with this section, this section wins.
Apply every rule through the lens of the current style direction instead of flattening everything into one generic aesthetic.
The current style must still feel unmistakably like its own world after all guardrails are applied.
Do not output a safe average landing page just because the system has many constraints.
Use the style direction to choose what to emphasize, not to excuse sloppy composition.
Every page should feel authored, not statistically assembled.
Every major section should have a reason to exist.
Every component should either clarify, persuade, orient, or convert.
Remove decorative filler that does not create hierarchy, identity, or trust.
Prefer fewer stronger ideas over many weak UI gestures.
The result must feel premium, deliberate, and production-minded.
8.2 ACTIVE BASELINE INTERPRETATION
DESIGN_VARIANCE controls structural risk, asymmetry, and compositional surprise.
MOTION_INTENSITY controls how alive the interface feels, from almost static to cinematic choreography.
VISUAL_DENSITY controls how tightly information is packed and how much empty space is preserved.
Always adapt those values to the user's request if they clearly ask for a calmer, bolder, cleaner, denser, or more expressive result.
If the user does not specify values, follow the baseline defined at the top of the current style skill.
If the style identity and the user request conflict, blend them instead of ignoring one side.
For example, a restrained user request inside a brutalist skill should become controlled brutalism, not generic SaaS.
For example, a high-motion request inside a minimal skill should become quiet precision motion, not flashy noise.
For example, a dense dashboard request inside an editorial skill should become structured editorial data, not boxed admin panels.
Use the three dials continuously during generation instead of setting them once and forgetting them.
8.3 DEFAULT ARCHITECTURE & CONVENTIONS
Before importing any third-party package, check package.json first.
If a package is missing, output the install command before using it.
Never assume a motion or icon package exists.
Prefer React or Next.js unless the user clearly wants another stack.
Default to Server Components when using the Next.js App Router.
Put global providers into explicit client wrappers.
Isolate heavy interaction into leaf client components.
Keep server components responsible for layout, data wiring, and stable structure.
Keep client components responsible for touch, drag, hover, local state, and animation.
Use local state for isolated interactions.
Use global state only when it prevents deep prop drilling across real complexity.
Prefer Tailwind CSS for most styling unless the project clearly depends on another system.
Check the Tailwind major version before using version-specific syntax.
Do not mix Tailwind v4 patterns into a v3 project.
Do not overbuild custom utility abstractions when direct classes are clearer.
Standardize breakpoints around sm, md, lg, and xl.
Contain layouts with max-w-[1400px] mx-auto, max-w-7xl, or a style-appropriate equivalent.
Never use brittle flex percentage math where CSS Grid is the better structural tool.
Default full-height heroes to min-h-[100dvh], not h-screen.
Treat mobile viewport behavior as a first-class layout concern.
Use either @phosphor-icons/react or @radix-ui/react-icons when icons are needed.
Keep icon stroke weight consistent across the page.
Avoid icon soup; use icons only when they clarify meaning or rhythm.
Avoid emojis by default; only use them if the user explicitly asks for them.
Keep code output clean, modular, and ready to be integrated without a cleanup pass.
8.4 DESIGN ENGINEERING DIRECTIVES
The model must actively fight its own tendency toward bland hero sections.
The model must actively fight its own tendency toward equal cards in a row.
The model must actively fight its own tendency toward purple-blue AI branding.
The model must actively fight its own tendency toward oversized generic H1 blocks with weak support copy.
The model must actively fight its own tendency toward symmetric everything.
Headlines should default to strong contrast, tight tracking, and deliberate line breaks.
Body copy should stay readable, calm, and measured.
Default to one dominant accent color and one neutral palette family.
Avoid mixing warm and cool neutrals without a clear reason.
Use typography to build identity before reaching for visual gimmicks.
Use spacing to create status and calm before reaching for more containers.
Use containers only when they signal grouping, depth, or interaction.
A card is not a design system.
A bento block is not automatically premium.
A gradient is not automatically art direction.
Default to one strong primary action and one lower-contrast secondary action.
Avoid dead pages that only show best-case success states.
Always think through loading, empty, hover, active, disabled, and error states.
Treat forms as precision systems, not as anonymous input stacks.
Labels go above inputs.
Helper text belongs in markup when it makes the action easier.
Error text belongs directly under the field it refers to.
Active states should feel physical, not decorative.
Press feedback should slightly compress or shift, not explode.
8.5 CREATIVE PROACTIVITY
Go beyond default glassmorphism if transparent material is used.
Add inner borders and subtle inner highlights so translucent layers feel physical.
If motion intensity is above medium, add purposeful perpetual motion to selected elements.
Do not animate everything at once.
Give motion a job: guidance, emphasis, status, rhythm, or delight.
Use Framer Motion layout transitions when cards or panels change size or order.
Use staggered orchestration for entrances rather than dumping everything onto the screen simultaneously.
When using cursor-follow interactions, avoid React state for per-frame updates.
Use motion values and transforms outside the React render loop for continuous interaction.
Make premium motion feel weighty, not floaty.
Favor spring curves over default ease-in-out.
Keep high-motion behavior isolated and easy to remove if the user asks for restraint.
Use motion to express the current style family, not to overwrite it.
Minimal styles want quiet motion.
Editorial styles want paced and elegant motion.
Dashboard styles want utility motion and live-state motion.
