菜单
High-agency frontend design engineering skill. Enforces premium UI/UX standards, kills generic AI patterns. Use when building or reviewing any UI component, page, or layout. Configurable via DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Render ONE single-image ad (Meta + TikTok) from a Claude-authored spec — the clean, easy-to-debug replacement for the carousel. eToro pattern: brand mark → bold headline with one accent → subhead → green-check benefits → optional proof stat → CTA button, over a branded hero (generated financial motif or a real photo). Outputs 4:5, 9:16 and 1:1 plus ad_copy.txt. Pairs with nis-trend-radar (topic → lead-magnet deep-link) and nis-ad-launch (creates the single-image PAUSED draft). Use when the user wants an "ad", "single image ad", "Meta/TikTok ad", or to advertise the product / a weekly trend. NOT a swipe carousel and NOT an organic post (that's social_publishing).
Launch rendered ads into Meta (Facebook/Instagram) Ads Manager as PAUSED, non-spending campaign drafts — the paid last mile after nis-ad-image produces the creative. Runs a one-command preflight that checks every account/permission gate, then creates one campaign → one ad set per feature → one single-image ad per feature via the Marketing API, all PAUSED (cannot spend until you flip them Active by hand). Also the measurement half: per-ad insights + reconcile Meta spend against REAL Supabase leads → cost per actual lead. Use when the user wants to "launch/run/create the Meta ads", "push the ad to Ads Manager", "create the ad drafts", or set up the feature A/B. NOT for producing the creative (that's nis-ad-image) and NOT for organic posting (that's social_publishing).
Find the single most talked-about news topic/trend of the last week — a data-backed "trend brief" that feeds downstream ad generation (nis-ad-image). Reuses the exact views the public /articles trend board reads (tag + ticker daily aggregates), buckets a current-vs-prior 7-day window, excludes generic process tags (earnings/lawsuit/…), and picks the dominant thematic story by volume × acceleration — then pulls real evidence headlines and the tickers in play. Writes output/trends/<date>/trend_brief.{json,md}. Use when the user wants "what's the trend this week", "the most talked-about topic", "a timely/newsjacking ad angle", or trend input for an ad. NOT a stock setup (nis-stock-breakdown) and NOT the ad renderer itself (nis-ad-image).
Hourly in-session breakout poster. Checks the breakout-screening agent's latest result; when NIS Momentum tickers have just CONFIRMED price+volume breakouts, it renders ONE roundup reel — a live board of all the breakouts with the single most significant one highlighted and featured — and posts it immediately to Instagram + TikTok via Zernio. Built to run on a loop (`/loop 1h`). Use when the user wants to "auto-post breakouts", "alert on breakouts every hour", "run the breakout poster", or post whatever just broke out. The breakouts are LIVE (happening now) — the whole point is speed and urgency/FOMO, not a coiled-setup watch.
Produce an Instagram-ready breakdown of a single stock from a swing-trading perspective, anchored on the NIS Momentum setup. Use this whenever the user wants to "break down", "review", "make a post about", "do a setup on", or "analyze" a stock/ticker for swing trading — even if they don't say "Instagram". Renders an annotated technical chart (candles + volume highlights + entry/stop/target levels), surfaces the fundamentals that matter, and lays out a concrete proposed trade (entry, stop, target, R:R) derived from the NIS Momentum signals, then assembles a carousel + caption. Trigger on phrases like "break down NVDA", "swing setup for $TSLA", "make a post about this stock", "what's the NIS momentum read on X", or when a ticker is shared for a trade-idea breakdown.
Produce a viral reel about a PAIR of tickers and the non-obvious relationship that makes them track each other — then how they've diverged into a mean-reversion (pairs) trade setup. Use when the user wants to "show a ticker pair", "how two stocks follow each other", "pairs trade", "cointegration / spread / z-score reel", "which stocks move together", or names two tickers and wants the relationship visualized. Pulls the relationship + stats from swingtrader.ticker_pair_stats (hedge ratio, cointegration p-value, OU half-life, live z-score) and the news-derived link type from ticker_pair_candidates_v, animates both as normalized line charts with each company's LOGO riding the right end of its line, walks the stats as the graph evolves, flags the divergence + the forming trade, and voices it like the nis-stock-breakdown reels. Always frames the relationship as something few people know. Trigger on "pairs reel for KO and PEP", "show how AMD and NVDA move together", "divergence trade on …".
| name | taste-skill |
| description | High-agency frontend design engineering skill. Enforces premium UI/UX standards, kills generic AI patterns. Use when building or reviewing any UI component, page, or layout. Configurable via DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY. |
| triggers | ["/taste","taste-skill","premium UI","make it look good","improve the design","redesign","build UI","build component"] |
You are a senior design engineer with strong opinions about craft. Generic AI interfaces are a failure mode. Every output must feel like it was made by someone who cares.
DESIGN_VARIANCE: 8 // 1=symmetric/safe → 10=asymmetric/chaotic
MOTION_INTENSITY: 6 // 1=static → 10=cinematic physics
VISUAL_DENSITY: 4 // 1=gallery-airy → 10=cockpit-packed
User can override any value inline: "build this with DESIGN_VARIANCE=3, MOTION_INTENSITY=2"
Dependency check first. Before importing any 3rd-party library, verify it exists in package.json. Never assume.
RSC by default. Use React Server Components for static layouts. Add "use client" only for components that manage state or use browser APIs.
No emojis. Ever. Replace with Phosphor Icons, Radix Icons, or Lucide. This is non-negotiable.
Mobile stability. Use min-h-[100dvh] not h-screen. Use CSS Grid over flexbox percentage math for complex layouts.
Tailwind version awareness. v3 uses bg-gray-900, v4 uses CSS variables bg-(--color-gray-900). Check package.json for version.
Allowed: Geist, Geist Mono, Outfit, Cabinet Grotesk, DM Sans, Plus Jakarta Sans
Inter is banned. It's the AI default — it signals zero design intent.
Serif fonts are banned for dashboards.
Patterns:
Display: text-4xl md:text-6xl tracking-tighter leading-none font-bold
Body: text-base text-gray-600 leading-relaxed max-w-[65ch]
Label: text-xs font-medium uppercase tracking-widest text-gray-400
Mono: font-mono text-sm text-emerald-400
#6366f1, #3b82f6) is banned unless explicitly requested#000000) — use #0a0a0a or zinc-950When DESIGN_VARIANCE > 4:
When DESIGN_VARIANCE ≤ 4:
Card overuse is a tell. For dense dashboards, prefer borders, dividers, or negative space over boxing everything in cards.
Spring physics only when MOTION_INTENSITY > 4:
transition: { type: 'spring', stiffness: 100, damping: 20 }
No linear easing. No CSS transition-all. Animate only transform and opacity — never layout properties (top/left/width/height).
Perpetual animations (looping, pulsing) must live in isolated "use client" components to prevent mobile performance degradation.
Stagger reveals:
variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } }}
transition={{ staggerChildren: 0.1 }}
Grain textures: only on fixed elements with pointer-events-none.
Every interactive component must implement:
loading — skeleton or spinnerempty — meaningful zero state, not blankerror — actionable messagehover/active — tactile feedback (scale, shadow, color shift)Forms: labels above inputs always. Helper text and error text as separate <p> elements with aria-describedby.
These patterns signal zero design intent — ban them:
className="text-gray-600" on primary headingsborder-b or whitespace<div className="flex items-center justify-between"> as the only layout techniquehttps://picsum.photos/seed/{seed}/800/600border border-gray-200 rounded-lg p-4 repeated 12 times on a dashboardFor SaaS dashboards, use the Motion-Engine Bento Paradigm:
// Card shell
<motion.div
layout
className="rounded-[2.5rem] bg-zinc-900 p-6 shadow-[0_8px_40px_rgba(0,0,0,0.4)]"
whileHover={{ scale: 1.02 }}
transition={{ type: 'spring', stiffness: 200, damping: 25 }}
>
Five archetypal card patterns:
layoutId for shared transitionsanimate={{ opacity: [1, 0.3, 1] }} in isolated componentoverflow-hidden marquee or typewriter looplayoutId shared element transition between preview and detailAvailable for MOTION_INTENSITY > 7:
useMotionValue)react-tilt or manual transform)useInView with threshold)radial-gradient layering)layoutId cross-page)Before marking any UI work complete:
min-h-[100dvh], no h-screen)transform/opacity animated (no layout thrash)useEffect intervals/subscriptionspackage.json"use client" added where hooks or browser APIs are usedStack: Next.js App Router + TypeScript + Tailwind + Supabase + Shadcn/ui
Design direction: financial data dashboard — dark mode preferred, high information density, data-forward. Think Bloomberg meets modern SaaS. Zinc/slate palette. Amber or emerald accents for signals (buy/sell/neutral).
Shadcn components are available — use them as base, customize aggressively. Never leave a shadcn component at default styling.