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.

For review-only requests, inspect and report findings without modifying files. Separate measured facts from aesthetic judgment.

When a request spans several concerns, work in this order unless the user specifies otherwise:

1. Assess with critique or audit.
2. Correct structure with layout, typography, responsive, simplification, or hardening workflows.
3. Refine expression with color, motion, intensity, or delight workflows.
4. Finish and verify with performance checks and the polish workflow.

Do not stack decorative effects before resolving task flow, hierarchy, accessibility, or structural problems.

Core design principles

• Choose an intentional direction appropriate to the product; distinctiveness does not require visual intensity.
• Make hierarchy, spacing, typography, and interaction states carry the design before adding decoration.
• Avoid generic patterns when they are merely defaults: undifferentiated card grids, gratuitous glass effects, generic gradient text, decorative glow, or interchangeable dashboard layouts.
• Treat the absence of an explicit brand or design-system constraint as room to make a deliberate choice, not license to default to the most common convention in the product category (e.g., a blue SaaS accent color, or a "Most Popular" badge floating above the middle pricing card as the only way to spotlight a featured tier). A competently executed but conventional result is a missed opportunity when nothing was actually constraining it — when context is weak, pick a specific point of view and justify it, rather than reaching for the category median by default.
• Keep unfamiliar choices explainable in terms of user goals, brand, hierarchy, or interaction feedback.
• Prefer native semantics, progressive enhancement, feature detection, and graceful fallbacks.
• Measure accessibility and performance claims; do not rely on visual inspection alone.
• Follow the user's language for user-facing copy and explanations.

Select workflow references

Choose one primary workflow. Add supporting references only when they materially help.

Visual direction

Layout, type, and adaptation

Page types

Motion and experience

Quality and resilience

Systems and content

Foundation references

• typography.md: type hierarchy, pairing, loading, and accessibility.
• color-and-contrast.md: palettes, contrast, and themes.
• spatial-design.md: spacing, grids, containers, and optical adjustment.
• motion-design.md: timing, easing, performance, and reduced motion.
• interaction-design.md: states, focus, keyboard, forms, and overlays.
• responsive-design.md: breakpoints, input modes, images, and real-device testing.
• ux-writing.md: labels, errors, empty states, and localization.
• heuristics-scoring.md: heuristic review and severity guidance.
• personas.md: persona-based walkthroughs without invented user claims.
• cognitive-load.md: cognitive-load analysis and simplification.

Keep standards current

Treat browser-support tables, Core Web Vitals, and accessibility thresholds as time-sensitive. Verify them against current primary sources when they affect implementation or release decisions. Prefer capability detection and measured results over memorized browser-version claims.

Attribution

UICraft is a derivative work of Impeccable by Paul Bakaus (Copyright 2025 Paul Bakaus), used under the Apache License 2.0. Files from the upstream project have been modified. Impeccable in turn is based on Anthropic's frontend-design skill.

See LICENSE for the license text. UICraft is not endorsed by or affiliated with the Impeccable project or its authors.