Sly32

Рейтинг
389
Регистрация
29.03.2012
Должность
Software engineer
Как писал - у меня вообще не было скила под фронтенд изначально. Вот, создал такого, можете покритиковать, посоветовать что убрать, что добавить
---
name: frontend-development
description: 'Frontend development workflow for Learn service UI tasks. Use for: templates, admin pages, HTML, CSS, JavaScript, Plotly charts, UI refactors, responsive design, accessibility, static assets, moving inline CSS/JS to /static, frontend integration.'
argument-hint: 'Describe the page, user flow, affected templates/static assets, data sources, and acceptance criteria.'
user-invocable: true
disable-model-invocation: false
---

# Frontend Development

## Scope
Local workspace skill for this repository frontend tasks (`.github/skills/frontend-development`).

## When to use
- Add or refactor UI in Jinja templates.
- Implement admin pages, dashboards, charts, filters, tables, or client-side interactions.
- Move inline CSS/JS into static assets.
- Improve responsive behavior, accessibility, or information density.
- Integrate backend data into frontend widgets without introducing a frontend framework.

## Mandatory rules
- Keep templates thin and server-rendered.
- Do not leave substantial inline CSS or JavaScript inside templates.
- Store CSS in `src/static/css/` and JS in `src/static/js/`.
- Reuse base layouts and preserve existing UI language unless redesign is requested.
- Escape dynamic text before inserting it into the DOM.
- Respect CSRF on state-changing requests.
- Prefer small, explicit backend endpoints for frontend data needs.
- If frontend work also changes backend contracts, pair this skill with the FastAPI endpoint workflow skill.

## Output expectations
- Minimal, maintainable template changes.
- Page-specific static assets when needed.
- Responsive and accessible UI.
- Safe DOM manipulation.
- Tests or validation notes for the changed interaction.

## Recommended sequence
1. Inspect current template, route, and static assets.
2. Decide what belongs in backend aggregation versus frontend rendering.
3. Implement structure in template.
4. Add CSS/JS in static files.
5. Validate diagnostics and relevant tests.

## Trigger phrases
- frontend
- ui
- admin page
- template
- html css js
- plotly
- move inline script
- move inline style
- responsive design
- accessibility



Сергей про е-ком #:
1. 1 задача - 1 диалог.
Нет
Сергей про е-ком #:

2. Без разницы навыки или агенты, необходимо указывать в системной инструкции недопустимость вкраплений в любом виде css и js. 

3. Желательно вовсе указывать, что такие-то типы данных только в таких-то файлах.

Да, если бы ты был внимательным то увидел бы что я это и написал. Зачем продублировал? 
Сергей про е-ком #:
4. При массовых изменениях проси создавать новую версию, а не редактировать проект. 

Нет, часто задача включает рефакторинг и код ревью. а уж агент сам решает, как создавать функционал - смотри логи выполнения.

Сергей про е-ком #:
5. Вероятно, ты что-то вообще намудрил в своём инструментарии. Т.к. наоборот трудно заставить делать условный inline в html (мне это нужно для копирования стилей при переносе через плагин). По умолчанию Клоуд всегда делал нормально, если ты инструкцию не перегружаешь. В крайнем случае всегда есть навыки. 

просто перечитай внимательно мой пост.

Сергей про е-ком #:
6. Ну и, конечно, должны быть специфические правила для конкретного проекта или релевантный скилл, не конфликтующий с общими инструкциями. 

Для этого и создавалась тема. Здесь можн делиться готовыми агентами и скилами - кому-то будет полезно.

Сегодня у меня два кейса кодинга. Оба с Claude Sonnet 4.6, Только в одном случае через Github Copilot, Во втором - Cloude Code.
Github сделал мне пару задач, 80 процентов было по фронту, но вошли и задачи поправить биллинг для агента. Писался довольно подробный промпт поверх уже существующих скилов и  агентов. В целом все хорошо, только сегодня он постоянно инорировал правило не пихать в ХТМЛ стили и скрипты, несколько раз заставил переделывать. Зато отлично понял задачу по адаптации кабинета пользователя и с первого раза все создал почти как я и хотел. Это была вторая задача, видимо контекст первой остался и он без труда понял что я от него хочу. Переписал внешний вид, добавил панель с сессиями, навбар. Правда  почему то выкинул редактирование сессий, но так как это уже есть прямо в агенте, решил не перегружать функционал.
Единствоенное чего не могу от него добиться - не игнорировать правило разделения стилей и скриптов. Как только он начинает работать со старым файлом где уже намешано - продолжет так и делать. Попробую создать отдельный скил фронтенд девелопер со строгими правилами. Потому что для гитхаба я добился нормальной работы.

Это пет проект. С рабочим все было гораздо хуже. Попросил его сделать рефакторинг и добавить логирование. Он так бодренько взялся, сказал - я тут наешл ошибку, ща сделаем по феньшую. После этого упали 16 тестов из 240))) Визуально глянул - вроде норм. Но времени не было вникать в то что он наломал - заставил откатить  и оставить только логи - с этим он справился на ура.
Короче нужно писать нормального агента с жедлезными правилами и проверочным флоу

А как прошел ваш кодинг день?

Devstory #:
У таксистов лучше с усваниением информации. 

Не, очередное вранье. Я тебя дословно процитировал 😂.

Но вот с чем я категорически согласен - с тем что любая ссылка должна быть помечена как реклама. Но в принципе беседа была не об этом а об эффективности ссылочного. 

Genius Ideaing #:

клубника крупная, свежая - 600 руб кг

нет ни запаха клубничного.... ни вкуса грунтовой клубники...

но жена попросила на праздничный стол... покупал...

ждем свою с грядки.. 

У нас свежая, отборная, сладкая, польская клубника по 25 злотых, это примерно 500 ваших дублонов. Греческая вполовину дешевле, но тут все ценят свою. 
Devstory #:
Любая оплачиваемая ссылка или партнерский материал должны содержать пометку «Реклама», а также указание на рекламодателя или ссылку на его сайт.
Очень хочу увидеть ссылку, которая не содержит ссылку на сайт рекламодателя 😂😂 Сегодня таксисты прям жгут! 
Mazay #:
Да приводил я примеры. По англоязычному Гуглу. И видел ситуацию с массивами сайтов, с которых сняли все платные ссылки. И ничего не изменилось. Ни в Яндексе, ни в Гугле. Линкменеджера в сеошники переучили, и все. Это было ещё лет 13 тому назад.

Даже я, не сеошник понимаю, что обратный процесс не всегда равен исходному. Делать выводы по снятию ссылок про их эффективность при закупке - такое себе. Есть кейс прямой - купили ссылки - ничего не поменялось, сняли купленное - тоже все позиции на месте. 

И поправьте меня  - хорошая ссылка даст органический трафик же?

Devstory #:
законы, которые запрещают такие способы продвижения. 
Вау! Есть такие законы??? что-то новое! Статья 404 УК РФ за незаконное продвижение сайта - от 3 до 5 лет 😂
Все таки есть зло в этих облачных технологиях. Сегодня поломали Гитхаб - отвалились actions. И все - работа остановилась - не могу ничего задеплоить.Вот тебе и автоматизация. Боюсь даже представить сколько компания теряет в минуту из-за этого...
С личным проектом как раз и проще -у меня есть возможность деплоя напрямую.
У кого какие отношения в этом плане с гитом? Насколько на него завязаны?
Сергей про е-ком #:
Хотя, казалось бы. А, ну и модель размышления почти у всех была такой: надо найти сайт с чекером и вбить туда вин. 
Почему ты так решил? Чат не умеет этого делать, максимум что он может найти в вебе - публичную информацию, которой не было в конкретной модели на момент релиза.

Для этого и пишется агент, который как раз и умеет ходить и чекать. Чат выдаст только базовую информацию. Что тут некорректно, чисто из интереса?


Всего: 8124