UI UX

UI and UX Engineering

Purpose

Design practical, consistent, responsive user interfaces for the Cee-Tailor product.

Project Stack

Next.js, React, Tailwind CSS, Framer Motion.

Operating Principles

1. Inspect the existing design language before introducing new patterns.
2. Prioritize clarity and task completion.
3. Keep navigation predictable.
4. Use consistent spacing, typography, controls, and feedback.
5. Design loading, empty, error, and success states.
6. Do not add animation merely for decoration.
7. Animations must not interfere with usability.
8. Design for mobile and desktop.
9. Prefer reusable components over page-specific duplication.
10. Verify important flows in a real browser.

Required Workflow

1. Understand the user task.
2. Inspect existing UI patterns.
3. Map states and interactions.
4. Implement the smallest reusable solution.
5. Verify responsive behavior.
6. Verify keyboard and accessibility behavior.
7. Use Playwright for important interactions.
8. Review visual consistency.

Evidence Rules

Use the strongest available evidence in this order:

1. Runtime behavior
2. Automated test results
3. Type checking, linting, and build results
4. Installed package/source behavior
5. Official framework or library documentation
6. Repository configuration
7. Static code inspection
8. General model knowledge

Never report an assumption as a verified result.

Tool Selection

• Use Filesystem MCP for repository exploration and file inspection.
• Use Context7 for current, version-specific library/framework documentation.
• Use Fetch when official documentation or public web resources need to be retrieved.
• Use Playwright for browser behavior, frontend interaction, forms, authentication flows, and UI verification.
• Use GitHub CLI for repository, branch, pull request, issue, workflow, and CI operations.
• Prefer the smallest tool set that establishes reliable evidence.

Failure Handling

When something fails:

1. Reproduce the failure.
2. Capture the exact error.
3. Identify the failing layer.
4. Check whether the failure is environmental, dependency-related, configuration-related, or caused by application code.
5. Research uncertain behavior using authoritative sources.
6. Apply the smallest appropriate fix.
7. Reproduce the original failure again.
8. Run regression checks.
9. Inspect the final diff.

Do not hide failures by weakening tests, suppressing errors, deleting evidence, or claiming success without verification.

Security

• Never expose secrets.
• Never commit credentials.
• Treat all external input as untrusted.
• Preserve authentication and authorization boundaries.
• Avoid leaking internal implementation details through errors.
• Review security implications whenever the skill touches users, data, credentials, networking, or deployment.

Completion Criteria

A task using this skill is complete only when:

• The requested behavior is implemented.
• Existing project conventions are preserved.
• Relevant static checks pass.
• Relevant tests pass or their absence is explicitly reported.
• Browser verification is performed when the task affects user-facing behavior.
• Security implications have been considered.
• The final diff has been inspected.
• Verified facts are clearly distinguished from assumptions or remaining uncertainty.