Screenshoto

Ďalšie Google Chrome rozšírenie na tvorbu screenshotov.

Motivácia

• v Chrome Store je kopa rozšírení na účel vyhotovenia snímok obrazovky, ale máloktoré znova funguje podľa očakávania
• • Dosť z nich sú už poloprofesionálne grafické štúdio v okne prehliadača s množstvom pokročilých funkcií a tým zákonite aj zdĺhavejším ovládaním.
  • Väčšina z tých "profesionálnejších" je nepoužiteľná - v poslednom kroku sa vždy človek dozvie, že treba zaplatiť ohromnú kopu peňazí.
  • "Malé" rozšírenia nevedia zaberať Retina verzie - niektoré to riešia dokonca klamstvom typu "upsamplovanie obrázka" z nízkeho rozlíšenia - čo je technicky vadné.
  • Iné rozšírenia vedia zaberať zvolený násobok Retina rozlíšenia, ale iba ten práve zvolený - takže jedna práca by sa opakovala 3 až 4 razy.

Požiadavky & Zadanie

• Čo chce používateľ osnímkovať, vyberá iba raz
• • Možnosť vybrať snímkovanú plochu
  • • Možnosť zmeniť jej rozmer po prvotnom ohradení oblasti
    • Snímkovanie až na povel tlačidlom
  • Možnosť snímkovať jednotlivý HTML (DOM) element
  • • Výber pomocou terča, zvýraznenie / ohraničenie bloku
• Zmeny vykonané v grafickom editore sú ekvivalentne aplikované do všetkých Retina verzií bez ďalšieho zásahu užívateľa
• Užívateľ vygeneruje všetky Retina verzie jedným kliknutím
• • Užívateľ má ale možnosť uložiť len jednu verziu osobitne
  • Užívateľ má ale možnosť vykonať kontrolu každej verzie osobitne, niekedy môže špecifické nastavenie webstránok vzhľadom na pixelovú hustotu zmeniť rozmiestnenie elementov
• Užívateľ musí byť pri svojej práci rýchlejší ako pri konkurenčných produktoch
• Zahájenie činnosti rozšírenia
• • Tlačidlom popup rozšírenia z panela rozšírení prehliadača
  • Akciou z kontextového menu
• Po vykonaní snímky
• • Otvorenie jednoduchého grafického editora so základnými akciami označovania
  • • Obdĺžnik
    • Kruh
    • Šípka
    • Písmo
    • Číslice
  • 5 až 10 základných kontrastných farieb
  • 3 základné hrúbky / veľkosti
  • akcia "Späť"

Implementácia

Pri rozsiahlejších projektoch a legacy codebase si myslím že stále nie je možné sa 100% spoliehať na AI a AI tam funguje v režime veľmi dobrej asistencie na odburávanie rutinnej práce.
Pri mini utlitách tohoto rozmeru kde sa celý zdrojový kód vôjde do jedného kontextového okna je to hotové za pár minút a absolútne bez dohľadu.
Trvanie tohoto projektu z nuly vrátanie deploymentu do Chrome Store je 1.5 MD, stihnuté za jeden deň.
Čas bol minutý na:

• prípravu agenta (texťák), skills a CLAUDE.md (všetko texťáky),
• HLD analýza a popis UI a Správania, dva UC
• Manuálne otestovanie funkčnosti
• Príprava screenshotov a deployment do Chrome Store
• 0 ručných zásahov do kódu

Zvolený Tech stack:

• Typescript
• Vite build
• 100 % Claude Code