القائمة
State machines with XState — modeling complex UI flows, form wizards, async processes, and actor-based architecture
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/InugamiDev/ultrathink-oss --skill state-machinesيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Unified design foundations — design system architecture, tokens, component specs, visual principles, creative vision, figma integration, plus brand design system loader (66 real brands via DESIGN.md). Absorbs design, design-system, design-systems, design-principles, design-router, creative-vision, figma, design-md.
Render, summarize, and present markdown documents and structured content in multiple output modes
Ultra UI skill - combines Google's DESIGN.md spec (machine-readable design tokens) with the ui-ux-pro-max knowledge base (91 styles, 161 palettes, 73 font pairings, 161 products, 104 UX guidelines, 25 chart types). Generates lint-clean DESIGN.md files, validates token references and WCAG contrast, exports Tailwind/DTCG tokens, and diffs design systems version-over-version.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | state-machines |
| description | State machines with XState — modeling complex UI flows, form wizards, async processes, and actor-based architecture |
| layer | domain |
| category | state-management |
| triggers | ["state machine","xstate","finite state","statechart","state transition","actor model","complex flow"] |
| inputs | ["flow requirements","states","transitions","side effects"] |
| outputs | ["state machine definitions","React integration","visualizations","tests"] |
| linksTo | ["state-management","react","forms","typescript-patterns"] |
| linkedFrom | ["ui-ux-pro","testing-patterns"] |
| preferredNextSkills | ["state-management","testing-patterns"] |
| fallbackSkills | ["react"] |
| riskLevel | low |
| memoryReadPolicy | selective |
| memoryWritePolicy | none |
| sideEffects | [] |
State machines make complex, stateful UI flows explicit and predictable. Instead of scattered boolean flags and useEffect chains, you define all possible states, transitions, and side effects in a single, testable machine. XState (v5) is the standard implementation for JavaScript/TypeScript.
import { setup, assign, fromPromise } from 'xstate';
interface AuthContext {
user: User | null;
error: string | null;
retries: number;
}
type AuthEvent =
| { type: 'LOGIN'; email: string; password: string }
| { type: 'LOGOUT' }
| { type: 'RETRY' };
const authMachine = setup({
types: {
context: {} as AuthContext,
events: {} as AuthEvent,
},
actors: {
loginUser: fromPromise(async ({ input }: { : { : ; : } }) => {
response = (, {
: ,
: { : },
: .(input),
});
(!response.) ();
response.() <>;
}),
},
: {
: context. < ,
},
}).({
: ,
: ,
: { : , : , : },
: {
: {
: {
: { : },
},
},
: {
: {
: ,
: ({
: (event { : ; : ; : }).,
: (event { : ; : ; : }).,
}),
: {
: ,
: ({ : event., : }),
},
: {
: ,
: ({
: (event. ).,
: context. + ,
}),
},
},
},
: {
: { : { : , : ({ : }) } },
},
: {
: {
: { : , : },
: { : },
},
},
},
});
import { useMachine } from '@xstate/react';
function LoginPage() {
const [state, send] = useMachine(authMachine);
if (state.matches('authenticated')) {
return <Dashboard user={state.context.user!} onLogout={() => send({ type: 'LOGOUT' })} />;
}
return (
<form
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
send({
type: 'LOGIN',
email: formData.get('email') as string,
password: formData.get('password') as string,
});
}}
>
<input name="email" type="email" required disabled={state.matches('authenticating')} />
<input name="password" type="password" required disabled={state.matches('authenticating')} />
{state.matches('error') && (
<p role="alert" className="text-red-600">{state.context.error}</p>
)}
<button type="submit" disabled={state.matches('authenticating')}>
{state.matches('authenticating') ? 'Signing in...' : 'Sign In'}
</button>
{state.matches('error') && state.can({ type: 'RETRY' }) && (
<button type="button" onClick={() => send({ type: 'RETRY' })}>
Retry ({3 - state.context.retries} attempts left)
</button>
)}
</form>
);
}
const checkoutMachine = setup({
types: {
context: {} as { shipping: ShippingData | null; payment: PaymentData | null },
events: {} as
| { type: 'NEXT' }
| { type: 'BACK' }
| { type: 'SET_SHIPPING'; data: ShippingData }
| { type: 'SET_PAYMENT'; data: PaymentData }
| { type: 'CONFIRM' },
},
}).createMachine({
id: 'checkout',
initial: 'shipping',
context: { shipping: null, payment: null },
states: {
shipping: {
on: {
SET_SHIPPING: { actions: assign({ shipping: ({ event }) => event.data }) },
NEXT: { target: 'payment', guard: ({ context }) => context.shipping !== null },
},
},
payment: {
on: {
SET_PAYMENT: { actions: assign({ payment: ({ event }) => event.data }) },
NEXT: { target: 'review', guard: ({ context }) => context.payment !== null },
BACK: { target: 'shipping' },
},
},
review: {
on: {
CONFIRM: { target: 'processing' },
BACK: { target: 'payment' },
},
},
processing: {
invoke: {
src: 'submitOrder',
onDone: 'success',
onError: 'error',
},
},
success: { type: 'final' },
error: {
on: { CONFIRM: 'processing' },
},
},
});
import { createActor } from 'xstate';
describe('authMachine', () => {
it('transitions from idle to authenticating on LOGIN', () => {
const actor = createActor(authMachine).start();
expect(actor.getSnapshot().value).toBe('idle');
actor.send({ type: 'LOGIN', email: 'test@test.com', password: 'pass' });
expect(actor.getSnapshot().value).toBe('authenticating');
});
it('prevents retry after 3 attempts', () => {
const actor = createActor(authMachine, {
snapshot: { ...authMachine.resolveState({ value: 'error', context: { user: null, error: 'fail', retries: 3 } }) },
}).start();
expect(actor.getSnapshot().can({ type: 'RETRY' })).toBe(false);
});
});
state.matches() — Comparing state.value === 'string' breaks with nested/parallel states. Use matches().stately.ai/viz. Use it to validate your machine design visually.