设计技能

Use when designing product-led retention — habit formation, trigger-action-reward, network vs single-user loops. Triggers on 'why don't users come back', 'design a habit loop'.

中文简介正在准备中。当前显示原文说明。

Building React UI on shadcn/ui primitives + Tailwind — the apply/review/polish skill dispatched by `directives/ui/*` for the `react-shadcn` stack; idiom from tailwind-engineer.

中文简介正在准备中。当前显示原文说明。

Use when shaping team structure — functional vs squad, span-of-control, reorg cost, Conway-aware boundaries. Triggers on 'should we reorg', 'how do we split this team'.

中文简介正在准备中。当前显示原文说明。

Use when optimizing application performance — caching strategies, eager loading, query optimization, Redis patterns, or background job design.

中文简介正在准备中。当前显示原文说明。

Use when designing customer onboarding — time-to-first-value, milestone design, friction audit, drop-off diagnosis. Triggers on 'fix onboarding', 'why do new accounts churn fast'.

中文简介正在准备中。当前显示原文说明。

Use when the project's frontend stack is Livewire — dispatched by `directives/ui/{apply,review,polish}.ts`. Covers reactive state, events, lifecycle hooks, and component/view separation.

中文简介正在准备中。当前显示原文说明。

Generate a logo or brand mark — structured prompt, provider routing, and a true-vector path. Use for logo or brand mark generation.

中文简介正在准备中。当前显示原文说明。

When shaping feedback — situation-behavior-impact, growth-vs-corrective split, cadence design, ladder-of-inference checks. Triggers on 'how do I give this feedback', 'perf review shape'.

中文简介正在准备中。当前显示原文说明。

Use when designing engineering 1:1s — cadence, agenda mix, growth-vs-blocker-vs-trust shape, cancellation anti-patterns. Triggers on 'fix my 1:1s', 'should I cancel 1:1s this week'.

中文简介正在准备中。当前显示原文说明。

Use when shaping an engineering hiring loop — stages, take-home vs live, calibration, bar-raiser, signal-vs-noise audit. Triggers on 'design our interview loop', 'audit our hiring bar'.

中文简介正在准备中。当前显示原文说明。

When writing validation — Form Requests, rules, custom rule objects, request-boundary design — even when the user just says 'validate this input' or 'check the request' without naming it.

中文简介正在准备中。当前显示原文说明。

Frontend design heuristics and the loop applying them: existing-ui-audit, brief, inventory, build, review. Use when building or changing any UI, not only when planning one.

中文简介正在准备中。当前显示原文说明。

Author a 3-layer DTCG token system (primitive → semantic → component) with light/dark theming; generate CSS vars + Tailwind colors and lint hardcoded values. Use on design tokens / CSS variables.

中文简介正在准备中。当前显示原文说明。

Use when designing account-expansion mechanics — upsell vs cross-sell, expansion-trigger signals, NRR cognition. Triggers on 'lift NRR', 'when do we upsell vs cross-sell'.

中文简介正在准备中。当前显示原文说明。

Use when designing monitoring dashboards — visualization selection, layout principles, observability strategies (RED/USE/Golden Signals), and data storytelling.

中文简介正在准备中。当前显示原文说明。

When the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. 7 phases: interaction, responsiveness, accessibility. Inventory via existing-ui-audit.

中文简介正在准备中。当前显示原文说明。

Grounded design brief from the corpus — style, WCAG color tokens, typography, layout, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart call; feeds fe-design.

中文简介正在准备中。当前显示原文说明。

Use when designing or reviewing a form — validation timing, error display, submission lifecycle, optimistic UI, dirty/pristine state, idempotency — even on 'why does submit double-fire?'.

中文简介正在准备中。当前显示原文说明。

Use when the project uses `livewire/flux` — dispatched by `directives/ui/{apply,review,polish}.ts`. Covers Flux components, slots, variants, and form primitives.

中文简介正在准备中。当前显示原文说明。

Write and maintain DESIGN.md + PRODUCT.md — captures visual decisions and interaction patterns so design tasks stay consistent across sessions without re-scanning past work.

中文简介正在准备中。当前显示原文说明。

Produce 3+ distinct hi-fi design variations — basic to bold, one file with tweak controls — when the user asks for options, alternatives, "show me a few takes". Extends fe-design.

中文简介正在准备中。当前显示原文说明。

Turn a confirmed brand identity into a DTCG tokens.json source of truth — emit CSS vars + Tailwind via design-tokens, export locked brand deck templates.

中文简介正在准备中。当前显示原文说明。

Use when the project's frontend stack is Blade — dispatched by `directives/ui/{apply,review,polish}.ts`. Covers views, components, partials, layouts, and view logic.

中文简介正在准备中。当前显示原文说明。

Use when defining or auditing the activation event — aha-moment selection, retention correlation, falsifiable definition. Triggers on 'what is our aha moment', 'redefine activation'.

中文简介正在准备中。当前显示原文说明。