# Lukáš Chylík

> Creative AI Engineer with an overlap into frontend and UX/UI. Design Systems and AI in development. Based in Brno, Czech Republic. The site is in Slovak (default, unprefixed URLs) with an English version under `/en/`.

Portfolio, services, recorded talks and a blog about modern CSS, frontend, design systems and AI-assisted development.

## Pages

- [Home](https://lukaschylik.dev/en/): about, references, services and contact form ([Slovak](https://lukaschylik.dev/))
- [Sessions](https://lukaschylik.dev/en/sessions/): recordings of conference and meetup talks
- [Blog](https://lukaschylik.dev/en/blog/): articles ([Slovak](https://lukaschylik.dev/blog/))
- [Privacy policy](https://lukaschylik.dev/en/gdpr/)

## Services

- **Consulting & Mentoring** (1200 CZK per hour, bookable online as a 60-minute session): Solving specific frontend problems; Code reviews and architecture consulting; Code and architecture audits; Online and in-person sessions
- **AI Workshops & Training** (Negotiable): Spec driven development; Custom AI agents; Building Agent SKILLS and automating processes; AI frontend workflow; Group and individual formats
- **Keynote Speaker** (Free): A talk tailored to the topic of your meetup or conference; Practical examples from real projects; Q&A and discussion after the talk

## Contact

- [Email](mailto:chylik.lukas@gmail.com)
- [Contact form](https://lukaschylik.dev/en/#contact)
- [LinkedIn](https://www.linkedin.com/in/lukas-chylik/)
- [Discord (CSS CzechoSlovakia)](https://discord.gg/yXfUhRjx)
- [CodePen](https://codepen.io/luko248)
- [GitHub](https://github.com/Luko248)

## Blog (English)

- [CSS View Transitions](https://lukaschylik.dev/en/blog/articles/css-view-transitions/): The View Transitions API brings native animated transitions between page states. From CSS-only MPA transitions to JavaScript-driven SPA animations and the new element-scoped transitions in Chrome 147+.
- [Figma Beyond Design](https://lukaschylik.dev/en/blog/articles/figma-beyond-design/): How to use the Figma API, Variable Code Syntax, Code Connect and MCP server to automate design tokens and generate production-ready components.
- [CSS Cascade Layers, @scope and Modern Selectors](https://lukaschylik.dev/en/blog/articles/css-specificita-cascade-layers-scope/): Specificity has always been a cornerstone of CSS. Today it is joined by cascade layers, @scope and modern selectors like :has() and :where(), which fundamentally change the way we compose styles.
- [CSS Carousel](https://lukaschylik.dev/en/blog/articles/css-carousels/): Scroll Spy navigation or a tabs component without JavaScript, and accessible? Forget complex JavaScript libraries! The CSS carousel is a gamechanger.
- [Colors on the Web in 2025](https://lukaschylik.dev/en/blog/articles/farby-na-webe-v-roku-2025/): Web design went through a color revolution in 2025. While traditional RGB and HSL formats still dominate, new CSS features like OKLCH, relative colors and color-mix() give web developers unprecedented ways to work with color.
- [CSS container scroll-state queries](https://lukaschylik.dev/en/blog/articles/css-container-scroll-state-queries/): Discover how CSS container scroll-state queries let you build interactive elements that respond to scrolling without using JavaScript.
- [CSS scroll-driven animations](https://lukaschylik.dev/en/blog/articles/css-scroll-driven-animations/): Forget libraries like ScrollReveal, AOS or Scroll Magic! Modern CSS puts them all to shame with ease.

## Blog (Slovak)

- [CSS View Transitions](https://lukaschylik.dev/blog/articles/css-view-transitions/): View Transitions API prináša natívne animácie prechodov medzi stavmi stránky. Od CSS-only MPA prechodov po JavaScript riadené SPA animácie a nové element-scoped transitions v Chrome 147+.
- [Figma Beyond Design](https://lukaschylik.dev/blog/articles/figma-beyond-design/): Ako využiť Figma API, Variable Code Syntax, Code Connect a MCP server na automatizáciu design tokenov a generovanie production-ready komponent.
- [CSS Cascade Layers, @scope a moderné selektory](https://lukaschylik.dev/blog/articles/css-specificita-cascade-layers-scope/): Specificita bola vždy základným kameňom CSS. Dnes k nej pribúdajú cascade layers, @scope a moderné selektory ako :has() či :where(), ktoré zásadne menia spôsob, akým skladáme štýly.
- [CSS Carousel](https://lukaschylik.dev/blog/articles/css-carousels/): Scroll Spy navigácia či tabs komponenta bez JavaScriptu a prístupne? Zabudnite na komplexné JavaScript knižnice! CSS carousel je gamechanger.
- [Farby na webe v roku 2025](https://lukaschylik.dev/blog/articles/farby-na-webe-v-roku-2025/): Web design prešiel v roku 2025 revolúciou vo farbách. Zatiaľ čo tradičné RGB a HSL formáty stále dominujú, nové CSS funkcie ako OKLCH, relative colors a color-mix() prinášajú web developerom bezprecedentné možnosti práce s farbami.
- [CSS container scroll-state queries](https://lukaschylik.dev/blog/articles/css-container-scroll-state-queries/): Objavte, ako môžete pomocou CSS container scroll-state queries vytvárať interaktívne prvky reagujúce na scrollovanie bez použitia JavaScriptu.
- [CSS scroll-driven animácie](https://lukaschylik.dev/blog/articles/css-scroll-driven-animations/): Zabudnite na knižnice ako ScrollReveal, AOS alebo Scroll Magic! Moderné CSS ich hravo strčí do vrecka.

## Talks

- [Frontkec podcast: State of CSS 2026](https://www.youtube.com/watch?v=yEoe8-nnVhQ)
- [Figma Beyond Design: Automating the design-to-code workflow](https://www.youtube.com/watch?v=MCVuRMBOXUU)
- [A consistent AI agentic workflow across development teams](https://www.youtube.com/watch?v=FAbaIpGWmR4)
- [CSS scroll-state container queries](https://www.youtube.com/watch?v=eTjXcx5DUqM)
- [CSS scroll driven animations](https://www.youtube.com/watch?v=ITDfqStMym0)
- [Frontend news May 2025](https://www.youtube.com/watch?v=hwhuSdO5fU0)
- [CSS anchor positioning](https://www.youtube.com/watch?v=p8sQyt4YFdk)

## References

- [Vertice](https://vertice.one/)
- [VIGo](https://vig.cz/)
- [Riganti](https://www.riganti.cz/)
- [Update Conference](https://www.updateconference.net/)
- [DotVVM](https://www.dotvvm.com/)
- [ANEW STYLE](https://anewstyle.cz/)
- [Crystal Interiors](https://www.crystalinteriors.cz/)
- [Vila SCALA](https://www.vila-scala.cz/)
- [Brand DESIGN](https://brand-design.cz/)

## AI agents

Every page registers [WebMCP](https://webmachinelearning.github.io/webmcp/) tools in supporting browsers: `get_page_context`, `get_profile`, `list_services`, `list_references`, `list_sessions`, `search_blog_posts`, `get_blog_post`, `navigate`, `open_blog_post`, `set_theme`, `set_language`, `open_booking`, `send_contact_message` and `subscribe_newsletter`. The contact and newsletter forms are also annotated as declarative WebMCP tools.

Machine-readable profile, services, references, talks, posts and the full WebMCP tool catalog: [agent/site.json](https://lukaschylik.dev/agent/site.json). Every indexable page also embeds a schema.org JSON-LD graph.

## Optional

- [Sitemap](https://lukaschylik.dev/sitemap.xml)
- [Agent data (JSON)](https://lukaschylik.dev/agent/site.json)