frontend-craft-director

Frontend Craft Director — Chat All-in-One

This is the self-contained edition. All required rules and references are included in this single file.

Mandatory usage rule

Before any frontend design, redesign, implementation, audit, responsive fix, UI polish, or visual-QA task:

1. Read this entire file.
2. Inspect the real project before changing files.
3. Preserve the existing architecture, routes, APIs, forms, permissions, analytics hooks, SEO-critical content, and working behavior unless the user explicitly asks to change them.
4. Select a concrete design direction before writing UI code.
5. Reject generic AI-looking patterns.
6. Validate the rendered result at relevant viewports before claiming completion.
7. Do not install packages or replace the stack without explicit approval.

---

Frontend Craft Director

Create interfaces that feel intentionally designed for their product, audience, and content—not assembled from common AI defaults.

This skill governs four modes:

• Build: create a new page or interface.
• Redesign: improve an existing interface without breaking product behavior.
• Audit: inspect an implementation and report prioritized visual/UX defects.
• Study: analyze a reference image, page, or design system and extract reusable principles without cloning it.

Non-negotiable contract

1. Inspect before editing.
2. Preserve working architecture and product behavior.
3. Choose a clear design direction before writing UI code.
4. Use real product content and real interface states when available.
5. Prefer structural differentiation over decorative novelty.
6. Validate the rendered result, not only the source code.
7. Never claim visual success without evidence.
8. Do not install packages, replace the stack, rewrite routes, or change APIs unless the user explicitly approves it.
9. Do not invent metrics, testimonials, customers, notifications, pricing, or product capabilities.
10. Do not copy a reference page literally; extract its design logic and adapt it.