uicraft

UICraft

Create interfaces with a clear design point of view while preserving usability, accessibility, performance, and the project's existing constraints.

Decision priority

Apply guidance in this order:

1. Follow explicit user requirements and product constraints.
2. Preserve the established brand and design system unless the user asks to change them.
3. Protect task completion, accessibility, content clarity, and performance.
4. Apply UICraft's aesthetic defaults only after the first three priorities are satisfied.

Treat the recommendations in this skill as context-sensitive defaults, not universal style laws.

Establish design context

Before making high-impact visual decisions, establish:

• target audience and usage context;
• primary jobs and critical user flows;
• brand personality and desired emotional tone;
• technical, accessibility, performance, and browser constraints.

Use context in this order:

1. Use a Design Context supplied by the user.
2. Read .uicraft.md from the project root when it exists.
3. Inspect README files, design tokens, existing components, and brand assets for explicit evidence.
4. For missing high-impact product or brand information, ask a focused question. For low-risk gaps, state a conservative assumption and continue.

Infer technical constraints and existing patterns from code. Do not invent audiences, brand values, business goals, or user needs from implementation details alone. For first-time setup, read uicraft-init.md.

Execute a verified UI workflow

For implementation tasks:

1. Inspect the relevant code, framework, reusable components, tokens, and existing tests.
2. Run or preview the current interface when practical and capture a baseline before substantial visual changes.
3. Select one primary workflow reference and only the supporting foundation references needed for the task.
4. Implement the smallest coherent change that fulfills the request. Preserve existing conventions unless changing them is part of the goal.
5. Verify behavior, visual output, responsive states, keyboard access, reduced motion, loading/error/empty states, and relevant tests.
6. Preview the result after implementation and iterate when the visual result differs from the intended design.
7. Report what changed, what was verified, and any remaining assumptions or untested conditions.