Senior UI/UX Engineer for strict black-white-gray interfaces with strong contrast-led hierarchy. Uses the full Taste Skill baseline but tunes the output for form, rhythm, typography, and motion without relying on color.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Senior UI/UX Engineer for strict black-white-gray interfaces with strong contrast-led hierarchy. Uses the full Taste Skill baseline but tunes the output for form, rhythm, typography, and motion without relying on color.
High-Agency Monochrome Modern 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: Monochrome Modern
When to use this skill: Use this skill when the user wants a black-white-gray interface where hierarchy comes from form, contrast, rhythm, and composition rather than color.
Core Identity
Monochrome Modern should feel sharp, controlled, and stylish rather than unfinished.
Without color, form and contrast must do the heavy lifting.
The page should feel modern and dynamic through rhythm, type, and motion, not chroma.
Palette and Material
Stay in true black, white, and grayscale with no surprise color cast unless the prompt explicitly asks for one.
Contrast must stay disciplined; do not hide behind muddy mid-grays.
Links, focus, and state changes need non-color affordances.
Typography Character
Use strong typographic dramaturgy: scale, weight, tracking, and optical size replace color hierarchy.
Great monochrome pages need stronger type, not neutral type.
Use underlines, weight, inversion, and spacing to signal interaction and structure.
Hero Direction
Use one decisive contrast relationship: dark field vs light field, image crop vs type slab, or stark split.
The first scene should feel complete and graphic.
Avoid mid-tone mush and underpowered contrast.
Navigation Direction
Use thin monochrome rails, exact tabs, or minimal structural top bars with clear interaction states.
Links need underline, inversion, or another strong signal.
Avoid colorful indicators and weak gray-on-gray active states.
Layout Tendencies
Use contrast fields, rules, editorial splits, and structural negative space.
Break the grid deliberately but rationally so the page does not become sterile.
Lines, surfaces, and spacing act like the color system.
Component Vocabulary
Good fits: contrast band, ruled quote strip, grayscale gallery rail, mono comparison band, type block plus image crop, table-like rows.
