frontend

Plugin frontend from marketplace svelte-skills in fubits1/svelte-skills. Commands read from the repo's manifest — 17 days ago.

Skills (13)

• code-style-css

  Use when editing CSS, SCSS, or style blocks in .svelte files. Covers CSS-specific code style rules. Auto-invoke when writing or modifying styles.

• code-style

  Code style rules for all languages: variable naming, brace style, HTML data attributes, markup, forms and locale formatting, CSS nesting. Auto-invoke when editing code files, writing new functions or markup, or naming variables.

• comments

  Comment rules for every language: which comments survive, format, protected comments, placement, TODOs. Use when writing, editing, moving or deleting comments, docstrings or TODOs. Auto-invoke when editing code files.

• css-nesting

  Convert flat CSS to nested & syntax while satisfying stylelint's no-descending-specificity and no-duplicate-selectors rules. Use when nesting selectors, refactoring flat CSS to &, or fixing stylelint specificity/duplicate errors after nesting.

• css-subgrid

  Use when building card grids, tile layouts, or repeated components where inner content (icons, titles, prices, buttons) must align across siblings. Also use when seeing misaligned card content at different text lengths.

• editing

  File editing discipline: correct types, safe refactors, Svelte file rules, config overrides, markdown lint, visual refactors. Requires frontend:code-style and frontend:comments. Auto-invoke when editing code files.

• js-config

  Use when editing ESLint, Prettier, Stylelint, PostCSS, or Svelte config files. Use when adding or removing linting plugins, resolving formatter conflicts, auditing JS/TS toolchain configuration, or deciding whether a config package is needed.

• migration

  Use when upgrading a framework version, migrating APIs, bumping major dependencies, or any task where "before" and "after" states must be compared. Auto-invoke when user mentions migration, upgrade, breaking changes, or version bumps.

• pixel-perfect

  Pixel drift detection, mandatory measurement workflow for any CSS or HTML element change. Auto-invoke when editing CSS, changing HTML elements, or replacing DOM structures.

• playwright

  Playwright MCP usage rules, screenshots, code sandbox, Chrome data. Auto-invoke when using Playwright MCP tools.

• validate-file

  Validate edited files, lint .svelte/.ts/.js, test stories, lint markdown. Auto-invoke after ANY file edit before declaring done. User-invocable as /frontend:validate-file [files].

• validate

  Validation discipline for all code changes, testing, baselines, browser checks, CSS screenshots. Auto-invoke whenever making code changes, running tests, or declaring a task done.

• web-design-guidelines

  Routes web UI work to maintained sources: Chrome modern-web-guidance for new HTML/CSS/JS, web-quality-skills for a11y, performance and SEO audits, and installed design skills. Adds UI copy rules and a file:line review format.

Similar plugins