Ztf Framework Master

---
name: ztf-framework-master
description: Ultra-detailed production Tailwind CSS v4 and Bootstrap v5.3 engineering extension to all previous Perfect_AI TITAN skills. Choose framework, design system, responsive behavior, theme, animation, real components, bilingual RTL and test evidence.
---
# Perfect_AI Framework Master — additive TITAN extension

**Preservation rule:** Keep all original TITAN assets, Anime.js, Three.js, Motion, GSAP, VibeFarsi, GitHub resources, 803 skills and prior color system. This skill adds—not replaces—framework knowledge.

## Mandatory choice order
1. Read existing `package.json`, lockfile, styling/reset ownership, routing and UI library.
2. Keep existing framework unless the user requests migration. Choose Tailwind v4 when utility-first art direction and token control are primary; choose Bootstrap v5.3 when standardized responsive grid and bundled JS interactions are primary. Do not load both global resets blindly.
3. Select scenario/technique: 68 technique families × Tailwind/Bootstrap × 5 application contexts. See `frameworks/patterns/`, or invoke individual `ztf-*` skills (self-contained after installation).
4. Use original `perfect-ai-master` for the other libraries, color science, API-specific practices and VibeFarsi catalogs.
5. Check translated semantic tokens with `frameworks/tools/bridge_theme.py`, and compare contrast.
6. Establish 320px mobile hierarchy and containers; test zoom 400%, RTL/LTR, motion preferences, WebGL disabled, touch and keyboard.
7. Run real dev/build/browser tests. Never mistake template code for an audited production implementation.

## Critical version facts
**Tailwind v4:** CSS-first `@import "tailwindcss";`, top-level `@theme`, named container variants `@container`, `@sm`, `@md`, custom dark variant where needed, source detection constraints; `@tailwindcss/vite` for Vite projects.
**Bootstrap 5.3:** six breakpoints xs/sm/md/lg/xl/xxl; `.container`, `.row`, `.col-*`, logical `.ms-*` `.me-*`; `bootstrap.rtl.min.css` for RTL and `data-bs-theme` for color modes; Sass customizations and bundle plugins.

## Reference order
- `frameworks/handbooks/framework-decision-matrix.md`
- `frameworks/handbooks/framework-interoperability.md`
- `frameworks/handbooks/framework-design-tokens.md`
- `frameworks/handbooks/tailwind-v4-theme.md`
- `frameworks/handbooks/bootstrap-sass.md`
- `frameworks/handbooks/responsiveness-container.md`
- `frameworks/handbooks/responsiveness-rtl.md`
- `frameworks/handbooks/color-advanced-oklch.md`
- `frameworks/handbooks/testing-browser.md`

## Strict completion
Code must be implemented, the correct production build must pass and every visual claim backed by browser validation. If network is unavailable, syntax check local examples and explicitly state builds requiring external dependencies are unverified.

Official docs: https://tailwindcss.com/docs/ and https://getbootstrap.com/docs/5.3/.