Taste Skill (design-taste-frontend)

Taste Skill nima

Taste Skill (tasteskill 2.5.1) — bu Agent Skill: u kod agentiga umumiy landing sahifa yig'ish o'rniga figma.com va x.ai darajasidagi professional kompaniya saytini yasashni o'rgatadi. Har bir sahifada oddiy matn, yagona dizayn tizimi, har ekranda bitta bo'lim, teng chap va o'ng chekkalar, real fotosuratlar, real brend ikonkalari va yengil mikro-animatsiyalar bo'ladi. Natija haqiqiy brauzerda tekshiriladi. Kompaniya saytini yasayotgan yoki "sahifa shablon, AI yasagandek" ko'ringanda uni tuzatmoqchi bo'lgan dasturchi va dizaynerlarga kerak. Litsenziya: MIT.

O'rnatish

Usul	Buyruq	Natija
npx skills	npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"	Skill o'rnatiladi
Claude Code plagini	/plugin marketplace add Leonxlnx/taste-skill va /plugin install taste-skill@taste-skill	Skill taste-skill: nomi ostida ishlaydi; yangilash: /plugin update
Codex plagini	codex plugin marketplace add Leonxlnx/taste-skill va codex plugin add taste-skill@taste-skill	Yangi Codex sessiyasida yuklanadi
Klondan	./install.sh (--codex yoki --all-agents)	Symlink yaratiladi, git pull joyida yangilaydi

Talablar:

• Node 22+ va o'rnatilgan Chrome, Edge yoki Chromium (nostandart joyda bo'lsa CHROME_PATH ni belgilang).
• Ixtiyoriy: PATH'da ffmpeg (WebP chiqishi va hero rasmning telefon kesimi uchun).
• Skill hech narsa o'rnatmaydi va API kalit talab qilmaydi. Bundle qilingan Wikimedia Commons rasmlari oflayn ishlaydi; qo'shimcha rasm, shrift yoki ikonka yuklash uchun internet kerak.

Ish jarayoni

Agentdan kompaniya saytini yasash yoki qayta dizayn qilishni so'rang. Agent skillni yuklaydi, assets/ ni loyihaga nusxalaydi, assets/starter.html dan boshlaydi va topshirishdan oldin tekshiruvchini ishga tushiradi. Avval biznes turi aniqlanadi: software, gaming, tech, product, service yoki place.

1. Token va maketni tanlash: scripts/start.mjs soha uchun palitra va Google Fonts juftligini beradi; assets/layout/deal.mjs hero maketini tanlaydi.
2. Yagona tizimdan boshlash: assets/starter.html, assets/system.css, assets/layout/layout.css — 1440x900 da har ekranda bitta bo'lim, teng chekkalar, qotirilgan navigatsiya.
3. Real UI va fotosuratlar: software/tech sahifalarda HTML UI fragmentlari va diagrammalar, real ikonkalar (scripts/icons.mjs). Kafe, mehmonxona, do'kon kabi sahifalarda scripts/photos.mjs orqali tanlangan fotosuratlar.
4. Effektlar faqat tech va gaming uchun: shader, scroll sahnalar va 3D (WebGL limiti — to'rtta kontekst). Har sahifada hero kirishi va bir-ikki "moment" (scripts/moments.mjs) bo'ladi.
5. Haqiqiy brauzerda tekshirish: 1440, 1024, 768, 390 kenglikda bo'sh vizuallar, buzilgan shaderlar, kontrast, ustunlar tekisligi, placeholder matnlar tekshiriladi. scripts/gate.mjs tuzatiladigan FAIL qolmaguncha topshirishni ushlab turadi (ko'pi bilan uch raund).

Asosiy vositalar

Vosita	Nima qiladi
scripts/start.mjs	Palitra va shrift juftligini beradi, <head> havolalari va :root tokenlarini chiqaradi
assets/layout/deal.mjs	O'n bir hero maketidan birini tanlaydi; check.mjs uni tekshiradi
scripts/photos.mjs	Soha bo'yicha fotosuratlar, og'irlik nazorati, footer'dagi bitta kredit satri
scripts/icons.mjs	Real brend va interfeys ikonkalarini lokal SVG qiladi
scripts/effects.mjs, scripts/moments.mjs	Shader fonlar va har tur uchun "momentlar"
scripts/gate.mjs, scripts/copy-lint.mjs	Yakuniy darvoza va matn linteri
scripts/consistency.mjs	Tekshiruvchi: har qoida uchun PASS, WARN yoki FAIL
scripts/perf.mjs, scripts/shoot.mjs	Sahifa og'irligi/tezligi va skrinshotlar

Amaliy misol

1. Loyiha papkasida: node scripts/start.mjs deal --page software (turlar: software, gaming, tech, product, service, place). Bu palitrani beradi va finish gate'ni yoqadi.
2. Agentdan sahifani yasashni so'rang; u assets/starter.html dan boshlaydi.
3. Tayyor sahifani tekshiring: node scripts/consistency.mjs <url yoki fayl> --page <tur>.

Cheklovlar va maslahatlar

• Hech qanday rasm ostiga izoh yozilmaydi; litsenziya kreditlari footer'dagi bitta satrda (photos.mjs credits).
• Shader va scroll effektlari faqat software, tech va gaming sahifalarida. Kafe, do'kon, mehmonxona kabi joylarda fotosuratlar, tip va tekis rang ishlatiladi, WebGL yo'q.
• Mijozda o'z rasmlari bo'lmasa, kutubxona rasmlari "qoralama o'rin egasi" deb belgilanadi va mijozning o'z xonasi yoki mahsuloti sifatida ko'rsatilmaydi.
• Manzilda faqat ko'cha va tuman: uy raqami, pochta indeksi, koordinatalar, reyestr/VAT raqamlari va haqiqiy formatdagi telefon yozilmaydi; kontaktlar .example domenida.
• React, Vue, Svelte, Astro yoki Tailwind loyihasida sahifa o'z stekida quriladi; Next.js topshirig'i statik eksport sifatida quriladi. Bo'sh papkada statik sahifa olinadi.
• Eski skill'lar (high-end-visual-design, minimalist-ui va boshqalar) boshqa repolarga ko'chgan: Leonxlnx/taste-skill-classics va Leonxlnx/imagegen-skills.
• Skill mavjud bo'lsa, yangilash uchun o'rnatish buyrug'ini qayta bajaring.

Manba

github.com/leonxlnx/taste-skill · sayt: tasteskill.dev