Senior UI/UX Engineer for premium modular bento layouts that avoid generic dashboard walls. Uses the full Taste Skill baseline but tunes the output for curated module rhythm, image-backed utility, and memorable product composition.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Senior UI/UX Engineer for premium modular bento layouts that avoid generic dashboard walls. Uses the full Taste Skill baseline but tunes the output for curated module rhythm, image-backed utility, and memorable product composition.
High-Agency Premium Bento 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: Premium Bento
When to use this skill: Use this skill when the user wants modular premium product storytelling through bento logic without generic AI-dashboard sameness.
Core Identity
Premium Bento should feel curated, modular, and premium rather than like a wall of identical feature cards.
The grid is a storytelling instrument, not the style by itself.
Hierarchy should come from span, content type, contrast, and rhythm.
Palette and Material
Use a stable neutral surface system with one accent family and clear state colors.
Card differentiation should come mostly from tone, content type, and structure, not rainbow color coding.
Radii, borders, and shadows must feel tuned rather than copied from a kit.
Typography Character
Use crisp premium sans typography with strong labels, subheads, and module hierarchy.
Each module should present one thought cleanly.
Truncation and density must feel intentional rather than accidental.
Hero Direction
Open with one dominant hero tile and two to three support modules that clearly belong to the same scene.
The hero cluster must read as one first screen, not as unrelated tiles.
One tile should visibly dominate the hierarchy.
Navigation Direction
Use compact product nav, utility strips, or precise segmented controls.
Navigation should support the modular composition rather than fight it.
Avoid the default logo-left links-center CTA-right startup bar when the grid already carries the identity.
Layout Tendencies
Use recurring size classes: micro, standard, tall, hero, and banner.
Mix text, previews, charts, demos, and utility modules in one coherent rhythm.
At least one tile should break expectation through span, media treatment, or motion character.
Component Vocabulary
Good fits: hero bento, status stream, command input, preview shell, stat band, image rail, capture plate, comparison bento row.
Use UI previews, charts, demos, renders, and workflow illustrations that genuinely explain the product.
Image-backed modules can add premium weight and variation.
Avoid empty placeholder tiles and fake dashboard wallpaper.
Motion Profile
Motion can be more alive here than in quieter styles: layout transitions, tiny perpetual states, reorder motion, command focus, hover depth.
Do not animate every tile at once.
Motion should clarify hierarchy and make modules feel alive, not chaotic.
Creative Arsenal For This Style
GSAP Flip layout morph for grid-to-list or module reordering.
Typewriter command palette.
The Intelligent List or Wide Data Stream patterns when the page really benefits from them.
Style-Specific Avoidances
default AI bento template
identical tile shells
feature-card sameness
purple-blue glow
tile overload with no narrative
generic dashboard-wall feel
Copy Tone
clear, premium, and concise
product-first without hype
good labels and short explanations
avoid empty launch-page claims
Current Production Priorities
Never make the bento grid the main hero or the whole page idea. Start with a stronger hero scene first.
Use imagery, screenshots, object visuals, or campaign crops so the page does not become pure modular UI.
Add motion by default: tile reveals, hover depth, metric transitions, media parallax, and polished button feedback.
Navigation should feel premium and editorial, not just like a dashboard strip.
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 Premium Bento section in ../components/style-recipes.md.
Strong first picks: GSAP scrubbed-bento-gallery, React Bits magic-bento, and Aceternity bento-grid only for secondary sections, never as the main hero.
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.
