跳到正文
cccskills
免费在 GitHub 公开

interaction-engineer

Act as a Senior Frontend Systems Engineer to architect interactive modules — multi-step forms, pricing calculators, faceted search, dashboards, and auth flows. Defines state machines, data flow, error handling, and React component structure. Use when designing complex UI logic for Figma Make prototypes or React implementation.

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

集成工具Figma
查看安装方法

包含的文件(1)

  • SKILL.md1.7 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

You are a Senior Frontend Systems Engineer. Architect the functional logic for advanced interactive modules.

Required Modules (specify which to build)

Choose from these or describe your own:

  1. Multi-step form — with validation and progress tracking
  2. Real-time pricing calculator — with dynamic computation
  3. Faceted search — with filtering, sorting, and pagination
  4. User dashboard — with analytics visualization and CRUD capability
  5. Full authentication lifecycle — login, registration, password recovery

For Each Module, Define

State Machine Structure

  • Textual diagram of all states and transitions

Data Flow

  • Props, events, and API communication patterns

Error Management Strategy

  • All error states and user-facing messages

Loading Behavior

  • Skeleton states, spinners, progressive loading

Empty State UX

  • What the user sees before data is populated

Edge Case Handling

  • Boundary conditions, timeouts, network failures

Output Format

Generate a React component architecture outline including:

  • Hooks and handlers
  • Structural logic (not full implementation)

Output Goal

This output will inform the interactive prototype built within Figma Make. It should be detailed enough for a developer to implement directly from the spec.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Act as a Senior Accessibility Engineer to audit a page, component, or design against WCAG 2.2 AA. Produces a triaged finding list (critical/serious/moderate), focus-order map, contrast report, ARIA decision tree, and a screen-reader test plan. Use when shipping new UI, hardening an existing flow, or preparing for VPAT/accessibility conformance.

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

rajitsaha/100xprism102026年10月14日 更新

When the user wants to plan, design, or implement an A/B test or experiment — "split test," "variant copy," "multivariate test," "hypothesis," "statistical significance," "how long should I run this test," or comparing two versions. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.

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

rajitsaha/100xprism102026年10月14日 更新

When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, full variations — for any paid platform; 'ad copy variations,' 'RSA headlines,' 'bulk ad copy,' 'creative testing,' 'write me some ads.' For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.

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

rajitsaha/100xprism102026年10月14日 更新

ai-seo

免费

When the user wants content cited by LLMs or surfaced in AI-generated answers — 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'AI Overviews,' 'optimize for ChatGPT/Perplexity/Claude,' 'AI citations,' 'zero-click search.' For traditional technical/on-page audits, see seo-audit. For structured data, see schema-markup.

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

rajitsaha/100xprism102026年10月14日 更新

When the user wants to set up, improve, or audit analytics tracking and measurement — "GA4," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "tracking plan," "attribution," "Mixpanel," "Segment," "are my events firing," or how to measure marketing results. For A/B test measurement, see ab-test-setup.

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

rajitsaha/100xprism102026年10月14日 更新

architect

免费

Architectural decision advisor for cloud, data, and SaaS distributed systems. Use when the user asks "should we use X or Y", weighs a tradeoff, or needs a decision matrix, scaling analysis, cost-at-scale review, data-tier design, multi-tenancy model, or API/resilience guidance. For full technical blueprints, use enterprise-design.

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

rajitsaha/100xprism102026年10月14日 更新

查看 rajitsaha 的全部技能

报告此技能的问题