Build, audit, and refactor premium Persian/English responsive websites and interactive 3D experiences with Anime.js v4, Three.js, motion choreography, color theory, RTL design systems, accessible UI/UX and VibeFarsi registry. Use for website design, animations, motion, landing pages, 3D/WebGL, responsive interfaces, visual quality, or Perfect_AI projects in Codex.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
A practical engineering playbook, not a promise of pixel-perfect cloning or access to third-party private source files. Built from original guidance with links to official documentation and VibeFarsi catalog entries. Read the relevant referenced files before implementing.
This package has 91 locally authored Codex Skills, 279 per-item VibeFarsi implementation specifications, 47 vetted-as-relevant GitHub repo/agent-skill references (upstream files not copied), an executable color engine, a live Anime.js+Three.js example and installer scripts for official VibeFarsi CLI. It uses no MCP. This is original technical guidance; real official third-party files are obtained separately using documented installers.
| Request | Must load | Local runnable artifact |
|---|---|---|
| Anime.js exact mechanism/scroll/text/SVG | references/16-animejs-api-matrix.md, references/01-animejs-motion.md; focus zt-anime-* | examples/live-lab/ |
| True 3D, particles, camera, PBR, shaders | references/17-threejs-production-guide.md, references/13-threejs-animation-atlas.md; focus zt-three-* | examples/live-lab/ |
| Choose professional colors (not random neon) | references/18-color-decision-engine.md, references/19-design-matrix.md; focus zt-color-* | tools/color-engine.mjs and tools/create-palette.mjs (also copied inside master Skill) |
| Any specific VibeFarsi item | registry/vibefarsi-items/<category>/<slug>.md, references/21-vibefarsi-implementation.md; zt-vibefarsi-* | install/install-vibefarsi-all.ps1 (dry run default) |
| GitHub engineering best practices | references/15-github-curated-skills.md; zt-react-*, zt-debugging, zt-tdd | github-skills-catalog.json |
| Ship/test | references/20-test-matrix.md; zt-e2e-playwright, zt-a11y-axe | tools/validate_pack.py, tests/color-engine.test.mjs |
Completion rule: a component/pattern is not implemented merely because a Skill lists it. Write real code into the target application, run checks and report exactly what was/was not executed. Prioritize the user's specified visual identity and color constraints above default category palettes.
| Task | Primary reference | Supporting reference |
|---|---|---|
| Anime.js animations, text, SVG, scroll | references/01-animejs-motion.md | references/06-motion-recipes.md |
| Three.js, point clouds, shaders, morphing | references/02-threejs-3d.md | references/10-perfect-ai-experience.md |
| Color theory, dark monochrome, token design | references/03-color-theory.md | references/04-ui-ux-system.md |
| UI/UX design, interactions, information architecture | references/04-ui-ux-system.md | references/08-quality-tests.md |
| Responsive / mobile / touch / RTL | references/05-responsive-rtl.md | references/09-persian-localization.md |
| Named animation recipes | references/06-motion-recipes.md | references/01-animejs-motion.md |
| VibeFarsi: every listed registry entry | references/07-vibefarsi-full-catalog.md | references/09-persian-localization.md |
| Test/audit/production ship | references/08-quality-tests.md | references/11-workflow-architecture.md |
| Iran/Persian language, form, dates, SEO | references/09-persian-localization.md | catalog Skill entries |
| Rebuild/extend user's Perfect_AI website | references/10-perfect-ai-experience.md | three, motion, color, responsive |
| Architecture, implementation patterns, dependency conflicts | references/11-workflow-architecture.md | quality tests |
| Source-of-truth links and version checks | references/12-sources-and-rights.md | official docs |
| Three.js individual animation mechanisms | references/13-threejs-animation-atlas.md | references/02-threejs-3d.md |
references/15-github-curated-skills.md: upstream project selection and provenance; originals are not copied.references/16-animejs-api-matrix.md: v4 official API coverage and homepage demo techniques.references/17-threejs-production-guide.md: real mesh/shader/camera/render lifecycle.references/18-color-decision-engine.md: formal OKLCH/contrast/color-choice workflow.references/19-design-matrix.md: product-context design decisions.references/20-test-matrix.md: launch and regression QA.references/21-vibefarsi-implementation.md: all official registry items using CLI without MCP.registry/vibefarsi-items/<category>/<slug>.md: bundled with the master Skill, survives install into .agents/skills/perfect-ai-master/.lang="fa" dir="rtl" for Persian; isolate URLs, numbers, code, model names in dir="ltr" or <bdi>. Use logical layout properties (margin-inline-start), avoid accidental double reversal.prefers-reduced-motion.transform and opacity.onScroll or a single scroll-controller with explicit progress.07-vibefarsi-full-catalog.md and use official npx vibefarsi add <slug> where permitted.pointer-events:none 3D canvas; never rasterize text without reason.Use $perfect-ai-master to audit and rebuild this React landing page in monochrome with true 3D and Anime.js text transitions; read all relevant references first.Use $perfect-ai-master to build a responsive bilingual RTL site with VibeFarsi components, 3D product viewer, accessible form, and performance tests.Use $perfect-ai-master and apply the Perfect_AI scroll-experience spec, preserving existing content and source code.This pack preserves 91 preceding local skills, all 279 VibeFarsi item specifications, 47 curated GitHub upstream references, Anime.js v4 and Three.js executable examples, and the existing OKLCH palette engine. It adds a large focused ztx-* skill family plus 29 deep reference chapters (22–50) and 30 responsive CSS recipes. No MCP required and no misleading claim of copying private source. Use task-relevant skills; never load all simultaneously.
Responsive MUST-READ (first): references/22-responsive-engineering-foundations.md, references/23-container-query-design-system.md, references/24-fluid-type-persian-ltr.md, references/25-mobile-touch-gestures.md, references/26-scroll-choreography-responsive.md, references/27-adaptive-3d-quality-controller.md, references/30-responsive-audit-test-matrix.md. Open patterns/responsive/*.md for exact component recipes.
Color MUST-READ: references/36-advanced-color-science.md, references/37-color-algorithm-workbook.md, references/38-design-systems-at-scale.md; run the palette tool, measure contrast, do not infer palette from stereotypical color psychology. Monochrome for Perfect_AI.
Other motion engines: references/32-motion-libraries-decision-tree.md, references/33-animation-physics-timing.md, references/34-browser-native-animations.md. Distinguish Anime.js, Motion animate(), Animate.css, GSAP and Three.js; use only engines the project needs. "animate.js" is ambiguous across ecosystems.
QA: references/42-accessibility-wcag22.md, references/43-visual-regression-and-browser-matrix.md, references/44-performance-budget-core-web-vitals.md; executable examples/responsive-lab/, tests/omega-validation.test.mjs and tools/responsive-audit.mjs.
This pack preserves the original OMEGA 187 skills, all 279 VibeFarsi local guides, existing 49 references, 30 responsive recipes, color toolchain and all three motion/responsive labs. It additionally includes 576 scoped implementation patterns (36 mechanisms × 16 usage contexts), each with a dedicated ztp-* Codex Skill; 144 author-written cross-domain specialist reference chapters; an ultimate color theory and decision procedure; and 40 locally authored GitHub integration Skills. The upstream repos are pointers, not copied GitHub source.
references/51-ultimate-color-design-reasoning.md before deciding a theme. Run the existing tools/palette-decision.mjs and review contrast. For strict Perfect_AI, remain grayscale.references/expert-atlas/<area>/<facet> using the IDs from expert-references-index.json (also available at pack root).patterns/implementation-atlas/<engine>/ztp-*.md. These are patterns with scoped starter code and acceptance tests, not 576 distinct animation algorithms.ztg-* guide first and review the license and package version before any download. No MCP.registry/vibefarsi-items/*/*.md files as a selection catalog, then inspect and install official components via CLI only if approved; code is not embedded by that catalog.The canonical pack index is INDEX-TITAN.md, with IDs for targeted loading. The master skill is not a command to paste all 763+ files into one prompt.
Use $zt-website-reference-library only when visual-reference discovery, a website-style sample, or a deliberate style comparison helps the active request. This is an isolated add-on; do not load it by default and do not inject the full library into context.
extensions/WEBSITE-REFERENCE-LIBRARY-v1/; after installation with -CopyExtensionAssets: .perfect-ai/extensions/WEBSITE-REFERENCE-LIBRARY-v1/.extensions/WEBSITE-REFERENCE-LIBRARY-v1/tools/find-website-reference.py (installed assets: .perfect-ai/extensions/WEBSITE-REFERENCE-LIBRARY-v1/tools/find-website-reference.py); read the selected DESIGN.md first and only then open its paired tokens/CSS if implementation needs them.theme.css files by default.extensions/WEBSITE-REFERENCE-LIBRARY-v1/examples/gallery-site/ (installed: .perfect-ai/extensions/WEBSITE-REFERENCE-LIBRARY-v1/examples/gallery-site/) is a browseable catalog UI, not proof that these reference websites were created by Perfect AI. Check third-party rights before reusing logos, fonts, imagery, or assets.This route is additive. All existing Perfect AI skills, examples and visual defaults remain available and unchanged.
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
Accessibility automation: production-level axe audits and manual keyboard checks. Use when implementing, reviewing or testing accessibility automation for React, Vite, Next.js or Perfect_AI projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
قواعد پروژه assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Easing mathematics: production-level cubic bezier, damped spring, velocity continuity. Use when implementing, reviewing or testing easing mathematics for React, Vite, Next.js or Perfect_AI projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Anime.js v4 core animations: production-level target selection, property keyframes, duration, ease, loop, play/pause. Use when implementing, reviewing or testing anime.js v4 core animations for React, Vite, Next.js or Perfect_AI projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Layout changes: production-level FLIP layout, additive composition, measurement. Use when implementing, reviewing or testing layout changes for React, Vite, Next.js or Perfect_AI projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
Responsive scope: production-level createScope lifecycle, media query gating, cleanup. Use when implementing, reviewing or testing responsive scope for React, Vite, Next.js or Perfect_AI projects.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.