Use when designing or building any screen, section or component that a user sees — visual hierarchy, typography, colour, spacing, states, forms and how to avoid the generic AI look.
日本語の概要は準備中です。原文の説明を表示しています。
606 件 ・ 関連度順
概要と使いどころ
Use when designing or building any screen, section or component that a user sees — visual hierarchy, typography, colour, spacing, states, forms and how to avoid the generic AI look.
日本語の概要は準備中です。原文の説明を表示しています。
Use when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly
日本語の概要は準備中です。原文の説明を表示しています。
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
日本語の概要は準備中です。原文の説明を表示しています。
Tests a real web user flow with a browser by asserting semantic behavior, network and loading states, keyboard access, responsive layouts, and stable visual evidence. Use for browser bugs, end-to-end UI behavior, responsive or accessibility checks, and screenshot baselines. Not for static source review without a browser or for backend-only tests.
日本語の概要は準備中です。原文の説明を表示しています。
Audits an existing rendered interface or frontend diff for hierarchy, content clarity, interaction states, accessibility, responsive behavior, visual consistency, performance-sensitive UI patterns, and anti-generic design defects. Use for a UI/UX review, redesign audit, screenshot review, pre-release visual check, or design-system consistency pass. Not for building a new interface from scratch or for backend-only review.
日本語の概要は準備中です。原文の説明を表示しています。
Designs, builds, or refactors user-facing web or application interfaces with deliberate visual direction, typography, color and spacing tokens, content hierarchy, responsive behavior, accessible interaction states, and real rendered-surface verification. Use for pages, components, dashboards, landing pages, design systems, and frontend polish. Not for backend logic, API-only work, or visual claims that cannot be rendered or inspected.
日本語の概要は準備中です。原文の説明を表示しています。
Designs cross-system target states and transition plans. Use when comparing end-to-end options or phased migrations. Not for in-service topology (software-architecture-design).
日本語の概要は準備中です。原文の説明を表示しています。
Use for every task that plans, writes, edits, debugs, tests, refactors, reviews, or maintains code. Apply to professional repositories, scripts, apps, services, prototypes, beginner work, vibe coding, and bounded code changes inside large systems. Choose the fewest clear lines, files, paths, states, and abstractions that correctly implement the requested behavior. Do not invent fallbacks, compatibility paths, defensive layers, or future scale without evidence. Do not use for ordinary conversation, emotional support, prose, translation, summarization, social-media content, or general research or technical discussion that is not part of planning, changing, or reviewing code. Never weaken real security, integrity, concurrency, compatibility, privacy, accessibility, legal, or regulatory requirements.
日本語の概要は準備中です。原文の説明を表示しています。
Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use for meaningful motion, interaction feedback, or performance-safe animation.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to optimize post-signup onboarding, user activation, first-run experience, or time-to-value. Also use when the user mentions "onboarding flow," "activation rate," "user activation," "first-run experience," "empty states," "onboarding checklist," "aha moment," "new user experience," "users aren't activating," "nobody completes setup," "low activation rate," "users sign up but don't use the product," "time to value," or "first session experience." Use this whenever users are signing up but not sticking around. For signup/registration optimization, see signup. For ongoing email sequences, see emails.
日本語の概要は準備中です。原文の説明を表示しています。
Convert a vague mini-program idea, feature request, or partially documented product into an evidence-calibrated product specification with target users, core problem, version-one scope, main and exception flows, page responsibilities, state matrices, and testable acceptance criteria. Use when users ask to define an MVP, clarify requirements, organize product flows, specify page behavior, resolve ambiguous product states, or prepare a stable handoff before architecture or implementation. Separates facts, user decisions, assumptions, unknowns, and future ideas; never invents product logic merely to complete a screen or technical plan.
日本語の概要は準備中です。原文の説明を表示しています。
Diagnose and fix mini-program failures through reproducible, evidence-driven root-cause analysis across source, state, asynchronous timing, caches, mock data, build versions, platform behavior, devices, cloud calls, and external services. Use when users report white screens, crashes, stale or jumping values, missing data, intermittent behavior, permission failures, performance stalls, device-only defects, API or cloud-function errors, source-versus-build mismatches, or regressions whose cause is not yet established. Freezes the observation environment, ranks competing hypotheses, runs discriminating checks, creates a failing regression test before repair, covers analogous states, and never hides a known failure with longer waits, swallowed errors, forced success, or cosmetic patches.
日本語の概要は準備中です。原文の説明を表示しています。
Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layout, is this accessible, design review, color contrast, WCAG, a11y, pixel perfect, Figma audit, CSS check, dark patterns, is this GDPR compliant, is this manipulative, is my form accessible, is my dark mode correct, wireframe to spec, heuristic review, Nielsen audit, usability heuristics, 디자인 검토, 접근성 확인, 색상 대비, 다크 패턴, 와이어프레임 스펙.
日本語の概要は準備中です。原文の説明を表示しています。
Reviews shadcn/ui components for CVA patterns, composition with asChild, accessibility states, and data-slot usage. Use when reviewing React components using shadcn/ui, Radix primitives, or Tailwind styling.
日本語の概要は準備中です。原文の説明を表示しています。
Design and plan iOS animations with structured specs covering transitions, micro-interactions, gesture-driven motion, and loading states. Use when the user asks to plan, design, or spec out animations for an iOS app — including screen transitions, navigation animations, interactive gestures, onboarding flows, or any motion design work. Also use when the user wants animation recommendations or wants to decide between animation approaches before writing code.
日本語の概要は準備中です。原文の説明を表示しています。
EU Insurance Adviser specializing in IDD compliance for life, health, property, and insurance-based investment products (IBIPs). Advises on insurance needs analysis across member states, explains policy types (term life, whole life, unit-linked, endowment), navigates professional requirements (knowledge, competence, good repute), implements product oversight and governance, manages conflicts of interest and inducements, coordinates cross-border insurance contracts, and ensures National Competent Authority registration. Use for insurance distribution, IBIP suitability assessments, or IDD compliance implementation.
日本語の概要は準備中です。原文の説明を表示しています。
AI-powered insights, UX copywriting standards, and user experience guidelines for vehicle insurance platform. Use when designing insight panels, writing user-facing copy, implementing status messages, creating onboarding flows, or improving accessibility. Covers tone standards, interactive patterns, error messages, and empty states.
日本語の概要は準備中です。原文の説明を表示しています。
Use when asked to design a UI component, specify a button, input, card, modal, badge, or any interactive element. Examples: "design a button component", "spec out the input field", "define the card component states", "create a component spec for Prism", "what should the dropdown look like".
日本語の概要は準備中です。原文の説明を表示しています。
Use when asked about UX patterns, interaction best practices, form design, navigation patterns, or loading states. Examples: "best practice for form validation", "navigation pattern for dashboard", "loading state UX"
日本語の概要は準備中です。原文の説明を表示しています。
Audit UX copy in a product or codebase — find passive errors, generic labels, missing states. Use when asked to "audit our UX copy", "our error messages are bad", or "review the microcopy".
日本語の概要は準備中です。原文の説明を表示しています。
Write UX copy for a feature, flow, or component — buttons, errors, empty states, tooltips. Use when asked to "write the copy for this flow", "word this error message", or "write empty state copy".
日本語の概要は準備中です。原文の説明を表示しています。
Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.
日本語の概要は準備中です。原文の説明を表示しています。
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
日本語の概要は準備中です。原文の説明を表示しています。
Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.
日本語の概要は準備中です。原文の説明を表示しています。