Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
gabrielmoreira Skill Algolia Reference ArchitectureImplement Algolia reference architecture: index design, multi-index strategy, data pipeline, search service layer, and frontend/backend separation. Trigger: "algolia architecture", "algolia best practices", "algolia project structure", "how to organize algolia", "algolia index design".
17 -
gabrielmoreira Skill Cwicr Work BreakdownBreak down CWICR work items into component resources. Decompose aggregate items, analyze resource composition, and generate detailed bills of resources.
17 -
gabrielmoreira Skill Create Form TypeCreate the Symfony form type for an entity's add/edit form. Covers standard field types, translatable fields, money fields, file uploads, and choice providers. For multi-tab layout with NavigationTabType, see create-form-tab-layout. Trigger: "create form type for {Domain}".
17 -
gabrielmoreira Bundle Edgeone Pages Website Skeleton基于 EdgeOne Pages 的全栈网站生成方案。用户说一句话(如「帮我建一个电商站」「做一个AI客服站」「做个管理后台」),AI 自动组合 Auth、Cart、Payment、AI Chat、Admin 五大模块,生成完整 Next.js 前后端代码并部署到 EdgeOne Pages 全球 CDN。支持电商、AI 助手、SaaS 管理后台三大模板。底层使用 Edge Functions(KV 存储、JWT 校验)+ Cloud Functions(bcrypt、MySQL、微信/支付宝支付、SSE 流式 AI)+ Platform Middleware(鉴权、CORS、CSP、支付回调 IP 白名单)。支持支付幂等原子锁、订单超卖防护、Refresh Token 并发安全等 P0 安全设计。 触发场景: "帮我建一个电商网站"、"帮我建一个AI客服站"、"做个带登录的电商站"、"建一个全栈网站"、 "帮我做一个带支付功能的网站"、"做一个电商站,包含登录注册、购物车、微信支付宝支付"、 "Build me an e-commerce website"、"Create an AI customer service site with login"、 "Make a SaaS admin dashboard"、"建一个网站,登录注册、AI客服、支付全要"
17 -
gabrielmoreira Skill Create Cqrs QueriesCreate the read-side CQRS layer: queries, result DTOs, and query handler interfaces. Covers Get{Domain}ForEditing (single entity for edit form) and optionally Get{Domain}sForListing (grid data source). Trigger: "create queries for {Domain}", "set up read side for {Domain}".
17 -
gabrielmoreira Skill Create Cqrs CommandsSet up the full domain layer for a CQRS entity: identity value object, additional value objects, exception hierarchy, commands (Add, Edit, Delete, Toggle, sub-resource, or any custom domain action), and handler interfaces. Covers everything in src/Core/Domain/{Domain}/. Trigger: "create CQRS commands for {Domain}", "set up domain layer for {Domain}".
17 -
gabrielmoreira Skill Create Behat ContextCreate the PHP feature context class that implements step definitions for a domain, and register it in behat.yml. Covers the PHP implementation side of Behat tests. Trigger: "create behat context for {Domain}".
17 -
gabrielmoreira Skill Write Behat ScenariosWrite the Gherkin feature file and all scenarios for a domain: CRUD, bulk actions, filters, and error cases. Covers the .feature file side of Behat tests. Read Component/Behat/CONTEXT.md for conventions. Trigger: "write behat scenarios for {Domain}".
17 -
gabrielmoreira Skill Register Cqrs ServicesRegister all domain handlers and the repository in the Symfony DI container. Handlers are auto-discovered via #[AsCommandHandler] / #[AsQueryHandler] attributes. Trigger: "register CQRS services for {Domain}".
17 -
gabrielmoreira Skill Create Grid DefinitionCreate the grid definition for an entity listing: columns, row actions, bulk actions, filters class, and service registration. Covers everything needed to define the grid structure. The query builder is a separate skill (create-grid-query-builder). Trigger: "create grid definition for {Domain}".
17 -
gabrielmoreira Skill Create Position ColumnDocuments how to add drag-and-drop row reordering to a PrestaShop grid. Requires a PositionColumn in the definition, a dedicated update-position route, and position handling in the repository.
17 -
gabrielmoreira Skill Implement Cqrs HandlersImplement all command and query handlers in the Adapter layer. Each handler delegates to the repository for persistence — no direct SQL or ObjectModel access. Handlers use #[AsCommandHandler] / #[AsQueryHandler] attributes for auto-registration. Trigger: "implement handlers for {Domain}".
17 -
gabrielmoreira Skill Create Form Tab LayoutCreate a multi-tab form layout using PrestaShop's NavigationTabType. This is a specific pattern for complex forms with many fields organized by tabs — NOT the default form layout. Most forms do not need tabs. Trigger: "create tab layout for {Domain} form", "add tabs to {Domain} form".
17 -
gabrielmoreira Skill Audit Object ModelRead the legacy ObjectModel class for the domain and extract its database schema, field definitions, multilingual fields, and validation rules. This is the authoritative source for what columns the Doctrine repository must handle.
17 -
gabrielmoreira Skill Init JS ComponentsInitialize and use PrestaShop's global JS components via initComponents(). Covers TranslatableInput, ChoiceTree, TinyMCEEditor, TaggableField, and all other available components. Components activate based on data-* attributes in the DOM. Trigger: "initialize components for {Domain}", "enable components for {Domain}", "add components to {Domain} form".
17 -
gabrielmoreira Skill Create Cqrs Bulk CommandsCreate bulk action commands and their handlers. All bulk handlers extend AbstractBulkCommandHandler, catch errors per item, and report failures via BulkCommandExceptionInterface. Trigger: "create bulk commands for {Domain}".
17 -
gabrielmoreira Skill Create Grid Query BuilderCreate the Doctrine DBAL QueryBuilder that fetches grid rows, and optionally a GridDataFactory decorator for post-processing. The column aliases must exactly match the column IDs in the Grid Definition. Trigger: "create grid query builder for {Domain}".
17 -
gabrielmoreira Skill Create Removal IssueCreate a GitHub issue that targets the actual removal of the legacy controller in the next major version. The issue tracks readiness prerequisites and assigns a major release milestone.
17 -
gabrielmoreira Skill Create Twig Form TemplateCreate the Twig template for the add/edit form page. Renders the Symfony form, save buttons, and optional form theme overrides for custom field rendering. Trigger: "create form template for {Domain}".
17 -
gabrielmoreira Skill Create Admin RoutingCreate the Symfony routing YAML file declaring all admin routes for the domain. Trigger: "create routing for {Domain}".
17 -
gabrielmoreira Skill Create Doctrine RepositoryCreate the repository in the Adapter layer. This is the ONLY class that touches the database — all handlers delegate to it. Covers multistore patterns with ShopConstraint when the entity requires it. Trigger: "create repository for {Domain}".
17 -
gabrielmoreira Skill Create Form Data HandlingCreate the form data flow layer: DataProvider (loads entity data for edit form), DataHandler (dispatches commands on create/update), error handling, and service registration. This bridges the form layer with the CQRS layer. Read Component/Forms/CONTEXT.md for conventions. Trigger: "create form data handling for {Domain}".
17 -
gabrielmoreira Skill Create Vue ComponentIntegrate a Vue 3 component into a Symfony admin page for complex UX sections. This is an exception pattern — most pages use initComponents with standard components. Vue is only needed when a section requires rich interactivity that standard form types cannot provide (e.g. combination listing, dynamic range tables). Trigger: "add Vue component for {Domain}".
17 -
gabrielmoreira Skill Init Grid ExtensionsEnable JavaScript grid extensions for a listing page. Extensions add sorting, filtering, bulk actions, column toggling, position reordering, and other interactive behaviors to the grid. Trigger: "add grid extensions for {Domain}", "enable grid extensions for {Domain}", "initialize grid JS for {Domain}".
17 -
gabrielmoreira Skill Create Twig Index TemplateCreate the Twig template for the entity listing (grid) page. Includes grid panel, toolbar buttons, flash messages, and optional custom column rendering. Trigger: "create index template for {Domain}".
17 -
gabrielmoreira Skill Register Feature FlagRegister the domain's feature flag in `feature_flag.xml`. This entry populates the `ps_feature_flag` table at install/upgrade and enables the flag-based routing between legacy and Symfony controllers.
17 -
gabrielmoreira Skill Create TS Entry PointCreate the TypeScript entry point files for a new admin page. Covers the directory structure, listing and form entry points, and webpack registration. References init-js-components and init-grid-extensions for component/extension details. Trigger: "create JS entry point for {Domain}".
17 -
gabrielmoreira Skill Audit Legacy ControllerRead the legacy `Admin{Domain}sController.php` without modifying it. Extract every field rendered, every action method, and every `Hook::exec()` call.
17 -
gabrielmoreira Skill Write Upgrade SQL ScriptAuthor a SQL upgrade script for shops upgrading to a target PrestaShop version. Covers schema changes, default fixtures / configuration row updates, and feature-flag state transitions.
17 -
gabrielmoreira Skill Create Controller ListingCreate the listing page actions in the admin controller: index (grid with filters), delete, toggle status, and any bulk actions the entity requires. Trigger: "create listing for {Domain}", "create index action for {Domain}".
17 -
gabrielmoreira Skill Generate Migration ManifestSynthesize the outputs of `audit-legacy-controller` and `audit-object-model` into a single `migration-manifest.md` that serves as the migration specification. Every subsequent migration step reads from this document to know what to create.
17 -
gabrielmoreira Bundle Legacy To Symfony MigrationStep-by-step orchestrator for migrating a PrestaShop Legacy admin page to Symfony/CQRS. Covers the full lifecycle from audit to GA. Trigger: "migrate the Xxx admin page", "create CQRS for Xxx", "add a Symfony form for Xxx", "migrate AdminXxxController".
17 -
gabrielmoreira Skill Write Playwright CampaignsWrite Playwright test campaigns for a migrated entity: CRUD lifecycle, bulk actions, filter/sort, position reorder, and per-tab field verification. Campaigns live in the core repo and import page objects from ui-testing-library. Trigger: "write Playwright tests for {Domain}".
17 -
gabrielmoreira Skill Create Playwright Test DataCreate Faker data classes and predefined data objects for a new entity in the ui-testing-library. These are imported by campaigns for consistent test data generation. Trigger: "create test data for {Domain}".
17 -
gabrielmoreira Skill Promote Feature Flag To StablePromote the domain's feature flag from beta to stable (GA) and update Playwright tests to no longer require the flag. This is done in a dedicated GA PR with minimal changes. Trigger: "promote {Domain} to GA", "make {Domain} stable".
17 -
gabrielmoreira Skill Create Controller Form ActionsCreate the form page actions in the admin controller: create (add) and edit, plus any entity-specific actions. Uses FormBuilder/FormHandler pattern — never builds commands directly. Trigger: "create form actions for {Domain}", "create add/edit for {Domain}".
17
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include generate-migration-manifest, write-playwright-campaigns, algolia-reference-architecture. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.